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 --- .../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 +++++++ 10 files changed, 3947 insertions(+) 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 (limited to 'files/ru/learn/javascript/first_steps') 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/Первые_шаги")}}

-- cgit v1.2.3-54-g00ecf