From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../asynchronous/timeouts_and_intervals/index.html | 638 ++++++++++++++++++ .../index.html" | 638 ------------------ .../javascript/building_blocks/events/index.html | 606 +++++++++++++++++ .../index.html" | 606 ----------------- .../first_steps/a_first_splash/index.html | 675 +++++++++++++++++++ .../learn/javascript/first_steps/arrays/index.html | 678 +++++++++++++++++++ files/ru/learn/javascript/first_steps/index.html | 56 ++ .../learn/javascript/first_steps/math/index.html | 423 ++++++++++++ .../first_steps/silly_story_generator/index.html | 148 +++++ .../javascript/first_steps/strings/index.html | 284 ++++++++ .../first_steps/useful_string_methods/index.html | 723 +++++++++++++++++++++ .../javascript/first_steps/variables/index.html | 372 +++++++++++ .../first_steps/what_is_javascript/index.html | 339 ++++++++++ .../first_steps/what_went_wrong/index.html | 249 +++++++ .../adding_bouncing_balls_features/index.html | 212 ++++++ .../ru/learn/javascript/objects/basics/index.html | 257 ++++++++ files/ru/learn/javascript/objects/index.html | 47 ++ .../javascript/objects/inheritance/index.html | 266 ++++++++ files/ru/learn/javascript/objects/json/index.html | 353 ++++++++++ .../objects/object-oriented_js/index.html | 286 ++++++++ .../objects/object_building_practice/index.html | 302 +++++++++ .../objects/object_prototypes/index.html | 285 ++++++++ .../adding_bouncing_balls_features/index.html" | 212 ------ .../index.html" | 47 -- .../inheritance/index.html" | 266 -------- .../json/index.html" | 353 ---------- .../object-oriented_js/index.html" | 286 -------- .../object_building_practice/index.html" | 302 --------- .../object_prototypes/index.html" | 285 -------- .../index.html" | 257 -------- .../a_first_splash/index.html" | 675 ------------------- .../arrays/index.html" | 678 ------------------- .../index.html" | 56 -- .../math/index.html" | 423 ------------ .../useful_string_methods/index.html" | 723 --------------------- .../variables/index.html" | 372 ----------- .../what_is_javascript/index.html" | 339 ---------- .../index.html" | 148 ----- .../index.html" | 284 -------- .../index.html" | 249 ------- 40 files changed, 7199 insertions(+), 7199 deletions(-) create mode 100644 files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html delete mode 100644 "files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" create mode 100644 files/ru/learn/javascript/building_blocks/events/index.html delete mode 100644 "files/ru/learn/javascript/building_blocks/\321\201\320\276\320\261\321\213\321\202\320\270\321\217/index.html" create mode 100644 files/ru/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/ru/learn/javascript/first_steps/arrays/index.html create mode 100644 files/ru/learn/javascript/first_steps/index.html create mode 100644 files/ru/learn/javascript/first_steps/math/index.html create mode 100644 files/ru/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/ru/learn/javascript/first_steps/strings/index.html create mode 100644 files/ru/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/ru/learn/javascript/first_steps/variables/index.html create mode 100644 files/ru/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/ru/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/ru/learn/javascript/objects/basics/index.html create mode 100644 files/ru/learn/javascript/objects/index.html create mode 100644 files/ru/learn/javascript/objects/inheritance/index.html create mode 100644 files/ru/learn/javascript/objects/json/index.html create mode 100644 files/ru/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/ru/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/ru/learn/javascript/objects/object_prototypes/index.html delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/adding_bouncing_balls_features/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/inheritance/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/json/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object-oriented_js/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_building_practice/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_prototypes/index.html" delete mode 100644 "files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/\320\276\321\201\320\275\320\276\320\262\321\213/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/a_first_splash/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/arrays/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/math/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/useful_string_methods/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/variables/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/what_is_javascript/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\320\276\320\267\320\264\320\260\321\202\320\265\320\273\321\214_\320\263\320\273\321\203\321\213\321\205_\320\270\321\201\321\202\320\276\321\200\320\270\320\271/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\321\202\321\200\320\276\320\272\320\270/index.html" delete mode 100644 "files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\207\321\202\320\276_\320\277\320\276\321\210\320\273\320\276_\320\275\320\265_\321\202\320\260\320\272/index.html" (limited to 'files/ru/learn/javascript') diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html new file mode 100644 index 0000000000..e3aa0c72b8 --- /dev/null +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -0,0 +1,638 @@ +--- +title: 'Объединенный асинхронный JavaScript: Таймайты и интервалы' +slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы +translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, достаточное понимание основ JavaScript.
Цель:Понимание асинхронных циклов и интервалов, и то как их можно использовать.
+ +

Введение

+ +

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

+ +

Эти функции:

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

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

+ +
+

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

+
+ +

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

+ +

setTimeout()

+ +

Как мы ранее отметили, setTimeout () выполняет определенный блок кода один раз по истечении заданного времени. Принимает следующие параметры:

+ + + +
+

NOTE:  Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаете этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.

+ +

Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.

+
+ +

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

+ +
let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+ +

Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить ее где-нибудь еще и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:

+ +
// С именованной функцией
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// С функцией определенной отдельно
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);
+ +

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

+ +

setTimeout () возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.

+ +

Передача параметров в функцию setTimeout ()

+ +

Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.

+ +

Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:

+ +
function sayHi(who) {
+  alert(`Hello ${who}!`);
+}
+ +

Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:

+ +
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
+ +

Очистка таймаутов

+ +

Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав clearTimeout(), передав ему идентификатор вызова setTimeout() в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:

+ +
clearTimeout(myGreeting);
+ +
+

Note: См.greeter-app.html для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (см. исходный код).

+
+ +

setInterval()

+ +

setTimeout () отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?

+ +

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

+ +

Давайте посмотрим на пример. Следующая функция создает новый объект Date(), с помощью toLocaleTimeString() извлекает из него строку с временем и отображает ее в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью setInterval(), создавая эффект цифровых часов, которые обновляются раз в секунду ( реальный пример, и исходный код):

+ +
function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

Как и setTimeout (), setInterval () возвращает определенное значение, которое вы можете использовать позже, когда вам нужно очистить интервал.

+ +

Очистка интервала

+ +

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

+ +
const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);
+ +

Активное обучение: Создание собственного секундомера!

+ +

Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера setInterval-clock.html , и измените ее так, чтобы создать свой собственный простой секундомер.

+ +

Вам нужно отображать время, как и раньше, но в этом примере вам нужно:

+ + + +

Несколько подсказок для вас:

+ + + +
+

Note: Если вы застряли, вы можете увидеть нашу версию (см. также исходный код ).

+
+ +

Что нужно помнить о setTimeout () и setInterval ()

+ +

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

+ +

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

+ +

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

+ +

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

+ +
let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);
+ +

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

+ +
let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);
+ +

Чем рекурсивный setTimeout () отличается от setInterval () ?

+ +

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

+ + + +

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

+ +

Немедленные таймауты

+ +

Использование 0 в качестве значения для setTimeout () позволяет планировать выполнение указанной функции обратного вызова как можно скорее, но только после того, как будет запущен основной поток кода.

+ +

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

+ +
setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');
+ +

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

+ +

Очистка с помощью clearTimeout() или clearInterval()

+ +

clearTimeout () и clearInterval () используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().

+ +

Для согласованности следует использовать clearTimeout () для очистки записей setTimeout () и clearInterval () для очистки записей setInterval (). Это поможет избежать путаницы.

+ +

requestAnimationFrame()

+ +

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

+ +

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

+ +
+

Note: Вы можете найти примеры использования requestAnimationFrame() в этом курсе — например в  Рисование графики, and Практика построения объектов.

+
+ +

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

+ +
function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

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

+ +
+

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

+ +

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

Такой же код с использованием setInterval():

+ +
function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);
+ +

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

+ +

setInterval (), с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.

+ +

В том числе временная метка

+ +

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

+ +

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

+ +
let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

Поддержка браузерами

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +
    +
  1. +

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

    +
    2. +
  2. +

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

    +
    3. +
  3. +

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

    + + 
    html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}
    +
    4. +
  4. +

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

    +
    5. +
  5. +

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

    + + 
    const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
    +
    6. +
  6. +

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

    + + 
    function draw(timestamp) {
+
+}
    +
    7. +
  7. +

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

    + + 
      if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
    +
    8. +
  8. +

    Под предыдущей строкой внутри draw () добавьте следующий блок - он проверяет, превышает ли значение rotateCount 359 (например, 360, полный круг). Если это так, он устанавливает значение по модулю 360 (то есть остаток, оставшийся после деления значения на 360), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до 359 градусов, чем со значениями типа «128000 градусов».

    + + 
    if (rotateCount > 359) {
+  rotateCount %= 360;
+}
    +
    9. +
  9. Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner: + 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    +
    10. +
  10. +

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

    + + 
    rAF = requestAnimationFrame(draw);
    +
    11. +
  11. +

    Ниже, вызовите функцию draw() для запуска анимации.

    + + 
    draw();
    +
    12. +
+ +
+

Note: Вы можете посмотреть рабочий образец на GitHub. ( исходный код.)

+
+ +

Очbстка вызова  requestAnimationFrame() 

+ +

Очистить вызов requestAnimationFrame () можно, вызвав соответствующий метод cancelAnimationFrame (). (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)

+ +

Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:

+ +
cancelAnimationFrame(rAF);
+ +

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

+ +

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

+ +

Подсказки:

+ + + +
+

Note: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш живой пример и исходный код.

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}
+ +

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

+ +

... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:

+ +
if (posX > width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Давайте поработаем над этим:

+ +
    +
  1. +

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

    +
    2. +
  2. +

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

    + + 
    const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');
    + +

    В следующем порядке:

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

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

    + + 
    function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}
    +
    4. +
  4. +

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

    + + 
    function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount > 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}
    +
    5. +
  5. +

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

    + + 
    result.style.display = 'none';
+spinnerContainer.style.display = 'none';
    +
    6. +
  6. +

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

    + + 
    function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}
    +
    7. +
  7. +

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

    + + 
    btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}
    + +
    +

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

    + +

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

    +
    + +

    Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией setEndgame (), которую вы определите позже.

    +
    8. +
  8. +

    Добавьте в свой код следующую функцию:

    + + 
    function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Player 1 won!!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Player 2 won!!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}
    + +

    Выполните следующие инструкции:

    + +
      +
    1. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
      2. +
    2. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
      3. +
    3. Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
      4. +
    4. Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
      5. +
    5. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
      6. +
    6. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
      7. +
    7. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
      8. +
    8. Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
      9. +
    +
    9. +
+ +

Вот и все - вы справились!

+ +
+

Note: Если вы где то застряли, взгляните на наша версия игры (см. также исходный код ).

+
+ +

Заключение

+ +

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

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

+ +

В этом модуле

+ + + +
+
+
diff --git "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" "b/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" deleted file mode 100644 index e3aa0c72b8..0000000000 --- "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" +++ /dev/null @@ -1,638 +0,0 @@ ---- -title: 'Объединенный асинхронный JavaScript: Таймайты и интервалы' -slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы -translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
- -

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

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, достаточное понимание основ JavaScript.
Цель:Понимание асинхронных циклов и интервалов, и то как их можно использовать.
- -

Введение

- -

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

- -

Эти функции:

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

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

- -
-

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

-
- -

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

- -

setTimeout()

- -

Как мы ранее отметили, setTimeout () выполняет определенный блок кода один раз по истечении заданного времени. Принимает следующие параметры:

- - - -
-

NOTE:  Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаете этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.

- -

Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.

-
- -

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

- -
let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
- -

Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить ее где-нибудь еще и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:

- -
// С именованной функцией
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// С функцией определенной отдельно
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);
- -

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

- -

setTimeout () возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.

- -

Передача параметров в функцию setTimeout ()

- -

Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.

- -

Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:

- -
function sayHi(who) {
-  alert(`Hello ${who}!`);
-}
- -

Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:

- -
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
- -

Очистка таймаутов

- -

Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав clearTimeout(), передав ему идентификатор вызова setTimeout() в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:

- -
clearTimeout(myGreeting);
- -
-

Note: См.greeter-app.html для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (см. исходный код).

-
- -

setInterval()

- -

setTimeout () отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?

- -

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

- -

Давайте посмотрим на пример. Следующая функция создает новый объект Date(), с помощью toLocaleTimeString() извлекает из него строку с временем и отображает ее в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью setInterval(), создавая эффект цифровых часов, которые обновляются раз в секунду ( реальный пример, и исходный код):

- -
function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

Как и setTimeout (), setInterval () возвращает определенное значение, которое вы можете использовать позже, когда вам нужно очистить интервал.

- -

Очистка интервала

- -

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

- -
const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
- -

Активное обучение: Создание собственного секундомера!

- -

Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера setInterval-clock.html , и измените ее так, чтобы создать свой собственный простой секундомер.

- -

Вам нужно отображать время, как и раньше, но в этом примере вам нужно:

- - - -

Несколько подсказок для вас:

- - - -
-

Note: Если вы застряли, вы можете увидеть нашу версию (см. также исходный код ).

-
- -

Что нужно помнить о setTimeout () и setInterval ()

- -

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

- -

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

- -

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

- -

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

- -
let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
- -

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

- -
let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);
- -

Чем рекурсивный setTimeout () отличается от setInterval () ?

- -

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

- - - -

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

- -

Немедленные таймауты

- -

Использование 0 в качестве значения для setTimeout () позволяет планировать выполнение указанной функции обратного вызова как можно скорее, но только после того, как будет запущен основной поток кода.

- -

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

- -
setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');
- -

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

- -

Очистка с помощью clearTimeout() или clearInterval()

- -

clearTimeout () и clearInterval () используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().

- -

Для согласованности следует использовать clearTimeout () для очистки записей setTimeout () и clearInterval () для очистки записей setInterval (). Это поможет избежать путаницы.

- -

requestAnimationFrame()

- -

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

- -

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

- -
-

Note: Вы можете найти примеры использования requestAnimationFrame() в этом курсе — например в  Рисование графики, and Практика построения объектов.

-
- -

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

- -
function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

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

- -
-

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

- -

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

-
- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -
function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

Такой же код с использованием setInterval():

- -
function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);
- -

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

- -

setInterval (), с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.

- -

В том числе временная метка

- -

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

- -

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

- -
let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

Поддержка браузерами

- -

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

- -

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

- -

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

- -

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

- -
-

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

-
- -
    -
  1. -

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

    -
    2. -
  2. -

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

    -
    3. -
  3. -

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

    - - 
    html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}
    -
    4. -
  4. -

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

    -
    5. -
  5. -

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

    - - 
    const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
    -
    6. -
  6. -

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

    - - 
    function draw(timestamp) {
-
-}
    -
    7. -
  7. -

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

    - - 
      if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
    -
    8. -
  8. -

    Под предыдущей строкой внутри draw () добавьте следующий блок - он проверяет, превышает ли значение rotateCount 359 (например, 360, полный круг). Если это так, он устанавливает значение по модулю 360 (то есть остаток, оставшийся после деления значения на 360), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до 359 градусов, чем со значениями типа «128000 градусов».

    - - 
    if (rotateCount > 359) {
-  rotateCount %= 360;
-}
    -
    9. -
  9. Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner: - 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    -
    10. -
  10. -

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

    - - 
    rAF = requestAnimationFrame(draw);
    -
    11. -
  11. -

    Ниже, вызовите функцию draw() для запуска анимации.

    - - 
    draw();
    -
    12. -
- -
-

Note: Вы можете посмотреть рабочий образец на GitHub. ( исходный код.)

-
- -

Очbстка вызова  requestAnimationFrame() 

- -

Очистить вызов requestAnimationFrame () можно, вызвав соответствующий метод cancelAnimationFrame (). (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)

- -

Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:

- -
cancelAnimationFrame(rAF);
- -

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

- -

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

- -

Подсказки:

- - - -
-

Note: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш живой пример и исходный код.

-
- -

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

- -

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

- -

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

- -

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

- -

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

- -
if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
- -

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

- -

... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:

- -
if (posX > width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

Давайте поработаем над этим:

- -
    -
  1. -

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

    -
    2. -
  2. -

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

    - - 
    const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');
    - -

    В следующем порядке:

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

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

    - - 
    function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}
    -
    4. -
  4. -

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

    - - 
    function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount > 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}
    -
    5. -
  5. -

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

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

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

    - - 
    function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}
    -
    7. -
  7. -

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

    - - 
    btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}
    - -
    -

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

    - -

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

    -
    - -

    Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией setEndgame (), которую вы определите позже.

    -
    8. -
  8. -

    Добавьте в свой код следующую функцию:

    - - 
    function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Player 1 won!!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Player 2 won!!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}
    - -

    Выполните следующие инструкции:

    - -
      -
    1. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
      2. -
    2. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
      3. -
    3. Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
      4. -
    4. Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
      5. -
    5. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
      6. -
    6. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
      7. -
    7. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
      8. -
    8. Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
      9. -
    -
    9. -
- -

Вот и все - вы справились!

- -
-

Note: Если вы где то застряли, взгляните на наша версия игры (см. также исходный код ).

-
- -

Заключение

- -

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

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

- -

В этом модуле

- - - -
-
-
diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..db13cec676 --- /dev/null +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,606 @@ +--- +title: Введение в события +slug: Learn/JavaScript/Building_blocks/События +tags: + - Изучение + - Обработчик событий + - Руководство + - события +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

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

+ + + + + + + + + + + + +
Предпосылки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, Первые шаги в JavaScript.
Задача:Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования.
+ +

Серия удачных событий

+ +

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

+ +

+ +

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

+ + + +

Подробнее о событиях можно посмотреть в Справочнике по событиям.

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +
<button>Change color</button>
+ + + +

JavaScript выглядит так:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

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

+ +

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

+ +

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

+ +

{{ EmbedLiveSample('Простой_пример', '100%', 200, "") }}

+ +

События не только для веб-страниц

+ +

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

+ +

Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют прослушиватели, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации прослушивателей событий, и функция once() для регистрации прослушивателя событий, который отключается после первого срабтывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

+ +

Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства прослушивателей событий пишутся в так называемом регистре CamelCase (например, onMessage, а не onmessage) и должны сочетаться с функцией addListener. См. runtime.onMessage page для примера.

+ +

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

+ +

Способы использования веб-событий

+ +

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

+ +

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

+ +

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

+ +
const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

В данной ситауции свойство onclick — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с btn.textContent или btn.style), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).

+ +

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

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

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

+
+ +

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

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

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

+ +

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

+ +

Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у Вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.

+ +

Например:

+ +
const buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

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

+
+ +

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

+ +

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

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

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

+
+ +

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

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

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

+ +
btn.removeEventListener('click', bgChange);
+ +

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

+ +

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

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

Поскольку вторая строка будет перезаписывать значение onclick, установленное первой. Однако, если:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Обе функции будут выполняться при щелчке элемента.

+ +

Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод Event​Target​.add​Event​Listener() и Метод Event​Target​.remove​Event​Listener().

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, jQuery) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.

+
+ +

Другие концепции событий

+ +

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

+ +

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

+ +

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

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

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

+
+ +

Итак в коде выше мы включаем объект события e в функцию, а в функции — настройку стиля фона для e.target, который является кнопкой. Свойство объекта события target всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.

+ +
+

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

+
+ +

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

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

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

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400) }}

+ +

Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. {{domxref("Event")}} для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, Media Recorder API имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события ondataavailable handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.

+ +

    Предотвращение поведения по умолчанию

+ +

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

+ +

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

+ +

Простая форма HTML, в которой требуется ввести ваше имя и фамилию:

+ +
<form>
+  <div>
+    <label for="fname">Имя: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Фамилия: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

В JavaScript мы реализуем очень простую проверку внутри обработчика события onsubmit (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию preventDefault() объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:

+ +
var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'Оба поля должны быть заполнены!';
+  }
+}
+ +

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

+ +

{{ EmbedLiveSample('Предотвращение_поведения_по_умолчанию', '100%', 140) }}

+ +
+

Примечание: чтобы увидеть исходный код, откройте preventdefault-validation.html (также запустите здесь).

+
+ +

Всплытие и перехват событий

+ +

Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймете, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример show-video-box.html в одной вкладке и исходный код в другой вкладке. Он также представлен ниже:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500) }}

+ +

Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <div> с hidden на showing (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):

+ +
div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        ...
+      }
+.hidden {
+   left: -50%;
+  }
+.showing {
+   left: 50%;
+  }
+ +
var btn = document.querySelector('button');
+btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

Затем мы добавляем еще пару обработчиков событий onclick. Первый к <div>, а второй к <video>. Идея заключается в том, чтобы при щелчке по области <div> вне зоны видео поле снова скрылось, а при клике в области <video>  видео начало воспроизводиться.

+ +
var videoBox = document.querySelector('div');
+var video = document.querySelector('video');
+
+videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие <div>. Это связано с тем, что видео находится внутри <div>, это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.

+ +

Всплытие и перехват событий — концепция выполнения

+ +

Когда событие инициируется элементом, который имеет родительские элементы (например, {{htmlelement ("video")}} в нашем случае), современные браузеры выполняют две разные фазы —  фазу  захвата и фазу всплытия.

+ +

На стадии захвата происходит следующее:

+ + + +

На стадии всплытия происходит полная противоположность:

+ + + +

+ +

(Нажмите на изображение, чтобы увеличить диаграмму)

+ +

В современных браузерах по умолчанию все обработчики событий регистрируются в фазе всплытия. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента <video> наружу, в элемент <html>. По пути:

+ + + +

Исправление проблемы с помощью stopPropagation()

+ +

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

+ +

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

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

Вы можете попробовать создать локальную копию show-video-box.html и попробовать его самостоятельно исправить или просмотреть исправленный результат в show-video-box-fixed.html (также см. исходный код здесь).

+ +
Примечание: Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.
+ +
+

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

+
+ +

Делегирование события

+ +

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

+ +

Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить прослушиватель событий click для родительского элемента <ul> и он будет всплывать в элементах списка.

+ +

Эту концепцию объясняет в своем блоге Дэвид Уолш, где приводит несколько примеров. (см. How JavaScript Event Delegation Works.)

+ +

Вывод

+ +

Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (Web API).

+ +

Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнет приходить более ясное понимание тематики.

+ +

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

+ +

См. также

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

В этом модуле

+ + + +
+
+ +
+
diff --git "a/files/ru/learn/javascript/building_blocks/\321\201\320\276\320\261\321\213\321\202\320\270\321\217/index.html" "b/files/ru/learn/javascript/building_blocks/\321\201\320\276\320\261\321\213\321\202\320\270\321\217/index.html" deleted file mode 100644 index db13cec676..0000000000 --- "a/files/ru/learn/javascript/building_blocks/\321\201\320\276\320\261\321\213\321\202\320\270\321\217/index.html" +++ /dev/null @@ -1,606 +0,0 @@ ---- -title: Введение в события -slug: Learn/JavaScript/Building_blocks/События -tags: - - Изучение - - Обработчик событий - - Руководство - - события -translation_of: Learn/JavaScript/Building_blocks/Events ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

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

- - - - - - - - - - - - -
Предпосылки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, Первые шаги в JavaScript.
Задача:Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования.
- -

Серия удачных событий

- -

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

- -

- -

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

- - - -

Подробнее о событиях можно посмотреть в Справочнике по событиям.

- -

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

- -
-

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

-
- -

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

- -

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

- -
<button>Change color</button>
- - - -

JavaScript выглядит так:

- -
const btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random() * (number+1));
-}
-
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

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

- -

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

- -

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

- -

{{ EmbedLiveSample('Простой_пример', '100%', 200, "") }}

- -

События не только для веб-страниц

- -

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

- -

Например, Node.js — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Модель событий Node.js основана на том, что существуют прослушиватели, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция on() для регистрации прослушивателей событий, и функция once() для регистрации прослушивателя событий, который отключается после первого срабтывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

- -

Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства прослушивателей событий пишутся в так называемом регистре CamelCase (например, onMessage, а не onmessage) и должны сочетаться с функцией addListener. См. runtime.onMessage page для примера.

- -

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

- -

Способы использования веб-событий

- -

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

- -

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

- -

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

- -
const btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

В данной ситауции свойство onclick — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с btn.textContent или btn.style), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).

- -

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

- -
const btn = document.querySelector('button');
-
-function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

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

- -

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

- - - -

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

- -

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

- -

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

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

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

-
- -

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

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

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

- -

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

- -

Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у Вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.

- -

Например:

- -
const buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -

Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

- -
buttons.forEach(function(button) {
-  button.onclick = bgChange;
-});
- -
-

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

-
- -

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

- -

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

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);
- -
-

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

-
- -

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

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

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

- -
btn.removeEventListener('click', bgChange);
- -

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

- -

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

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

Поскольку вторая строка будет перезаписывать значение onclick, установленное первой. Однако, если:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Обе функции будут выполняться при щелчке элемента.

- -

Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод Event​Target​.add​Event​Listener() и Метод Event​Target​.remove​Event​Listener().

- -

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

- -

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

- -

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

- - - -

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

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, jQuery) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.

-
- -

Другие концепции событий

- -

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

- -

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

- -

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

- -
function bgChange(e) {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);
- -
-

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

-
- -

Итак в коде выше мы включаем объект события e в функцию, а в функции — настройку стиля фона для e.target, который является кнопкой. Свойство объекта события target всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.

- -
-

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

-
- -

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

- -
var divs = document.querySelectorAll('div');
-
-for (var i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

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

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 400) }}

- -

Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. {{domxref("Event")}} для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, Media Recorder API имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события ondataavailable handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.

- -

    Предотвращение поведения по умолчанию

- -

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

- -

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

- -

Простая форма HTML, в которой требуется ввести ваше имя и фамилию:

- -
<form>
-  <div>
-    <label for="fname">Имя: </label>
-    <input id="fname" type="text">
-  </div>
-  <div>
-    <label for="lname">Фамилия: </label>
-    <input id="lname" type="text">
-  </div>
-  <div>
-     <input id="submit" type="submit">
-  </div>
-</form>
-<p></p>
- - - -

В JavaScript мы реализуем очень простую проверку внутри обработчика события onsubmit (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию preventDefault() объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:

- -
var form = document.querySelector('form');
-var fname = document.getElementById('fname');
-var lname = document.getElementById('lname');
-var submit = document.getElementById('submit');
-var para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'Оба поля должны быть заполнены!';
-  }
-}
- -

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

- -

{{ EmbedLiveSample('Предотвращение_поведения_по_умолчанию', '100%', 140) }}

- -
-

Примечание: чтобы увидеть исходный код, откройте preventdefault-validation.html (также запустите здесь).

-
- -

Всплытие и перехват событий

- -

Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймете, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример show-video-box.html в одной вкладке и исходный код в другой вкладке. Он также представлен ниже:

- - - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500) }}

- -

Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:

- -
<button>Display video</button>
-
-<div class="hidden">
-  <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-  </video>
-</div>
- -

При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <div> с hidden на showing (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):

- -
div {
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        ...
-      }
-.hidden {
-   left: -50%;
-  }
-.showing {
-   left: 50%;
-  }
- -
var btn = document.querySelector('button');
-btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

Затем мы добавляем еще пару обработчиков событий onclick. Первый к <div>, а второй к <video>. Идея заключается в том, чтобы при щелчке по области <div> вне зоны видео поле снова скрылось, а при клике в области <video>  видео начало воспроизводиться.

- -
var videoBox = document.querySelector('div');
-var video = document.querySelector('video');
-
-videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие <div>. Это связано с тем, что видео находится внутри <div>, это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.

- -

Всплытие и перехват событий — концепция выполнения

- -

Когда событие инициируется элементом, который имеет родительские элементы (например, {{htmlelement ("video")}} в нашем случае), современные браузеры выполняют две разные фазы —  фазу  захвата и фазу всплытия.

- -

На стадии захвата происходит следующее:

- - - -

На стадии всплытия происходит полная противоположность:

- - - -

- -

(Нажмите на изображение, чтобы увеличить диаграмму)

- -

В современных браузерах по умолчанию все обработчики событий регистрируются в фазе всплытия. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента <video> наружу, в элемент <html>. По пути:

- - - -

Исправление проблемы с помощью stopPropagation()

- -

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

- -

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

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

Вы можете попробовать создать локальную копию show-video-box.html и попробовать его самостоятельно исправить или просмотреть исправленный результат в show-video-box-fixed.html (также см. исходный код здесь).

- -
Примечание: Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.
- -
-

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

-
- -

Делегирование события

- -

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

- -

Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить прослушиватель событий click для родительского элемента <ul> и он будет всплывать в элементах списка.

- -

Эту концепцию объясняет в своем блоге Дэвид Уолш, где приводит несколько примеров. (см. How JavaScript Event Delegation Works.)

- -

Вывод

- -

Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (Web API).

- -

Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнет приходить более ясное понимание тематики.

- -

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

- -

См. также

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

В этом модуле

- - - -
-
- -
-
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 new file mode 100644 index 0000000000..b2a811b992 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,675 @@ +--- +title: Первое погружение в JavaScript +slug: Learn/JavaScript/Первые_шаги/A_first_splash +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript.
Цели:Получение первого опыта в программировании на JavaScript.
+ +

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

+ +
+

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

+
+ +

Думай как программист

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:

+ + + +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +
    +
  1. Сгенерировать случайное число между 1 и 100.
    2. +
  2. Начать запись количества попыток игрока угадать число. Начать с 1.
    3. +
  3. Предоставить попытку угадать игроку загаданное число.
    4. +
  4. Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
    5. +
  5. Далее, проверить было ли это число верным.
    6. +
  6. Если число верное: +
      +
    1. Показать поздравительное сообщение.
      2. +
    2. Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
      3. +
    3. Предоставить возможность для перезапуска игры.
      4. +
    +
    7. +
  7. Если число не верное и есть попытки: +
      +
    1. Сказать игроку, что он не угадал.
      2. +
    2. Разрешить ему использовать еще попытку.
      3. +
    3. Повысить число попыток на 1.
      4. +
    +
    8. +
  8. Если число не верное и попыток нет: +
      +
    1. Сказать игроку, что игра окончена.
      2. +
    2. Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
      3. +
    3. Предоставить возможность для перезапуска игры.
      4. +
    +
    9. +
  9. Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
    10. +
+ +

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

+ +

Подготовка

+ +

В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файла  number-guessing-game-start.html  (см. здесь).  Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.

+ +

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

+ +
<script>
+
+  // Your JavaScript goes here
+
+</script>
+
+ +

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

+ +

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

+ +
var randomNumber = Math.floor(Math.random() * 100) + 1;
+
+var guesses = document.querySelector('.guesses');
+var lastResult = document.querySelector('.lastResult');
+var lowOrHi = document.querySelector('.lowOrHi');
+
+var guessSubmit = document.querySelector('.guessSubmit');
+var guessField = document.querySelector('.guessField');
+
+var guessCount = 1;
+var resetButton;
+ +

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

+ +

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

+ + + +
+

Заметка: В дальнейшем вы узнаете намного больше о переменных, в следующей статье.

+
+ +

Функции (Functions)

+ +

Затем добавьте следующие ниже предыдущего JavaScript:

+ +
function checkGuess() {
+  alert('I am a placeholder');
+}
+ +

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

+ +

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

+ +

Сейчас попробуйте сохранить код и обновить его в браузере.

+ +

Перейдите к консоли JavaScript в инструментах разработчика, и введите следующую строку:

+ +
checkGuess();
+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Сначала давайте посмотрим на арифметические операторы, например:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорИмяПример
+Сложение6 + 9
-Вычитание20 - 15
*Умножение3 * 7
/Деление10 / 5
+ +

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

+ +
var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;
+ +

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

+ +
name += ' says hello!';
+ +

Это эквивалентно этому:

+ +
name = name + ' says hello!';
+ +

Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри {{anch("Conditionals", "ниже")}}), мы используем операторы сравнения, например:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорИмяПример
===Строгое равенство (это точно одно и то же?)5 === 2 + 4
!==Строгое неравенство (это не одно и то же?)'Chris' !== 'Ch' + 'ris'
<Меньше чем10 < 6
>Больше чем10 > 20
+ +

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

+ +

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

+ +

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

+ +
function checkGuess() {
+  var userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess < randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess > randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+ +

Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.

+ + + +

События (Events)

+ +

На данный момент у нас есть хорошо реализованная функция checkGuess(), но она ничего не сделает, потому что мы еще не вызвали ее. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются прослушивателями событий, а блоки кода, выполняемые в ответ на срабатывание событий, называются обработчиками событий.

+ +

Добавьте следующую строку ниже закрывающей фигурной скобки функции checkGuess():

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

Здесь мы добавляем прослушиватель событий к кнопке guessSubmit. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы выслушиваем (в данном случае click) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция checkGuess() - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

+ +

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

+ +

Завершение игры

+ +

Давайте добавим функцию setGameOver() в конец нашего кода, а затем пройдем по ней. Добавьте это под нижней частью вашего JavaScript:

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

Теперь нам нужно также определить эту функцию! Добавьте следующий код, снова в нижнюю часть вашего JavaScript:

+ +
function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

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

+ + + +

С этого момента у вас есть полностью работающая (простая) игра - поздравляем!

+ +

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

+ +

Циклы (Loops) 

+ +
+
+
Одна часть вышеприведенного кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определенное условие.
+ +
Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:
+
+
+ +
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):
+ Начальное значение: в этом случае мы начинаем подсчет c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.

+ +

Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:

+ +
var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

Этот код создает переменную, содержащую список всех абзацев внутри <div class = "resultParas">, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.

+ +

Немного об объектах (Objects)

+ +

Давайте добавим еще одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже var resetButton; в верхней части вашего JavaScript, затем сохраните файл:

+ +
guessField.focus();
+ +

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

+ +

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

+ +

В нашем примере мы сначала создали переменную guessField, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:

+ +
var guessField = document.querySelector('.guessField');
+ +

Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. querySelector() "берет" одну часть информации -  CSS selector, который выбирает нужный элемент.

+ +

Поскольку guessField теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:

+ +
guessField.focus();
+ +

Для переменных, которые не содержат ссылок на элементы формы, не будет доступен focus(). Например, переменная guesses содержит ссылку на элемент {{htmlelement ("p")}}, а guessCount содержит число.

+ +

Поиграем с объектами браузера

+ +

Давайте немного поиграем с некоторыми объектами браузера.

+ +
    +
  1. Для начала запустите свою программу в браузере.
    2. +
  2. Далее, откройте инструменты разработчика в вашем браузере, и убедитесь, что вы перешли во вкладку с консолью JavaScript.
    3. +
  3. Введите guessField и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!
    4. +
  4. Теперь введите следующее: + 
    guessField.value = 'Hello';
    + Свойство value представляет текущее значение, введенное в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!
    5. +
  5. Попробуйте ввести guesses и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.
    6. +
  6. Теперь попробуйте ввести: + 
    guesses.value
    + Браузер вернет вам undefined, потому что value не существует в параграфах.
    7. +
  7. Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте: + 
    guesses.textContent = 'Where is my paragraph?';
    +
    8. +
  8. Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой: + 
    guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
    + Каждый элемент на странице имеет свойство style, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.
    9. +
+ +

Теперь можно отдохнуть...

+ +

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

+ +

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}

diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..7f38ce4a50 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,678 @@ +--- +title: Массивы +slug: Learn/JavaScript/Первые_шаги/Arrays +tags: + - JavaScript + - Pop + - Push + - shift + - unshift + - Для начинающих + - Массивы + - Статья +translation_of: Learn/JavaScript/First_steps/Arrays +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.
Цель:Понять, что такое массивы и как использовать их в JavaScript.
+ +

Что такое массив?

+ +

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

+ +

Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.

+ +

Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript. Мы предоставили один ниже (вы также можете open this console в отдельном окне, или использовать browser developer console, если вам угодно).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Создание массива

+ +

Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.

+ +
    +
  1. Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль: + 
    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;
    +
    2. +
  2. В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это: + 
    var sequence = [1, 1, 2, 3, 5, 8, 13];
+var random = ['tree', 795, [0, 1, 2]];
    +
    3. +
  3. Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.
    4. +
+ +

Получение и изменение элементов массива

+ +

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

+ +
    +
  1. Введите следующее в вашу консоль: + 
    shopping[0];
+// возвращает "bread"
    +
    2. +
  2. Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это: + 
    shopping[0] = 'tahini';
+shopping;
+// shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    + +
    Заметка: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
    +
    3. +
  3. Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива random (см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого: + 
    random[2][2];
    +
    4. +
  4. Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.
    5. +
+ +

Нахождение длины массива

+ +

Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:

+ +
sequence.length;
+// должно возвратить 7
+ +

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

+ +
var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:

+ +
    +
  1. Начать цикл с номера позиции 0 в массиве.
    2. +
  2. Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
    3. +
  3. Для каждого элемента вернуть его значение в консоли браузера с помощью console.log().
    4. +
+ +

Некоторые полезные методы массивов

+ +

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

+ +

Преобразование между строками и массивами

+ +

Часто у Вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.

+ +
+

Заметка: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.

+
+ +
    +
  1. Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли: + 
    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Теперь разделим ee посредством запятой: + 
    var myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы: + 
    myArray.length;
+myArray[0]; // первый элемент в массиве
+myArray[1]; // второй элемент в массиве
+myArray[myArray.length-1]; // последний элемент в массиве
    +
    4. +
  4. Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее: + 
    var myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5.  Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . toString() ,возможно, проще,чем join() поскольку он не принимает параметр, но это ограничивает его. С join()вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой). + 
    var dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Добавление и удаление элементов массива

+ +

Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив myArray , с которым мы столкнулись в предыдущем разделе. Если вы еще не прошли этот раздел, сначала создайте массив в консоли:

+ +
var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.

+ +
    +
  1. Давайте сначала используем метод push() — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это: + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого: + 
    var newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Удаление последнего элемента массива можно совершить с помощью вызова метода pop(). Попробуйте это: + 
    myArray.pop();
    +
    4. +
  4. Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое: + 
    var removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.

+ +
    +
  1. Сначала, попробуем метод unshift(): + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Теперь shift(); попробуйте эти! + 
    var removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

Практика: Печать продуктов!

+ +

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

+ +
    +
  1. Ниже комментария // number 1  имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Нужно превратить их в массив и сохранить его  под названием  products.
    2. +
  2. На строке с комментарием // number 2  начинается цикл for. В строке цикла имеется i <= 0, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда i меньше или равен 0», при этом i начинается с 0. Нужно заменить i <= 0 условным тестом, который останавливает цикл, когда i перестает быть меньше длины массива products .
    3. +
  3. Под комментарием // number 3 мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (name:price) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, еще раз просмотрите статью Полезные строковые методы, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.
    4. +
  4. В рамках приведенной выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьей строки в JavaScript.
    5. +
  5. В верхней части кода есть переменная с именем total , которая содержит значение 0. Внутри цикла (под комментарием // number 4) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счет-фактуре. Для этого вам может понадобится оператор присваивания.
    6. +
  6. Под комментарием // number 5 нужно изменить строку так, чтобы переменная itemText была равна "current item name — $current item price",  например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счете-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
    7. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}

+ +

Практика: Топ 5 поисовых запросов

+ +

Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

+ +

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

+ +
+

Примечание: В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.

+
+ +

Чтобы завершить приложение, вам необходимо:

+ +
    +
  1. Добавьте строку под комментарием // number 1, которая добавляет текущее значение, введенное в ввод поиска, к началу массива. Его можно получить с помощью searchInput.value.
    2. +
  2. Добавьте строку под комментарием // number 2, которая удаляет значение, находящееся в конце массива.
    3. +
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}

+ +

Заключение

+ +

Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!

+ +

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

+ +

Посмотрите также

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}

+ +

В этом разделе

+ + diff --git a/files/ru/learn/javascript/first_steps/index.html b/files/ru/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..bd435e920f --- /dev/null +++ b/files/ru/learn/javascript/first_steps/index.html @@ -0,0 +1,56 @@ +--- +title: Первые шаги в JavaScript +slug: Learn/JavaScript/Первые_шаги +tags: + - JavaScript + - Массивы + - Новичкам +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

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

+ +

Предисловие

+ +

Вам не нужно иметь никаких предварительных знаний JavaScript чтобы приступить к этому модулю, но у вас должно быть некоторое представление о HTML и CSS. Рекомендуем ознакомиться со следующими материалами, прежде чем начинать знакомство с JavaScript:

+ + + +
+

Примечание:  Если Вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как  JSBin или Thimble, для запуска примеров кода. 

+
+ +

Руководства

+ +
+
Что такое JavaScript?
+
Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения. 
+
Первое погружение в JavaScript
+
Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".
+
Что пошло не так? Устранение ошибок JavaScript
+
В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript коде.
+
Хранение нужной вам информации - Переменные
+
После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с Переменными.
+
Базовая математика в JavaScript — числа и операторы
+
Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.
+
Работа с текстом — строки в JavaScript
+
Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.
+
Полезные строковые методы
+
После того как мы рассмотрели основы работы со строками, давайте двинемся дальше и поговорим о том какие полезные операторы и методы существуют для строк, такие как вычисление длины, соединение и разделение строк, замена отдельных символов и многие другие. 
+
Массивы
+
В последней статье этого модуля мы рассмотрим массивы - изящный способ хранения различных наборов информации в имени всего одной переменной. Здесь мы поговорим о том почему это может быть полезным, рассмотрим как создать массив, получить, добавить или удалить элемент массива, и прочее.
+
+ +

Проверка полученных знаний

+ +

Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки. 

+ +
+
Генератор глупых историй
+
Вашим заданием будет применить на практике полученные знания и создать развлекательное приложение которое будет генерировать случайные нелепые истории.
+
diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..29ff9258bf --- /dev/null +++ b/files/ru/learn/javascript/first_steps/math/index.html @@ -0,0 +1,423 @@ +--- +title: Базовая математика в JavaScript — числа и операторы +slug: Learn/JavaScript/Первые_шаги/Math +tags: + - JavaScript + - Гайд + - Математика + - Начинающий + - Операторы + - Руководство + - Скриптинг + - Статья + - кодинг +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель:Ознакомление с основами математики в JavaScript.
+ +

Все любят математику

+ +

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

+ +

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

+ +

Типы чисел

+ +

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

+ + + +

У нас даже есть разные типы числовых систем:

+ + + +

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

+ +

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

+ +

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

+ +

Для меня всё — числа

+ +

Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.

+ +
    +
  1. Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке: + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.
    3. +
  3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки: + 
    typeof myInt;
+typeof myFloat;
    + В обоих случаях вы должны получить "number" — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.
    4. +
+ +

Арифметические операторы

+ +

Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорИмяФункцияПример
+СложениеОбъединение чисел в одно целое.6 + 9
-ВычитаниеВычитает правое число от левого.20 - 15
*УмножениеУмножает два числа вместе.3 * 7
/ДелениеДелит левое число на правое.10 / 5
%Модуль числа +

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

+ 		+

11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)

+
**показатель степениВозводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.5 ** 5 (возвращает 3125, или как: 5*5*5*5*5)
+ +
+

Примечание: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).

+
+ +

Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведенные ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.

+ +
    +
  1. Для начала попробуйте ввести простые примеры, такие как: + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. И напоследок, попробуйте ввести более сложные выражения, например: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

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

+ +

Приоритет операторов

+ +

Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):

+ +
num2 + num1 / 8 + 2;
+ +

Будучи человеком, вы, вероятно, прочитаете это как "50 плюс 10 равно 60", затем "8 плюс 2 равно 10", и, наконец, "60 делить на 10 равно 6".

+ +

Но браузер видит это по-другому: "10 делить на 8 равно 1.25", затем "50 плюс 1.25 плюс 2 равно 53.25".

+ +

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

+ +

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

+ +
(num2 + num1) / (8 + 2);
+ +

Результат этого выражения равен 6.

+ +
+

Заметка: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.

+
+ +

Операторы инкремента и декремента

+ +

Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (++) и декремента (--). Мы использовали ++ в нашей игре "Угадай число" в статье первое погружение в JavaScript, где мы добавляли 1 к переменной guessCount, в которой хранилось значение количества попыток пользователя после каждого хода.

+ +
guessCount++;
+ +
+

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

+
+ +

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

+ +
3++;
+ +

Таким образом, вы можете применить инкремент только к существующим переменным:

+ +
var num1 = 4;
+num1++;
+ +

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

+ +
num1;
+ +

То же самое для --: попробуйте пример ниже

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Замечание: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху еще раз, но в этот раз используйте ++num1 и --num2. 

+
+ +

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

+ +

Операторы присваивания - операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, =, он просто приравнивает значение переменной слева к значению справа:

+ +
var x = 3; // x содержит значение 3
+var y = 4; // y содержит значение 4
+x = y; // x теперь содержит значение y (x == 4)
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExampleShortcut for
+=Присваивание сложенияПрибавляет значение справа к переменной слева и возвращает новое значение переменнойx = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Присваивание вычитанияВычитает значение справа из переменной слева и возвращает новое зачение переменнойx = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*= +

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

+ 		Умножает переменную слева на значение справа и возвращает новое зачение переменнойx = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=Присваивание деленияДелит переменную слева на значение справа и возвращает новое зачение переменнойx = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

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

+ +

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

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

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорИмяНазначениеПример
===Строгое равенствоПроверяет левое и правое значения на идентичность5 === 2 + 4
!==Строгое неравенствоПроверяет левое и правое значения на неидентичность5 !== 2 + 3
<МеньшеПроверяет, меньше ли левое значение правого10 < 6
>БольшеПроверяет, больше ли левое значение правого10 > 20
<=Меньше или равноПроверят, меньше ли левое значение правому (или равно ему)3 <= 2
>=Больше или равноПроверят, больше ли левое значение левого (или равно ему)5 >= 4
+ +
+

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

+
+ +

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

+ + + +

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

+ +
<button>Запустить машину</button>
+<p>Машина остановлена</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine id stopped.';
+  }
+}
+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

Итого

+ +

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

+ +

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

+ +
+

Примечание: если вам хочется узнать подробнее о том, как математика реализуется в 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 new file mode 100644 index 0000000000..139e478847 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,148 @@ +--- +title: Генератор глупых историй +slug: Learn/JavaScript/Первые_шаги/Создатель_глуых_историй +tags: + - JavaScript + - Задание + - Изучение + - Испытание + - Массивы + - НаписаниеКода + - НачальныйУровень + - Операторы + - Переменные + - Проверка + - Числа +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Требования:Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.
Задача:Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы.
+ +

Начальная точка

+ +

Для начала испытания вам следует:

+ + + +
+

Замечание:  Так же вы можете использовать такие сайты как  JSBin или Thimble для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <script> элемент внутри  HTML страницы.

+
+ +

Краткое описание проекта

+ +

Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:

+ + + +

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

+ +

+ +

Чтобы вы больше поняли идею опробуйте готовый пример (не заглядывая в исходный код!)

+ +

Шаги к цели

+ +

Следующие разделы описывают, что вам нужно будет сделать.

+ +

Начальная подготовка:

+ +
    +
  1. Создайте новый файл под названием main.js в той же папке, что и index.html.
    2. +
  2. Подключите данный JavaScript документ в ваш HTML файл с помощью {{htmlelement("script")}} элемента привязки main.js. Разместите его прямо перед закрывающимся </body> тегом.
    3. +
+ +

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

+ +
    +
  1. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), котрая принимает массив и случайным образом возвращает оттуда один из элементов.
    2. +
  2. Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле main.js: +
      +
    1. Сохраните первую большую строку текста в переменную storyText.
      2. +
    2. Сохраните первый блок из трех строк как массив, назвав его insertX.
      3. +
    3. Сохраните второй блок из трех строк как массив, назвав его insertY.
      4. +
    4. Сохраните третий блок из трех строк как массив, назвав его insertZ.
      5. +
    +
    3. +
+ +

Создание обработчика событий и неполной функции:

+ +
    +
  1. Теперь возвращаемся к исходному текстовому файлу.
    2. +
  2. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставте его в конец файла main.js. Это: +
      +
    • Добавит обработчик события кликанья в переменную randomize,  Так что, когда кнопка будет нажата -  функция result() запустится.
      • +
    • Добавляет в код частично завершенную функцию result(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.
      • +
    +
    3. +
+ +

Завершение функции result():

+ +
    +
  1. Создайте новую переменную newStory и установите ее значение равным storyText. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в storyText, мы могли бы генерировать новую историю только один раз.
    2. +
  2. Создайте три новые переменные, называемые xItem, yItem и zItem, и сделайте их равными результату вызова randomValueFromArray() на трех ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить ее, чтобы вернуть одну случайную строку из insertX, записав randomValueFromArray (insertX).
    3. +
  3. Затем мы хотим заменить три заполнителя строки newStory - :insertx:, :inserty :  и :insertz: - со строками, хранящимися в xItem, yItem и zItem. Здесь вам поможет определенный строковый метод - в каждом случае сделать вызов метода равным newStory, при этом каждый раз, когда он вызывается, newStory делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придется сделать один из вызовов дважды.
    4. +
  4. Внутри первого блока if добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке newStory, с помощью переменной name. В этом блоке мы говорим: «Если значение введено в текстовый ввод customName, замените Боба в истории этим пользовательским именем».
    5. +
  5. Внутри второго блока if мы проверяем, была ли выбрана радиокнопка uk. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это: +
      +
    1. Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.
      2. +
    2. Внутри линии, которая определяет weight переменную, замените 300 на расчет, который преобразует 300 фунтов в стоуны. Добавьте 'stone' в конце результата общего вызова Math.round().
      3. +
    3. Внутри линии, определяющей temperature переменную, замените 94 на расчет, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте 'centigrade' в конце результата общего вызова Math.round().
      4. +
    4. Просто под двумя определениями переменных добавьте еще две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной temperature и«300  pounds» на содержимое weight переменной.
      5. +
    +
    6. +
  6. Наконец, в предпоследней строке функции сделайте свойство textContent переменной story (которая ссылается на абзац) равным newStory.
    7. +
+ +

Советы и подсказки

+ + + +

Оценка и помощь

+ +

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

+ +
    +
  1. Разместите свою работу в онлайн-редакторе, таком как CodePen, jsFiddle или Glitch.
    2. +
  2. Напишите сообщение с просьбой об оценке и / или помощи на форуме MDN Discourse. Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти. Ваш пост должен включать: +
      +
    • Описательное название, такое как «Требуется оценка для генератора глупых историй».
      • +
    • Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.
      • +
    • Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе. Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • +
    • Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}

diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..583e29182e --- /dev/null +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,284 @@ +--- +title: Работа с текстом — строки в JavaScript +slug: Learn/JavaScript/Первые_шаги/Строки +translation_of: Learn/JavaScript/First_steps/Strings +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.
Цель:Знакомство с основами строк в JavaScript.
+ +

Сила слов

+ +

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

+ +

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

+ +

Строки — основы

+ +

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

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Создание строки

+ +
    +
  1. Для начала введите следующие строки: + 
    var string = 'The revolution will not be televised.';
+string;
    +
    2. +
  2. Как и в случае с числами, мы объявляем переменную, инициализируя ее строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. 
    3. +
  3. Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: + 
    var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';
    + Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
    4. +
  4. Следующий код будет выполнен только в том случае, если ранее была объявлена переменная string — убедитесь сами: + 
    var badString = string;
+badString;
    + В настоящее время строка badString имеет то же значение, что и строка string.
    5. +
+ +

Одиночные кавычки vs. Двойные кавычки

+ +
    +
  1. В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально: + 
    var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;
    +
    2. +
  2. Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остается на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведен пример: + 
    var badQuotes = 'What on earth?";
    +
    3. +
  3. Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идет речь (в коде ошибок нет): + 
    var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;
    +
    4. +
  4. Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается: + 
    var bigmouth = 'I've got no right to take my place...';
    + Что приводит нас к следующей теме.
    5. +
+ +

Экранирование кавычек в строках

+ +

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

+ +
var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;
+ +

Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

+ +

Конкатенация строк

+ +
    +
  1. Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.
    2. +
  2. + 
    var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;
    + Результат этой программы - это переменная joined, содержащая значение "Hello, how are you?".
    3. +
  3. В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите + между ними. Попробуйте это: + 
    var multiple = one + one + one + one + two;
+multiple;
    +
    4. +
  4. Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это: + 
    var response = one + 'I am fine — ' + two;
+response;
    +
    5. +
+ +
+

Примечание: Когда вы вводите фактическую строку в свой код, заключенную в одинарные или двойные кавычки, она называется строковым литералом.

+
+ +

Конкатенация строк в контексте

+ +

Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:

+ +
<button>Press me</button>
+ +
var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}

+ +

Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введенный текст внутри заданной переменной — в этом случае name. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной name.

+ +

Числа vs. строки

+ +
    +
  1. Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли: + 
    'Front ' + 242;
+
    + Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
    2. +
  2. Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув ее в кавычки. Попробуйте следующее (мы используем оператор typeof для того, чтобы установить является ли переменная числом или строкой): + 
    var myDate = '19' + '67';
+typeof myDate;
    +
    3. +
  3. Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции: +
      +
    • Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее: + 
      var myString = '123';
+var myNum = Number(myString);
+typeof myNum;
      +
      • +
    • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это: + 
      var myNum = 123;
+var myString = myNum.toString();
+typeof myString;
      +
      • +
    + Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через Number(), чтобы справиться с этим. Именно это мы сделали в нашей Number Guessing Game,  в строке 61.
    4. +
+ +

Заключение

+ +

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

+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/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 new file mode 100644 index 0000000000..1318ee39ac --- /dev/null +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,723 @@ +--- +title: Полезные строковые методы +slug: Learn/JavaScript/Первые_шаги/Useful_string_methods +tags: + - Beginner + - CodingScripting + - JavaScript + - Learn + - length + - lower + - replace + - split + - upper + - Обучение + - Регистр +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +

{{LearnSidebar}}

+ +

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

+ +

Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдем дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Задача:Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками.
+ +

Строки как объекты

+ +

Почти всё в JavaScript является объектами. Когда вы создаете строку, например: 

+ +
let string = 'This is my string';
+ +

ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!

+ +

Только не волнуйтесь! Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.

+ +

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

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Поиск длины строки

+ +

Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имен, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.

+ +

Получение определенного строкового символа

+ +

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

+ +
browserType[0];
+ +

Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length:

+ +
 browserType[browserType.length-1];
+ +

Длина слова «mozilla» равна 7, но, поскольку счет начинается с 0, позиция последнего символа равна 6, поэтому нам нужна length-1. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.

+ +

Поиск подстроки внутри строки и ее извлечение

+ +
    +
  1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите: + 
    browserType.indexOf('zilla');
    + Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
    2. +
+ +
    +
  1. Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: + 
    browserType.indexOf('vanilla');
    + Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
    +
    + Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания): + 
    if(browserType.indexOf('mozilla') === -1) {
+  // сделать что-то, если 'mozilla'
+  // не является частью этой строки
+}
+
+if(browserType.indexOf('mozilla') !== -1) {
+  // сделать что-то, если 'mozilla'
+  // является частью этой строки
+}
    +
    2. +
  2. Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}}  для извлечения. Попробуйте следующее: + 
    browserType.slice(0,3);
    + Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её (помним, что счет идёт с 0, а не с 1). Также можно сказать, что второй параметр равен длине возвращаемой строки.
    3. +
  3. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: + 
    browserType.slice(2);
    + Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.
    4. +
+ +
+

Примечание: второй параметр slice() не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу {{jsxref ("String.prototype.slice ()", "slice ()")}}, чтобы узнать, что ещё вы можете узнать.

+
+ +

Изменение регистра

+ +

Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введенные пользователем данные перед их сохранением в базе данных.

+ +

Попробуем ввести следующие строки, чтобы узнать, что происходит:

+ +
var radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Обновление частей строки

+ +

Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод {{jsxref ("String.prototype.replace ()", "replace ()")}}. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.

+ +

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:

+ +
browserType.replace('moz','van');
+ +

Обратите внимание, что для фактического получения обновленного значения, отраженного в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace('moz','van');

+ +

Активные примеры обучения

+ +

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

+ +

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

+ +

Фильтрация приветственных сообщений

+ +

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

+ +
    +
  1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
    2. +
  2. Затем вам нужно будет написать условный тест операнд1 оператор операнд2. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
    3. +
  3. Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определенному результату.
    4. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}

+ +

Исправление регистра (размера букв в тексте—прим. пер.)

+ +

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

+ +
    +
  1. Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните ее в новой переменной.
    2. +
  2. Возьмите первую букву строки в этой новой переменной и сохраните ее в другой переменной.
    3. +
  3. Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, измененной на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
    4. +
  4. Измените значение переменной result на равную конечному результату (не input).
    5. +
+ +
+

Примечание: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.

+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}

+ +

Создание новых строк из старых частей

+ +

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

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:

+ +
MAN: Manchester Piccadilly
+ +

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

+ +
    +
  1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
    2. +
  2. Найдите номер символьного номера точки с запятой.
    3. +
  3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
    4. +
  4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
    5. +
  5. Измените значение переменной result равной конечной строке (не input). 
    6. +
+ + + +

{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}

+ +

Заключение

+ +

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

+ +

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

+ +

В этом модуле

+ + diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..e1195effd5 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,372 @@ +--- +title: Переменные - место хранения необходимой информации +slug: Learn/JavaScript/Первые_шаги/Variables +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель:Ознакомиться с основами переменных в JavaScript.
+ +

Инструменты, которые вам нужны

+ +

В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).

+ +

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

+ +

Что такое переменные?

+ +

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

+ +
<button>Нажми на меня</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Как Вас зовут?');
+  alert('Привет ' + name + ', рады видеть Вас!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

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

+ +

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

+ +
var name = prompt('Как вас зовут?');
+
+if (name === 'Адам') {
+  alert('Привет, Адам, рады тебя видеть!');
+} else if (name === 'Алан') {
+  alert('Привет, Алан, рады тебя видеть!');
+} else if (name === 'Бэлла') {
+  alert('Привет, Бэлла, рады тебя видеть!');
+} else if (name === 'Бьянка') {
+  alert('Привет, Бьянка, рады тебя видеть!');
+} else if (name === 'Крис') {
+  alert('Привет, Крис, рады тебя видеть!');
+}
+
+// ... и так далее ...
+ +

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

+ +

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

+ +

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

+ +

Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.

+ +

+ +

Объявление переменной

+ +

Чтобы использовать переменную, вы сначала должны ее создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:

+ +
var myName;
+var myAge;
+ +

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

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +
+

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

+
+ +

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

+ +
myName;
+myAge;
+ +

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

+ +
scoobyDoo;
+ +
+

Заметка: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.

+
+ +

Присвоение значения переменной

+ +

Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (=), а за ним значение, которое вы хотите присвоить. Например:

+ +
myName = 'Chris';
+myAge = 37;
+ +

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

+ +
myName;
+myAge;
+ +

Вы можете объявить переменную и задать ей значение одновременно:

+ +
var myName = 'Chris';
+ +

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

+ +
+

Заметка: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задает значение) переменную, вы можете объявить ее после ее инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hoisting - прочитайте var hoisting для более подробной информации по этому вопросу.

+
+ +

Обновление переменной

+ +

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

+ +
myName = 'Bob';
+myAge = 40;
+ +

Правила именования переменных

+ +

Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.

+ + + +
+

Заметка: По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.

+
+ +

Примеры хороших имен переменных:

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+
+ +

Примеры плохих имен переменных:

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Примеры имен переменных, которые вызовут ошибки:

+ +
var
+Document
+
+ +

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

+ +

Типы переменных

+ +

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

+ +

Числа (Numbers)

+ +

Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:

+ +
var myAge = 17;
+ +

Строки ('Strings')

+ +

Строки - это фрагменты текста. Когда вы даете переменной значение строки, вам нужно обернуть ее в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать ее как другое имя переменной.

+ +
var dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Логические (Booleans)

+ +

Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:

+ +
var iAmAlive = true;
+ +

В действительности вы чаще будете использовать этот тип переменных так:

+ +
var test = 6 < 3;
+
+ +

Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернет false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.

+ +

Массивы (Arrays)

+ +

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

+ +
var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];
+ +

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

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

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

+ +

В следующей статье вы узнаете больше о массивах.

+ +

Объекты (Objects)

+ +

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

+ +

Попробуйте ввести следующую строку в консоль:

+ +
var dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

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

+ +
dog.name
+ +

Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.

+ +

Свободная типизация

+ +

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

+ +

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

+ +
var myString = 'Привет';
+ +

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

+ +
var myNumber = '500'; // упс, это все еще строка (string)
+typeof(myNumber);
+myNumber = 500; // так-то лучше, теперь это число (number)
+typeof(myNumber);
+ +

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

+ +

Подведение итогов

+ +

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

+ +

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}

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 new file mode 100644 index 0000000000..f34dac6902 --- /dev/null +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,339 @@ +--- +title: Что такое JavaScript? +slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}
+ +

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

+ + + + + + + + + + + + +
Необходимые навыки:Базовая компьютерная грамотность, знание основ HTML и CSS.
Цели:Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.
+ +

Определение высокого уровня

+ +

JavaScript это язык, который позволяет Вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

+ +

+ + + +

Три слоя прекрасно выстраиваются друг над другом. Возьмем простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

+ +
<p>Player 1: Chris</p>
+ +

+ +

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}
+ +

+ +

И наконец, добавим немного JavaScript для придания динамического поведения:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

{{ EmbedLiveSample('Определение_высокого_уровня', '100%', 80) }}

+ +

Попробуйте кликнуть по тексту чтобы увидеть, что произойдет (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

+ +

JavaScript может делать намного больше — давайте выясним это более детально.

+ +

Так что же он действительно может делать?

+ +

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

+ + + +

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

+ +

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

+ +

Они обычно делятся на две категории.

+ +

+ +

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:    

+ + + +
+

Заметка: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей,  для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

+
+ +

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

+ + + +
+

Заметка: Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.

+
+ +

Доступно еще больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

+ +

Что JavaScript делает на вашей странице?

+ +

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

+ +

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

+ +

+ +

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

+ +

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.  

+ +

Безопасность браузера

+ +

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

+ +
+

Заметка: Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.

+
+ +

Последовательность выполнения JavaScript

+ +

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

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

+ +

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — TypeError: para is undefined. Это значит, что объект para еще не существует и вы не можете добавить к нему обнаружение событий.

+ +
+

Заметка: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

+
+ +

Интерпретируемый против компилируемого кода

+ +

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

+ +

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

+ +

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

+ +

Серверный против клиентского кода

+ +

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

+ +

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Внутренний JavaScript

+ +
    +
  1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
    2. +
  2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу с активной кнопкой.
    3. +
  3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head>: + 
    <script>
+
+  // здесь будет JavaScript
+
+</script>
    +
    4. +
  4. Теперь добавим JavaScript внутрь элемента {{htmlelement("script")}}, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript": + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создается новый абзац и помещается ниже.
    6. +
+ +
+

Заметка: Если ваш пример не работает, пройдите еще раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как .html файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга </body>? Ввели ли вы JavaScript именно так, как показано? JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.

+
+ +
+

Заметка: Вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

+
+ +

Внешний JavaScript

+ +

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберемся с этим.

+ +
    +
  1. Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его script.js — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
    2. +
  2. Замените ваше текущий элемент {{htmlelement("script")}} на следующий: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Внутри script.js добавьте следующий скрипт: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.
    5. +
+ +
+

Заметка: Вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

+
+ +

Инлайновые JavaScript обработчики

+ +

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

+ +
+
function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

Вы можете попробовать эту версию в нашей демонстрации ниже:

+ +

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

+ +

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

+ +

Но пожалуйста, не делайте этого. Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут onclick="createParagraph()" к каждой кнопке, к которой вы хотите подключить JavaScript.

+ +

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

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

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

+ +
+

Заметка: Попробуйте отредактировать вашу версию apply-javascript.html и добавить еще несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

+
+ +

Стратегии загрузки скриптов

+ +

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

+ +

Комментарии

+ +

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернетесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

+ + + +

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

+ +
// Функция: создает новый параграф и добавляет его вниз тела HTML.
+
+function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Получаем ссылки на все кнопки на странице в виде массива.
+  2. Перебераем все кнопки и добавляем к ним отслеживатель события нажатия.
+
+  При нажатии любой кнопки, будет выполняться функция createParagraph().
+*/
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Выводы

+ +

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

+ +

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

+ +

{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/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 new file mode 100644 index 0000000000..dbb0a4577a --- /dev/null +++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,249 @@ +--- +title: Что пошло не так? Устранение ошибок JavaScript +slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_так +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}
+ +

Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

+ + + + + + + + + + + + +
+

Нужно:

+ 		базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цельполучить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.
+ +

Типы ошибок

+ +

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнетесь:

+ + + +

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

+ +

Ошибочный пример

+ +

Чтобы начать работу, давайте вернемся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

+ +
    +
  1. Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
    2. +
  2. Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!
    3. +
+ +
+

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

+
+ +

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

+ +

Исправление синтаксических ошибок

+ +

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

+ +
    +
  1. Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
    2. +
  2. Это довольно простая ошибка для отслеживания, и браузер дает вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть: +
      +
    • Красный «x» означает, что это ошибка.
      • +
    • Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
      • +
    • Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
      • +
    • Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдете по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
      • +
    • Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
      • +
    +
    3. +
  3. Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдем эту строку: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn имя-функции» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: addEventListener().
    5. +
  5. Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.
    6. +
+ +
+

Примечание: См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.

+
+ +

Синтаксические ошибки: второй раунд

+ +
+

Примечание: console.log() это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение lowOrHi в консоли, как только мы попытаемся установить его в строке 48.

+
+ +
    +
  1. Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
    2. +
  2. Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку! 
    3. +
  3. На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78. +
    Примечание: Null — это специальное значение, которое означает "ничего" или "не значение". Поэтому lowOrHi был объявлен и инициализирован без значения — у него нет типа или значения.
    + +
    Примечание: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри checkGuess() { ... } block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция checkGuess() не была запущена строкой 86.
    +
    4. +
  4. Посмотрите на строку 78, и вы увидите следующий код: + 
    lowOrHi.textContent = «Последнее предположение было слишком высоко!»;
    +
    5. +
  5. Эта строка пытается установить свойство textContent переменной lowOrHi как текстовую строку, но это не работает, поскольку lowOrHi не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры lowOrHi в коде. Самый ранний экземпляр, который вы найдете в JavaScript, находится в строке 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение  null после выполнения этой строки. Добавьте следующий код в строку 49: + 
    console.log(lowOrHi);
+
    +
    7. +
  7. Сохраните и обновите, и вы должны увидеть результат работы console.log() в консоли браузера. Разумеется, значение lowOrHi на данный момент равно null, поэтому определенно существует проблема в строке 48.
    8. +
  8. Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод document.querySelector() для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент <p>: + 
    <p class="lowOrHi"></p>
+
    +
    9. +
  9. Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод querySelector() в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить lowOrHi на .lowOrHi в строке 48.
    10. +
  10. Повторите попытку сохранения и обновления, и ваш вызов console.log() должен вернуть элемент <p>, который мы хотим. Уф! Еще одна ошибка исправлена! Вы можете удалить строку с  console.log() сейчас, или оставить для дальнейшего применения — выбирайте сами.
    11. +
+ +
+

Примечание: Загляните на справочную страницу TypeError: "x" is (not) "y", чтобы узнать больше об этой ошибке.

+
+ +

Синтаксические ошибки: третий раунд

+ +
    +
  1. Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
    2. +
  2. На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.
    3. +
  3. Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить addeventListener на addEventListener.
    4. +
+ +

Логическая ошибка

+ +

На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определенно не совсем так, как мы хотим, чтобы игра была разыграна!

+ +

Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

+ +
    +
  1. Найдем переменную randomNumber , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
+
    + И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры: + + 
    randomNumber = Math.floor(Math.random()) + 1;
+
    +
    2. +
  2. Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу console.log() снова — вставьте ее ниже строк с ошибками: + 
    console.log(randomNumber);
+
    +
    3. +
  3. Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что randomNumber равна 1 в каждой точке, где вы ее записали после строк с ошибками.
    4. +
+ +

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

+ +

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

+ +
Math.random()
+ +

Дальше, мы передаем результат вызова Math.random() через Math.floor(), который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:

+ +
Math.floor(Math.random()) + 1;
+ +

Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1.  Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернет нам случайное число между 0 и 99:

+ +
Math.floor(Math.random() * 100);
+ +

поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

+ +
Math.floor(Math.random() * 100) + 1;
+ +

А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

+ +

Другие распространенные ошибки

+ +

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

+ +

SyntaxError: отсутствует ; перед постановкой

+ +

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

+ +
var userGuess = Number(guessField.value);
+ +

на эту

+ +
var userGuess === Number(guessField.value);
+ +

Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (=), который присваивает значение переменной — с оператором сравнения (===), который строго сравнивает операнды, и возвращает true/false .

+ +
+

Примечание: Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

+
+ +

В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

+ +

Причиной этому является все то же перепутывание оператора присваивания (=) со строгим сравнением (===). Например, если мы изменим внутри checkGuess() эту строку кода:

+ +
if (userGuess === randomNumber) {
+ +

на эту

+ +
if (userGuess = randomNumber) {
+ +

мы всегда будем получать true, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

+ +

SyntaxError: отсутствует ) после списка аргументов

+ +

Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

+ +
+

Примечание: Загляните на справочную страницу  SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

+
+ +

SyntaxError: missing : after property id

+ +

Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить ее, изменив

+ +
function checkGuess() {
+ +

на

+ +
function checkGuess( {
+
+ +

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

+ +

SyntaxError: missing } after function body

+ +

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

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

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

+ +

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

+ +
+

Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершенная строка эталонных страниц для получения более подробной информации об этих ошибках.

+
+ +

Резюме

+ +

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

+ +

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

+ +
+ +
+ +

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

diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..fe97392371 --- /dev/null +++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,212 @@ +--- +title: Добавление функций в нашу демонстрацию отбойных шаров +slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

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

+ + + + + + + + + + + + +
Требования:Перед тем как приступить к этому упражнению нужно выполнить задания из всех статей текущего модуля.
Цель:Проверить насколько хорошо вы понимаете объекты и связанные с ними конструкции в языке Javascript. 
+ +

Начало

+ +

Для начала скопируйте файлы index-finished.html, style.css и main-finished.js из предыдущей статьи в новую директорию на вашем компьютере.

+ +

Для выполнения упражнения вы можете использовать сайт JSBin или Thimble. Вы можете вставлять HTML, CSS и JavaScript код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов <script>/<style>.

+ +
+

Примечание. Если у вас что-то не получается — попросите о помощи. Более подробная информация находится в секции {{anch("Assessment or further help")}} в конце этой страницы.

+
+ +

Краткое описание проекта

+ +

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

+ +

Следующий скриншот дает вам представление о том, как должна выглядеть готовая программа:

+ +

+ + + +

Чтобы дать вам больше идеи, посмотрите на законченный пример (не заглядывая в исходный код!)

+ +

Шаги по завершению

+ +

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

+ +

Создание наших новых объектов

+ +

Прежде всего, измените существующий конструктор Ball() так, чтобы он стал конструктором Shape() и добавил новый конструктор Ball():

+ +
    +
  1. Конструктор Shape() должен определять свойства x, y, velX и velY,  так же, как и конструктор Ball(), но не свойства color и size.
    2. +
  2. Он также должен определить новое свойствоexists, которое используется для отслеживания наличия шаров в программе (не было съедено злым кругом). Это должно быть логическое (true / false).
    3. +
  3. Конструктор Ball() должен наследовать свойства x, y, velX, velY и exists из конструктора Shape().
    4. +
  4. Он также должен определить свойство color и size, как это сделал оригинальный конструктор Ball().
    5. +
  5. Не забудьте установить prototype и constructor конструктора Ball() соответствующим образом.
    6. +
+ +

Определения меток шара draw(), update() и collisionDetect() должны быть такими же, как и раньше.

+ +

Вам также нужно добавить новый параметр в новый вызов конструктора new Ball() ( ... ) - параметр exists должен быть 5-м параметром и ему должно быть присвоено значение true.

+ +

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

+ +

Определение EvilCircle()

+ +

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

+ +

Конструктор EvilCircle() должен наследовать x, y, velX, velY и exists из Shape(), но velX и velY должны всегда равняться 20.

+ +

Вы должны сделать что-то вроде Shape.call(this, x, y, 20, 20, exists);

+ +

Он также должен определить свои собственные свойства следующим образом:

+ + + +

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

+ +

Defining EvilCircle()'s methods

+ +

EvilCircle() должен иметь четыре метода, как описано ниже.

+ +

draw()

+ +

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

+ + + +

checkBounds()

+ +

Этот метод будет делать то же самое, что и первая часть функции  Ball()'s update(), чтобы посмотреть, не исчезнет ли злой круг от края экрана и не прекратит это делать. Опять же, вы можете просто скопировать определение Ball.prototype.update, но есть несколько изменений, которые вы должны сделать:

+ + + +

setControls()

+ +

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

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

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

+ + + +

collisionDetect()

+ +

Этот метод будет действовать очень похоже на метод collisionDetect() в Ball(), поэтому вы можете использовать его в качестве основы для этого нового метода. Но есть несколько отличий:

+ + + +

Приведение злого круга в программу

+ +

Теперь мы определили злой круг, нам нужно на самом деле заставить его появиться на нашей сцене. Для этого вам нужно внести некоторые изменения в функцию loop().

+ + + +

Реализация счетчика баллов

+ +

Чтобы выполнить счетчик счетчиков, выполните следующие действия:

+ +
    +
  1. В своем HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».
    2. +
  2. В вашем файле CSS добавьте следующее правило внизу: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. В своем JavaScript сделайте следующие обновления: +
      +
    • Создайте переменную, которая хранит ссылку на абзац.
      • +
    • Держите подсчет количества шаров на экране в некотором роде.
      • +
    • Увеличьте количество и покажите обновленное количество шаров каждый раз, когда шар добавляется в сцену.
      • +
    • Уменьшите счет и покажите обновленное количество мячей каждый раз, когда злой круг ест шарик (его не существует).
      • +
    +
    4. +
+ +

Советы и подсказки

+ + + +

Assessment

+ +

Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю / наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему обсуждения для этого упражнения или в IRC-канале #mdn в Mozilla IRC. Сначала попробуйте упражнение - ничего не выиграть от обмана!

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ + + +

In this module

+ + + + + +
+ + +
+ +
+
diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..a4e7cc0071 --- /dev/null +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -0,0 +1,257 @@ +--- +title: Основы объектов в JavaScript +slug: Learn/JavaScript/Объекты/Основы +tags: + - JavaScript + - ООП +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые знания:Элементарная компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Структурные элементы).
Цель:Понимать основу теории перед началом объектно-ориентированного программирования, как это связано с JavaScript ("большинство сущностей являются объектами"), и как начать работу с объектами JavaScript.
+ +

Основы объектов

+ +

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

+ +

Чтобы начать, скопируйте себе oojs.html файл. В нём содержится очень мало: {{HTMLElement("script")}} элемент для написания в нём исходного кода. Мы будем использовать это как основу для изучения основ синтаксиса объектов. Во время работы с этим примером у вас должна быть открытая консоль JavaScript инструментов разработчика, готовая к вводу некоторых команд.

+ +

Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:

+ +
const person = {};
+ +

Если Вы введёте person в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:

+ +
Object { }
+ +

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

+ +
const person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:

+ +
person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

Теперь внутри объекта есть некоторые данные и функционал, и теперь можно получить доступ к ним с помощью некоторого лёгкого и простого синтаксиса!

+ +
+

Примечание: Если у вас возникли проблемы с применением файла в работе, попробуйте сравнить ваш код с нашей версией — см. oojs-finished.html (также see it running live). Одна из распространенных ошибок, когда Вы начинаете с объектами ставить запятую в конце последнего члена — это приводит к ошибке.

+
+ +

Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример name и age выше), и значение (пример ['Bob', 'Smith'] и 32). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:

+ +
const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};
+ +

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

+ +

Такие объекты называются литералами объекта (object literal) — мы буквально вписали все содержимое объекта для его создания. Этот способ сильно отличается от объектов реализованных классами, которые мы рассмотрим позже.

+ +

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

+ +

Точечная запись (Dot notation)

+ +

Выше Вы получили доступ к свойствам и методам используя точечную запись (dot notation). Имя объекта (person) действует как пространство имен (namespace) — оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (encapsulated) внутри объекта. Далее Вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Внутренние пространства имен (Sub-namespaces)

+ +

Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого

+ +
name: ['Bob', 'Smith'],
+ +

на такое

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

Здесь мы фактически создаем внутреннее пространство имен (sub-namespace). Это звучит сложно, но на самом деле это не так — для доступа к этим элементам Вам нужно сделать один дополнительный шаг с еще одной точкой. Попробуйте в консоли браузера следующее: 

+ +
person.name.first
+person.name.last
+ +

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

+ +
name[0]
+name[1]
+ +

на

+ +
name.first
+name.last
+ +

Иначе ваши методы больше не будут работать.

+ +

Скобочная запись (Bracket notation)

+ +

Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:

+ +
person.age
+person.name.first
+ +

Вы можете использовать следующий

+ +
person['age']
+person['name']['first']
+ +

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

+ +

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

+ +

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

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

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

+ +
person.age
+person['name']['last']
+ +

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

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

Теперь Вы можете проверить ваши новые элементы:

+ +
person['eyes']
+person.farewell()
+ +

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

+ +
let myDataName = nameInput.value;
+let myDataValue = nameValue.value;
+ +

Затем мы можем добавить имя и значение этого нового элемента в объект person таким образом:

+ +
person[myDataName] = myDataValue;
+ +

Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта person :

+ +
let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:

+ +
person.height
+ +

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

+ +

Что такое "this"?

+ +

Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

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

+ +

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

+ +
const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

В этом случае, person1.greeting() выведет "Hi! I'm Chris.". person2.greeting(), с другой стороны, выведет "Hi! I'm Brian.", хотя код метода одинаковый в обоих случаях. Как мы сказали ранее, this равен объекту, внутри которого находится код — это не очень полезно, когда Вы пишите литералы объектов вручную, но оно действительно помогает, когда Вы генерируете объекты динамически (например используя конструкторы). Это станет понятнее чуть позже.

+ +

Все это время вы использовали объекты

+ +

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

+ +

Поэтому, когда Вы использовали строковые методы, такие как:

+ +
myString.split(',');
+ +

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

+ +

Когда Вы обращались к объектной модели документа (DOM), используя следующие строки:

+ +
const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');
+ +

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

+ +

То же самое относится и к любому другому встроенному объекту/API, который вы использовали — Array, Math, и т. д.

+ +

Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, Notifications API — который позволяет новым браузерам запускать системные уведомления, требует, чтобы Вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое Вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:

+ +
const myNotification = new Notification('Hello!');
+ +

Опять же, мы рассмотрим конструкторы в следующей статье.

+ +
+

Примечание: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждет ответа, который мы знаем как возвращаемое (return) значение.

+
+ +

Резюме

+ +

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

+ +

В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (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 new file mode 100644 index 0000000000..9acc354feb --- /dev/null +++ b/files/ru/learn/javascript/objects/index.html @@ -0,0 +1,47 @@ +--- +title: Введение в объекты JavaScript +slug: Learn/JavaScript/Объекты +tags: + - JavaScript + - Начинающим + - Объекты + - Руководства +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

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

+ +

Необходимые знания

+ +

Перед тем, как начать изучение данного модуля, Вы должны иметь некоторое представление о HTML и CSS. Мы советуем Вам поработать над разделами Введение в HTML и Введение в CSS перед изучением этого модуля JavaScript.

+ +

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

+ +
+

Примечание: Если Вы работаете за компьютером/планшетом/другим устройством, на котором у Вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как JSBin or Thimble.

+
+ +

Руководства

+ +
+
Основы объектов
+
В первой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторый функционал JavaScript, который мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функционала, с которым мы уже столкнулись, в действительности является объектами.
+
Объектно-ориентированный JavaScript для начинающих
+
Закончив с основами, мы сфокусируемся на объектно-ориентированном JavaScript (OOJS) —  эта статья представляет основы теории объектно-ориентированного программирования (ООП). Затем мы изучим, как JavaScript эмулирует классы объектов через конструктор функций, и как создавать экземпляры объектов.
+
Прототипы объектов
+
Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функционал друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.
+
Наследование в JavaScript
+
После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерные" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
+
Работа с JSON-данными
+
Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.
+
Практика построения объектов
+
В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав Вам твердую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что веселое и красочное - несколько цветных прыгающих шариков.
+
+ +

Задания

+ +
+
Добавление функционала к демо с прыгающими шариками
+
В этом задании, мы ожидаем, что Вы, используя демо с прыгающими шариками из предыдущей статьи как отправную точку, добавите немного нового и интересного функционала в него.
+
diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..c1565cd72f --- /dev/null +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,266 @@ +--- +title: Наследование в JavaScript +slug: Learn/JavaScript/Объекты/Inheritance +tags: + - JavaScript + - Наследование + - ООП +translation_of: Learn/JavaScript/Objects/Inheritance +--- +

+ +

+ + + +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+ +

Теперь, когда объясняется большая часть подробностей OOJS, эта статья показывает, как создавать «дочерние» классы объектов (конструкторы), которые наследуют признаки из своих «родительских» классов. Кроме того, мы дадим некоторые советы о том, когда и где вы можете использовать OOJS , и посмотрим, как классы рассматриваются в современном синтаксисе ECMAScript.

+ + + + + + + + + + + + +
Необходимые знания: +

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

+
Цель:Понять, как можно реализовать наследование в JavaScript.
+ +

Прототипное наследование

+ +

До сих пор мы видели некоторое наследование в действии - мы видели, как работают прототипы и как элементы наследуются, поднимаясь по цепочке. Но в основном это связано с встроенными функциями браузера. Как создать объект в JavaScript, который наследует от другого объекта?

+ +

Давайте рассмотрим, как это сделать на конкретном примере.

+ +

Начало работы

+ +

Прежде всего сделайте себе локальную копию нашего файла oojs-class-inheritance-start.html (он также работает в режиме реального времени). В файле вы найдете тот же пример конструктора Person(), который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:

+ +
function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};
+ +

Все методы определены в прототипе конструктора. Например:

+ +
Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};
+ +
+

Примечание. В исходном коде вы также увидите определенные методы bio() и farewell(). Позже вы увидите, как они могут быть унаследованы другими конструкторами.

+
+ +

Скажем так, мы хотели создать класс Teacher, подобный тому, который мы описали в нашем первоначальном объектно-ориентированном определении, которое наследует всех членов от Person, но также включает в себя:

+ +
    +
  1. Новое свойство, subject - оно будет содержать предмет, который преподает учитель.
    2. +
  2. Обновленный метод greeting(), который звучит немного более формально, чем стандартный метод greeting()— более подходит для учителя, обращающегося к некоторым ученикам в школе.
    3. +
+ +

Определение функции-конструктора Teacher()

+ +

Первое, что нам нужно сделать, это создать конструктор Teacher() - добавьте ниже следующий код:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}
+ +

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

+ +

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

+ +

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

+ +

В качестве примечания мы могли бы просто сделать это:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}
+ +

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

+ +

Наследование от конструктора без параметров

+ +

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

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Вы можете наследовать свойства width и height, выполнив это (как и другие шаги, описанные ниже, конечно):

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Обратите внимание, что мы указали только this внутри call() - никаких других параметров не требуется, поскольку мы не наследуем никаких свойств родителя, которые задаются через параметры.

+ +

Установка Teacher()'s prototype и конструктор ссылок

+ +

Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство prototype, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства prototype конструктора Person. Чтобы увидеть это, введите Object.getOwnPropertyNames(Teacher.prototype) в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив Teacher на Person. Новый конструктор не наследует эти методы. Чтобы увидеть это, сравните выводы в консоль Person.prototype.greeting и Teacher.prototype.greeting. Нам нужно заставить Teacher() наследовать методы, определенные на прототипе Person(). Итак, как мы это делаем?

+ +
    +
  1. Добавьте следующую строку ниже своего предыдущего добавления: + 
    Teacher.prototype = Object.create(Person.prototype);
    + Здесь наш друг create() снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением Teacher.prototype. Новый объект имеет свой прототип Person.prototype и, следовательно, наследует, если и когда это необходимо, все доступные методы Person.prototype.
    2. +
  2. Нам нужно сделать еще одну вещь, прежде чем двигаться дальше. После добавления последней строки, Teacher.prototype.constructor стало равным Person(), потому что мы просто устанавливаем Teacher.prototype для ссылки на объект, который наследует его свойства от Person.prototype! Попробуйте сохранить код, загрузите страницу в браузере и введите Teacher.prototype.constructor в консоль для проверки.
    3. +
  3. Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу: + 
    Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
+    writable: true });
    +
    4. +
  4. Теперь, если вы сохраните и обновите, введите Teacher.prototype.constructor, чтобы вернуть Teacher(), плюс мы теперь наследуем Person()!
    5. +
+ +

Предоставление Teacher() новой функции greeting()

+ +

Чтобы завершить наш код, нам нужно определить новую функцию greeting() в конструкторе Teacher().

+ +

Самый простой способ сделать это - определить его на прототипе Teacher() - добавить в нижнюю часть кода следующее:

+ +
Teacher.prototype.greeting = function() {
+  var prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Mrs.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};
+ +

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

+ +

Попробуйте пример

+ +

Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из Teacher(), поставив ниже вашего JavaScript кода (или что-то похожее по вашему выбору):

+ +
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+ +

Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта teacher1, например:

+ +
teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();
+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

Дальнейшее упражнение

+ +

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

+ +
+

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

+
+ +

Object member summary

+ +

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

+ +
    +
  1. Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определенные внутри конструктора, используя строки this.x = x; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путем вызова конструктора с использованием ключевого слова new, например var myInstance = new myConstructor ().
    2. +
  2. Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путем непосредственной привязки к конструктору, а не к экземпляру. Например, Object.keys().
    3. +
  3. Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определенный в свойстве прототипа конструктора, например. myConstructor.prototype.x().
    4. +
+ +

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

+ +

Когда вы используете наследование в JavaScript?

+ +

В частности, после этой последней статьи вы можете подумать: «У-у-у, это сложно». Ну, ты прав. Прототипы и наследование представляют собой некоторые из самых сложных аспектов JavaScript, но многие возможности и гибкость JavaScript вытекают из его структуры объектов и наследования и стоит понять, как это работает.

+ +

В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определенные во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

Резюме

+ +

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

+ +

В следующей статье мы рассмотрим, как работать с JavaScript Object Notation (JSON), общим форматом обмена данными, написанным с использованием объектов JavaScript.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..371f254ec6 --- /dev/null +++ b/files/ru/learn/javascript/objects/json/index.html @@ -0,0 +1,353 @@ +--- +title: Работа с JSON +slug: Learn/JavaScript/Объекты/JSON +tags: + - Beginner + - JSON + - JavaScript +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS  (see Introduction to objects).
Цель:Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.
+ +

Нет, действительно, что такое JSON?

+ +

{{glossary("JSON")}} - текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

+ +

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

+ +
+

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

+
+ +

Объект JSON может быть сохранен в собственном файле, который в основном представляет собой текстовый файл с расширением .json и {{glossary("MIME type")}} application/json.

+ +

Структура JSON

+ +

Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и  в стандартном объекте JavaScript - строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes, мы могли бы затем получить доступ к данным внутри нее, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

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

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Сначала у нас есть имя переменной - superHeroes.
    2. +
  2. Внутри мы хотим получить доступ к свойству members, поэтому мы используем ['members'].
    3. +
  3. members содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1].
    4. +
  4. Внутри этого объекта мы хотим получить доступ к свойству powers, поэтому мы используем ['powers'].
    5. +
  5. Внутри свойства powers находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем [2].
    6. +
+ +
+

Примечание. Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

+
+ +

Массивы как JSON

+ +

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

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например [0]["powers"][0].

+ +

Другие примечания

+ + + +

Активное обучение: Работа с примером JSON

+ +

Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.

+ +

Начало работы

+ +

Для начала создайте локальные копии наших файлов heroes.html и style.css. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Плюс {{HTMLElement("script")}}, чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы {{HTMLElement("header")}} и {{HTMLElement("section")}} и сохраняют их в переменных:

+ +
var header = document.querySelector('header');
+var section = document.querySelector('section');
+ +

Мы предоставили данные JSON на нашем GitHub, на https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:

+ +

+ +

Получение JSON

+ +

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

+ +
    +
  1. Начнем с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: + 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора XMLHttpRequest, используя ключевое слово new. Добавьте следующую ниже свою последнюю строку: + 
    var request = new XMLHttpRequest();
    +
    3. +
  3. Теперь нам нужно открыть новый запрос, используя метод open(). Добавьте следующую строку: + 
    request.open('GET', requestURL);
    + +

    Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужно только два обязательных для этого простого примера:

    + +
      +
    • Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
      • +
    • URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.
      • +
    +
    4. +
  4. Затем добавьте следующие две строки: здесь мы устанавливаем responseType в JSON, так что XHR знает, что сервер будет возвращать JSON и, что это должно быть преобразовано за кулисами в объект JavaScript. Затем мы отправляем запрос методом send(): + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. Последний бит этого раздела предполагает ожидание ответа на возврат с сервера, а затем работы с ним. Добавьте следующий код ниже вашего предыдущего кода: + 
    request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response) в переменной superHeroes; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в <section>.

+ +

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая  таким образом,это гарантия того, что request.response определенно будет доступен, когда мы начнем работу с ним.

+ +

Заполнение заголовка

+ +

Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:

+ +
function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

Мы назвали параметр jsonObj, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент {{HTMLElement("h1")}} с createElement(), устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild(). Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown, так и formed свойства объекта.

+ +

Создание информационных карт героя

+ +

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

+ +
function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i < heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j < superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

+ +

Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

+ +
    +
  1. Создаем несколько новых элементов: <article>, <h2>, три <p> и <ul>.
    2. +
  2. Установливаем <h2>, чтобы содержать name текущего героя.
    3. +
  3. Заполняем три абзаца своей secretIdentity, age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
    4. +
  4. Сохраняем свойство powers в другой новой переменной под названием superPowers - где содержится массив, в котором перечислены сверхспособности текущего героя.
    5. +
  5. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
    6. +
  6. Последнее, что мы делаем, это добавляем <h2>, <p> и <ul> внутри <article> (myArticle), а затем добавляем <article> в <section>. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.
    7. +
+ +
+

Примечание. Если вам не удается заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

+
+ +
+

Примечание. Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла superheroes.json на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье JavaScript objectbasics чтобы получить дополнительную информацию о нотации точек и скобок.

+
+ +

Преобразование между объектами и текстом

+ +

Вышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

+ +
request.responseType = 'json';
+ +

Но иногда нам не так везет - иногда мы получаем сырую строку JSON и нам нужно  преобразовать ее в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно  преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода:

+ + + +

Вы можете увидеть первый метод в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) - это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется parse(), чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

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

+ +
var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString
+ +

Здесь мы создаем объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя stringify() , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.

+ +

Резюме

+ +

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

+ +

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

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

В этом модуле

+ + + +
+ + +
+ +
+
diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..0299268a90 --- /dev/null +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,286 @@ +--- +title: Объектно-ориентированный JavaScript для начинающих +slug: Learn/JavaScript/Объекты/Object-oriented_JS +tags: + - Constructor + - Create + - JavaScript + - OOJS + - Object + - Новичку + - ООП + - экземпляр +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья дает базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.

+ + + + + + + + + + + + +
Необходимые знания: +

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

+
Цель:Понять основную теорию объектно-ориентированного программирования, как это относится к JavaScript («все является объектом») и как создавать конструкторы и экземпляры объектов.
+ +

Объектно-ориентированное программирование: основы

+ +

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

+ +

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

+ +

Определение шаблона объекта

+ +

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

+ +

Вернёмся к объекту Person из нашей статьи Основы объектов, который определяет общие сведения и функциональные возможности человека. Есть много вещей, которые вы можете узнать о человеке (его адрес, рост, размер обуви, профиль ДНК, номер паспорта, значимые черты личности ...), но в данном случае нас интересует только имя, возраст, пол и интересы, а также мы хотим иметь возможность написать краткую информацию о нём, основываясь на этих данных, и сделать так, чтобы он поздоровался. Это известно как абстракция — создание простой модели более сложной сущности, которая представляет её наиболее важные аспекты таким образом, чтобы с ней было удобно работать для выполнения целей нашей программы.

+ +

+ +

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

+ +

Создание реальных объектов

+ +

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

+ +

+ +

Когда экземпляр объекта создается из класса, для его создания выполняется функция-конструктор класса. Этот процесс создания экземпляра объекта из класса называется создание экземпляра (instantiation) — из класса создается экземпляр объекта.

+ +

Специализированные классы

+ +

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

+ +

+ +

Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имен. Например, приветствие студента может быть в форме "Yo, I'm [firstName]" (например Yo, I'm Sam), в то время как учитель может использовать что-то более формальное, такое как "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (например Hello, My name is Mr Griffiths, and I teach Chemistry).

+ +
+

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

+
+ +

Теперь вы можете создавать экземпляры объекта из дочерних классов. Например:

+ +

+ +

Далее мы рассмотрим, как ООП теорию можно применить на практике в JavaScript.

+ +

Конструкторы и экземпляры объектов

+ +

JavaScript использует специальные функции, называемые функциями конструктора (constructor functions) для определения объектов и их свойств. Они полезны, потому что вы часто будете сталкиваться с ситуациями, в которых не известно, сколько объектов вы будете создавать; конструкторы позволяют создать столько объектов, сколько нужно эффективным способом, прикреплением данных и функций для объектов по мере необходимости.

+ +

Рассмотрим создание классов через конструкторы и создание экземпляров объектов из них в JavaScript. Прежде всего, мы хотели бы, чтобы вы создали новую локальную копию файла oojs.html, который мы видели в нашей первой статье «Объекты».

+ +

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

+ +
    +
  1. Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент script: + + 
    function createNewPerson(name) {
+  const obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Теперь вы можете создать нового человека, вызвав эту функцию - попробуйте следующие строки в консоли JavaScript браузера: + 
    const salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();
    + Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов - давайте сделаем это сейчас!
    3. +
  3. Замените предыдущую функцию следующей: + 
    function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
    +
    4. +
+ +

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

+ +
+

Примечание: Имя функции конструктора обычно начинается с заглавной буквы - это соглашение используется для упрощения распознавания функций конструктора в коде.

+
+ +

Итак, как мы вызываем конструктор для создания некоторых объектов?

+ +
    +
  1. Добавьте следующие строки под предыдущим добавлением кода: + 
    let person1 = new Person('Bob');
+let person2 = new Person('Sarah');
    +
    2. +
  2. Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS: + 
    person1.name
+person1.greeting()
+person2.name
+person2.greeting()
    +
    3. +
+ +

Круто! Теперь, как вы видите, у нас есть два новых объекта на странице, каждый из которых хранится в отдельном пространстве имен - при доступе к их свойствам и методам вы должны начинать вызовы с person1 или person2; функциональность, содержащаяся внутри, аккуратно упакована, поэтому она не будет конфликтовать с другими функциями. Тем не менее, у них есть одно и то же свойство name и greeting(). Обратите внимание, что они используют свое собственное значение name, которое было присвоено им, когда они были созданы; это одна из причин, почему очень важно использовать this, таким образом они будут использовать свои собственные значения, а не какие-либо другие.

+ +

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

+ +
let person1 = new Person('Bob');
+let person2 = new Person('Sarah');
+ +

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

+ +
function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
+ +

После создания новых объектов переменные person1 и person2 содержат следующие объекты:

+ +
{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

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

+ +

Создавая наш готовый конструктор

+ +

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

+ +
    +
  1. Замените весь предыдущий код новой функцией конструктора - это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее: + 
    function Person(first, last, age, gender, interests) {
+  this.name = {
+    first : first,
+    last: last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+};
    +
    2. +
  2. Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него: + 
    let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    +
    3. +
+ +

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

+ +
person1['age']
+person1.interests[1]
+person1.bio()
+// etc.
+ +
Примечание: Если у Вас возникли проблемы с работой кода, попробуйте сравнить его с нашей версией - см. oojs-class-finished.html (также смотрите, как он работает в прямом эфире).
+ +

Дальнейшие упражнения

+ +

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

+ +

Кроме того, есть несколько проблем с нашим методом bio() - вывод всегда включает местоимение «He» ("Он" в пер. с англ.), даже если ваш человек является женщиной или какой-либо другой предпочтительной гендерной классификацией. И bio будет включать только два интереса, даже если в массиве interests указано больше. Можете ли Вы решить, как исправить это в определении класса (конструкторе)? Вы можете поместить любой код, который вам нравится внутри конструктора (вам, вероятно, понадобятся несколько условий и цикл). Подумайте о том, как предложения должны быть структурированы по-разному в зависимости от пола и в зависимости от того, имеет ли число перечисленных интересов 1, 2 или более 2.

+ +
+

Примечание: Если у Вас возникли трудности с решением задачи, мы предоставили ответ в нашем репозитории GitHub (см. это в действии) — но сначала попробуйте написать сами!

+
+ +

Другие способы создания экземпляров объектов

+ +

До сих пор мы видели два разных способа создания экземпляра объекта - объявление объектного литерала и использование функции конструктора (см. выше).

+ +

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

+ +

Конструктор Object ()

+ +

Прежде всего, вы можете использовать конструктор Object() для создания нового объекта. Да, даже общие объекты имеют конструктор, который генерирует пустой объект.

+ +
    +
  1. Попробуйте ввести это в консоль JavaScript вашего браузера: + 
    let person1 = new Object();
    +
    2. +
  2. Это сохраняет ссылку на пустой объект в переменную person1. Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли: + 
    person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};
    +
    3. +
  3. Вы также можете передать литерал объекта конструктору Object() в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS: + 
    let person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});
    +
    4. +
+ +

Использование метода create()

+ +

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

+ +

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

+ +
    +
  1. Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript: + 
    let person2 = Object.create(person1);
    +
    2. +
  2. Теперь попробуйте: + 
    person2.name
+person2.greeting()
    +
    3. +
+ +

Вы увидите, что person2 был создан на основе person1 - он имеет те же свойства и метод, доступные для него.

+ +

Одно ограничение метода create() заключается в том, что IE8 не поддерживает его. Поэтому конструкторы могут быть более эффективными, если вы хотите поддерживать старые браузеры.

+ +

Подробнее мы рассмотрим особенности метода create() немного позже.

+ +

Сводка

+ +

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

+ +

В следующей статье мы рассмотрим прототипы объектов JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..b06b769ca4 --- /dev/null +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,302 @@ +--- +title: Практика построения объектов +slug: Learn/JavaScript/Объекты/Object_building_practice +tags: + - Guide + - JavaScript +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

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

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (see First steps and Building blocks) и основами OOJS (см. Introduction to objects).
Цель:Получение некоторой практики в использовании объектов и объектно-ориентированных методов в реальном мире.
+ +

Давайте подбросим несколько мячей

+ +

В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в JavaScript. Наши маленькие шары будут подпрыгивать на экране и менять цвет, когда они касаются друг друга. Готовый пример будет выглядеть примерно так:

+ +

+ +
    +
+ +

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

+ +

Начало работы

+ +

Для начала создайте локальные копии наших файловindex.html, style.css и main.js. Они содержат следующее:

+ +
    +
  1. Очень простой HTML-документ, содержащий элемент {{HTMLElement("h1")}}, элемент {{HTMLElement("canvas")}} для рисования наших шаров и элементы для применения нашего CSS и JavaScript в нашем HTML.
    2. +
  2. Некоторые очень простые стили, которые в основном служат для стилизации и позиционирования <h1>, и избавляются от любых полос прокрутки или отступы по краю страницы (так что это выглядит красиво и аккуратно).
    3. +
  3. Некоторые JavaScript, которые служат для настройки элемента <canvas> и предоставляют общую функцию, которую мы собираемся использовать.
    4. +
+ +

Первая часть скрипта выглядит так:

+ +
var canvas = document.querySelector('canvas');
+
+var ctx = canvas.getContext('2d');
+
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;
+ +

Этот скрипт получает ссылку на элемент <canvas>, а затем вызывает метод getContext(), чтобы дать нам контекст, по которому мы можем начать рисовать. Результирующая переменная (ctx) - это объект, который непосредственно представляет область рисования холста и позволяет рисовать на ней 2D-фигуры.

+ +

Затем мы устанавливаем переменные, называемые width и height, а также ширину и высоту элемента canvas (представленные свойствами canvas.width и canvas.height), чтобы равняться ширине и высоте окна просмотра браузера (область, на которой отображается веб-страница - это можно получить из свойств {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}).

+ +

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

+ +

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

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Эта функция принимает два числа в качестве аргументов и возвращает случайное число в диапазоне между ними.

+ +

Моделирование мяча в нашей программе

+ +

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

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+ +

Здесь мы включаем некоторые параметры, которые определяют свойства, которым должен соответствовать каждый шар в нашей программе:

+ + + +

Этим мы сортируем свойства, но что насчет методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.

+ +

Рисование шара

+ +

Сначала добавьте следующий метод draw() к Ball()'s prototype:

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

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

+ + + +

Теперь вы можете начать тестирование своего объекта..

+ +
    +
  1. Сохраните код и загрузите HTML-файл в браузер.
    2. +
  2. Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.
    3. +
  3. Чтобы создать новый экземпляр шара, введите следующее: + 
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Попробуйте вызвать его свойства и методы: + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. После введения последней строки, вы должны увидеть, как мяч нарисовался где-то на вашем холсте.
    6. +
+ +

Обновление данных мяча

+ +

Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод update() к Ball()'s prototype:

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

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

+ +

В этих четырех случаях мы:

+ + + +

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

+ +

Последние две строки добавляют значение velX к координате x, а значение velY - координате y - шар фактически перемещается при каждом вызове этого метода.

+ +

На сейчас этого достаточно, давайте продолжим анимацию!

+ +

Анимация мяча

+ +

Теперь давайте приступать к веселью! Сейчас мы начнем добавлять шары к холсту и анимировать их.

+ +
    +
  1. Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода: + 
    var balls = [];
    + +

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

    +
    2. +
  2. Добавьте ниже эту часть кода: + 
    function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length < 25) {
+    var ball = new Ball(
+      random(0,width),
+      random(0,height),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      random(10,20)
+    );
+    balls.push(ball);
+  }
+
+  for (var i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
    + +

    Наша функция loop() выполняет следующие действия:

    + +
      +
    • Устанавливает цвет заливки на полупрозрачный черный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя fillRect() (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, rgba(0,0,0,0,25), чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
      • +
    • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысячь шаров, это может довольно существенно повлиять на производительность анимации. 
      • +
    • перебирает все шары в массиве balls и запускает каждую функцию draw() и update() для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
      • +
    • Выполняет функцию снова с помощью метода requestAnimationFrame() - когда этот метод постоянно запускается и передается одно и то же имя функции, он будет запускать эту функцию определенное количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.
      • +
    +
    3. +
  3. И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию. + 
    loop();
    +
    4. +
+ +

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

+ +

Добавление обнаружения столкновений

+ +

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

+ +
    +
  1. Прежде всего, добавьте следующее определение метода ниже, где вы определили метод update() (т.е. блок Ball.prototype.update). + + 
    Ball.prototype.collisionDetect = function() {
+  for (var j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      var dx = this.x - balls[j].x;
+      var dy = this.y - balls[j].y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:

    + +
      +
    • Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем еще один цикл for  через все шары в массиве balls[].
      • +
    • Сразу же в нашем цикле for мы используем оператор if, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем ! чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они не совпадают.
      • +
    • Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее 2D collision detection.
      • +
    • Если обнаружено столкновение, выполняется код внутри внутреннего оператора if. В этом случае мы просто устанавливаем свойство color обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как PhysicsJS, matter.js, Phaser и т.д.
      • +
    +
    2. +
  2. Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки balls[i].update(); + 
    balls[i].collisionDetect();
    +
    3. +
  3. Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!
    4. +
+ +
+

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

+
+ +

Резюме

+ +

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

+ +

Вот и все для предметных статей - все, что осталось сейчас, - это проверить свои навыки в оценке объекта.

+ +

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

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..0a76580d9c --- /dev/null +++ b/files/ru/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,285 @@ +--- +title: Прототипы объектов +slug: Learn/JavaScript/Объекты/Object_prototypes +tags: + - JavaScript + - create() + - Конструктор + - Начинающий + - ООП + - Обучение + - Обьект + - Статья + - прототип +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +
Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга. В этой статье мы объясним, как работают цепочки прототипов, и рассмотрим, как свойство prototype можно использовать для добавления методов к существующим конструкторам.
+ +
+ + + + + + + + + + + + +
Необходимые знания: +

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

+
Цель: +

Понять прототипы объектов JavaScript, как работают прототипные цепочки и как добавить новые методы в prototype свойство.

+
+ +

Язык основанный на прототипах?

+ +

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

+ +

Точнее, свойства и методы определяются в свойстве prototype функции-конструктора объектов, а не в самих объектах.

+ +

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

+ +
+

Примечание: Важно понимать, что существует различие между прототипом объекта (который доступен через Object.getPrototypeOf(obj) или через устаревшее свойство __proto__) и свойством prototype в функциях-конструкторах. Первое свойство является свойством каждого экземпляра, а второе - свойством конструктора. То есть Object.getPrototypeOf(new Foobar()) относится к тому же объекту, что и Foobar.prototype.

+
+ +

Давайте посмотрим на пример, чтобы стало понятнее.

+ +

Понимание прототипа объектов

+ +

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

+ +

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

+ +
function Person(first, last, age, gender, interests) {
+
+  // Определения методов и свойств
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  //...см. Введение в объекты для полного определения
+}
+ +

Затем мы создаём экземпляр объекта следующим образом:

+ +
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
+ +

Если вы наберете «person1.» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:

+ +

+ +

В этом списке вы увидите элементы, определенные в конструкторе person 1 — Person() — name, age, gender, interests, bio, и greeting. Однако вы также увидите некоторые другие элементы — watch, valueOfи т. д. — они определены в объекте прототипа Person (), который является Object.

+ +

+ +

Итак, что произойдет, если вы вызываете метод в person1, который фактически определен в Object? Например:

+ +
person1.valueOf()
+ +

Этот метод — Object.valueOf()наследуется person1, потому что его конструктором является Person(), а прототипом Person() является Object(). valueOf() возвращает значение вызываемого объекта — попробуйте и убедитесь! В этом случае происходит следующее:

+ + + +
+

Примечание: Мы хотим повторить, что методы и свойства не копируются из одного объекта в другой в цепочке прототипов - к ним обращаются, поднимаясь по цепочке, как описано выше.

+
+ +
+

Примечание: Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом [[prototype]] в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием __proto__ (это 2 подчеркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте person1.__proto__ и person1.__proto__.__proto__, чтобы увидеть, как выглядит цепочка в коде!

+ +

С ECMAScript 2015 вы можете косвенно обращаться к объекту прототипа объекта Object.getPrototypeOf (obj).

+
+ +

Свойство prototype: Где определены унаследованные экземпляры

+ +

Итак, где определены наследуемые свойства и методы? Если вы посмотрите на страницу со ссылкой Object, вы увидите в левой части большое количество свойств и методов - это намного больше, чем количество унаследованных членов, доступных для объекта person1. Некоторые из них унаследованы, а некоторые нет - почему это?

+ +

Как упоминалось выше, наследованные свойства это те, что определены в свойстве prototype (вы можете называть это подпространством имен), то есть те, которые начинаются с Object.prototype., а не те, которые начинаются с простого Object. Значение свойства prototype - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.

+ +

Таким образом Object.prototype.watch(), Object.prototype.valueOf() и т. д. доступны для любых типов объектов, которые наследуются от Object.prototype, включая новые экземпляры объектов, созданные из конструктора Person() .

+ +

Object.is(), Object.keys() и другие члены, не определенные в контейнере prototype, не наследуются экземплярами объектов или типами объектов, которые наследуются от Object.prototype. Это методы / свойства, доступные только в конструкторе Object().

+ +
+

Примечание: Это кажется странным - как у вас есть метод, определенный для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор Function(), если вы нам не верите.

+
+ +
    +
  1. Вы можете проверить существующие свойства прототипа для себя - вернитесь к нашему предыдущему примеру и попробуйте ввести следующее в консоль JavaScript: + 
    Person.prototype
    +
    2. +
  2. Результат покажет вам не много, ведь мы ничего не определили в прототипе нашего конструктора! По умолчанию prototype конструктора всегда пуст. Теперь попробуйте следующее: + 
    Object.prototype
    +
    3. +
+ +

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

+ +

Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определенные на прототипе глобальных объектов String, Date, Number и Array, например. Все они имеют несколько элементов, определенных на их прототипе, поэтому, например, когда вы создаете строку, вот так:

+ +
var myString = 'This is my string.';
+ +

В myString сразу есть множество полезных методов, таких как split(), indexOf(), replace() и т. д.

+ +
+

Важно: Свойство prototype является одной из наиболее противоречивых названий частей JavaScript - вы можете подумать, что this указывает на объект прототипа текущего объекта, но это не так (это внутренний объект, к которому можно получить доступ __proto__, помните ?). prototype вместо этого - свойство, содержащее объект, на котором вы определяете членов, которые вы хотите наследовать.

+
+ +

Снова create()

+ +

Ранее мы показали, как метод Object.create() может использоваться для создания нового экземпляра объекта.

+ +
    +
  1. Например, попробуйте это в консоли JavaScript предыдущего примера: + 
    var person2 = Object.create(person1);
    +
    2. +
  2. На самом деле create()создает новый объект из указанного объекта-прототипа. Здесь person2 создается с помощью person1 в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее: + 
    person2.__proto__
    +
    3. +
+ +

Это вернет объект person1.

+ +

Свойство constructor

+ +

Каждая функция-конструктор имеет свойство prototype, значением которого является объект, содержащий свойство constructor. Это свойство constructor указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определенные в свойстве Person.prototype (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор Person(). Следовательно, свойство конструктора также доступно для объектов person1 и person2.

+ +
    +
  1. Например, попробуйте эти команды в консоли: + 
    person1.constructor
+person2.constructor
    + +

    Они должны возвращать конструктор Person(), поскольку он содержит исходное определение этих экземпляров.

    + +

    Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства constructor (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому ее можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово new, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.

    +
    2. +
  2. Попробуйте это в консоли: + 
    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    +
    3. +
  3. Теперь попробуйте получить доступ к функциям вашего нового объекта, например: + 
    person3.name.first
+person3.age
+person3.bio()
    +
    4. +
+ +

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

+ +

Свойство constructor имеет другие применения. Например, если у вас есть экземпляр объекта и вы хотите вернуть имя конструктора этого экземпляра, вы можете использовать следующее:

+ +
instanceName.constructor.name
+ +

Например, попробуйте это:

+ +
person1.constructor.name
+
+ +
+

Примечание: Значение constructor.name может измениться (из-за прототипического наследования, привязки, препроцессоров, транспилеров и т. д.), Поэтому для более сложных примеров вы захотите использовать оператор instanceof.

+
+ +
    +
+ +

Изменение прототипов

+ +

Давайте рассмотрим пример изменения свойства prototype функции-конструктора — методы, добавленные в прототип, затем доступны для всех экземпляров объектов, созданных из конструктора.

+ +
    +
  1. Вернитесь к нашему примеру oojs-class-further-exercises.html и создайте локальную копию исходного кода. Ниже существующего JavaScript добавьте следующий код, который добавляет новый метод в свойство prototype конструктора: + + 
    Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};
    +
    2. +
  2. Сохраните код и загрузите страницу в браузере и попробуйте ввести следующее в текстовый ввод: + 
    person1.farewell();
    +
    3. +
+ +

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

+ +

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

+ +
function Person(first, last, age, gender, interests) {
+
+  // определения свойств и методов
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};
+ +

Но метод farewell() по-прежнему доступен в экземпляре объекта person1 - его элементы были автоматически обновлены, чтобы включить недавно определенный метод farewell().

+ +
+

Примечание: Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример oojs-class-prototype.html (см. также это running live).

+
+ +

Вы редко увидите свойства, определенные в свойстве prototype, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:

+ +
Person.prototype.fullName = 'Bob Smith';
+ +

Это не очень гибко, так как человека нельзя назвать так. Было бы намного лучше сделать это, создав fullName из name.first и name.last:

+ +
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+ +

Однако это не работает, поскольку в этом случае this будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернет undefined undefined. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.

+ +

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

+ +
// Определение конструктора и его свойств
+
+function Test(a, b, c, d) {
+  // определение свойств...
+}
+
+// Определение первого метода
+
+Test.prototype.x = function() { ... };
+
+// Определение второго метода
+
+Test.prototype.y = function() { ... };
+
+//...и так далее
+ +

Этот образец можно увидеть в действии в примере приложения плана школы Петра Залевы.

+ +

Резюме

+ +

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

+ +

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

+ +

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

+ + + +

В этом модуле

+ + diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/adding_bouncing_balls_features/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/adding_bouncing_balls_features/index.html" deleted file mode 100644 index fe97392371..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/adding_bouncing_balls_features/index.html" +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Добавление функций в нашу демонстрацию отбойных шаров -slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
Требования:Перед тем как приступить к этому упражнению нужно выполнить задания из всех статей текущего модуля.
Цель:Проверить насколько хорошо вы понимаете объекты и связанные с ними конструкции в языке Javascript. 
- -

Начало

- -

Для начала скопируйте файлы index-finished.html, style.css и main-finished.js из предыдущей статьи в новую директорию на вашем компьютере.

- -

Для выполнения упражнения вы можете использовать сайт JSBin или Thimble. Вы можете вставлять HTML, CSS и JavaScript код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов <script>/<style>.

- -
-

Примечание. Если у вас что-то не получается — попросите о помощи. Более подробная информация находится в секции {{anch("Assessment or further help")}} в конце этой страницы.

-
- -

Краткое описание проекта

- -

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

- -

Следующий скриншот дает вам представление о том, как должна выглядеть готовая программа:

- -

- - - -

Чтобы дать вам больше идеи, посмотрите на законченный пример (не заглядывая в исходный код!)

- -

Шаги по завершению

- -

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

- -

Создание наших новых объектов

- -

Прежде всего, измените существующий конструктор Ball() так, чтобы он стал конструктором Shape() и добавил новый конструктор Ball():

- -
    -
  1. Конструктор Shape() должен определять свойства x, y, velX и velY,  так же, как и конструктор Ball(), но не свойства color и size.
    2. -
  2. Он также должен определить новое свойствоexists, которое используется для отслеживания наличия шаров в программе (не было съедено злым кругом). Это должно быть логическое (true / false).
    3. -
  3. Конструктор Ball() должен наследовать свойства x, y, velX, velY и exists из конструктора Shape().
    4. -
  4. Он также должен определить свойство color и size, как это сделал оригинальный конструктор Ball().
    5. -
  5. Не забудьте установить prototype и constructor конструктора Ball() соответствующим образом.
    6. -
- -

Определения меток шара draw(), update() и collisionDetect() должны быть такими же, как и раньше.

- -

Вам также нужно добавить новый параметр в новый вызов конструктора new Ball() ( ... ) - параметр exists должен быть 5-м параметром и ему должно быть присвоено значение true.

- -

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

- -

Определение EvilCircle()

- -

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

- -

Конструктор EvilCircle() должен наследовать x, y, velX, velY и exists из Shape(), но velX и velY должны всегда равняться 20.

- -

Вы должны сделать что-то вроде Shape.call(this, x, y, 20, 20, exists);

- -

Он также должен определить свои собственные свойства следующим образом:

- - - -

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

- -

Defining EvilCircle()'s methods

- -

EvilCircle() должен иметь четыре метода, как описано ниже.

- -

draw()

- -

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

- - - -

checkBounds()

- -

Этот метод будет делать то же самое, что и первая часть функции  Ball()'s update(), чтобы посмотреть, не исчезнет ли злой круг от края экрана и не прекратит это делать. Опять же, вы можете просто скопировать определение Ball.prototype.update, но есть несколько изменений, которые вы должны сделать:

- - - -

setControls()

- -

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

- -
var _this = this;
-window.onkeydown = function(e) {
-    if (e.keyCode === 65) {
-      _this.x -= _this.velX;
-    } else if (e.keyCode === 68) {
-      _this.x += _this.velX;
-    } else if (e.keyCode === 87) {
-      _this.y -= _this.velY;
-    } else if (e.keyCode === 83) {
-      _this.y += _this.velY;
-    }
-  }
- -

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

- - - -

collisionDetect()

- -

Этот метод будет действовать очень похоже на метод collisionDetect() в Ball(), поэтому вы можете использовать его в качестве основы для этого нового метода. Но есть несколько отличий:

- - - -

Приведение злого круга в программу

- -

Теперь мы определили злой круг, нам нужно на самом деле заставить его появиться на нашей сцене. Для этого вам нужно внести некоторые изменения в функцию loop().

- - - -

Реализация счетчика баллов

- -

Чтобы выполнить счетчик счетчиков, выполните следующие действия:

- -
    -
  1. В своем HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».
    2. -
  2. В вашем файле CSS добавьте следующее правило внизу: - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. В своем JavaScript сделайте следующие обновления: -
      -
    • Создайте переменную, которая хранит ссылку на абзац.
      • -
    • Держите подсчет количества шаров на экране в некотором роде.
      • -
    • Увеличьте количество и покажите обновленное количество шаров каждый раз, когда шар добавляется в сцену.
      • -
    • Уменьшите счет и покажите обновленное количество мячей каждый раз, когда злой круг ест шарик (его не существует).
      • -
    -
    4. -
- -

Советы и подсказки

- - - -

Assessment

- -

Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю / наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему обсуждения для этого упражнения или в IRC-канале #mdn в Mozilla IRC. Сначала попробуйте упражнение - ничего не выиграть от обмана!

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- - - -

In this module

- - - - - -
- - -
- -
-
diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/index.html" deleted file mode 100644 index 9acc354feb..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Введение в объекты JavaScript -slug: Learn/JavaScript/Объекты -tags: - - JavaScript - - Начинающим - - Объекты - - Руководства -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

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

- -

Необходимые знания

- -

Перед тем, как начать изучение данного модуля, Вы должны иметь некоторое представление о HTML и CSS. Мы советуем Вам поработать над разделами Введение в HTML и Введение в CSS перед изучением этого модуля JavaScript.

- -

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

- -
-

Примечание: Если Вы работаете за компьютером/планшетом/другим устройством, на котором у Вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как JSBin or Thimble.

-
- -

Руководства

- -
-
Основы объектов
-
В первой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторый функционал JavaScript, который мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функционала, с которым мы уже столкнулись, в действительности является объектами.
-
Объектно-ориентированный JavaScript для начинающих
-
Закончив с основами, мы сфокусируемся на объектно-ориентированном JavaScript (OOJS) —  эта статья представляет основы теории объектно-ориентированного программирования (ООП). Затем мы изучим, как JavaScript эмулирует классы объектов через конструктор функций, и как создавать экземпляры объектов.
-
Прототипы объектов
-
Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функционал друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.
-
Наследование в JavaScript
-
После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерные" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
-
Работа с JSON-данными
-
Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.
-
Практика построения объектов
-
В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав Вам твердую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что веселое и красочное - несколько цветных прыгающих шариков.
-
- -

Задания

- -
-
Добавление функционала к демо с прыгающими шариками
-
В этом задании, мы ожидаем, что Вы, используя демо с прыгающими шариками из предыдущей статьи как отправную точку, добавите немного нового и интересного функционала в него.
-
diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/inheritance/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/inheritance/index.html" deleted file mode 100644 index c1565cd72f..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/inheritance/index.html" +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Наследование в JavaScript -slug: Learn/JavaScript/Объекты/Inheritance -tags: - - JavaScript - - Наследование - - ООП -translation_of: Learn/JavaScript/Objects/Inheritance ---- -

- -

- - - -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
- -

Теперь, когда объясняется большая часть подробностей OOJS, эта статья показывает, как создавать «дочерние» классы объектов (конструкторы), которые наследуют признаки из своих «родительских» классов. Кроме того, мы дадим некоторые советы о том, когда и где вы можете использовать OOJS , и посмотрим, как классы рассматриваются в современном синтаксисе ECMAScript.

- - - - - - - - - - - - -
Необходимые знания: -

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

-
Цель:Понять, как можно реализовать наследование в JavaScript.
- -

Прототипное наследование

- -

До сих пор мы видели некоторое наследование в действии - мы видели, как работают прототипы и как элементы наследуются, поднимаясь по цепочке. Но в основном это связано с встроенными функциями браузера. Как создать объект в JavaScript, который наследует от другого объекта?

- -

Давайте рассмотрим, как это сделать на конкретном примере.

- -

Начало работы

- -

Прежде всего сделайте себе локальную копию нашего файла oojs-class-inheritance-start.html (он также работает в режиме реального времени). В файле вы найдете тот же пример конструктора Person(), который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:

- -
function Person(first, last, age, gender, interests) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-};
- -

Все методы определены в прототипе конструктора. Например:

- -
Person.prototype.greeting = function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-};
- -
-

Примечание. В исходном коде вы также увидите определенные методы bio() и farewell(). Позже вы увидите, как они могут быть унаследованы другими конструкторами.

-
- -

Скажем так, мы хотели создать класс Teacher, подобный тому, который мы описали в нашем первоначальном объектно-ориентированном определении, которое наследует всех членов от Person, но также включает в себя:

- -
    -
  1. Новое свойство, subject - оно будет содержать предмет, который преподает учитель.
    2. -
  2. Обновленный метод greeting(), который звучит немного более формально, чем стандартный метод greeting()— более подходит для учителя, обращающегося к некоторым ученикам в школе.
    3. -
- -

Определение функции-конструктора Teacher()

- -

Первое, что нам нужно сделать, это создать конструктор Teacher() - добавьте ниже следующий код:

- -
function Teacher(first, last, age, gender, interests, subject) {
-  Person.call(this, first, last, age, gender, interests);
-
-  this.subject = subject;
-}
- -

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

- -

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

- -

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

- -

В качестве примечания мы могли бы просто сделать это:

- -
function Teacher(first, last, age, gender, interests, subject) {
-  this.name = {
-    first,
-    last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.subject = subject;
-}
- -

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

- -

Наследование от конструктора без параметров

- -

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

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Вы можете наследовать свойства width и height, выполнив это (как и другие шаги, описанные ниже, конечно):

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Обратите внимание, что мы указали только this внутри call() - никаких других параметров не требуется, поскольку мы не наследуем никаких свойств родителя, которые задаются через параметры.

- -

Установка Teacher()'s prototype и конструктор ссылок

- -

Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство prototype, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства prototype конструктора Person. Чтобы увидеть это, введите Object.getOwnPropertyNames(Teacher.prototype) в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив Teacher на Person. Новый конструктор не наследует эти методы. Чтобы увидеть это, сравните выводы в консоль Person.prototype.greeting и Teacher.prototype.greeting. Нам нужно заставить Teacher() наследовать методы, определенные на прототипе Person(). Итак, как мы это делаем?

- -
    -
  1. Добавьте следующую строку ниже своего предыдущего добавления: - 
    Teacher.prototype = Object.create(Person.prototype);
    - Здесь наш друг create() снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением Teacher.prototype. Новый объект имеет свой прототип Person.prototype и, следовательно, наследует, если и когда это необходимо, все доступные методы Person.prototype.
    2. -
  2. Нам нужно сделать еще одну вещь, прежде чем двигаться дальше. После добавления последней строки, Teacher.prototype.constructor стало равным Person(), потому что мы просто устанавливаем Teacher.prototype для ссылки на объект, который наследует его свойства от Person.prototype! Попробуйте сохранить код, загрузите страницу в браузере и введите Teacher.prototype.constructor в консоль для проверки.
    3. -
  3. Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу: - 
    Object.defineProperty(Teacher.prototype, 'constructor', {
-    value: Teacher,
-    enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
-    writable: true });
    -
    4. -
  4. Теперь, если вы сохраните и обновите, введите Teacher.prototype.constructor, чтобы вернуть Teacher(), плюс мы теперь наследуем Person()!
    5. -
- -

Предоставление Teacher() новой функции greeting()

- -

Чтобы завершить наш код, нам нужно определить новую функцию greeting() в конструкторе Teacher().

- -

Самый простой способ сделать это - определить его на прототипе Teacher() - добавить в нижнюю часть кода следующее:

- -
Teacher.prototype.greeting = function() {
-  var prefix;
-
-  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
-    prefix = 'Mr.';
-  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
-    prefix = 'Mrs.';
-  } else {
-    prefix = 'Mx.';
-  }
-
-  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
-};
- -

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

- -

Попробуйте пример

- -

Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из Teacher(), поставив ниже вашего JavaScript кода (или что-то похожее по вашему выбору):

- -
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
- -

Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта teacher1, например:

- -
teacher1.name.first;
-teacher1.interests[0];
-teacher1.bio();
-teacher1.subject;
-teacher1.greeting();
-teacher1.farewell();
- -

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

- -
-

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

-
- -

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

- -

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

- -

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

- -

Дальнейшее упражнение

- -

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

- -
-

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

-
- -

Object member summary

- -

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

- -
    -
  1. Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определенные внутри конструктора, используя строки this.x = x; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путем вызова конструктора с использованием ключевого слова new, например var myInstance = new myConstructor ().
    2. -
  2. Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путем непосредственной привязки к конструктору, а не к экземпляру. Например, Object.keys().
    3. -
  3. Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определенный в свойстве прототипа конструктора, например. myConstructor.prototype.x().
    4. -
- -

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

- -

Когда вы используете наследование в JavaScript?

- -

В частности, после этой последней статьи вы можете подумать: «У-у-у, это сложно». Ну, ты прав. Прототипы и наследование представляют собой некоторые из самых сложных аспектов JavaScript, но многие возможности и гибкость JavaScript вытекают из его структуры объектов и наследования и стоит понять, как это работает.

- -

В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определенные во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.

- -

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

- -
-

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

-
- -

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

- -

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

- -

Резюме

- -

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

- -

В следующей статье мы рассмотрим, как работать с JavaScript Object Notation (JSON), общим форматом обмена данными, написанным с использованием объектов JavaScript.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/json/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/json/index.html" deleted file mode 100644 index 371f254ec6..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/json/index.html" +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Работа с JSON -slug: Learn/JavaScript/Объекты/JSON -tags: - - Beginner - - JSON - - JavaScript -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS  (see Introduction to objects).
Цель:Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.
- -

Нет, действительно, что такое JSON?

- -

{{glossary("JSON")}} - текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

- -

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

- -
-

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

-
- -

Объект JSON может быть сохранен в собственном файле, который в основном представляет собой текстовый файл с расширением .json и {{glossary("MIME type")}} application/json.

- -

Структура JSON

- -

Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и  в стандартном объекте JavaScript - строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes, мы могли бы затем получить доступ к данным внутри нее, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

- -
superHeroes.homeTown
-superHeroes['active']
- -

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

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Сначала у нас есть имя переменной - superHeroes.
    2. -
  2. Внутри мы хотим получить доступ к свойству members, поэтому мы используем ['members'].
    3. -
  3. members содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1].
    4. -
  4. Внутри этого объекта мы хотим получить доступ к свойству powers, поэтому мы используем ['powers'].
    5. -
  5. Внутри свойства powers находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем [2].
    6. -
- -
-

Примечание. Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

-
- -

Массивы как JSON

- -

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

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например [0]["powers"][0].

- -

Другие примечания

- - - -

Активное обучение: Работа с примером JSON

- -

Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.

- -

Начало работы

- -

Для начала создайте локальные копии наших файлов heroes.html и style.css. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Плюс {{HTMLElement("script")}}, чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы {{HTMLElement("header")}} и {{HTMLElement("section")}} и сохраняют их в переменных:

- -
var header = document.querySelector('header');
-var section = document.querySelector('section');
- -

Мы предоставили данные JSON на нашем GitHub, на https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:

- -

- -

Получение JSON

- -

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

- -
    -
  1. Начнем с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: - 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора XMLHttpRequest, используя ключевое слово new. Добавьте следующую ниже свою последнюю строку: - 
    var request = new XMLHttpRequest();
    -
    3. -
  3. Теперь нам нужно открыть новый запрос, используя метод open(). Добавьте следующую строку: - 
    request.open('GET', requestURL);
    - -

    Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужно только два обязательных для этого простого примера:

    - -
      -
    • Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
      • -
    • URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.
      • -
    -
    4. -
  4. Затем добавьте следующие две строки: здесь мы устанавливаем responseType в JSON, так что XHR знает, что сервер будет возвращать JSON и, что это должно быть преобразовано за кулисами в объект JavaScript. Затем мы отправляем запрос методом send(): - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. Последний бит этого раздела предполагает ожидание ответа на возврат с сервера, а затем работы с ним. Добавьте следующий код ниже вашего предыдущего кода: - 
    request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response) в переменной superHeroes; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в <section>.

- -

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая  таким образом,это гарантия того, что request.response определенно будет доступен, когда мы начнем работу с ним.

- -

Заполнение заголовка

- -

Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

Мы назвали параметр jsonObj, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент {{HTMLElement("h1")}} с createElement(), устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild(). Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown, так и formed свойства объекта.

- -

Создание информационных карт героя

- -

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

- -
function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
-
-  for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    var superPowers = heroes[i].powers;
-    for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

- -

Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

- -
    -
  1. Создаем несколько новых элементов: <article>, <h2>, три <p> и <ul>.
    2. -
  2. Установливаем <h2>, чтобы содержать name текущего героя.
    3. -
  3. Заполняем три абзаца своей secretIdentity, age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
    4. -
  4. Сохраняем свойство powers в другой новой переменной под названием superPowers - где содержится массив, в котором перечислены сверхспособности текущего героя.
    5. -
  5. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
    6. -
  6. Последнее, что мы делаем, это добавляем <h2>, <p> и <ul> внутри <article> (myArticle), а затем добавляем <article> в <section>. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.
    7. -
- -
-

Примечание. Если вам не удается заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

-
- -
-

Примечание. Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла superheroes.json на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье JavaScript objectbasics чтобы получить дополнительную информацию о нотации точек и скобок.

-
- -

Преобразование между объектами и текстом

- -

Вышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

- -
request.responseType = 'json';
- -

Но иногда нам не так везет - иногда мы получаем сырую строку JSON и нам нужно  преобразовать ее в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно  преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода:

- - - -

Вы можете увидеть первый метод в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) - это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется parse(), чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  var superHeroesText = request.response; // get the string from the response
-  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

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

- -
var myJSON = { "name": "Chris", "age": "38" };
-myJSON
-var myString = JSON.stringify(myJSON);
-myString
- -

Здесь мы создаем объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя stringify() , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.

- -

Резюме

- -

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

- -

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

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

В этом модуле

- - - -
- - -
- -
-
diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object-oriented_js/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object-oriented_js/index.html" deleted file mode 100644 index 0299268a90..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object-oriented_js/index.html" +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Объектно-ориентированный JavaScript для начинающих -slug: Learn/JavaScript/Объекты/Object-oriented_JS -tags: - - Constructor - - Create - - JavaScript - - OOJS - - Object - - Новичку - - ООП - - экземпляр -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья дает базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.

- - - - - - - - - - - - -
Необходимые знания: -

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

-
Цель:Понять основную теорию объектно-ориентированного программирования, как это относится к JavaScript («все является объектом») и как создавать конструкторы и экземпляры объектов.
- -

Объектно-ориентированное программирование: основы

- -

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

- -

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

- -

Определение шаблона объекта

- -

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

- -

Вернёмся к объекту Person из нашей статьи Основы объектов, который определяет общие сведения и функциональные возможности человека. Есть много вещей, которые вы можете узнать о человеке (его адрес, рост, размер обуви, профиль ДНК, номер паспорта, значимые черты личности ...), но в данном случае нас интересует только имя, возраст, пол и интересы, а также мы хотим иметь возможность написать краткую информацию о нём, основываясь на этих данных, и сделать так, чтобы он поздоровался. Это известно как абстракция — создание простой модели более сложной сущности, которая представляет её наиболее важные аспекты таким образом, чтобы с ней было удобно работать для выполнения целей нашей программы.

- -

- -

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

- -

Создание реальных объектов

- -

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

- -

- -

Когда экземпляр объекта создается из класса, для его создания выполняется функция-конструктор класса. Этот процесс создания экземпляра объекта из класса называется создание экземпляра (instantiation) — из класса создается экземпляр объекта.

- -

Специализированные классы

- -

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

- -

- -

Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имен. Например, приветствие студента может быть в форме "Yo, I'm [firstName]" (например Yo, I'm Sam), в то время как учитель может использовать что-то более формальное, такое как "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (например Hello, My name is Mr Griffiths, and I teach Chemistry).

- -
-

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

-
- -

Теперь вы можете создавать экземпляры объекта из дочерних классов. Например:

- -

- -

Далее мы рассмотрим, как ООП теорию можно применить на практике в JavaScript.

- -

Конструкторы и экземпляры объектов

- -

JavaScript использует специальные функции, называемые функциями конструктора (constructor functions) для определения объектов и их свойств. Они полезны, потому что вы часто будете сталкиваться с ситуациями, в которых не известно, сколько объектов вы будете создавать; конструкторы позволяют создать столько объектов, сколько нужно эффективным способом, прикреплением данных и функций для объектов по мере необходимости.

- -

Рассмотрим создание классов через конструкторы и создание экземпляров объектов из них в JavaScript. Прежде всего, мы хотели бы, чтобы вы создали новую локальную копию файла oojs.html, который мы видели в нашей первой статье «Объекты».

- -

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

- -
    -
  1. Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент script: - - 
    function createNewPerson(name) {
-  const obj = {};
-  obj.name = name;
-  obj.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Теперь вы можете создать нового человека, вызвав эту функцию - попробуйте следующие строки в консоли JavaScript браузера: - 
    const salva = createNewPerson('Salva');
-salva.name;
-salva.greeting();
    - Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов - давайте сделаем это сейчас!
    3. -
  3. Замените предыдущую функцию следующей: - 
    function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
    -
    4. -
- -

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

- -
-

Примечание: Имя функции конструктора обычно начинается с заглавной буквы - это соглашение используется для упрощения распознавания функций конструктора в коде.

-
- -

Итак, как мы вызываем конструктор для создания некоторых объектов?

- -
    -
  1. Добавьте следующие строки под предыдущим добавлением кода: - 
    let person1 = new Person('Bob');
-let person2 = new Person('Sarah');
    -
    2. -
  2. Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS: - 
    person1.name
-person1.greeting()
-person2.name
-person2.greeting()
    -
    3. -
- -

Круто! Теперь, как вы видите, у нас есть два новых объекта на странице, каждый из которых хранится в отдельном пространстве имен - при доступе к их свойствам и методам вы должны начинать вызовы с person1 или person2; функциональность, содержащаяся внутри, аккуратно упакована, поэтому она не будет конфликтовать с другими функциями. Тем не менее, у них есть одно и то же свойство name и greeting(). Обратите внимание, что они используют свое собственное значение name, которое было присвоено им, когда они были созданы; это одна из причин, почему очень важно использовать this, таким образом они будут использовать свои собственные значения, а не какие-либо другие.

- -

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

- -
let person1 = new Person('Bob');
-let person2 = new Person('Sarah');
- -

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

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

После создания новых объектов переменные person1 и person2 содержат следующие объекты:

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

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

- -

Создавая наш готовый конструктор

- -

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

- -
    -
  1. Замените весь предыдущий код новой функцией конструктора - это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее: - 
    function Person(first, last, age, gender, interests) {
-  this.name = {
-    first : first,
-    last: last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-};
    -
    2. -
  2. Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него: - 
    let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
    3. -
- -

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

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
Примечание: Если у Вас возникли проблемы с работой кода, попробуйте сравнить его с нашей версией - см. oojs-class-finished.html (также смотрите, как он работает в прямом эфире).
- -

Дальнейшие упражнения

- -

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

- -

Кроме того, есть несколько проблем с нашим методом bio() - вывод всегда включает местоимение «He» ("Он" в пер. с англ.), даже если ваш человек является женщиной или какой-либо другой предпочтительной гендерной классификацией. И bio будет включать только два интереса, даже если в массиве interests указано больше. Можете ли Вы решить, как исправить это в определении класса (конструкторе)? Вы можете поместить любой код, который вам нравится внутри конструктора (вам, вероятно, понадобятся несколько условий и цикл). Подумайте о том, как предложения должны быть структурированы по-разному в зависимости от пола и в зависимости от того, имеет ли число перечисленных интересов 1, 2 или более 2.

- -
-

Примечание: Если у Вас возникли трудности с решением задачи, мы предоставили ответ в нашем репозитории GitHub (см. это в действии) — но сначала попробуйте написать сами!

-
- -

Другие способы создания экземпляров объектов

- -

До сих пор мы видели два разных способа создания экземпляра объекта - объявление объектного литерала и использование функции конструктора (см. выше).

- -

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

- -

Конструктор Object ()

- -

Прежде всего, вы можете использовать конструктор Object() для создания нового объекта. Да, даже общие объекты имеют конструктор, который генерирует пустой объект.

- -
    -
  1. Попробуйте ввести это в консоль JavaScript вашего браузера: - 
    let person1 = new Object();
    -
    2. -
  2. Это сохраняет ссылку на пустой объект в переменную person1. Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли: - 
    person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-};
    -
    3. -
  3. Вы также можете передать литерал объекта конструктору Object() в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS: - 
    let person1 = new Object({
-  name: 'Chris',
-  age: 38,
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
    -
    4. -
- -

Использование метода create()

- -

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

- -

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

- -
    -
  1. Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript: - 
    let person2 = Object.create(person1);
    -
    2. -
  2. Теперь попробуйте: - 
    person2.name
-person2.greeting()
    -
    3. -
- -

Вы увидите, что person2 был создан на основе person1 - он имеет те же свойства и метод, доступные для него.

- -

Одно ограничение метода create() заключается в том, что IE8 не поддерживает его. Поэтому конструкторы могут быть более эффективными, если вы хотите поддерживать старые браузеры.

- -

Подробнее мы рассмотрим особенности метода create() немного позже.

- -

Сводка

- -

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

- -

В следующей статье мы рассмотрим прототипы объектов JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_building_practice/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_building_practice/index.html" deleted file mode 100644 index b06b769ca4..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_building_practice/index.html" +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Практика построения объектов -slug: Learn/JavaScript/Объекты/Object_building_practice -tags: - - Guide - - JavaScript -translation_of: Learn/JavaScript/Objects/Object_building_practice ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (see First steps and Building blocks) и основами OOJS (см. Introduction to objects).
Цель:Получение некоторой практики в использовании объектов и объектно-ориентированных методов в реальном мире.
- -

Давайте подбросим несколько мячей

- -

В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в JavaScript. Наши маленькие шары будут подпрыгивать на экране и менять цвет, когда они касаются друг друга. Готовый пример будет выглядеть примерно так:

- -

- -
    -
- -

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

- -

Начало работы

- -

Для начала создайте локальные копии наших файловindex.html, style.css и main.js. Они содержат следующее:

- -
    -
  1. Очень простой HTML-документ, содержащий элемент {{HTMLElement("h1")}}, элемент {{HTMLElement("canvas")}} для рисования наших шаров и элементы для применения нашего CSS и JavaScript в нашем HTML.
    2. -
  2. Некоторые очень простые стили, которые в основном служат для стилизации и позиционирования <h1>, и избавляются от любых полос прокрутки или отступы по краю страницы (так что это выглядит красиво и аккуратно).
    3. -
  3. Некоторые JavaScript, которые служат для настройки элемента <canvas> и предоставляют общую функцию, которую мы собираемся использовать.
    4. -
- -

Первая часть скрипта выглядит так:

- -
var canvas = document.querySelector('canvas');
-
-var ctx = canvas.getContext('2d');
-
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;
- -

Этот скрипт получает ссылку на элемент <canvas>, а затем вызывает метод getContext(), чтобы дать нам контекст, по которому мы можем начать рисовать. Результирующая переменная (ctx) - это объект, который непосредственно представляет область рисования холста и позволяет рисовать на ней 2D-фигуры.

- -

Затем мы устанавливаем переменные, называемые width и height, а также ширину и высоту элемента canvas (представленные свойствами canvas.width и canvas.height), чтобы равняться ширине и высоте окна просмотра браузера (область, на которой отображается веб-страница - это можно получить из свойств {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}).

- -

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

- -

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

- -
function random(min, max) {
-  var num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Эта функция принимает два числа в качестве аргументов и возвращает случайное число в диапазоне между ними.

- -

Моделирование мяча в нашей программе

- -

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

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
-}
- -

Здесь мы включаем некоторые параметры, которые определяют свойства, которым должен соответствовать каждый шар в нашей программе:

- - - -

Этим мы сортируем свойства, но что насчет методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.

- -

Рисование шара

- -

Сначала добавьте следующий метод draw() к Ball()'s prototype:

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

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

- - - -

Теперь вы можете начать тестирование своего объекта..

- -
    -
  1. Сохраните код и загрузите HTML-файл в браузер.
    2. -
  2. Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.
    3. -
  3. Чтобы создать новый экземпляр шара, введите следующее: - 
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Попробуйте вызвать его свойства и методы: - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. После введения последней строки, вы должны увидеть, как мяч нарисовался где-то на вашем холсте.
    6. -
- -

Обновление данных мяча

- -

Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод update() к Ball()'s prototype:

- -
Ball.prototype.update = function() {
-  if ((this.x + this.size) >= width) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.x - this.size) <= 0) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.y + this.size) >= height) {
-    this.velY = -(this.velY);
-  }
-
-  if ((this.y - this.size) <= 0) {
-    this.velY = -(this.velY);
-  }
-
-  this.x += this.velX;
-  this.y += this.velY;
-}
- -

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

- -

В этих четырех случаях мы:

- - - -

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

- -

Последние две строки добавляют значение velX к координате x, а значение velY - координате y - шар фактически перемещается при каждом вызове этого метода.

- -

На сейчас этого достаточно, давайте продолжим анимацию!

- -

Анимация мяча

- -

Теперь давайте приступать к веселью! Сейчас мы начнем добавлять шары к холсту и анимировать их.

- -
    -
  1. Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода: - 
    var balls = [];
    - -

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

    -
    2. -
  2. Добавьте ниже эту часть кода: - 
    function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  while (balls.length < 25) {
-    var ball = new Ball(
-      random(0,width),
-      random(0,height),
-      random(-7,7),
-      random(-7,7),
-      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-      random(10,20)
-    );
-    balls.push(ball);
-  }
-
-  for (var i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
    - -

    Наша функция loop() выполняет следующие действия:

    - -
      -
    • Устанавливает цвет заливки на полупрозрачный черный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя fillRect() (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, rgba(0,0,0,0,25), чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
      • -
    • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысячь шаров, это может довольно существенно повлиять на производительность анимации. 
      • -
    • перебирает все шары в массиве balls и запускает каждую функцию draw() и update() для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
      • -
    • Выполняет функцию снова с помощью метода requestAnimationFrame() - когда этот метод постоянно запускается и передается одно и то же имя функции, он будет запускать эту функцию определенное количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.
      • -
    -
    3. -
  3. И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию. - 
    loop();
    -
    4. -
- -

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

- -

Добавление обнаружения столкновений

- -

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

- -
    -
  1. Прежде всего, добавьте следующее определение метода ниже, где вы определили метод update() (т.е. блок Ball.prototype.update). - - 
    Ball.prototype.collisionDetect = function() {
-  for (var j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      var dx = this.x - balls[j].x;
-      var dy = this.y - balls[j].y;
-      var distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
-      }
-    }
-  }
-}
    - -

    Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:

    - -
      -
    • Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем еще один цикл for  через все шары в массиве balls[].
      • -
    • Сразу же в нашем цикле for мы используем оператор if, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем ! чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они не совпадают.
      • -
    • Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее 2D collision detection.
      • -
    • Если обнаружено столкновение, выполняется код внутри внутреннего оператора if. В этом случае мы просто устанавливаем свойство color обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как PhysicsJS, matter.js, Phaser и т.д.
      • -
    -
    2. -
  2. Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки balls[i].update(); - 
    balls[i].collisionDetect();
    -
    3. -
  3. Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!
    4. -
- -
-

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

-
- -

Резюме

- -

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

- -

Вот и все для предметных статей - все, что осталось сейчас, - это проверить свои навыки в оценке объекта.

- -

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

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_prototypes/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_prototypes/index.html" deleted file mode 100644 index 0a76580d9c..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/object_prototypes/index.html" +++ /dev/null @@ -1,285 +0,0 @@ ---- -title: Прототипы объектов -slug: Learn/JavaScript/Объекты/Object_prototypes -tags: - - JavaScript - - create() - - Конструктор - - Начинающий - - ООП - - Обучение - - Обьект - - Статья - - прототип -translation_of: Learn/JavaScript/Objects/Object_prototypes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -
Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга. В этой статье мы объясним, как работают цепочки прототипов, и рассмотрим, как свойство prototype можно использовать для добавления методов к существующим конструкторам.
- -
- - - - - - - - - - - - -
Необходимые знания: -

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

-
Цель: -

Понять прототипы объектов JavaScript, как работают прототипные цепочки и как добавить новые методы в prototype свойство.

-
- -

Язык основанный на прототипах?

- -

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

- -

Точнее, свойства и методы определяются в свойстве prototype функции-конструктора объектов, а не в самих объектах.

- -

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

- -
-

Примечание: Важно понимать, что существует различие между прототипом объекта (который доступен через Object.getPrototypeOf(obj) или через устаревшее свойство __proto__) и свойством prototype в функциях-конструкторах. Первое свойство является свойством каждого экземпляра, а второе - свойством конструктора. То есть Object.getPrototypeOf(new Foobar()) относится к тому же объекту, что и Foobar.prototype.

-
- -

Давайте посмотрим на пример, чтобы стало понятнее.

- -

Понимание прототипа объектов

- -

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

- -

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

- -
function Person(first, last, age, gender, interests) {
-
-  // Определения методов и свойств
-  this.name = {
-    'first': first,
-    'last' : last
-  };
-  this.age = age;
-  this.gender = gender;
-  //...см. Введение в объекты для полного определения
-}
- -

Затем мы создаём экземпляр объекта следующим образом:

- -
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
- -

Если вы наберете «person1.» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:

- -

- -

В этом списке вы увидите элементы, определенные в конструкторе person 1 — Person() — name, age, gender, interests, bio, и greeting. Однако вы также увидите некоторые другие элементы — watch, valueOfи т. д. — они определены в объекте прототипа Person (), который является Object.

- -

- -

Итак, что произойдет, если вы вызываете метод в person1, который фактически определен в Object? Например:

- -
person1.valueOf()
- -

Этот метод — Object.valueOf()наследуется person1, потому что его конструктором является Person(), а прототипом Person() является Object(). valueOf() возвращает значение вызываемого объекта — попробуйте и убедитесь! В этом случае происходит следующее:

- - - -
-

Примечание: Мы хотим повторить, что методы и свойства не копируются из одного объекта в другой в цепочке прототипов - к ним обращаются, поднимаясь по цепочке, как описано выше.

-
- -
-

Примечание: Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом [[prototype]] в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием __proto__ (это 2 подчеркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте person1.__proto__ и person1.__proto__.__proto__, чтобы увидеть, как выглядит цепочка в коде!

- -

С ECMAScript 2015 вы можете косвенно обращаться к объекту прототипа объекта Object.getPrototypeOf (obj).

-
- -

Свойство prototype: Где определены унаследованные экземпляры

- -

Итак, где определены наследуемые свойства и методы? Если вы посмотрите на страницу со ссылкой Object, вы увидите в левой части большое количество свойств и методов - это намного больше, чем количество унаследованных членов, доступных для объекта person1. Некоторые из них унаследованы, а некоторые нет - почему это?

- -

Как упоминалось выше, наследованные свойства это те, что определены в свойстве prototype (вы можете называть это подпространством имен), то есть те, которые начинаются с Object.prototype., а не те, которые начинаются с простого Object. Значение свойства prototype - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.

- -

Таким образом Object.prototype.watch(), Object.prototype.valueOf() и т. д. доступны для любых типов объектов, которые наследуются от Object.prototype, включая новые экземпляры объектов, созданные из конструктора Person() .

- -

Object.is(), Object.keys() и другие члены, не определенные в контейнере prototype, не наследуются экземплярами объектов или типами объектов, которые наследуются от Object.prototype. Это методы / свойства, доступные только в конструкторе Object().

- -
-

Примечание: Это кажется странным - как у вас есть метод, определенный для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор Function(), если вы нам не верите.

-
- -
    -
  1. Вы можете проверить существующие свойства прототипа для себя - вернитесь к нашему предыдущему примеру и попробуйте ввести следующее в консоль JavaScript: - 
    Person.prototype
    -
    2. -
  2. Результат покажет вам не много, ведь мы ничего не определили в прототипе нашего конструктора! По умолчанию prototype конструктора всегда пуст. Теперь попробуйте следующее: - 
    Object.prototype
    -
    3. -
- -

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

- -

Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определенные на прототипе глобальных объектов String, Date, Number и Array, например. Все они имеют несколько элементов, определенных на их прототипе, поэтому, например, когда вы создаете строку, вот так:

- -
var myString = 'This is my string.';
- -

В myString сразу есть множество полезных методов, таких как split(), indexOf(), replace() и т. д.

- -
-

Важно: Свойство prototype является одной из наиболее противоречивых названий частей JavaScript - вы можете подумать, что this указывает на объект прототипа текущего объекта, но это не так (это внутренний объект, к которому можно получить доступ __proto__, помните ?). prototype вместо этого - свойство, содержащее объект, на котором вы определяете членов, которые вы хотите наследовать.

-
- -

Снова create()

- -

Ранее мы показали, как метод Object.create() может использоваться для создания нового экземпляра объекта.

- -
    -
  1. Например, попробуйте это в консоли JavaScript предыдущего примера: - 
    var person2 = Object.create(person1);
    -
    2. -
  2. На самом деле create()создает новый объект из указанного объекта-прототипа. Здесь person2 создается с помощью person1 в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее: - 
    person2.__proto__
    -
    3. -
- -

Это вернет объект person1.

- -

Свойство constructor

- -

Каждая функция-конструктор имеет свойство prototype, значением которого является объект, содержащий свойство constructor. Это свойство constructor указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определенные в свойстве Person.prototype (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор Person(). Следовательно, свойство конструктора также доступно для объектов person1 и person2.

- -
    -
  1. Например, попробуйте эти команды в консоли: - 
    person1.constructor
-person2.constructor
    - -

    Они должны возвращать конструктор Person(), поскольку он содержит исходное определение этих экземпляров.

    - -

    Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства constructor (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому ее можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово new, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.

    -
    2. -
  2. Попробуйте это в консоли: - 
    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    -
    3. -
  3. Теперь попробуйте получить доступ к функциям вашего нового объекта, например: - 
    person3.name.first
-person3.age
-person3.bio()
    -
    4. -
- -

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

- -

Свойство constructor имеет другие применения. Например, если у вас есть экземпляр объекта и вы хотите вернуть имя конструктора этого экземпляра, вы можете использовать следующее:

- -
instanceName.constructor.name
- -

Например, попробуйте это:

- -
person1.constructor.name
-
- -
-

Примечание: Значение constructor.name может измениться (из-за прототипического наследования, привязки, препроцессоров, транспилеров и т. д.), Поэтому для более сложных примеров вы захотите использовать оператор instanceof.

-
- -
    -
- -

Изменение прототипов

- -

Давайте рассмотрим пример изменения свойства prototype функции-конструктора — методы, добавленные в прототип, затем доступны для всех экземпляров объектов, созданных из конструктора.

- -
    -
  1. Вернитесь к нашему примеру oojs-class-further-exercises.html и создайте локальную копию исходного кода. Ниже существующего JavaScript добавьте следующий код, который добавляет новый метод в свойство prototype конструктора: - - 
    Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
    -
    2. -
  2. Сохраните код и загрузите страницу в браузере и попробуйте ввести следующее в текстовый ввод: - 
    person1.farewell();
    -
    3. -
- -

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

- -

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

- -
function Person(first, last, age, gender, interests) {
-
-  // определения свойств и методов
-
-}
-
-var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
-
-Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
- -

Но метод farewell() по-прежнему доступен в экземпляре объекта person1 - его элементы были автоматически обновлены, чтобы включить недавно определенный метод farewell().

- -
-

Примечание: Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример oojs-class-prototype.html (см. также это running live).

-
- -

Вы редко увидите свойства, определенные в свойстве prototype, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:

- -
Person.prototype.fullName = 'Bob Smith';
- -

Это не очень гибко, так как человека нельзя назвать так. Было бы намного лучше сделать это, создав fullName из name.first и name.last:

- -
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
- -

Однако это не работает, поскольку в этом случае this будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернет undefined undefined. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.

- -

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

- -
// Определение конструктора и его свойств
-
-function Test(a, b, c, d) {
-  // определение свойств...
-}
-
-// Определение первого метода
-
-Test.prototype.x = function() { ... };
-
-// Определение второго метода
-
-Test.prototype.y = function() { ... };
-
-//...и так далее
- -

Этот образец можно увидеть в действии в примере приложения плана школы Петра Залевы.

- -

Резюме

- -

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

- -

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

- -

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

- - - -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/\320\276\321\201\320\275\320\276\320\262\321\213/index.html" "b/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/\320\276\321\201\320\275\320\276\320\262\321\213/index.html" deleted file mode 100644 index a4e7cc0071..0000000000 --- "a/files/ru/learn/javascript/\320\276\320\261\321\212\320\265\320\272\321\202\321\213/\320\276\321\201\320\275\320\276\320\262\321\213/index.html" +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Основы объектов в JavaScript -slug: Learn/JavaScript/Объекты/Основы -tags: - - JavaScript - - ООП -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
Необходимые знания:Элементарная компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Структурные элементы).
Цель:Понимать основу теории перед началом объектно-ориентированного программирования, как это связано с JavaScript ("большинство сущностей являются объектами"), и как начать работу с объектами JavaScript.
- -

Основы объектов

- -

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

- -

Чтобы начать, скопируйте себе oojs.html файл. В нём содержится очень мало: {{HTMLElement("script")}} элемент для написания в нём исходного кода. Мы будем использовать это как основу для изучения основ синтаксиса объектов. Во время работы с этим примером у вас должна быть открытая консоль JavaScript инструментов разработчика, готовая к вводу некоторых команд.

- -

Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:

- -
const person = {};
- -

Если Вы введёте person в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:

- -
Object { }
- -

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

- -
const person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

Теперь внутри объекта есть некоторые данные и функционал, и теперь можно получить доступ к ним с помощью некоторого лёгкого и простого синтаксиса!

- -
-

Примечание: Если у вас возникли проблемы с применением файла в работе, попробуйте сравнить ваш код с нашей версией — см. oojs-finished.html (также see it running live). Одна из распространенных ошибок, когда Вы начинаете с объектами ставить запятую в конце последнего члена — это приводит к ошибке.

-
- -

Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример name и age выше), и значение (пример ['Bob', 'Smith'] и 32). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:

- -
const objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

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

- -

Такие объекты называются литералами объекта (object literal) — мы буквально вписали все содержимое объекта для его создания. Этот способ сильно отличается от объектов реализованных классами, которые мы рассмотрим позже.

- -

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

- -

Точечная запись (Dot notation)

- -

Выше Вы получили доступ к свойствам и методам используя точечную запись (dot notation). Имя объекта (person) действует как пространство имен (namespace) — оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (encapsulated) внутри объекта. Далее Вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:

- -
person.age
-person.interests[1]
-person.bio()
- -

Внутренние пространства имен (Sub-namespaces)

- -

Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого

- -
name: ['Bob', 'Smith'],
- -

на такое

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

Здесь мы фактически создаем внутреннее пространство имен (sub-namespace). Это звучит сложно, но на самом деле это не так — для доступа к этим элементам Вам нужно сделать один дополнительный шаг с еще одной точкой. Попробуйте в консоли браузера следующее: 

- -
person.name.first
-person.name.last
- -

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

- -
name[0]
-name[1]
- -

на

- -
name.first
-name.last
- -

Иначе ваши методы больше не будут работать.

- -

Скобочная запись (Bracket notation)

- -

Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:

- -
person.age
-person.name.first
- -

Вы можете использовать следующий

- -
person['age']
-person['name']['first']
- -

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

- -

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

- -

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

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

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

- -
person.age
-person['name']['last']
- -

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

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

Теперь Вы можете проверить ваши новые элементы:

- -
person['eyes']
-person.farewell()
- -

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

- -
let myDataName = nameInput.value;
-let myDataValue = nameValue.value;
- -

Затем мы можем добавить имя и значение этого нового элемента в объект person таким образом:

- -
person[myDataName] = myDataValue;
- -

Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта person :

- -
let myDataName = 'height';
-let myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:

- -
person.height
- -

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

- -

Что такое "this"?

- -

Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

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

- -

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

- -
const person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-const person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

В этом случае, person1.greeting() выведет "Hi! I'm Chris.". person2.greeting(), с другой стороны, выведет "Hi! I'm Brian.", хотя код метода одинаковый в обоих случаях. Как мы сказали ранее, this равен объекту, внутри которого находится код — это не очень полезно, когда Вы пишите литералы объектов вручную, но оно действительно помогает, когда Вы генерируете объекты динамически (например используя конструкторы). Это станет понятнее чуть позже.

- -

Все это время вы использовали объекты

- -

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

- -

Поэтому, когда Вы использовали строковые методы, такие как:

- -
myString.split(',');
- -

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

- -

Когда Вы обращались к объектной модели документа (DOM), используя следующие строки:

- -
const myDiv = document.createElement('div');
-const myVideo = document.querySelector('video');
- -

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

- -

То же самое относится и к любому другому встроенному объекту/API, который вы использовали — Array, Math, и т. д.

- -

Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, Notifications API — который позволяет новым браузерам запускать системные уведомления, требует, чтобы Вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое Вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:

- -
const myNotification = new Notification('Hello!');
- -

Опять же, мы рассмотрим конструкторы в следующей статье.

- -
-

Примечание: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждет ответа, который мы знаем как возвращаемое (return) значение.

-
- -

Резюме

- -

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

- -

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

- -

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

- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/a_first_splash/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/a_first_splash/index.html" deleted file mode 100644 index b2a811b992..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/a_first_splash/index.html" +++ /dev/null @@ -1,675 +0,0 @@ ---- -title: Первое погружение в JavaScript -slug: Learn/JavaScript/Первые_шаги/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Необходимые навыки:Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript.
Цели:Получение первого опыта в программировании на JavaScript.
- -

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

- -
-

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

-
- -

Думай как программист

- -

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

- - - -

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

- -

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

- -

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

- -

В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:

- - - -

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

- -

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

- -

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

- -
-

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

-
- -

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

- -
    -
  1. Сгенерировать случайное число между 1 и 100.
    2. -
  2. Начать запись количества попыток игрока угадать число. Начать с 1.
    3. -
  3. Предоставить попытку угадать игроку загаданное число.
    4. -
  4. Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
    5. -
  5. Далее, проверить было ли это число верным.
    6. -
  6. Если число верное: -
      -
    1. Показать поздравительное сообщение.
      2. -
    2. Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
      3. -
    3. Предоставить возможность для перезапуска игры.
      4. -
    -
    7. -
  7. Если число не верное и есть попытки: -
      -
    1. Сказать игроку, что он не угадал.
      2. -
    2. Разрешить ему использовать еще попытку.
      3. -
    3. Повысить число попыток на 1.
      4. -
    -
    8. -
  8. Если число не верное и попыток нет: -
      -
    1. Сказать игроку, что игра окончена.
      2. -
    2. Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
      3. -
    3. Предоставить возможность для перезапуска игры.
      4. -
    -
    9. -
  9. Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
    10. -
- -

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

- -

Подготовка

- -

В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файла  number-guessing-game-start.html  (см. здесь).  Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.

- -

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

- -
<script>
-
-  // Your JavaScript goes here
-
-</script>
-
- -

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

- -

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

- -
var randomNumber = Math.floor(Math.random() * 100) + 1;
-
-var guesses = document.querySelector('.guesses');
-var lastResult = document.querySelector('.lastResult');
-var lowOrHi = document.querySelector('.lowOrHi');
-
-var guessSubmit = document.querySelector('.guessSubmit');
-var guessField = document.querySelector('.guessField');
-
-var guessCount = 1;
-var resetButton;
- -

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

- -

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

- - - -
-

Заметка: В дальнейшем вы узнаете намного больше о переменных, в следующей статье.

-
- -

Функции (Functions)

- -

Затем добавьте следующие ниже предыдущего JavaScript:

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

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

- -

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

- -

Сейчас попробуйте сохранить код и обновить его в браузере.

- -

Перейдите к консоли JavaScript в инструментах разработчика, и введите следующую строку:

- -
checkGuess();
- -

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

- -
-

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

-
- -

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

- -

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

- -

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

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -

Сначала давайте посмотрим на арифметические операторы, например:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОператорИмяПример
+Сложение6 + 9
-Вычитание20 - 15
*Умножение3 * 7
/Деление10 / 5
- -

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

- -
var name = 'Bingo';
-name;
-var hello = ' says hello!';
-hello;
-var greeting = name + hello;
-greeting;
- -

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

- -
name += ' says hello!';
- -

Это эквивалентно этому:

- -
name = name + ' says hello!';
- -

Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри {{anch("Conditionals", "ниже")}}), мы используем операторы сравнения, например:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОператорИмяПример
===Строгое равенство (это точно одно и то же?)5 === 2 + 4
!==Строгое неравенство (это не одно и то же?)'Chris' !== 'Ch' + 'ris'
<Меньше чем10 < 6
>Больше чем10 > 20
- -

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

- -

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

- -

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

- -
function checkGuess() {
-  var userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.

- - - -

События (Events)

- -

На данный момент у нас есть хорошо реализованная функция checkGuess(), но она ничего не сделает, потому что мы еще не вызвали ее. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются прослушивателями событий, а блоки кода, выполняемые в ответ на срабатывание событий, называются обработчиками событий.

- -

Добавьте следующую строку ниже закрывающей фигурной скобки функции checkGuess():

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Здесь мы добавляем прослушиватель событий к кнопке guessSubmit. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы выслушиваем (в данном случае click) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция checkGuess() - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

- -

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

- -

Завершение игры

- -

Давайте добавим функцию setGameOver() в конец нашего кода, а затем пройдем по ней. Добавьте это под нижней частью вашего JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Теперь нам нужно также определить эту функцию! Добавьте следующий код, снова в нижнюю часть вашего JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  var resetParas = document.querySelectorAll('.resultParas p');
-  for (var i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

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

- - - -

С этого момента у вас есть полностью работающая (простая) игра - поздравляем!

- -

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

- -

Циклы (Loops) 

- -
-
-
Одна часть вышеприведенного кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определенное условие.
- -
Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:
-
-
- -
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
- -

Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):
- Начальное значение: в этом случае мы начинаем подсчет c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.

- -

Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:

- -
var resetParas = document.querySelectorAll('.resultParas p');
-for (var i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

Этот код создает переменную, содержащую список всех абзацев внутри <div class = "resultParas">, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.

- -

Немного об объектах (Objects)

- -

Давайте добавим еще одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже var resetButton; в верхней части вашего JavaScript, затем сохраните файл:

- -
guessField.focus();
- -

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

- -

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

- -

В нашем примере мы сначала создали переменную guessField, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:

- -
var guessField = document.querySelector('.guessField');
- -

Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. querySelector() "берет" одну часть информации -  CSS selector, который выбирает нужный элемент.

- -

Поскольку guessField теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:

- -
guessField.focus();
- -

Для переменных, которые не содержат ссылок на элементы формы, не будет доступен focus(). Например, переменная guesses содержит ссылку на элемент {{htmlelement ("p")}}, а guessCount содержит число.

- -

Поиграем с объектами браузера

- -

Давайте немного поиграем с некоторыми объектами браузера.

- -
    -
  1. Для начала запустите свою программу в браузере.
    2. -
  2. Далее, откройте инструменты разработчика в вашем браузере, и убедитесь, что вы перешли во вкладку с консолью JavaScript.
    3. -
  3. Введите guessField и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!
    4. -
  4. Теперь введите следующее: - 
    guessField.value = 'Hello';
    - Свойство value представляет текущее значение, введенное в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!
    5. -
  5. Попробуйте ввести guesses и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.
    6. -
  6. Теперь попробуйте ввести: - 
    guesses.value
    - Браузер вернет вам undefined, потому что value не существует в параграфах.
    7. -
  7. Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Каждый элемент на странице имеет свойство style, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.
    9. -
- -

Теперь можно отдохнуть...

- -

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

- -

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}

diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/arrays/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/arrays/index.html" deleted file mode 100644 index 7f38ce4a50..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/arrays/index.html" +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: Массивы -slug: Learn/JavaScript/Первые_шаги/Arrays -tags: - - JavaScript - - Pop - - Push - - shift - - unshift - - Для начинающих - - Массивы - - Статья -translation_of: Learn/JavaScript/First_steps/Arrays ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.
Цель:Понять, что такое массивы и как использовать их в JavaScript.
- -

Что такое массив?

- -

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

- -

Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.

- -

Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript. Мы предоставили один ниже (вы также можете open this console в отдельном окне, или использовать browser developer console, если вам угодно).

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -

Создание массива

- -

Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.

- -
    -
  1. Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль: - 
    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-shopping;
    -
    2. -
  2. В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это: - 
    var sequence = [1, 1, 2, 3, 5, 8, 13];
-var random = ['tree', 795, [0, 1, 2]];
    -
    3. -
  3. Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.
    4. -
- -

Получение и изменение элементов массива

- -

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

- -
    -
  1. Введите следующее в вашу консоль: - 
    shopping[0];
-// возвращает "bread"
    -
    2. -
  2. Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это: - 
    shopping[0] = 'tahini';
-shopping;
-// shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    - -
    Заметка: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
    -
    3. -
  3. Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива random (см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого: - 
    random[2][2];
    -
    4. -
  4. Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.
    5. -
- -

Нахождение длины массива

- -

Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:

- -
sequence.length;
-// должно возвратить 7
- -

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

- -
var sequence = [1, 1, 2, 3, 5, 8, 13];
-for (var i = 0; i < sequence.length; i++) {
-  console.log(sequence[i]);
-}
- -

В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:

- -
    -
  1. Начать цикл с номера позиции 0 в массиве.
    2. -
  2. Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
    3. -
  3. Для каждого элемента вернуть его значение в консоли браузера с помощью console.log().
    4. -
- -

Некоторые полезные методы массивов

- -

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

- -

Преобразование между строками и массивами

- -

Часто у Вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.

- -
-

Заметка: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.

-
- -
    -
  1. Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли: - 
    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    -
    2. -
  2. Теперь разделим ee посредством запятой: - 
    var myArray = myData.split(',');
-myArray;
    -
    3. -
  3. Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы: - 
    myArray.length;
-myArray[0]; // первый элемент в массиве
-myArray[1]; // второй элемент в массиве
-myArray[myArray.length-1]; // последний элемент в массиве
    -
    4. -
  4. Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее: - 
    var myNewString = myArray.join(',');
-myNewString;
    -
    5. -
  5.  Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . toString() ,возможно, проще,чем join() поскольку он не принимает параметр, но это ограничивает его. С join()вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой). - 
    var dogNames = ["Rocket","Flash","Bella","Slugger"];
-dogNames.toString(); //Rocket,Flash,Bella,Slugger
    -
    6. -
- -

Добавление и удаление элементов массива

- -

Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив myArray , с которым мы столкнулись в предыдущем разделе. Если вы еще не прошли этот раздел, сначала создайте массив в консоли:

- -
var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
- -

Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.

- -
    -
  1. Давайте сначала используем метод push() — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это: - - 
    myArray.push('Cardiff');
-myArray;
-myArray.push('Bradford', 'Brighton');
-myArray;
-
    -
    2. -
  2. При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого: - 
    var newLength = myArray.push('Bristol');
-myArray;
-newLength;
    -
    3. -
  3. Удаление последнего элемента массива можно совершить с помощью вызова метода pop(). Попробуйте это: - 
    myArray.pop();
    -
    4. -
  4. Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое: - 
    var removedItem = myArray.pop();
-myArray;
-removedItem;
    -
    5. -
- -

{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.

- -
    -
  1. Сначала, попробуем метод unshift(): - - 
    myArray.unshift('Edinburgh');
-myArray;
    -
    2. -
  2. Теперь shift(); попробуйте эти! - 
    var removedItem = myArray.shift();
-myArray;
-removedItem;
    -
    3. -
- -

Практика: Печать продуктов!

- -

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

- -
    -
  1. Ниже комментария // number 1  имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Нужно превратить их в массив и сохранить его  под названием  products.
    2. -
  2. На строке с комментарием // number 2  начинается цикл for. В строке цикла имеется i <= 0, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда i меньше или равен 0», при этом i начинается с 0. Нужно заменить i <= 0 условным тестом, который останавливает цикл, когда i перестает быть меньше длины массива products .
    3. -
  3. Под комментарием // number 3 мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (name:price) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, еще раз просмотрите статью Полезные строковые методы, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.
    4. -
  4. В рамках приведенной выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьей строки в JavaScript.
    5. -
  5. В верхней части кода есть переменная с именем total , которая содержит значение 0. Внутри цикла (под комментарием // number 4) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счет-фактуре. Для этого вам может понадобится оператор присваивания.
    6. -
  6. Под комментарием // number 5 нужно изменить строку так, чтобы переменная itemText была равна "current item name — $current item price",  например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счете-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
    7. -
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}

- -

Практика: Топ 5 поисовых запросов

- -

Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

- -

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

- -
-

Примечание: В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.

-
- -

Чтобы завершить приложение, вам необходимо:

- -
    -
  1. Добавьте строку под комментарием // number 1, которая добавляет текущее значение, введенное в ввод поиска, к началу массива. Его можно получить с помощью searchInput.value.
    2. -
  2. Добавьте строку под комментарием // number 2, которая удаляет значение, находящееся в конце массива.
    3. -
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}

- -

Заключение

- -

Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!

- -

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

- -

Посмотрите также

- - - -

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}

- -

В этом разделе

- - diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/index.html" deleted file mode 100644 index bd435e920f..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Первые шаги в JavaScript -slug: Learn/JavaScript/Первые_шаги -tags: - - JavaScript - - Массивы - - Новичкам -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

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

- -

Предисловие

- -

Вам не нужно иметь никаких предварительных знаний JavaScript чтобы приступить к этому модулю, но у вас должно быть некоторое представление о HTML и CSS. Рекомендуем ознакомиться со следующими материалами, прежде чем начинать знакомство с JavaScript:

- - - -
-

Примечание:  Если Вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как  JSBin или Thimble, для запуска примеров кода. 

-
- -

Руководства

- -
-
Что такое JavaScript?
-
Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения. 
-
Первое погружение в JavaScript
-
Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".
-
Что пошло не так? Устранение ошибок JavaScript
-
В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript коде.
-
Хранение нужной вам информации - Переменные
-
После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с Переменными.
-
Базовая математика в JavaScript — числа и операторы
-
Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.
-
Работа с текстом — строки в JavaScript
-
Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.
-
Полезные строковые методы
-
После того как мы рассмотрели основы работы со строками, давайте двинемся дальше и поговорим о том какие полезные операторы и методы существуют для строк, такие как вычисление длины, соединение и разделение строк, замена отдельных символов и многие другие. 
-
Массивы
-
В последней статье этого модуля мы рассмотрим массивы - изящный способ хранения различных наборов информации в имени всего одной переменной. Здесь мы поговорим о том почему это может быть полезным, рассмотрим как создать массив, получить, добавить или удалить элемент массива, и прочее.
-
- -

Проверка полученных знаний

- -

Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки. 

- -
-
Генератор глупых историй
-
Вашим заданием будет применить на практике полученные знания и создать развлекательное приложение которое будет генерировать случайные нелепые истории.
-
diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/math/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/math/index.html" deleted file mode 100644 index 29ff9258bf..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/math/index.html" +++ /dev/null @@ -1,423 +0,0 @@ ---- -title: Базовая математика в JavaScript — числа и операторы -slug: Learn/JavaScript/Первые_шаги/Math -tags: - - JavaScript - - Гайд - - Математика - - Начинающий - - Операторы - - Руководство - - Скриптинг - - Статья - - кодинг -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель:Ознакомление с основами математики в JavaScript.
- -

Все любят математику

- -

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

- -

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

- -

Типы чисел

- -

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

- - - -

У нас даже есть разные типы числовых систем:

- - - -

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

- -

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

- -

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

- -

Для меня всё — числа

- -

Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.

- -
    -
  1. Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке: - 
    var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.
    3. -
  3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки: - 
    typeof myInt;
-typeof myFloat;
    - В обоих случаях вы должны получить "number" — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.
    4. -
- -

Арифметические операторы

- -

Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОператорИмяФункцияПример
+СложениеОбъединение чисел в одно целое.6 + 9
-ВычитаниеВычитает правое число от левого.20 - 15
*УмножениеУмножает два числа вместе.3 * 7
/ДелениеДелит левое число на правое.10 / 5
%Модуль числа -

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

- 		-

11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2)

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

Примечание: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).

-
- -

Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведенные ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.

- -
    -
  1. Для начала попробуйте ввести простые примеры, такие как: - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например: - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. И напоследок, попробуйте ввести более сложные выражения, например: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

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

- -

Приоритет операторов

- -

Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):

- -
num2 + num1 / 8 + 2;
- -

Будучи человеком, вы, вероятно, прочитаете это как "50 плюс 10 равно 60", затем "8 плюс 2 равно 10", и, наконец, "60 делить на 10 равно 6".

- -

Но браузер видит это по-другому: "10 делить на 8 равно 1.25", затем "50 плюс 1.25 плюс 2 равно 53.25".

- -

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

- -

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

- -
(num2 + num1) / (8 + 2);
- -

Результат этого выражения равен 6.

- -
-

Заметка: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.

-
- -

Операторы инкремента и декремента

- -

Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (++) и декремента (--). Мы использовали ++ в нашей игре "Угадай число" в статье первое погружение в JavaScript, где мы добавляли 1 к переменной guessCount, в которой хранилось значение количества попыток пользователя после каждого хода.

- -
guessCount++;
- -
-

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

-
- -

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

- -
3++;
- -

Таким образом, вы можете применить инкремент только к существующим переменным:

- -
var num1 = 4;
-num1++;
- -

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

- -
num1;
- -

То же самое для --: попробуйте пример ниже

- -
var num2 = 6;
-num2--;
-num2;
- -
-

Замечание: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху еще раз, но в этот раз используйте ++num1 и --num2. 

-
- -

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

- -

Операторы присваивания - операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, =, он просто приравнивает значение переменной слева к значению справа:

- -
var x = 3; // x содержит значение 3
-var y = 4; // y содержит значение 4
-x = y; // x теперь содержит значение y (x == 4)
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExampleShortcut for
+=Присваивание сложенияПрибавляет значение справа к переменной слева и возвращает новое значение переменнойx = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Присваивание вычитанияВычитает значение справа из переменной слева и возвращает новое зачение переменнойx = 6;
- x -= 3;		x = 6;
- x = x - 3;
*= -

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

- 		Умножает переменную слева на значение справа и возвращает новое зачение переменнойx = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=Присваивание деленияДелит переменную слева на значение справа и возвращает новое зачение переменнойx = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

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

- -

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

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

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

-
- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ОператорИмяНазначениеПример
===Строгое равенствоПроверяет левое и правое значения на идентичность5 === 2 + 4
!==Строгое неравенствоПроверяет левое и правое значения на неидентичность5 !== 2 + 3
<МеньшеПроверяет, меньше ли левое значение правого10 < 6
>БольшеПроверяет, больше ли левое значение правого10 > 20
<=Меньше или равноПроверят, меньше ли левое значение правому (или равно ему)3 <= 2
>=Больше или равноПроверят, больше ли левое значение левого (или равно ему)5 >= 4
- -
-

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

-
- -

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

- - - -

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

- -
<button>Запустить машину</button>
-<p>Машина остановлена</p>
-
- -
var btn = document.querySelector('button');
-var txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-  if (btn.textContent === 'Start machine') {
-    btn.textContent = 'Stop machine';
-    txt.textContent = 'The machine has started!';
-  } else {
-    btn.textContent = 'Start machine';
-    txt.textContent = 'The machine id stopped.';
-  }
-}
- -

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

- -

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

- -

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

- -
-

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

-
- -

Итого

- -

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

- -

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

- -
-

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

-
- -

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

diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/useful_string_methods/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/useful_string_methods/index.html" deleted file mode 100644 index 1318ee39ac..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/useful_string_methods/index.html" +++ /dev/null @@ -1,723 +0,0 @@ ---- -title: Полезные строковые методы -slug: Learn/JavaScript/Первые_шаги/Useful_string_methods -tags: - - Beginner - - CodingScripting - - JavaScript - - Learn - - length - - lower - - replace - - split - - upper - - Обучение - - Регистр -translation_of: Learn/JavaScript/First_steps/Useful_string_methods ---- -

{{LearnSidebar}}

- -

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

- -

Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдем дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Задача:Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками.
- -

Строки как объекты

- -

Почти всё в JavaScript является объектами. Когда вы создаете строку, например: 

- -
let string = 'This is my string';
- -

ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!

- -

Только не волнуйтесь! Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.

- -

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

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

Поиск длины строки

- -

Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:

- -
let browserType = 'mozilla';
-browserType.length;
- -

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имен, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.

- -

Получение определенного строкового символа

- -

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

- -
browserType[0];
- -

Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length:

- -
 browserType[browserType.length-1];
- -

Длина слова «mozilla» равна 7, но, поскольку счет начинается с 0, позиция последнего символа равна 6, поэтому нам нужна length-1. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.

- -

Поиск подстроки внутри строки и ее извлечение

- -
    -
  1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите: - 
    browserType.indexOf('zilla');
    - Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
    2. -
- -
    -
  1. Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: - 
    browserType.indexOf('vanilla');
    - Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
    -
    - Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания): - 
    if(browserType.indexOf('mozilla') === -1) {
-  // сделать что-то, если 'mozilla'
-  // не является частью этой строки
-}
-
-if(browserType.indexOf('mozilla') !== -1) {
-  // сделать что-то, если 'mozilla'
-  // является частью этой строки
-}
    -
    2. -
  2. Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}}  для извлечения. Попробуйте следующее: - 
    browserType.slice(0,3);
    - Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её (помним, что счет идёт с 0, а не с 1). Также можно сказать, что второй параметр равен длине возвращаемой строки.
    3. -
  3. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: - 
    browserType.slice(2);
    - Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.
    4. -
- -
-

Примечание: второй параметр slice() не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу {{jsxref ("String.prototype.slice ()", "slice ()")}}, чтобы узнать, что ещё вы можете узнать.

-
- -

Изменение регистра

- -

Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введенные пользователем данные перед их сохранением в базе данных.

- -

Попробуем ввести следующие строки, чтобы узнать, что происходит:

- -
var radData = 'My NaMe Is MuD';
-radData.toLowerCase();
-radData.toUpperCase();
- -

Обновление частей строки

- -

Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод {{jsxref ("String.prototype.replace ()", "replace ()")}}. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.

- -

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:

- -
browserType.replace('moz','van');
- -

Обратите внимание, что для фактического получения обновленного значения, отраженного в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace('moz','van');

- -

Активные примеры обучения

- -

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

- -

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

- -

Фильтрация приветственных сообщений

- -

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

- -
    -
  1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
    2. -
  2. Затем вам нужно будет написать условный тест операнд1 оператор операнд2. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
    3. -
  3. Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определенному результату.
    4. -
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}

- -

Исправление регистра (размера букв в тексте—прим. пер.)

- -

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

- -
    -
  1. Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните ее в новой переменной.
    2. -
  2. Возьмите первую букву строки в этой новой переменной и сохраните ее в другой переменной.
    3. -
  3. Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, измененной на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
    4. -
  4. Измените значение переменной result на равную конечному результату (не input).
    5. -
- -
-

Примечание: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.

-
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}

- -

Создание новых строк из старых частей

- -

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

- -
MAN675847583748sjt567654;Manchester Piccadilly
- -

Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:

- -
MAN: Manchester Piccadilly
- -

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

- -
    -
  1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
    2. -
  2. Найдите номер символьного номера точки с запятой.
    3. -
  3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
    4. -
  4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
    5. -
  5. Измените значение переменной result равной конечной строке (не input). 
    6. -
- - - -

{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}

- -

Заключение

- -

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

- -

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

- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/variables/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/variables/index.html" deleted file mode 100644 index e1195effd5..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/variables/index.html" +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: Переменные - место хранения необходимой информации -slug: Learn/JavaScript/Первые_шаги/Variables -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель:Ознакомиться с основами переменных в JavaScript.
- -

Инструменты, которые вам нужны

- -

В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).

- -

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

- -

Что такое переменные?

- -

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

- -
<button>Нажми на меня</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('Как Вас зовут?');
-  alert('Привет ' + name + ', рады видеть Вас!');
-}
- -

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

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

- -

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

- -
var name = prompt('Как вас зовут?');
-
-if (name === 'Адам') {
-  alert('Привет, Адам, рады тебя видеть!');
-} else if (name === 'Алан') {
-  alert('Привет, Алан, рады тебя видеть!');
-} else if (name === 'Бэлла') {
-  alert('Привет, Бэлла, рады тебя видеть!');
-} else if (name === 'Бьянка') {
-  alert('Привет, Бьянка, рады тебя видеть!');
-} else if (name === 'Крис') {
-  alert('Привет, Крис, рады тебя видеть!');
-}
-
-// ... и так далее ...
- -

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

- -

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

- -

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

- -

Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.

- -

- -

Объявление переменной

- -

Чтобы использовать переменную, вы сначала должны ее создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:

- -
var myName;
-var myAge;
- -

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

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -
-

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

-
- -

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

- -
myName;
-myAge;
- -

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

- -
scoobyDoo;
- -
-

Заметка: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.

-
- -

Присвоение значения переменной

- -

Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (=), а за ним значение, которое вы хотите присвоить. Например:

- -
myName = 'Chris';
-myAge = 37;
- -

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

- -
myName;
-myAge;
- -

Вы можете объявить переменную и задать ей значение одновременно:

- -
var myName = 'Chris';
- -

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

- -
-

Заметка: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задает значение) переменную, вы можете объявить ее после ее инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hoisting - прочитайте var hoisting для более подробной информации по этому вопросу.

-
- -

Обновление переменной

- -

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

- -
myName = 'Bob';
-myAge = 40;
- -

Правила именования переменных

- -

Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.

- - - -
-

Заметка: По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.

-
- -

Примеры хороших имен переменных:

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
-
- -

Примеры плохих имен переменных:

- -
1
-a
-_12
-myage
-MYAGE
-var
-Document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Примеры имен переменных, которые вызовут ошибки:

- -
var
-Document
-
- -

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

- -

Типы переменных

- -

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

- -

Числа (Numbers)

- -

Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:

- -
var myAge = 17;
- -

Строки ('Strings')

- -

Строки - это фрагменты текста. Когда вы даете переменной значение строки, вам нужно обернуть ее в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать ее как другое имя переменной.

- -
var dolphinGoodbye = 'So long and thanks for all the fish';
- -

Логические (Booleans)

- -

Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:

- -
var iAmAlive = true;
- -

В действительности вы чаще будете использовать этот тип переменных так:

- -
var test = 6 < 3;
-
- -

Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернет false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.

- -

Массивы (Arrays)

- -

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

- -
var myNameArray = ['Chris', 'Bob', 'Jim'];
-var myNumberArray = [10,15,40];
- -

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

- -
myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40
- -

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

- -

В следующей статье вы узнаете больше о массивах.

- -

Объекты (Objects)

- -

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

- -

Попробуйте ввести следующую строку в консоль:

- -
var dog = { name : 'Spot', breed : 'Dalmatian' };
- -

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

- -
dog.name
- -

Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.

- -

Свободная типизация

- -

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

- -

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

- -
var myString = 'Привет';
- -

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

- -
var myNumber = '500'; // упс, это все еще строка (string)
-typeof(myNumber);
-myNumber = 500; // так-то лучше, теперь это число (number)
-typeof(myNumber);
- -

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

- -

Подведение итогов

- -

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

- -

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}

diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/what_is_javascript/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/what_is_javascript/index.html" deleted file mode 100644 index f34dac6902..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/what_is_javascript/index.html" +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Что такое JavaScript? -slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}
- -

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

- - - - - - - - - - - - -
Необходимые навыки:Базовая компьютерная грамотность, знание основ HTML и CSS.
Цели:Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.
- -

Определение высокого уровня

- -

JavaScript это язык, который позволяет Вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

- -

- - - -

Три слоя прекрасно выстраиваются друг над другом. Возьмем простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

- -
<p>Player 1: Chris</p>
- -

- -

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

И наконец, добавим немного JavaScript для придания динамического поведения:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

{{ EmbedLiveSample('Определение_высокого_уровня', '100%', 80) }}

- -

Попробуйте кликнуть по тексту чтобы увидеть, что произойдет (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

- -

JavaScript может делать намного больше — давайте выясним это более детально.

- -

Так что же он действительно может делать?

- -

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

- - - -

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

- -

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

- -

Они обычно делятся на две категории.

- -

- -

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:    

- - - -
-

Заметка: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей,  для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

-
- -

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

- - - -
-

Заметка: Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.

-
- -

Доступно еще больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

- -

Что JavaScript делает на вашей странице?

- -

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

- -

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

- -

- -

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

- -

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.  

- -

Безопасность браузера

- -

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

- -
-

Заметка: Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.

-
- -

Последовательность выполнения JavaScript

- -

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

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

- -

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — TypeError: para is undefined. Это значит, что объект para еще не существует и вы не можете добавить к нему обнаружение событий.

- -
-

Заметка: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

-
- -

Интерпретируемый против компилируемого кода

- -

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

- -

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

- -

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

- -

Серверный против клиентского кода

- -

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

- -

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

- -

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

- -

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

- -

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

- -

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

- -

Внутренний JavaScript

- -
    -
  1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
    2. -
  2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу с активной кнопкой.
    3. -
  3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head>: - 
    <script>
-
-  // здесь будет JavaScript
-
-</script>
    -
    4. -
  4. Теперь добавим JavaScript внутрь элемента {{htmlelement("script")}}, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript": - 
    document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'You clicked the button!';
-    document.body.appendChild(para);
-  }
-
-  const buttons = document.querySelectorAll('button');
-
-  for(let i = 0; i < buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});
    -
    5. -
  5. Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создается новый абзац и помещается ниже.
    6. -
- -
-

Заметка: Если ваш пример не работает, пройдите еще раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как .html файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга </body>? Ввели ли вы JavaScript именно так, как показано? JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.

-
- -
-

Заметка: Вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

-
- -

Внешний JavaScript

- -

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберемся с этим.

- -
    -
  1. Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его script.js — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
    2. -
  2. Замените ваше текущий элемент {{htmlelement("script")}} на следующий: - 
    <script src="script.js" defer></script>
    -
    3. -
  3. Внутри script.js добавьте следующий скрипт: - 
    function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    4. -
  4. Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.
    5. -
- -
-

Заметка: Вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

-
- -

Инлайновые JavaScript обработчики

- -

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

- -
-
function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
-
- -

Вы можете попробовать эту версию в нашей демонстрации ниже:

- -

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

- -

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

- -

Но пожалуйста, не делайте этого. Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут onclick="createParagraph()" к каждой кнопке, к которой вы хотите подключить JavaScript.

- -

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

- -
const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

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

- -
-

Заметка: Попробуйте отредактировать вашу версию apply-javascript.html и добавить еще несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

-
- -

Стратегии загрузки скриптов

- -

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

- -

Комментарии

- -

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернетесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

- - - -

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

- -
// Функция: создает новый параграф и добавляет его вниз тела HTML.
-
-function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Получаем ссылки на все кнопки на странице в виде массива.
-  2. Перебераем все кнопки и добавляем к ним отслеживатель события нажатия.
-
-  При нажатии любой кнопки, будет выполняться функция createParagraph().
-*/
-
-var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Выводы

- -

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

- -

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

- -

{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}

diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\320\276\320\267\320\264\320\260\321\202\320\265\320\273\321\214_\320\263\320\273\321\203\321\213\321\205_\320\270\321\201\321\202\320\276\321\200\320\270\320\271/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\320\276\320\267\320\264\320\260\321\202\320\265\320\273\321\214_\320\263\320\273\321\203\321\213\321\205_\320\270\321\201\321\202\320\276\321\200\320\270\320\271/index.html" deleted file mode 100644 index 139e478847..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\320\276\320\267\320\264\320\260\321\202\320\265\320\273\321\214_\320\263\320\273\321\203\321\213\321\205_\320\270\321\201\321\202\320\276\321\200\320\270\320\271/index.html" +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Генератор глупых историй -slug: Learn/JavaScript/Первые_шаги/Создатель_глуых_историй -tags: - - JavaScript - - Задание - - Изучение - - Испытание - - Массивы - - НаписаниеКода - - НачальныйУровень - - Операторы - - Переменные - - Проверка - - Числа -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Требования:Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.
Задача:Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы.
- -

Начальная точка

- -

Для начала испытания вам следует:

- - - -
-

Замечание:  Так же вы можете использовать такие сайты как  JSBin или Thimble для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <script> элемент внутри  HTML страницы.

-
- -

Краткое описание проекта

- -

Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:

- - - -

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

- -

- -

Чтобы вы больше поняли идею опробуйте готовый пример (не заглядывая в исходный код!)

- -

Шаги к цели

- -

Следующие разделы описывают, что вам нужно будет сделать.

- -

Начальная подготовка:

- -
    -
  1. Создайте новый файл под названием main.js в той же папке, что и index.html.
    2. -
  2. Подключите данный JavaScript документ в ваш HTML файл с помощью {{htmlelement("script")}} элемента привязки main.js. Разместите его прямо перед закрывающимся </body> тегом.
    3. -
- -

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

- -
    -
  1. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), котрая принимает массив и случайным образом возвращает оттуда один из элементов.
    2. -
  2. Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле main.js: -
      -
    1. Сохраните первую большую строку текста в переменную storyText.
      2. -
    2. Сохраните первый блок из трех строк как массив, назвав его insertX.
      3. -
    3. Сохраните второй блок из трех строк как массив, назвав его insertY.
      4. -
    4. Сохраните третий блок из трех строк как массив, назвав его insertZ.
      5. -
    -
    3. -
- -

Создание обработчика событий и неполной функции:

- -
    -
  1. Теперь возвращаемся к исходному текстовому файлу.
    2. -
  2. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставте его в конец файла main.js. Это: -
      -
    • Добавит обработчик события кликанья в переменную randomize,  Так что, когда кнопка будет нажата -  функция result() запустится.
      • -
    • Добавляет в код частично завершенную функцию result(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.
      • -
    -
    3. -
- -

Завершение функции result():

- -
    -
  1. Создайте новую переменную newStory и установите ее значение равным storyText. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в storyText, мы могли бы генерировать новую историю только один раз.
    2. -
  2. Создайте три новые переменные, называемые xItem, yItem и zItem, и сделайте их равными результату вызова randomValueFromArray() на трех ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить ее, чтобы вернуть одну случайную строку из insertX, записав randomValueFromArray (insertX).
    3. -
  3. Затем мы хотим заменить три заполнителя строки newStory - :insertx:, :inserty :  и :insertz: - со строками, хранящимися в xItem, yItem и zItem. Здесь вам поможет определенный строковый метод - в каждом случае сделать вызов метода равным newStory, при этом каждый раз, когда он вызывается, newStory делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придется сделать один из вызовов дважды.
    4. -
  4. Внутри первого блока if добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке newStory, с помощью переменной name. В этом блоке мы говорим: «Если значение введено в текстовый ввод customName, замените Боба в истории этим пользовательским именем».
    5. -
  5. Внутри второго блока if мы проверяем, была ли выбрана радиокнопка uk. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это: -
      -
    1. Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.
      2. -
    2. Внутри линии, которая определяет weight переменную, замените 300 на расчет, который преобразует 300 фунтов в стоуны. Добавьте 'stone' в конце результата общего вызова Math.round().
      3. -
    3. Внутри линии, определяющей temperature переменную, замените 94 на расчет, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте 'centigrade' в конце результата общего вызова Math.round().
      4. -
    4. Просто под двумя определениями переменных добавьте еще две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной temperature и«300  pounds» на содержимое weight переменной.
      5. -
    -
    6. -
  6. Наконец, в предпоследней строке функции сделайте свойство textContent переменной story (которая ссылается на абзац) равным newStory.
    7. -
- -

Советы и подсказки

- - - -

Оценка и помощь

- -

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

- -
    -
  1. Разместите свою работу в онлайн-редакторе, таком как CodePen, jsFiddle или Glitch.
    2. -
  2. Напишите сообщение с просьбой об оценке и / или помощи на форуме MDN Discourse. Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти. Ваш пост должен включать: -
      -
    • Описательное название, такое как «Требуется оценка для генератора глупых историй».
      • -
    • Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.
      • -
    • Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе. Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • -
    • Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}

diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\321\202\321\200\320\276\320\272\320\270/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\321\202\321\200\320\276\320\272\320\270/index.html" deleted file mode 100644 index 583e29182e..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\201\321\202\321\200\320\276\320\272\320\270/index.html" +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: Работа с текстом — строки в JavaScript -slug: Learn/JavaScript/Первые_шаги/Строки -translation_of: Learn/JavaScript/First_steps/Strings ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
- -

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

- - - - - - - - - - - - -
Необходимые навыки:Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.
Цель:Знакомство с основами строк в JavaScript.
- -

Сила слов

- -

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

- -

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

- -

Строки — основы

- -

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

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -

Создание строки

- -
    -
  1. Для начала введите следующие строки: - 
    var string = 'The revolution will not be televised.';
-string;
    -
    2. -
  2. Как и в случае с числами, мы объявляем переменную, инициализируя ее строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. 
    3. -
  3. Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: - 
    var badString = This is a test;
-var badString = 'This is a test;
-var badString = This is a test';
    - Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
    4. -
  4. Следующий код будет выполнен только в том случае, если ранее была объявлена переменная string — убедитесь сами: - 
    var badString = string;
-badString;
    - В настоящее время строка badString имеет то же значение, что и строка string.
    5. -
- -

Одиночные кавычки vs. Двойные кавычки

- -
    -
  1. В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально: - 
    var sgl = 'Single quotes.';
-var dbl = "Double quotes";
-sgl;
-dbl;
    -
    2. -
  2. Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остается на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведен пример: - 
    var badQuotes = 'What on earth?";
    -
    3. -
  3. Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идет речь (в коде ошибок нет): - 
    var sglDbl = 'Would you eat a "fish supper"?';
-var dblSgl = "I'm feeling blue.";
-sglDbl;
-dblSgl;
    -
    4. -
  4. Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается: - 
    var bigmouth = 'I've got no right to take my place...';
    - Что приводит нас к следующей теме.
    5. -
- -

Экранирование кавычек в строках

- -

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

- -
var bigmouth = 'I\'ve got no right to take my place...';
-bigmouth;
- -

Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

- -

Конкатенация строк

- -
    -
  1. Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.
    2. -
  2. - 
    var one = 'Hello, ';
-var two = 'how are you?';
-var joined = one + two;
-joined;
    - Результат этой программы - это переменная joined, содержащая значение "Hello, how are you?".
    3. -
  3. В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите + между ними. Попробуйте это: - 
    var multiple = one + one + one + one + two;
-multiple;
    -
    4. -
  4. Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это: - 
    var response = one + 'I am fine — ' + two;
-response;
    -
    5. -
- -
-

Примечание: Когда вы вводите фактическую строку в свой код, заключенную в одинарные или двойные кавычки, она называется строковым литералом.

-
- -

Конкатенация строк в контексте

- -

Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:

- -
<button>Press me</button>
- -
var button = document.querySelector('button');
-
-button.onclick = function() {
-  var name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
- -

{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}

- -

Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введенный текст внутри заданной переменной — в этом случае name. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной name.

- -

Числа vs. строки

- -
    -
  1. Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли: - 
    'Front ' + 242;
-
    - Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
    2. -
  2. Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув ее в кавычки. Попробуйте следующее (мы используем оператор typeof для того, чтобы установить является ли переменная числом или строкой): - 
    var myDate = '19' + '67';
-typeof myDate;
    -
    3. -
  3. Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции: -
      -
    • Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее: - 
      var myString = '123';
-var myNum = Number(myString);
-typeof myNum;
      -
      • -
    • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это: - 
      var myNum = 123;
-var myString = myNum.toString();
-typeof myString;
      -
      • -
    - Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через Number(), чтобы справиться с этим. Именно это мы сделали в нашей Number Guessing Game,  в строке 61.
    4. -
- -

Заключение

- -

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

- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
- -

В этом модуле

- - diff --git "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\207\321\202\320\276_\320\277\320\276\321\210\320\273\320\276_\320\275\320\265_\321\202\320\260\320\272/index.html" "b/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\207\321\202\320\276_\320\277\320\276\321\210\320\273\320\276_\320\275\320\265_\321\202\320\260\320\272/index.html" deleted file mode 100644 index dbb0a4577a..0000000000 --- "a/files/ru/learn/javascript/\320\277\320\265\321\200\320\262\321\213\320\265_\321\210\320\260\320\263\320\270/\321\207\321\202\320\276_\320\277\320\276\321\210\320\273\320\276_\320\275\320\265_\321\202\320\260\320\272/index.html" +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Что пошло не так? Устранение ошибок JavaScript -slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_так -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}
- -

Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

- - - - - - - - - - - - -
-

Нужно:

- 		базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цельполучить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.
- -

Типы ошибок

- -

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнетесь:

- - - -

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

- -

Ошибочный пример

- -

Чтобы начать работу, давайте вернемся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

- -
    -
  1. Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
    2. -
  2. Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!
    3. -
- -
-

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

-
- -

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

- -

Исправление синтаксических ошибок

- -

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

- -
    -
  1. Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
    2. -
  2. Это довольно простая ошибка для отслеживания, и браузер дает вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть: -
      -
    • Красный «x» означает, что это ошибка.
      • -
    • Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
      • -
    • Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
      • -
    • Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдете по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
      • -
    • Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
      • -
    -
    3. -
  3. Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдем эту строку: - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn имя-функции» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: addEventListener().
    5. -
  5. Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.
    6. -
- -
-

Примечание: См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.

-
- -

Синтаксические ошибки: второй раунд

- -
-

Примечание: console.log() это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение lowOrHi в консоли, как только мы попытаемся установить его в строке 48.

-
- -
    -
  1. Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
    2. -
  2. Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку! 
    3. -
  3. На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78. -
    Примечание: Null — это специальное значение, которое означает "ничего" или "не значение". Поэтому lowOrHi был объявлен и инициализирован без значения — у него нет типа или значения.
    - -
    Примечание: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри checkGuess() { ... } block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция checkGuess() не была запущена строкой 86.
    -
    4. -
  4. Посмотрите на строку 78, и вы увидите следующий код: - 
    lowOrHi.textContent = «Последнее предположение было слишком высоко!»;
    -
    5. -
  5. Эта строка пытается установить свойство textContent переменной lowOrHi как текстовую строку, но это не работает, поскольку lowOrHi не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры lowOrHi в коде. Самый ранний экземпляр, который вы найдете в JavaScript, находится в строке 48: - 
    var lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение  null после выполнения этой строки. Добавьте следующий код в строку 49: - 
    console.log(lowOrHi);
-
    -
    7. -
  7. Сохраните и обновите, и вы должны увидеть результат работы console.log() в консоли браузера. Разумеется, значение lowOrHi на данный момент равно null, поэтому определенно существует проблема в строке 48.
    8. -
  8. Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод document.querySelector() для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент <p>: - 
    <p class="lowOrHi"></p>
-
    -
    9. -
  9. Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод querySelector() в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить lowOrHi на .lowOrHi в строке 48.
    10. -
  10. Повторите попытку сохранения и обновления, и ваш вызов console.log() должен вернуть элемент <p>, который мы хотим. Уф! Еще одна ошибка исправлена! Вы можете удалить строку с  console.log() сейчас, или оставить для дальнейшего применения — выбирайте сами.
    11. -
- -
-

Примечание: Загляните на справочную страницу TypeError: "x" is (not) "y", чтобы узнать больше об этой ошибке.

-
- -

Синтаксические ошибки: третий раунд

- -
    -
  1. Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
    2. -
  2. На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.
    3. -
  3. Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить addeventListener на addEventListener.
    4. -
- -

Логическая ошибка

- -

На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определенно не совсем так, как мы хотим, чтобы игра была разыграна!

- -

Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

- -
    -
  1. Найдем переменную randomNumber , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44: - - 
    var randomNumber = Math.floor(Math.random()) + 1;
-
    - И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры: - - 
    randomNumber = Math.floor(Math.random()) + 1;
-
    -
    2. -
  2. Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу console.log() снова — вставьте ее ниже строк с ошибками: - 
    console.log(randomNumber);
-
    -
    3. -
  3. Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что randomNumber равна 1 в каждой точке, где вы ее записали после строк с ошибками.
    4. -
- -

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

- -

Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), котрый генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

- -
Math.random()
- -

Дальше, мы передаем результат вызова Math.random() через Math.floor(), который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:

- -
Math.floor(Math.random()) + 1;
- -

Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1.  Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернет нам случайное число между 0 и 99:

- -
Math.floor(Math.random() * 100);
- -

поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

- -
Math.floor(Math.random() * 100) + 1;
- -

А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

- -

Другие распространенные ошибки

- -

Существуют и другие распространенные ошибки, которые вы обнаружите в своем коде. В этом разделе показано большинство из них.

- -

SyntaxError: отсутствует ; перед постановкой

- -

Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции checkGuess() :

- -
var userGuess = Number(guessField.value);
- -

на эту

- -
var userGuess === Number(guessField.value);
- -

Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (=), который присваивает значение переменной — с оператором сравнения (===), который строго сравнивает операнды, и возвращает true/false .

- -
-

Примечание: Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

-
- -

В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

- -

Причиной этому является все то же перепутывание оператора присваивания (=) со строгим сравнением (===). Например, если мы изменим внутри checkGuess() эту строку кода:

- -
if (userGuess === randomNumber) {
- -

на эту

- -
if (userGuess = randomNumber) {
- -

мы всегда будем получать true, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

- -

SyntaxError: отсутствует ) после списка аргументов

- -

Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

- -
-

Примечание: Загляните на справочную страницу  SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

-
- -

SyntaxError: missing : after property id

- -

Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить ее, изменив

- -
function checkGuess() {
- -

на

- -
function checkGuess( {
-
- -

Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!

- -

SyntaxError: missing } after function body

- -

Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции  checkGuess().

- -

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

- -

Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше,  строка  будет заменена на неожиданный персонаж (ей) , что браузер нашел вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.

- -

При всех этих ошибках действуйте так, как в наших  примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!

- -
-

Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершенная строка эталонных страниц для получения более подробной информации об этих ошибках.

-
- -

Резюме

- -

Итак, мы научились основам  выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.

- -

Смотрите также

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}

-- cgit v1.2.3-54-g00ecf