unslug ru: move

10 files changed, 3947 insertions, 0 deletions

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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">Теперь, когда вы получили <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript">базовое представление о JavaScript</a> — самое время познакомиться с ним на практике! В данной статье представлен ускоренный практический курс, демонстрирующий основные возможности JavaScript. В этом курсе, шаг за шагом, вы создадите простую игру «Угадай число».</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цели:</th>
+   <td>Получение первого опыта в программировании на JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вам не придется сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!</p>
+
+<div class="note">
+<p>Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.</p>
+</div>
+
+<h2 id="Думай_как_программист">Думай как программист</h2>
+
+<p>Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:</p>
+
+<ul>
+ <li>Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаете описание полного цикла её работы.</li>
+ <li>Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.</li>
+</ul>
+
+<p>Всё вместе это потребует тяжелой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнете "думать как программист", но предоставим для этого достаточно возможностей в этой статье.</p>
+
+<p>Учитывая вышесказанное, на примере простой игры, давайте детально разберем каждый этап создания программы и познакомимся с некоторыми конструкциями языка.</p>
+
+<h2 id="Игра_«Угадай_число»">Игра «Угадай число»</h2>
+
+<p>В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Number guessing game&lt;/h1&gt;
+    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    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;
+
+    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!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Wrong!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent='Last guess was too low!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too high!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    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);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      var resetParas = document.querySelectorAll('.resultParas p');
+      for(var i = 0 ; i &lt; 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;
+    }
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p>
+
+<p>Поиграйте в нее - познакомьтесь с игрой, прежде чем двигаться дальше.</p>
+
+<p>Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:</p>
+
+<blockquote>
+<p>Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввел. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру еще раз.</p>
+</blockquote>
+
+<p>Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:</p>
+
+<ol>
+ <li>Сгенерировать случайное число между 1 и 100.</li>
+ <li>Начать запись количества попыток игрока угадать число. Начать с 1.</li>
+ <li>Предоставить попытку угадать игроку загаданное число.</li>
+ <li>Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки</li>
+ <li>Далее, проверить было ли это число верным.</li>
+ <li>Если число верное:
+  <ol>
+   <li>Показать поздравительное сообщение.</li>
+   <li>Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).</li>
+   <li>Предоставить возможность для перезапуска игры.</li>
+  </ol>
+ </li>
+ <li>Если число не верное и есть попытки:
+  <ol>
+   <li>Сказать игроку, что он не угадал.</li>
+   <li>Разрешить ему использовать еще попытку.</li>
+   <li>Повысить число попыток на 1.</li>
+  </ol>
+ </li>
+ <li>Если число не верное и попыток нет:
+  <ol>
+   <li>Сказать игроку, что игра окончена.</li>
+   <li>Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).</li>
+   <li>Предоставить возможность для перезапуска игры.</li>
+  </ol>
+ </li>
+ <li>Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.</li>
+</ol>
+
+<p>Давайте теперь перейдем к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.</p>
+
+<h3 id="Подготовка">Подготовка</h3>
+
+<p>В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файла  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a>  (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">см. здесь</a>).  Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.</p>
+
+<p>Место, где мы будем добавлять весь наш код, находится внутри элемента {{htmlelement("script")}} в нижней части HTML:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Добавление_переменных_для_хранения_данных">Добавление переменных для хранения данных</h3>
+
+<p>Давайте начнем. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :</p>
+
+<pre class="notranslate"><code>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;</code></pre>
+
+<p>В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаете переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.</p>
+
+<p>В нашем примере:</p>
+
+<ul>
+ <li>Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.</li>
+ <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведенные далее в коде:
+  <pre class="brush: html notranslate">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки .
+  <pre class="brush: html notranslate">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая еще не существует (но позже).</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>:<strong> </strong>В дальнейшем вы узнаете намного больше о переменных, в следующей статье.</p>
+</div>
+
+<h3 id="Функции_Functions">Функции (Functions)</h3>
+
+<p>Затем добавьте следующие ниже предыдущего JavaScript:</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово <code>function</code>, за ним идет имя с двумя скобками после него. После этого мы добавляем две фигурные скобки (<code>{ }</code>). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.</p>
+
+<p>Код запускается вводом имени функции, за которым следуют две скобки.</p>
+
+<p>Сейчас попробуйте сохранить код и обновить его в браузере.</p>
+
+<p>Перейдите к <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоли JavaScript в инструментах разработчика</a>, и введите следующую строку:</p>
+
+<pre class="brush: js notranslate">checkGuess();</pre>
+
+<p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создает предупреждение, когда ее вызывают.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: В дальнейшем вы намного больше узнаете о функциях.</p>
+</div>
+
+<h3 id="Операторы_Operators">Операторы (Operators)</h3>
+
+<p>Операторы JavaScript позволяют нам проводить проверки, математические рассчеты, объединять строки вместе и выполнять другие подобные действия.</p>
+
+<p>Сохраните наш код и обновите страницу показанную в браузере. Откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль JavaScript</a>, если вы еще её не открыли, чтобы попробовать ввести текст из приведенных ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputParas = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputParas.textContent = '&gt;';
+      inputDiv.appendChild(inputParas);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputParas = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputParas.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputParas);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<p>Сначала давайте посмотрим на арифметические операторы, например:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Имя</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Сложение</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Вычитание</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Умножение</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Деление</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы также можете использовать оператор <code>+</code> для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:</p>
+
+<pre class="brush: js notranslate">var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;</pre>
+
+<p>Также есть сокращенные операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p>
+
+<pre class="brush: js notranslate">name += ' says hello!';</pre>
+
+<p>Это эквивалентно этому:</p>
+
+<pre class="brush: js notranslate">name = name + ' says hello!';</pre>
+
+<p>Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри {{anch("Conditionals", "ниже")}}), мы используем операторы сравнения, например:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Имя</th>
+   <th scope="col">Пример</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Строгое равенство (это точно одно и то же?)</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Строгое неравенство (это не одно и то же?)</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Меньше чем</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Больше чем</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Условные_выражения_Conditionals">Условные выражения (Conditionals)</h3>
+
+<p>Вернемся к нашей функции <code>checkGuess()</code>, я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответсвующе реагировала.</p>
+
+<p>Теперь, заменим вашу текущую функцию<code>checkGuess()</code> на эту версию:</p>
+
+<pre class="brush: js notranslate">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 &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.</p>
+
+<ul>
+ <li>Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем <code>userGuess</code> и устанавливает ее значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод <code>Number()</code>, чтобы убедится, что значение точно является числом.</li>
+ <li>Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определенное условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова <code>if</code>, за ним круглые скобки, за ними еще фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает <code>true</code>, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменая <code>guessCount</code> числу <code>1</code> (то есть является ли это первой попыткой игрока или нет):
+  <pre class="brush: js notranslate">guessCount === 1</pre>
+  Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.</li>
+ <li>Строка 6 добавяет текущее знаение <code>userGuess</code>  в конец параграфа <code>guesses</code>, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.</li>
+ <li>Следующий блок (строки 8–24 ) делает несколько проверок:
+  <ul>
+   <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Первая конструкция  </span></font>if(){ }</code> проверяет, совпадает ли предположение пользователя с <code>randomNumber</code> установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зеленым цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.</li>
+   <li>Теперь мы добавили еще одну проверку после пердыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.</li>
+   <li>Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него еще остались  догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем еще один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.</li>
+  </ul>
+ </li>
+ <li>Последние три строки в функции (строки 26–28 ) готовят нас к следующей попытке. Мы добавляем 1 к переменной <code>guessCount</code>  так как игрок использовал свой ход (<code>++</code> оператор инкремента — увеличивает на 1), очищаем значение текстового поля и фокусируемся на нем снова,  готовы для ввода следующего ответа.</li>
+</ul>
+
+<h3 id="События_Events">События (Events)</h3>
+
+<p><span id="result_box" lang="ru"><span>На данный момент у нас есть хорошо реализованная функция <code>checkGuess()</code>, но она ничего не сделает, потому что мы еще не вызвали ее.</span> <span>В идеале мы хотим вызывать её во время нажатия кнопки «</span></span> Submit guess <span lang="ru"><span>», и для этого нам нужно использовать событие.</span> <span>События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода.</span> <span>Конструкции, которые прослушивают событие, называются <strong>прослушивателями событий</strong>, а блоки кода, выполняемые в ответ на срабатывание событий, называются <strong>обработчиками событий</strong>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Добавьте следующую строку ниже закрывающей фигурной скобки функции <code>checkGuess()</code>:</span></span></p>
+
+<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p><span id="result_box" lang="ru"><span>Здесь мы добавляем прослушиватель событий к кнопке <code>guessSubmit</code>.</span> <span>Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы выслушиваем (в данном случае <code>click</code>) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае</span> <span>функция <code>checkGuess()</code> - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри</span></span> {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p>
+
+<p><span id="result_box" lang="ru"><span>Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определенного момента.</span> <span>Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы еще не определили функцию <code>setGameOver()</code>, которая должна запускаться после завершения игры.</span> <span>Давайте добавим наш недостающий код и завершим пример функциональности.</span></span></p>
+
+<h3 id="Завершение_игры">Завершение игры</h3>
+
+<p><span id="result_box" lang="ru"><span>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдем по ней.</span> <span>Добавьте это под нижней частью вашего JavaScript:</span></span></p>
+
+<pre class="brush: js notranslate">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);
+}</pre>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключенные свойства как <code>true</code>.</span> <span>Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку «</span></span> Start new game<span lang="ru"><span>» и добавляют ее к нижней части нашего HTML.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Последняя строка устанавливает прослушиватель событий на нашей новой кнопке, так что при нажатии на нее запускается функция <code>resetGame()</code>.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>Теперь нам нужно также определить эту функцию!</span> <span>Добавьте следующий код, снова в нижнюю часть вашего JavaScript:</span></span></p>
+
+<pre class="brush: js notranslate">function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i &lt; 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;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>Этот довольно длинный блок кода полностью сбрасывает все на то, как это было в начале игры, поэтому у игрока может быть еще один ход.</span> <span>Это:</span></span></p>
+
+<ul>
+ <li>Устанавливает значение <code>guessCount</code> на 1.</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Удаляет все пункты информации</span></span>.</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Удаляет кнопку сброса из нашего кода.</span></span></li>
+ <li>Включает элементы формы, устанавливает фокус, делает поле доступным для следующих угадываний.</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Удаляет цвет фона из абзаца <code>lastResult</code>.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Создает новое случайное число, чтобы вы не угадывали одно и тоже!</span></span></li>
+</ul>
+
+<p><strong><span id="result_box" lang="ru"><span>С этого момента у вас есть </span></span><span id="result_box" lang="ru"><span>полностью работающая (простая) игра - поздравляем!</span></span></strong> <span lang="ru"><span> </span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Все, что нам осталось сделать в этой статье, - это поговорить о нескольких других важных функциях кода, которые вы уже видели, хотя вы, возможно, этого не осознали.</span></span></p>
+
+<h3 id="Циклы_Loops">Циклы (Loops) </h3>
+
+<div class="_Ejb">
+<div id="tw-target">
+<div class="tw-nfl tw-compact-ta-container" id="tw-target-text-container">Одна часть вышеприведенного кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определенное условие.</div>
+
+<div class="tw-nfl tw-compact-ta-container">Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:</div>
+</div>
+</div>
+
+<pre class="brush: js notranslate">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p><span lang="ru">Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):</span><br>
+ <span lang="ru">Начальное значение: в этом случае мы начинаем подсчет c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i &lt;21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.</span></p>
+
+<p><span lang="ru">Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:</span></p>
+
+<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p><span lang="ru">Этот код создает переменную, содержащую список всех абзацев внутри &lt;div class = "resultParas"&gt;, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.</span></p>
+
+<h3 id="Немного_об_объектах_Objects">Немного об объектах (Objects)</h3>
+
+<p>Давайте добавим еще одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - дает пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p>
+
+<p>Давайте проанализируем, что произошло. В JavaScript все элементы являются объектами. Объект - это набор связанных функций, хранящихся в одной группе<em>. </em>Вы можете создавать собственные объекты, но это требует мастерства, и мы не хотели бы раскрывать эту тему в рамках данного курса. Будет достаточно обсудить встроенные объекты вашего браузера, которые позволяют реализовывать множество полезных вещей.</p>
+
+<p>В нашем примере мы сначала создали переменную <code>guessField</code>, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:</p>
+
+<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre>
+
+<p>Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. <code>querySelector()</code> "берет" одну часть информации -  <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>, который выбирает нужный элемент<em>.</em></p>
+
+<p>Поскольку <code>guessField</code> теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Для переменных, которые не содержат ссылок на элементы формы, не будет доступен <code>focus()</code>. Например, переменная <code>guesses</code> содержит ссылку на элемент {{htmlelement ("p")}}, а <code>guessCount</code> содержит число.</p>
+
+<h3 id="Поиграем_с_объектами_браузера">Поиграем с объектами браузера</h3>
+
+<p>Давайте немного поиграем с некоторыми объектами браузера.</p>
+
+<ol>
+ <li>Для начала запустите свою программу в браузере.</li>
+ <li>Далее, откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика в вашем браузере</a>, и убедитесь, что вы перешли во вкладку с консолью JavaScript.</li>
+ <li>Введите <code>guessField</code> и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!</li>
+ <li>Теперь введите следующее:
+  <pre class="brush: js notranslate">guessField.value = 'Hello';</pre>
+  Свойство <code>value</code> представляет текущее значение, введенное в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li>
+ <li>Попробуйте ввести <code>guesses</code> и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.</li>
+ <li>Теперь попробуйте ввести:
+  <pre class="brush: js notranslate">guesses.value</pre>
+  Браузер вернет вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li>
+ <li>Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте:
+  <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой:
+  <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Каждый элемент на странице имеет свойство <code>style</code>, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.</li>
+</ol>
+
+<h2 id="Теперь_можно_отдохнуть...">Теперь можно отдохнуть...</h2>
+
+<p>Итак, на этом пример закончился - отлично, вы добрались до конца! Попробуйте свой финальный код или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">поиграйте с нашей готовой версией здесь</a>. Если вы не можете запустить этот пример, сверьтесь с <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">исходным кодом.</a></p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}</p>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймем, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Понять, что такое массивы и как использовать их в JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_массив">Что такое массив?</h2>
+
+<p>Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причем разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счете-фактуре, общая сумма всех цен и распечатка общей цены внизу.</p>
+
+<p>Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.</p>
+
+<p><span id="result_box" lang="ru"><span>Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript.</span> <span>Мы предоставили один ниже (вы также можете</span></span> <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this console</a> в отдельном окне, или использовать <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a>, если вам угодно).</p>
+
+<div class="hidden">
+<h6 id="Спрятанный_код">Спрятанный код</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="Создание_массива">Создание массива</h3>
+
+<p>Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.</p>
+
+<ol>
+ <li>Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:
+  <pre class="brush: js">var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это:
+  <pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+var random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.</li>
+</ol>
+
+<h3 id="Получение_и_изменение_элементов_массива">Получение и изменение элементов массива</h3>
+
+<p>Вы можете после этого получать доступ к отдельным элементам в массиве, используя квадратные скобки, таким же способом каким вы <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">получаете доступ к буквам в строке</a>.</p>
+
+<ol>
+ <li>Введите следующее в вашу консоль:
+  <pre class="brush: js">shopping[0];
+// возвращает "bread"</pre>
+ </li>
+ <li>Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это:
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>Заметка</strong>: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!</div>
+ </li>
+ <li>Заметьте, что массив внутри массива называется многомерным массивом. <span id="result_box" lang="ru"><span>Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок.</span> <span>Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива <code>random </code>(см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого:</span></span>
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.</li>
+</ol>
+
+<h3 id="Нахождение_длины_массива">Нахождение длины массива</h3>
+
+<p>Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:</p>
+
+<pre class="brush: js">sequence.length;
+// должно возвратить 7</pre>
+
+<p>Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:</p>
+
+<pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:</span></span></p>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Начать цикл с номера позиции 0 в массиве.</span></span></li>
+ <li>Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).</li>
+ <li><span id="result_box" lang="ru"><span>Для каждого элемента вернуть его значение в консоли браузера с помощью</span></span> <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
+</ol>
+
+<h2 id="Некоторые_полезные_методы_массивов">Некоторые полезные методы массивов</h2>
+
+<p><span id="result_box" lang="ru"><span>В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот, а также добавлять новые элементы в массивы.</span></span></p>
+
+<h3 id="Преобразование_между_строками_и_массивами"><span class="short_text" id="result_box" lang="ru"><span>Преобразование между строками и массивами</span></span></h3>
+
+<p>Часто у Вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Хорошо, технически это строковый метод, не метод массива, <span id="result_box" lang="ru"><span>но мы поместили его в массивы, так как он хорошо подходит для них.</span></span></p>
+</div>
+
+<ol>
+ <li>Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
+  <pre class="brush: js">var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>Теперь разделим ee посредством запятой:
+  <pre class="brush: js">var myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы:
+  <pre class="brush: js">myArray.length;
+myArray[0]; // первый элемент в массиве
+myArray[1]; // второй элемент в массиве
+myArray[myArray.length-1]; // последний элемент в массиве</pre>
+ </li>
+ <li>Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее:
+  <pre class="brush: js">var myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li> Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . <code>toString() ,</code>возможно, проще,чем <code>join()</code> поскольку он не принимает параметр, но это ограничивает его. С <code>join()</code>вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой).
+  <pre class="brush: js">var dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="Добавление_и_удаление_элементов_массива">Добавление и удаление элементов массива</h3>
+
+<p>Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив <code>myArray</code> , с которым мы столкнулись в предыдущем разделе. Если вы еще не прошли этот раздел, сначала создайте массив в консоли:</p>
+
+<pre class="brush: js">var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.</p>
+
+<ol>
+ <li>Давайте сначала используем метод <code>push()</code> — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это:
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого:
+  <pre class="brush: js">var newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>Удаление последнего элемента массива можно совершить с помощью вызова метода <code>pop()</code>. Попробуйте это:
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое:
+  <pre class="brush: js">var removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.</p>
+
+<ol>
+ <li>Сначала, попробуем метод <code>unshift()</code>:
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>Теперь <code>shift()</code>; попробуйте эти!
+  <pre class="brush: js">var removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="Практика_Печать_продуктов!">Практика: Печать продуктов!</h2>
+
+<p>Вернемся к описанному выше примеру - распечатываем названия продуктов и цен на счет-фактуру, затем суммируем цены и печатаем их внизу. В приведенном ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:</p>
+
+<ol>
+ <li>Ниже комментария <code>// number 1</code>  имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Нужно превратить их в массив и сохранить его  под названием  <code>products</code>.</li>
+ <li>На строке с комментарием <code>// number 2</code>  начинается цикл for. В строке цикла имеется<code> i &lt;= 0</code>, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда <code>i</code> меньше или равен 0», при этом <code>i</code> начинается с 0. Нужно заменить <code>i &lt;= 0</code> условным тестом, который останавливает цикл, когда <code>i</code> перестает быть меньше длины массива <code>products</code> .</li>
+ <li>Под комментарием <code>// number 3</code> мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (<code>name:price</code>) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, еще раз просмотрите статью <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.</li>
+ <li>В рамках приведенной выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьей <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Строки">строки в JavaScript</a>.</li>
+ <li>В верхней части кода есть переменная с именем <code>total</code> , которая содержит значение <code>0</code>. Внутри цикла (под комментарием <code>// number 4</code>) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счет-фактуре. Для этого вам может понадобится <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Операторы_присваивания">оператор присваивания</a>.</li>
+ <li>Под комментарием <code>// number 5</code> нужно изменить строку так, чтобы переменная <code>itemText</code> была равна "current item name — $current item price",  например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счете-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;!-- Не выделяйте тут ничего, не копируйте, не всавляйте!
+     Еле починил --&gt;
+
+&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background-color: #f5f9fa;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Практика_Топ_5_поисовых_запросов">Практика: Топ 5 поисовых запросов</h2>
+
+<p>Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.</p>
+
+<p>В этом примере мы собираемся показать гораздо более простое использование - ниже мы даем вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.</p>
+</div>
+
+<p>Чтобы завершить приложение, вам необходимо:</p>
+
+<ol>
+ <li>Добавьте строку под комментарием <code>// number 1</code>, которая добавляет текущее значение, введенное в ввод поиска, к началу массива. Его можно получить с помощью <code>searchInput.value</code>.</li>
+ <li>Добавьте строку под комментарием <code>// number 2</code>, которая удаляет значение, находящееся в конце массива.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;!-- Здесь тоже ничего не выделяйте, не копируйте, не всавляйте!
+  Еле починил --&gt;
+
+&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+
+&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!</p>
+
+<p>Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые Вы прочли до этого момента. Удачи!</p>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li>
+ <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}</p>
+
+<h2 id="В_этом_разделе">В этом разделе</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Что такое JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Массивы</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">В нашем первом модуле, прежде чем перейти к практике написания кода на языке JavaScript, сначала мы дадим ответы на некоторые фундаментальные вопросы, а именно: "Что же такое JavaScript?", "Что он из себя представляет?" и "Что он может делать?". После этого мы внимательно рассмотрим некоторые из ключевых элементов, такие как переменные, строки, числа и массивы.</p>
+
+<h2 id="Предисловие">Предисловие</h2>
+
+<p>Вам не нужно иметь никаких предварительных знаний JavaScript чтобы приступить к этому модулю, но у вас должно быть некоторое представление о HTML и CSS. Рекомендуем ознакомиться со следующими материалами, прежде чем начинать знакомство с JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">Начало работы с Web</a>  (которое включает в себя общее <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">введение в Javascript</a>)</li>
+ <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a></li>
+</ul>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Примечание:</strong></span>  Если Вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как  <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>, для запуска примеров кода. </p>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript">Что такое JavaScript?</a></dt>
+ <dd>Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения. </dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">Первое погружение в JavaScript</a></dt>
+ <dd>Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA">Что пошло не так? Устранение ошибок JavaScript</a></dt>
+ <dd>В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript коде.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables">Хранение нужной вам информации - Переменные</a></dt>
+ <dd>После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с <strong>Переменными</strong>.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math">Базовая математика в JavaScript — числа и операторы</a></dt>
+ <dd>Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8">Работа с текстом — строки в JavaScript</a></dt>
+ <dd>Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.</dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods">Полезные строковые методы</a></dt>
+ <dd>После того как мы рассмотрели основы работы со строками, давайте двинемся дальше и поговорим о том какие полезные операторы и методы существуют для строк, такие как вычисление длины, соединение и разделение строк, замена отдельных символов и многие другие. </dd>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays">Массивы</a></dt>
+ <dd>В последней статье этого модуля мы рассмотрим массивы - изящный способ хранения различных наборов информации в имени всего одной переменной. Здесь мы поговорим о том почему это может быть полезным, рассмотрим как создать массив, получить, добавить или удалить элемент массива, и прочее.</dd>
+</dl>
+
+<h2 id="Проверка_полученных_знаний">Проверка полученных знаний</h2>
+
+<p>Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки. </p>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9">Генератор глупых историй</a></dt>
+ <dd>Вашим заданием будет применить на практике полученные знания и создать развлекательное приложение которое будет генерировать случайные нелепые истории.</dd>
+</dl>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать {{Glossary("Operator","operators")}} и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Ознакомление с основами математики в JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Все_любят_математику">Все любят математику</h2>
+
+<p>Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без нее. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.</p>
+
+<p>В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.</p>
+
+<h3 id="Типы_чисел">Типы чисел</h3>
+
+<p>В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:</p>
+
+<ul>
+ <li><strong>Целые </strong>— это целые числа, такие как: 10, 400, или -5.</li>
+ <li><strong>С плавающей точкой </strong><em>(или: с плавающей запятой) </em>— имеют целую и дробную части, например: 12.5 или 56.7786543.</li>
+ <li><strong>Doubles </strong>— тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).</li>
+</ul>
+
+<p>У нас даже есть разные типы числовых систем:</p>
+
+<ul>
+ <li><strong>Бинарная</strong> — низкоуровневый язык компьютеров; нули и единицы (0 и 1);</li>
+ <li><strong>Восьмеричная</strong> — 8-ми разрядная, использует 0–7 в каждом столбце;</li>
+ <li><strong>Десятичная</strong> — 10-ти разрядная, использует 0-9 в каждом столбце;</li>
+ <li><strong>Шестнадцатеричная</strong> — 16-ти разрядная, используюет 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">цвет в CSS</a>.</li>
+</ul>
+
+<p><strong>Прежде чем взорвется ваш мозг, остановитесь прямо здесь и сейчас!</strong> </p>
+
+<p>Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней сталкнетесь.</p>
+
+<p>Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это {{jsxref("Number")}}. Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.</p>
+
+<h3 id="Для_меня_всё_—_числа">Для меня всё — числа</h3>
+
+<p>Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте простую встроенную консоль.</p>
+
+<ol>
+ <li>Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке:
+  <pre class="brush: js">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.</li>
+ <li>Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки:
+  <pre class="brush: js">typeof myInt;
+typeof myFloat;</pre>
+  В обоих случаях вы должны получить <code>"number"</code> — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.</li>
+</ol>
+
+<h2 id="Арифметические_операторы">Арифметические операторы</h2>
+
+<p dir="ltr" id="tw-target-text">Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Имя</th>
+   <th scope="col">Функция</th>
+   <th scope="col">Пример</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Сложение</td>
+   <td>Объединение чисел в одно целое.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Вычитание</td>
+   <td>Вычитает правое число от левого.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Умножение</td>
+   <td>Умножает два числа вместе.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Деление</td>
+   <td>Делит левое число на правое.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Модуль числа</td>
+   <td>
+    <p>Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.</p>
+   </td>
+   <td>
+    <p><code>11 % 3 = 2</code> (поскольку число 3 вмещается три раза, остатком будет число 2)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>**</code></td>
+   <td>показатель степени</td>
+   <td>Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.</td>
+   <td><code>5 ** 5</code> (возвращает 3125, или как: 5*5*5*5*5)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание</strong>: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).</p>
+</div>
+
+<p dir="ltr" id="tw-target-text">Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведенные ниже примеры в свою консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.</p>
+
+<ol>
+ <li>Для начала попробуйте ввести простые примеры, такие как:
+  <pre class="brush: js">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например:
+  <pre class="brush: js">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>И напоследок, попробуйте ввести более сложные выражения, например:
+  <pre class="brush: js">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведенный ниже раздел может дать ответ на вопрос о том, почему.</p>
+
+<h3 id="Приоритет_операторов">Приоритет операторов</h3>
+
+<p>Давайте взглянем на последний пример сверху. Предположим, что <code>num2</code> содержит значение 50 и <code>num1</code> содержит значение 10 (как и было обозначено выше):</p>
+
+<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
+
+<p>Будучи человеком, вы, вероятно, прочитаете это как <em>"50 плюс 10 равно 60",</em> затем <em>"8 плюс 2 равно 10"</em>, и, наконец, <em>"60 делить на 10 равно 6"</em>.</p>
+
+<p>Но браузер видит это по-другому: <em>"10 делить на 8 равно 1.25", </em>затем <em>"50 плюс 1.25 плюс 2 равно 53.25".</em></p>
+
+<p>Это происходит из-за <strong>приоритета операторов</strong> - некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании ее называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе - умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).</p>
+
+<p>Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:</p>
+
+<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
+
+<p>Результат этого выражения равен 6.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+</div>
+
+<h2 id="Операторы_инкремента_и_декремента">Операторы инкремента и декремента</h2>
+
+<p>Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (<code>++</code>) и декремента (<code>--</code>). Мы использовали <code>++</code> в нашей игре "Угадай число" в статье <a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">первое погружение в JavaScript</a>, где мы добавляли 1 к переменной <code>guessCount</code>, в которой хранилось значение количества попыток пользователя после каждого хода.</p>
+
+<pre class="brush: js">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Замечание</strong>: инкремент и декремент часто используются в <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">циклах</a>, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придется в цикле обойти каждую цену и провести необходимые вычисления для учета налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.</p>
+</div>
+
+<p>Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредсвенно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновленное число, а не просто вычисляем значение. Следующий пример приведет к ошибке:</p>
+
+<pre class="brush: js">3++;</pre>
+
+<p>Таким образом, вы можете применить инкремент только к существующим переменным:</p>
+
+<pre class="brush: js">var num1 = 4;
+num1++;</pre>
+
+<p>Так, вторая странность! Если вы сделаете это, вы получите значение 4 - бразуер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применен, узнав значение переменной еще раз:</p>
+
+<pre class="brush: js">num1;</pre>
+
+<p>То же самое для <code>--</code>: попробуйте пример ниже</p>
+
+<pre class="brush: js">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Замечание</strong>: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху еще раз, но в этот раз используйте <code>++num1</code> и <code>--num2</code>. </p>
+</div>
+
+<h2 id="Операторы_присваивания">Операторы присваивания</h2>
+
+<p>Операторы присваивания - операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, <code>=</code>, он просто приравнивает значение переменной слева к значению справа:</p>
+
+<pre class="brush: js">var x = 3; // x содержит значение 3
+var y = 4; // y содержит значение 4
+x = y; // x теперь содержит значение y (x == 4)</pre>
+
+<p>Однако есть еще несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+   <th scope="col">Shortcut for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Присваивание сложения</td>
+   <td>Прибавляет значение справа к переменной слева и возвращает новое значение переменной</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Присваивание вычитания</td>
+   <td>Вычитает значение справа из переменной слева и возвращает новое зачение переменной</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>
+    <p>Присваивание умножения</p>
+   </td>
+   <td>Умножает переменную слева на значение справа и возвращает новое зачение переменной</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Присваивание деления</td>
+   <td>Делит переменную слева на значение справа и возвращает новое зачение переменной</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?</p>
+
+<p>Замьтете, что значение справа может быть как числом (константой), так и переменной, например:</p>
+
+<pre class="brush: js">var x = 3; // x содержит значение 3
+var y = 4; // y содержит значение 4
+x *= y; // x содержит значение 12</pre>
+
+<div class="note">
+<p><strong>Заметка: есть еще <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">другие операторы присваивания</a></strong>,<strong> в этой статье перечислены только самые базовые.</strong></p>
+</div>
+
+<h2 id="Активное_обучение_меняем_размеры_коробки">Активное обучение: меняем размеры коробки</h2>
+
+<p>В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое назывется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными <code>x</code> и <code>y</code>, которые изначально равны 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Открыть в новом окне</a></strong></p>
+
+<p>В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:</p>
+
+<ul>
+ <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифмитического оператора.</li>
+ <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причем 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.</li>
+ <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).</li>
+ <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычилено с помощью трех чисел и операторов вычитания и деления.</li>
+ <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.</li>
+ <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причем 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.</li>
+</ul>
+
+<p>Не расстраивайтесть, если вы не поняли код сверху. Нажмите кнопку <em>Reset</em> для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом еще (или, например, предложить друзьям несколько заданий).</p>
+
+<h2 id="Операторы_сравнения">Операторы сравнения</h2>
+
+<p>Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата - для этого мы используем <strong>операторы сравнения</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Оператор</th>
+   <th scope="col">Имя</th>
+   <th scope="col">Назначение</th>
+   <th scope="col">Пример</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Строгое равенство</td>
+   <td>Проверяет левое и правое значения на идентичность</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Строгое неравенство</td>
+   <td>Проверяет левое и правое значения на <strong>не</strong>идентичность</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Меньше</td>
+   <td>Проверяет, меньше ли левое значение правого</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Больше</td>
+   <td>Проверяет, больше ли левое значение правого</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>Меньше или равно</td>
+   <td>Проверят, меньше ли левое значение правому (или равно ему)</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>Больше или равно</td>
+   <td>Проверят, больше ли левое значение левого (или равно ему)</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Заметка</strong>: вы можете заметить, что некоторые люди используют <code>==</code> и <code>!=</code> в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от <code>===</code>/<code>!==</code> — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара - строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно ее.</p>
+</div>
+
+<p>Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения <code>true</code>/<code>false</code> — о типе данных <code>boolean</code> мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:</p>
+
+<ul>
+ <li>Порождать текст на кнопке в зависимости от того, нажата она или нет.</li>
+ <li>Высвечивать сообщение о поражении при проигрыше или поздравление при победе в игре.</li>
+ <li>Показывать пользователю верное окно приветствия в зависимости от времени года.</li>
+ <li>Увеличивать или уменьшать карту при выборе одной из двух опций.</li>
+</ul>
+
+<p>Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:</p>
+
+<pre class="brush: html">&lt;button&gt;Запустить машину&lt;/button&gt;
+&lt;p&gt;Машина остановлена&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">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.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Открыть в новом окне</a></strong></p>
+
+<p>Мы использовали оператор равенства внутри функции <code>updateBtn()</code>. В этом случае мы не проверяем пару математических выражений на равенcтво значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращем все обратно. </p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Такой элемент управления, который переключается между двумя состояниями, обычно называется <strong>тумблером</strong>. Он переключается между одним состоянием и другим: свет включен, свет выключен и т. д.</p>
+</div>
+
+<h2 id="Итого">Итого</h2>
+
+<p>В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.</p>
+
+<p>В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотерть главный раздел JavaScript MDN. Статьи <a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа и даты</a> и <a href="/ru/docs/Web/JavaScript/Reference/Operators">Выражения и операторы</a> - хороший вариант для начала.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}</p>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требования:</th>
+   <td>Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Начальная_точка">Начальная точка</h2>
+
+<p>Для начала испытания вам следует:</p>
+
+<ul>
+ <li>Перейти и <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">скопировать файл HTML</a> как пример, сохранив его локальную копию как  <code>index.html</code> в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.</li>
+ <li>Перейти на <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">страницу, содержащую исходный текст, </a>и оставить ее открытой в отдельной вкладке браузера. Она вам понадобится позже.</li>
+</ul>
+
+<div class="note">
+<p><strong>Замечание</strong>:  Так же вы можете использовать такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <code>&lt;script&gt;</code> элемент внутри  HTML страницы.</p>
+</div>
+
+<h2 id="Краткое_описание_проекта"><span class="short_text" id="result_box" lang="ru"><span>Краткое описание проекта</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript;</span> <span>вам необходимо написать необходимый JavaScript код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:</span></span></p>
+
+<ul>
+ <li>Создает глупую историю по нажатию на кнопку "Generate random story".</li>
+ <li>Заменяет стандартное имя "Bob" в истории на свое имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.</li>
+ <li>Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.</li>
+ <li>Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )</li>
+</ul>
+
+<p>Следующий скриншот показывает пример того, что должна выводить законченная программа:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Чтобы вы больше поняли идею <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">опробуйте готовый пример</a> (<span class="short_text" id="result_box" lang="ru"><span>не заглядывая в исходный код!</span></span>)</p>
+
+<h2 id="Шаги_к_цели">Шаги к цели</h2>
+
+<p>Следующие разделы описывают, что вам нужно будет сделать.</p>
+
+<p>Начальная подготовка:</p>
+
+<ol>
+ <li>Создайте новый файл под названием <code>main.js</code> в той же папке, что и <code>index.html</code>.</li>
+ <li>Подключите данный JavaScript документ в ваш HTML файл с помощью {{htmlelement("script")}} элемента привязки <code>main.js</code>. Разместите его прямо перед закрывающимся <code>&lt;/body&gt;</code> тегом.</li>
+</ol>
+
+<p>Задайте переменные и функции:</p>
+
+<ol>
+ <li>В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла <code>main.js</code>. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (<code>customName</code>),  кнопку "Generate random story" (<code>randomize</code>), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (<code>story</code>), соответственно. Также у вас должна быть функция<code>randomValueFromArray()</code>, котрая принимает массив и случайным образом возвращает оттуда один из элементов.</li>
+ <li>Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле <code>main.js</code>:
+  <ol>
+   <li>Сохраните первую большую строку текста в переменную <code>storyText</code>.</li>
+   <li>Сохраните первый блок из трех строк как массив, назвав его <code>insertX</code>.</li>
+   <li>Сохраните второй блок из трех строк как массив, назвав его <code>insertY</code>.</li>
+   <li>Сохраните третий блок из трех строк как массив, назвав его <code>insertZ</code>.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Создание обработчика событий и неполной функции:</p>
+
+<ol>
+ <li>Теперь возвращаемся к исходному текстовому файлу.</li>
+ <li>Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставте его в конец файла <code>main.js</code>. Это:
+  <ul>
+   <li>Добавит обработчик события кликанья в переменную <code>randomize</code>,  Так что, когда кнопка будет нажата -  функция <code>result()</code> запустится.</li>
+   <li>Добавляет в код частично завершенную функцию <code>result()</code>. В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Завершение функции <code>result()</code>:</p>
+
+<ol>
+ <li>Создайте новую переменную <code>newStory</code> и установите ее значение равным <code>storyText</code>. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в <code>storyText</code>, мы могли бы генерировать новую историю только один раз.</li>
+ <li>Создайте три новые переменные, называемые <code>xItem</code>, <code>yItem</code> и <code>zItem</code>, и сделайте их равными результату вызова <code>randomValueFromArray()</code> на трех ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить ее, чтобы вернуть одну случайную строку из <code>insertX</code>, записав <code>randomValueFromArray (insertX)</code>.</li>
+ <li>Затем мы хотим заменить три заполнителя строки <code>newStory</code> - <code>:insertx:</code>, <code>:inserty :</code>  и <code>:insertz:</code> - со строками, хранящимися в <code>xItem</code>, <code>yItem</code> и <code>zItem</code>. Здесь вам поможет определенный строковый метод - в каждом случае сделать вызов метода равным <code>newStory</code>, при этом каждый раз, когда он вызывается, <code>newStory</code> делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придется сделать один из вызовов дважды.</li>
+ <li>Внутри первого блока <code>if</code> добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке <code>newStory</code>, с помощью переменной <code>name</code>. В этом блоке мы говорим: «Если значение введено в текстовый ввод <code>customName</code>, замените Боба в истории этим пользовательским именем».</li>
+ <li>Внутри второго блока <code>if</code> мы проверяем, была ли выбрана радиокнопка <code>uk</code>. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это:
+  <ol>
+   <li>Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.</li>
+   <li>Внутри линии, которая определяет <code>weight</code> переменную, замените 300 на расчет, который преобразует 300 фунтов в стоуны. Добавьте <code>'stone'</code> в конце результата общего вызова <code>Math.round()</code>.</li>
+   <li>Внутри линии, определяющей <code>temperature</code> переменную, замените 94 на расчет, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте <code>'centigrade'</code> в конце результата общего вызова <code>Math.round()</code>.</li>
+   <li>Просто под двумя определениями переменных добавьте еще две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной <code>temperature</code> и«300  pounds» на содержимое <code>weight</code> переменной.</li>
+  </ol>
+ </li>
+ <li>Наконец, в предпоследней строке функции сделайте свойство <code>textContent</code> переменной <code>story</code> (которая ссылается на абзац) равным <code>newStory</code>.</li>
+</ol>
+
+<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+
+<ul>
+ <li>Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.</li>
+ <li>Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.</li>
+</ul>
+
+<h2 id="Оценка_и_помощь">Оценка и помощь</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите, чтобы ваша работа была оценена, или застряли и хотите обратиться за помощью:</span></span></p>
+
+<ol>
+ <li>Разместите свою работу в онлайн-редакторе, таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle </a>или <a href="https://glitch.com/">Glitch</a>.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Напишите сообщение с просьбой об оценке и / или помощи на форуме <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a>.</span> <span title="">Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти.</span> <span title="">Ваш пост должен включать:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Описательное название, такое как «Требуется оценка для генератора глупых историй».</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе.</span> <span title="">Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.</span></span></li>
+   <li><span class="tlid-translation translation" lang="ru"><span title="">Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.</span></span></li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распростанённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, <span id="result_box" lang="ru"><span>экранирование кавычек в строках и объединение строк вместе.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td><span class="short_text" id="result_box" lang="ru"><span>Знакомство с основами строк в JavaScript.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сила_слов">Сила слов</h2>
+
+<p><span id="result_box" lang="ru"><span>Слова очень важны для людей </span></span>—<span lang="ru"><span> это основа нашего общения.</span></span> <span class="short_text" id="result_box" lang="ru"><span>Интернет</span></span> <span id="result_box" lang="ru"><span>представляет собой преимущественно текстовую среду, предназначенную для</span></span> того что бы люди общались и делились информацией, поэтому <span id="result_box" lang="ru"><span>нам полезно иметь контроль над словами, которые появляются в нем.</span></span> {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.</p>
+
+<p>Практически во всех программах, которые мы показали вам на данный момент,  были задействованы некоторые манипуляции со строками.</p>
+
+<h2 id="Строки_—_основы">Строки — основы</h2>
+
+<p>С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнем с ввода некоторых основных строк в консоль, чтобы ознакомиться с ними. Мы предоставили одну ниже (вы также можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть эту консоль</a> в отдельной вкладке или окне или использовать <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика браузера</a>, если хотите).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="Создание_строки">Создание строки</h3>
+
+<ol>
+ <li>Для начала введите следующие строки:
+  <pre class="brush: js notranslate">var string = 'The revolution will not be televised.';
+string;</pre>
+ </li>
+ <li>Как и в случае с числами, мы объявляем переменную, инициализируя ее строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li>
+ <li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки:
+  <pre class="brush: js example-bad notranslate">var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';</pre>
+  Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.</li>
+ <li>Следующий код будет выполнен только в том случае, если ранее была объявлена переменная <code>string</code> — убедитесь сами:
+  <pre class="brush: js notranslate">var badString = string;
+badString;</pre>
+  В настоящее время строка <code>badString</code> имеет то же значение, что и строка <code>string</code>.</li>
+</ol>
+
+<h3 id="Одиночные_кавычки_vs._Двойные_кавычки">Одиночные кавычки vs. Двойные кавычки</h3>
+
+<ol>
+ <li>В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:
+  <pre class="brush: js notranslate">var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остается на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведен пример:
+  <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идет речь (в коде ошибок нет):
+  <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается:
+  <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre>
+  Что приводит нас к следующей теме.</li>
+</ol>
+
+<h3 id="Экранирование_кавычек_в_строках">Экранирование кавычек в строках</h3>
+
+<p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой ее конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p>
+
+<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a>.</p>
+
+<h2 id="Конкатенация_строк">Конкатенация строк</h2>
+
+<ol>
+ <li>Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.</li>
+ <li>
+  <pre class="brush: js notranslate">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  Результат этой программы - это переменная <code>joined</code>, содержащая значение "Hello, how are you?".</li>
+ <li>В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите <code>+</code> между ними. Попробуйте это:
+  <pre class="brush: js notranslate">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:
+  <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание: </strong>Когда вы вводите фактическую строку в свой код, заключенную в одинарные или двойные кавычки, она называется <strong>строковым литералом.</strong></p>
+</div>
+
+<h3 id="Конкатенация_строк_в_контексте">Конкатенация строк в контексте</h3>
+
+<p>Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}</p>
+
+<p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введенный текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p>
+
+<h3 id="Числа_vs._строки">Числа vs. строки</h3>
+
+<ol>
+ <li>Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:
+  <pre class="brush: js notranslate">'Front ' + 242;
+</pre>
+  Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li>
+ <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув ее в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой):
+  <pre class="brush: js notranslate">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
+  <ul>
+   <li>Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
+    <pre class="brush: js notranslate">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>С другой стороны, каждое число имеет метод, называемый <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это:
+    <pre class="brush: js notranslate">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через <code>Number()</code>, чтобы справиться с этим. Именно это мы сделали в нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63">Number Guessing Game,  </a>в строке 61.</li>
+</ol>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.</p>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
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
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
+
+<p>Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдем дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="background-color: rgb(255, 232, 212);"><strong>Необходимые знания:</strong></th>
+   <td style="background-color: rgb(255, 232, 212);">Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="background-color: rgb(255, 232, 212);"><strong>Задача:</strong></th>
+   <td style="background-color: rgb(255, 232, 212);">Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Строки_как_объекты">Строки как объекты</h2>
+
+<p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаете строку, например: </p>
+
+<pre class="notranslate">let string = 'This is my string';</pre>
+
+<p>ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!</p>
+
+<p><strong>Только не волнуйтесь!</strong> Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.</p>
+
+<p>Приведем несколько примеров в новой консоли. Ниже вы можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть данную консоль</a> в отдельной вкладке или окне, или, если вам так удобней, использовать <a href="https://developer.mozilla.org/ru/docs/Learn/Discover_browser_developer_tools">браузер консоли разработчика</a>.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Консоль JavaScript&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Поиск_длины_строки">Поиск длины строки</h3>
+
+<p>Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:</p>
+
+<pre class="notranslate">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имен, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p>
+
+<h3 id="Получение_определенного_строкового_символа">Получение определенного строкового символа</h3>
+
+<p>Вы можете вернуть любой символ внутри строки, используя <strong>обозначение в квадратных скобках.</strong> Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:</p>
+
+<pre class="syntaxbox notranslate">browserType[0];</pre>
+
+<p>Компьютеры считают от 0, а не 1! Чтобы получить последний символ <em>любой</em> строки, мы могли бы использовать следующую строку, объединив эту технику с свойством <code>length</code>:</p>
+
+<pre class="syntaxbox notranslate"> browserType[browserType.length-1];</pre>
+
+<p>Длина слова «mozilla» равна 7, но, поскольку счет начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p>
+
+<h3 id="Поиск_подстроки_внутри_строки_и_ее_извлечение">Поиск подстроки внутри строки и ее извлечение</h3>
+
+<ol>
+ <li>Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите:
+  <pre class="notranslate">browserType.indexOf('zilla');</pre>
+  Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li>
+</ol>
+
+<ol start="2">
+ <li>Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее:
+  <pre class="notranslate">browserType.indexOf('vanilla');</pre>
+  Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.<br>
+  <br>
+  Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
+  <pre class="notranslate">if(browserType.indexOf('mozilla') === -1) {
+  // сделать что-то, если 'mozilla'
+  // не является частью этой строки
+}
+
+if(browserType.indexOf('mozilla') !== -1) {
+  // сделать что-то, если 'mozilla'
+  // является частью этой строки
+}</pre>
+ </li>
+ <li>Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}}  для извлечения. Попробуйте следующее:
+  <pre class="notranslate">browserType.slice(0,3);</pre>
+  Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счет идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li>
+ <li>Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите:
+  <pre class="notranslate">browserType.slice(2);</pre>
+  Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: второй параметр <code>slice()</code> не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу {{jsxref ("String.prototype.slice ()", "slice ()")}}, чтобы узнать, что ещё вы можете узнать.</p>
+</div>
+
+<h3 id="Изменение_регистра">Изменение регистра</h3>
+
+<p>Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введенные пользователем данные перед их сохранением в базе данных.</p>
+
+<p>Попробуем ввести следующие строки, чтобы узнать, что происходит:</p>
+
+<pre class="notranslate">var radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="Обновление_частей_строки">Обновление частей строки</h3>
+
+<p>Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод {{jsxref ("String.prototype.replace ()", "replace ()")}}. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.</p>
+
+<p>Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:</p>
+
+<pre class="notranslate">browserType.replace('moz','van');</pre>
+
+<p>Обратите внимание, что для фактического получения обновленного значения, отраженного в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p>
+
+<h2 id="Активные_примеры_обучения">Активные примеры обучения</h2>
+
+<p>В этом разделе мы дадим вам попробовать набить руку и вместе напишем код строковой манипуляции. В каждом упражнении ниже у нас есть массив строк и цикл, который обрабатывает каждое значение в массиве и отображает его в маркированном списке. Вам не нужно понимать массивы или циклы прямо сейчас — это будет объяснено в будущих статьях. Все, что вам нужно сделать в каждом случае, — написать код, который выводит строки в том формате, в котором мы предлагаем.</p>
+
+<p>В каждом примере есть кнопка <em>Сбросить</em>, которую вы можете использовать для сброса кода, если вы допустили ошибку и не можете заставить его работать снова, а кнопку <em>Показать решение</em> вы можете нажать, чтобы увидеть потенциальный ответ, если вы действительно застрянете на решении.</p>
+
+<h3 id="Фильтрация_приветственных_сообщений">Фильтрация приветственных сообщений</h3>
+
+<p>В первом упражнении мы начнем с простого: у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( ... ), чтобы проверить каждую строку и отобразить её в списке, только если это рождественское сообщение.</p>
+
+<ol>
+ <li>Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?</li>
+ <li>Затем вам нужно будет написать условный тест <em>операнд1 оператор операнд2</em>. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?</li>
+ <li>Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определенному результату.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Редактируемый код&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['С днём рождения!',
+                 'С Рождеством, любовь моя',
+                 'Счастливого Рождества всей твоей семье',
+                 'Ты — та, кто нужен мне на Рождество',
+                 'Поправляйся скорее'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Ваше решение должно быть в фигурных скобках
+  // ниже: вы должны что-то добавить
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Сбросить"&gt;
+  &lt;input id="solution" type="button" value="Показать решение"&gt;
+&lt;/div&gt;</code></pre>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    textarea.value = solutionEntry;
+    solution.value = '</code><code class="language-html">Спрятать решение</code><code class="language-js">';
+  } else {
+    textarea.value = userEntry;
+    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'</code><code class="language-html">С днём рождения!</code><code class="language-js">\',\n \'</code><code class="language-html">С Рождеством, любовь моя</code><code class="language-js">\',\n \'</code><code class="language-html">Счастливого Рождества всей твоей семье</code><code class="language-js">\',\n \'</code><code class="language-html">Ты — та, кто нужен мне на Рождество</code><code class="language-js">\',\n \'</code><code class="language-html">Поправляйся скорее</code><code class="language-js">\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Рождеств\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Исправление_регистра_размера_букв_в_тексте—прим._пер.">Исправление регистра (<em>размера букв в тексте—прим. пер.</em>)</h3>
+
+<p>В этом упражнении у нас есть названия городов в Великобритании, но написанных разным регистром. Мы хотим, чтобы вы изменили их так, чтобы они были в нижнем регистре, за исключением первой буквы. Хороший способ сделать это:</p>
+
+<ol>
+ <li>Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните ее в новой переменной.</li>
+ <li>Возьмите первую букву строки в этой новой переменной и сохраните ее в другой переменной.</li>
+ <li>Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, измененной на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.</li>
+ <li>Измените значение переменной <code>result</code> на равную конечному результату (не <code>input</code>).</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Редактируемый код&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['лонДон', 'МанЧЕСТер', 'БиРминГЕМ', 'лиВЕРпуЛЬ'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // пишите код ниже
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Сбросить"&gt;
+  &lt;input id="solution" type="button" value="Показать решение"&gt;
+&lt;/div&gt;</code></pre>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    textarea.value = solutionEntry;
+    solution.value = 'Спрятать решение';
+  } else {
+    textarea.value = userEntry;
+    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'</code><code class="language-html">лонДон</code><code class="language-js">\', \'</code><code class="language-html">МанЧЕСТер</code><code class="language-js">\', \'</code><code class="language-html">БиРминГЕМ</code><code class="language-js">\', \'</code><code class="language-html">лиВЕРпуЛЬ</code><code class="language-js">\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Создание_новых_строк_из_старых_частей">Создание новых строк из старых частей</h3>
+
+<p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трехбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p>
+
+<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:</p>
+
+<pre class="notranslate">MAN: Manchester Piccadilly</pre>
+
+<p>Мы бы рекоменовали реализовать это следующим образом:</p>
+
+<ol>
+ <li>Извлеките трехбуквенный код станции и сохраните его в новой переменной.</li>
+ <li>Найдите номер символьного номера точки с запятой.</li>
+ <li>Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.</li>
+ <li>Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.</li>
+ <li>Измените значение переменной <code>result</code> равной конечной строке (не <code>input</code>). </li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Редактируемый код&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // пишите ваш код ниже
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Сбросить"&gt;
+  &lt;input id="solution" type="button" value="Показать решение"&gt;
+&lt;/div&gt;</code></pre>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    textarea.value = solutionEntry;
+    solution.value = '</code><code class="language-html">Спрятать решение</code><code class="language-js">';
+  } else {
+    textarea.value = userEntry;
+    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдет вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript">Что такое JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">Знакомство с JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA">Устранение ошибок в JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables">Переменные — место хранения необходимой информации</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math">Базовая математика в JavaScript</a></li>
+ <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8">Работа с текстом — строки в JavaScript</a></li>
+ <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods">Полезные строковые методы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays">Массивы</a></li>
+ <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9">Генератор глупых историй</a></li>
+</ul>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдем к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Ознакомиться с основами переменных в JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Инструменты_которые_вам_нужны">Инструменты, которые вам нужны</h2>
+
+<p>В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> для получения дополнительной информации о том, как получить доступ к этому инструменту).</p>
+
+<p>Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.</p>
+
+<h2 id="Что_такое_переменные">Что такое переменные?</h2>
+
+<p>Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Нажми на меня&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Как Вас зовут?');
+  alert('Привет ' + name + ', рады видеть Вас!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включенным введенным именем, взятым из значения переменной.</p>
+
+<p>Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:</p>
+
+<pre class="example-bad notranslate">var name = prompt('Как вас зовут?');
+
+if (name === 'Адам') {
+  alert('Привет, Адам, рады тебя видеть!');
+} else if (name === 'Алан') {
+  alert('Привет, Алан, рады тебя видеть!');
+} else if (name === 'Бэлла') {
+  alert('Привет, Бэлла, рады тебя видеть!');
+} else if (name === 'Бьянка') {
+  alert('Привет, Бьянка, рады тебя видеть!');
+} else if (name === 'Крис') {
+  alert('Привет, Крис, рады тебя видеть!');
+}
+
+// ... и так далее ...</pre>
+
+<p>Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырех вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.</p>
+
+<p>Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.</p>
+
+<p>Еще одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..</p>
+
+<p>Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Объявление_переменной">Объявление переменной</h2>
+
+<p>Чтобы использовать переменную, вы сначала должны ее создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p>
+
+<pre class="brush: js notranslate">var myName;
+var myAge;</pre>
+
+<p>Здесь мы создаем две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.</p>
+</div>
+
+<p>Теперь проверим, существуют ли эти значения в среде выполненияв Для этого введем только имя переменной.</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение  <code>undefined</code> . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:</p>
+
+<pre class="brush: js notranslate">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Заметка</strong>: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.</p>
+</div>
+
+<h2 id="Присвоение_значения_переменной">Присвоение значения переменной</h2>
+
+<p>Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (<code>=</code>), а за ним значение, которое вы хотите присвоить. Например:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Вы можете объявить переменную и задать ей значение одновременно:</p>
+
+<pre class="brush: js notranslate">var myName = 'Chris';</pre>
+
+<p>Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задает значение) переменную, вы можете объявить ее после ее инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется <strong>hoisting </strong>- прочитайте <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> для более подробной информации по этому вопросу.</p>
+</div>
+
+<h2 id="Обновление_переменной">Обновление переменной</h2>
+
+<p>Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:</p>
+
+<pre class="brush: js notranslate">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="Правила_именования_переменных">Правила именования переменных</h3>
+
+<p>Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.</p>
+
+<ul>
+ <li>Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.</li>
+ <li>Не используйте символы подчеркивания в начале имен переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.</li>
+ <li>Не используйте числа в начале переменных. Это недопустимо и приведет к ошибке.</li>
+ <li>Общепринято придерживаться так называемый <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имен переменных в этой статье.</li>
+ <li>Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.</li>
+ <li>Переменные чувствительны к регистру, так что <code>myage</code> и <code>myAge</code> - разные переменные.</li>
+ <li>И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имен переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа <code>var</code>, <code>function</code>, <code>let</code>, и <code>for</code> для имен переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: По ссылке можно найти довольно полный список зарезервированных ключевых слов: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>Примеры хороших имен переменных:</p>
+
+<pre class="example-good notranslate">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+</pre>
+
+<p>Примеры плохих имен переменных:</p>
+
+<pre class="example-bad notranslate">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>Примеры имен переменных, которые вызовут ошибки:</p>
+
+<pre class="example-invalid notranslate">var
+Document
+</pre>
+
+<p>Попытайтесь создать еще несколько переменных прямо сейчас, используя знания, изложенные выше.</p>
+
+<h2 id="Типы_переменных">Типы переменных</h2>
+
+<p>Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.</p>
+
+<h3 id="Числа_Numbers">Числа (Numbers)</h3>
+
+<p>Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:</p>
+
+<pre class="brush: js notranslate">var myAge = 17;</pre>
+
+<h3 id="Строки_Strings">Строки ('Strings')</h3>
+
+<p>Строки - это фрагменты текста. Когда вы даете переменной значение строки, вам нужно обернуть ее в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать ее как другое имя переменной.</p>
+
+<pre class="brush: js notranslate">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Логические_Booleans">Логические (Booleans)</h3>
+
+<p>Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:</p>
+
+<pre class="brush: js notranslate">var iAmAlive = true;</pre>
+
+<p>В действительности вы чаще будете использовать этот тип переменных так:</p>
+
+<pre class="brush: js notranslate">var test = 6 &lt; 3;
+</pre>
+
+<p>Здесь используется оператор «меньше» (&lt;), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернет false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p>
+
+<h3 id="Массивы_Arrays">Массивы (Arrays)</h3>
+
+<p>Массив - это один объект, который содержит несколько значений, заключенных в квадратные скобки и разделенных запятыми. Попробуйте ввести следующие строки в консоль:</p>
+
+<pre class="brush: js notranslate">var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];</pre>
+
+<p>Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:</p>
+
+<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.</p>
+
+<p>В следующей статье вы узнаете больше о массивах.</p>
+
+<h3 id="Объекты_Objects">Объекты (Objects)</h3>
+
+<p>В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.</p>
+
+<p>Попробуйте ввести следующую строку в консоль:</p>
+
+<pre class="brush: js notranslate">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:</p>
+
+<pre class="brush: js notranslate">dog.name</pre>
+
+<p>Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.</p>
+
+<h2 id="Свободная_типизация">Свободная типизация</h2>
+
+<p>JavaScript - это «свободно типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).</p>
+
+<p>Например, если вы объявите переменную и присвоите ей значение, заключенное в кавычки, браузер будет обрабатывать переменную как строку:</p>
+
+<pre class="brush: js notranslate">var myString = 'Привет';</pre>
+
+<p>Он все равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:</p>
+
+<pre class="brush: js notranslate">var myNumber = '500'; // упс, это все еще строка (string)
+typeof(myNumber);
+myNumber = 500; // так-то лучше, теперь это число (number)
+typeof(myNumber);</pre>
+
+<p>Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию <code>typeof()</code>  - она возвращает тип данных переменной, которую вы передаете в нее. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная <code>myNumber</code> содержит строку <code>'500'</code>. Посмотрите, что она вернет во второй раз, когда вы ее вызовите.</p>
+
+<h2 id="Подведение_итогов">Подведение итогов</h2>
+
+<p>К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}</p>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>Базовая компьютерная грамотность, знание основ HTML и CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цели:</th>
+   <td>Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Определение_высокого_уровня">Определение высокого уровня</h2>
+
+<p>JavaScript это язык, который позволяет Вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (<a href="https://developer.mozilla.org/ru/docs/Learn/HTML">HTML</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/CSS">CSS</a>) мы детально раскрыли в других частях учебного пособия.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.</li>
+ <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаем стиль отображения нашего HTML контента, например придаем цвет фону (background) и шрифту, придаем контенту многоколоночный вид.</li>
+ <li>{{glossary("JavaScript")}} язык программирования, который позволяет Вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но все равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript кода.</li>
+</ul>
+
+<p>Три слоя прекрасно выстраиваются друг над другом. Возьмем простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Затем мы добавим немного CSS, что бы это выглядело симпатичнее:</p>
+
+<pre class="brush: 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;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>И наконец, добавим немного JavaScript для придания динамического поведения:</p>
+
+<pre>const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>{{ EmbedLiveSample('Определение_высокого_уровня', '100%', 80) }}</p>
+
+<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдет (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p>
+
+<p>JavaScript может делать намного больше — давайте выясним это более детально.</p>
+
+<h2 id="Так_что_же_он_действительно_может_делать">Так что же он <em>действительно</em> может делать?</h2>
+
+<p>Ядро языка JavaScript состоит из некоторого количества обычных возможностей, которые позволяют делать следующее:</p>
+
+<ul>
+ <li>Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной <code>name</code>.</li>
+ <li>Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной <code>name</code> для получения полного текста, например: ''Player 1: Chris".</li>
+ <li>Запускать код в соответствии с определенными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li>
+ <li>И многое другое!</li>
+</ul>
+
+<p>Еще более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p>
+
+<p>API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.</p>
+
+<p>Они обычно делятся на две категории.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>API-интерфейсы</strong> браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:    </p>
+
+<ul>
+ <li>API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.  </li>
+ <li>API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.    </li>
+ <li>API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии - см. Chrome Experiments и webglsamples.  </li>
+ <li>Аудио и видео API, такие как {{ domxref("HTMLMediaElement")}} и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей,  для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">кроссбраузерному тестированию</a>, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).</p>
+</div>
+
+<p>По умолчанию сторонние API-интерфейсы  не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера: </p>
+
+<ul>
+ <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> позволяет вам отображать ваши последние твиты на вашем веб-сайте.</li>
+ <li><a href="https://developers.google.com/maps/">Google Maps API</a> позволяет вам встраивать пользовательские карты на ваш сайт и другой подобный функционал.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: Эти API-и <span style="background-color: #f6d5d9;">являются продвинутыми</span>, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.</p>
+</div>
+
+<p>Доступно еще больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p>
+
+<h2 id="Что_JavaScript_делает_на_вашей_странице">Что JavaScript делает на вашей странице?</h2>
+
+<p>В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.</p>
+
+<p>Давайте составим краткий бриф, что же происхоит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдает продукцию (веб-страничку).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.</p>
+
+<p>Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.  </p>
+
+<h3 id="Безопасность_браузера">Безопасность браузера</h3>
+
+<p>Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются "средами исполнения") — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.</p>
+</div>
+
+<h3 id="Последовательность_выполнения_JavaScript">Последовательность выполнения JavaScript</h3>
+
+<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернемся к блоку JavaScript, который мы видели в первом примере:</p>
+
+<pre>const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода <code>updateName()</code> (строки 5–8). Блок кода <code>updateName()</code> (эти типы <span id="result_box" lang="ru"><span>многократно используемых блоков кода</span></span> называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.</p>
+
+<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку <span id="result_box" lang="ru"><span>возвращаемую в консоль браузера</span></span> — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> еще не существует и вы не можете добавить к нему обнаружение событий.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.</p>
+</div>
+
+<h3 id="Интерпретируемый_против_компилируемого_кода">Интерпретируемый против компилируемого кода</h3>
+
+<p>В контексте программирования, вы можете услышать термины <strong>интерпретация</strong> и <strong>компиляция</strong>. JavaScript является <span id="result_box" lang="ru"><span>интерпретируемым языком</span></span> — код запускается сверху вниз и результат запуска немедленно возвращается. Вам не нужно преобразовывать код в другую форму, перед запуском в браузере.</p>
+
+<p><span id="result_box" lang="ru"><span>С другой стороны, к</span></span><span lang="ru"><span>омпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером.</span> <span>Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.</span></span></p>
+
+<h3 id="Серверный_против_клиентского_кода">Серверный против клиентского кода</h3>
+
+<p>Вы так же можете услышать термины <strong>серверный</strong> и <strong>клиентский</strong> код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о <strong>клиентском JavaScript</strong>.</p>
+
+<p>С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>.</p>
+
+<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достает данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создает новую HTML таблицу, вставляя в нее данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p>
+
+<p>Веб-страница без динамического обновления контента называется <strong>статической</strong> — она просто показывает один и тотже контент все время.</p>
+
+<h2 id="Как_добавить_JavaScript_на_вашу_страницу">Как добавить JavaScript на вашу страницу?</h2>
+
+<p>JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроеных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.</p>
+
+<h3 id="Внутренний_JavaScript">Внутренний JavaScript</h3>
+
+<ol>
+ <li>Сначала, сделайте локальную копию нашего файла-примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Сохраните его в удобное для вас место.</li>
+ <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу с активной кнопкой.</li>
+ <li>Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом <code>&lt;/head&gt;</code>:
+  <pre class="brush: html">&lt;script&gt;
+
+  // здесь будет JavaScript
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Теперь добавим JavaScript внутрь элемента {{htmlelement("script")}}, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript":
+  <pre>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 &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создается новый абзац и помещается ниже.</li>
+</ol>
+
+<div class="note">
+<p><strong>Заметка</strong>: Если ваш пример не работает, пройдите еще раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code>&lt;/body&gt;</code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Заметка</strong>: Вы можете увидеть эту версию на GitHub-е как <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">посмотреть вживую</a>).</p>
+</div>
+
+<h3 id="Внешний_JavaScript">Внешний JavaScript</h3>
+
+<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберемся с этим.</p>
+
+<ol>
+ <li>Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его <code>script.js</code> — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.</li>
+ <li>Замените ваше текущий элемент {{htmlelement("script")}} на следующий:
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Внутри <code>script.js</code> добавьте следующий скрипт:
+  <pre>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 &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.</li>
+</ol>
+
+<div class="note">
+<p><strong>Заметка</strong>: Вы можете увидеть эту версию на GitHub-е как <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">посмотреть вживую</a>).</p>
+</div>
+
+<h3 id="Инлайновые_JavaScript_обработчики">Инлайновые JavaScript обработчики</h3>
+
+<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живет внутри HTML. Это может выглядеть примерно так:</p>
+
+<div id="Inline_JavaScript_handlers">
+<pre class="brush: js example-bad">function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>Вы можете попробовать эту версию в нашей демонстрации ниже:</p>
+
+<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p>
+
+<p>Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент {{htmlelement("button")}} содержит встроенный обработчик <code>onclick</code>, который запускает функцию при нажатии кнопки.</p>
+
+<p><strong>Но пожалуйста, не делайте этого.</strong> Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут <code>onclick="createParagraph()"</code> к каждой кнопке, к которой вы хотите подключить JavaScript.</p>
+
+<p>Использование чистой JavaScript конструкции, позволит вам выбрать все кнопки, используя одну команду. Код, который можно использовали для этой цели, выглядит следующим образом:</p>
+
+<pre>const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>Это может выглядеть немного длиннее, чем атрибут <code>onclick</code>, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить еще несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p>
+</div>
+
+<h3 id="Стратегии_загрузки_скриптов">Стратегии загрузки скриптов</h3>
+
+<p>Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.</p>
+
+<h2 id="Комментарии">Комментарии</h2>
+
+<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернетесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p>
+
+<ul>
+ <li>Однострочный комментарий пишется после двойного слеша (//), например:
+  <pre class="brush: js">// Я комментарий</pre>
+ </li>
+ <li>Комментарий на нескольких строках пишется между строками /* и */, например:
+  <pre class="brush: js">/*
+  Я тоже
+  комментарий
+*/</pre>
+ </li>
+</ul>
+
+<p>Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:</p>
+
+<pre class="brush: js">// Функция: создает новый параграф и добавляет его вниз тела 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 &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 id="Выводы">Выводы</h2>
+
+<p>Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.</p>
+
+<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведем вас сквозь него простыми шагами, которые имеют смысл, забегая наперед. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</p>
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
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}</div>
+
+<p class="summary">Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">
+    <p>Нужно:</p>
+   </th>
+   <td>базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель</th>
+   <td>получить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Типы_ошибок">Типы ошибок</h2>
+
+<p>Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнетесь:</p>
+
+<ul>
+ <li>
+  <p><strong>Синтаксические ошибки:</strong> Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!</p>
+ </li>
+ <li><strong>Логические ошибки:</strong> Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но дает неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.</li>
+</ul>
+
+<p>Ладно, все <em>не так</em> просто — есть и другие отличия, которые вы поймете, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.</p>
+
+<h2 id="Ошибочный_пример">Ошибочный пример</h2>
+
+<p>Чтобы начать работу, давайте вернемся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (см. здесь <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">как это работает</a>).</p>
+
+<ol>
+ <li>Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.</li>
+ <li>Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание:</strong> Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьей с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаем. Затем вы можете вернуться и попытаться исправить ваш пример.</p>
+</div>
+
+<p>На этом этапе давайте рассмотрим консоль разработчика, чтобы увидеть, можем ли мы видеть какие-либо синтаксические ошибки, а затем попытаемся их исправить. Вы узнаете, как это сделать, ниже.</p>
+
+<h2 id="Исправление_синтаксических_ошибок">Исправление синтаксических ошибок</h2>
+
+<p>Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика JavaScript</a> (если вы не можете вспомнить, как открыть это в своем браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что еще более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подается в механизм JavaScript браузера. Теперь пойдем на охоту.</p>
+
+<ol>
+ <li>Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>Это довольно простая ошибка для отслеживания, и браузер дает вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
+  <ul>
+   <li>Красный «x» означает, что это ошибка.</li>
+   <li>Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»</li>
+   <li>Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.</li>
+   <li>Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдете по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.</li>
+   <li>Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.</li>
+  </ul>
+ </li>
+ <li>Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдем эту строку:
+  <pre class="brush: js"><font><font>guessSubmit.addeventListener('click', checkGuess);</font></font></pre>
+ </li>
+ <li>В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn <em>имя-функции</em>» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание: </strong>См. наш <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: «x»</a> не является справочной страницей функций для получения дополнительной информации об этой ошибке.</p>
+</div>
+
+<h3 id="Синтаксические_ошибки_второй_раунд">Синтаксические ошибки: второй раунд</h3>
+
+<div class="note">
+<p><strong>Примечание</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение <code>lowOrHi</code> в консоли, как только мы попытаемся установить его в строке 48.</p>
+</div>
+
+<ol>
+ <li>Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.</li>
+ <li>Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку!  <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78.
+  <div class="note"><strong>Примечание</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> — это специальное значение, которое означает "ничего" или "не значение". Поэтому <code>lowOrHi</code> был объявлен и инициализирован без значения — у него нет типа или значения.</div>
+
+  <div class="note"><strong>Примечание</strong>: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри <code>checkGuess() { ... }</code> block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция <code>checkGuess()</code> не была запущена строкой 86.</div>
+ </li>
+ <li>Посмотрите на строку 78, и вы увидите следующий код:
+  <pre class="brush: js"><font><font>lowOrHi.textContent = «Последнее предположение было слишком высоко!»;</font></font></pre>
+ </li>
+ <li>Эта строка пытается установить свойство <code>textContent</code> переменной <code>lowOrHi</code> как текстовую строку, но это не работает, поскольку <code>lowOrHi</code> не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры <code>lowOrHi</code> в коде. Самый ранний экземпляр, который вы найдете в JavaScript, находится в строке 48:
+  <pre class="brush: js"><font><font>var lowOrHi = document.querySelector('lowOrHi');</font></font></pre>
+ </li>
+ <li>На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение  <code>null</code> после выполнения этой строки. Добавьте следующий код в строку 49:
+  <pre class="brush: js">console.log(lowOrHi);
+</pre>
+ </li>
+ <li>Сохраните и обновите, и вы должны увидеть результат работы <code>console.log()</code> в консоли браузера. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Разумеется, значение <code>lowOrHi</code> на данный момент равно <code>null</code>, поэтому определенно существует проблема в строке 48.</li>
+ <li>Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент <code>&lt;p&gt;</code>:
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;
+</pre>
+ </li>
+ <li>Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод <code>querySelector()</code> в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить <code>lowOrHi</code> на <code>.lowOrHi</code> в строке 48.</li>
+ <li>Повторите попытку сохранения и обновления, и ваш вызов <code>console.log()</code> должен вернуть элемент <code>&lt;p&gt;</code>, который мы хотим. Уф! Еще одна ошибка исправлена! Вы можете удалить строку с  <code>console.log()</code> сейчас, или оставить для дальнейшего применения — выбирайте сами.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Загляните на справочную страницу <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a>, чтобы узнать больше об этой ошибке.</p>
+</div>
+
+<h3 id="Синтаксические_ошибки_третий_раунд">Синтаксические ошибки: третий раунд</h3>
+
+<ol>
+ <li>Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.</li>
+ <li>На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.</li>
+ <li>Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить <code>addeventListener</code> на <code>addEventListener</code>.</li>
+</ol>
+
+<h2 id="Логическая_ошибка">Логическая ошибка</h2>
+
+<p>На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определенно не совсем так, как мы хотим, чтобы игра была разыграна!</p>
+
+<p>Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.</p>
+
+<ol>
+ <li>Найдем переменную <code>randomNumber</code> , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;
+</pre>
+  И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры:
+
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;
+</pre>
+ </li>
+ <li>Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу <code>console.log()</code> снова — вставьте ее ниже строк с ошибками:
+  <pre class="brush: js">console.log(randomNumber);
+</pre>
+ </li>
+ <li>Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что <code>randomNumber</code> равна 1 в каждой точке, где вы ее записали после строк с ошибками.</li>
+</ol>
+
+<h3 id="Работаем_через_логику">Работаем через логику</h3>
+
+<p>Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, котрый генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.</p>
+
+<pre class="brush: js"><font><font>Math.random()</font></font></pre>
+
+<p>Дальше, мы передаем результат вызова <code>Math.random()</code> через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:</p>
+
+<pre><font><font>Math.floor(Math.random()) + 1;</font></font></pre>
+
+<p>Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1.  Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернет нам случайное число между 0 и 99:</p>
+
+<pre class="brush: js"><font><font>Math.floor(Math.random() * 100);</font></font></pre>
+
+<p>поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:</p>
+
+<pre class="brush: js"><font><font>Math.floor(Math.random() * 100) + 1;</font></font></pre>
+
+<p>А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!</p>
+
+<h2 id="Другие_распространенные_ошибки">Другие распространенные ошибки</h2>
+
+<p>Существуют и другие распространенные ошибки, которые вы обнаружите в своем коде. В этом разделе показано большинство из них.</p>
+
+<h3 id="SyntaxError_отсутствует_перед_постановкой"><font><font>SyntaxError: отсутствует ; </font><font>перед постановкой</font></font></h3>
+
+<p>Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции <code>checkGuess()</code> :</p>
+
+<pre class="brush: js"><font><font>var userGuess = Number(guessField.value);</font></font></pre>
+
+<p>на эту</p>
+
+<pre class="brush: js"><font><font>var userGuess === Number(guessField.value);</font></font></pre>
+
+<p>Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (<code>=</code>), который присваивает значение переменной — с оператором сравнения (<code>===</code>), который строго сравнивает операнды, и возвращает <code>true</code>/<code>false</code> .</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Загляните на справочную страницу <a href="/ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">Синтаксическая ошибка: пропущен символ ; до объявления инструкции</a> для получения дополнительной информации об этой ошибке.</p>
+</div>
+
+<h3 id="В_программе_всегда_говорится_что_вы_выиграли_независимо_от_того_что_вы_ввели">В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели</h3>
+
+<p>Причиной этому является все то же перепутывание оператора присваивания (<code>=</code>) со строгим сравнением (<code>===</code>). Например, если мы изменим внутри <code>checkGuess()</code> эту строку кода:</p>
+
+<pre class="brush: js"><font><font>if (userGuess === randomNumber) {</font></font></pre>
+
+<p>на эту</p>
+
+<pre class="brush: js"><font><font>if (userGuess = randomNumber) {</font></font></pre>
+
+<p>мы всегда будем получать <code>true</code>, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!</p>
+
+<h3 id="SyntaxError_отсутствует_после_списка_аргументов"><font><font>SyntaxError: отсутствует ) после списка аргументов</font></font></h3>
+
+<p>Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Загляните на справочную страницу  <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> для получения дополнительной информации об этой ошибке.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p dir="ltr">Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить ее, изменив</p>
+
+<pre class="brush: js"><font><font>function checkGuess() {</font></font></pre>
+
+<p>на</p>
+
+<pre class="brush: js"><font><font>function checkGuess( {
+</font></font></pre>
+
+<p dir="ltr" id="tw-target-text">Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции  <code>checkGuess()</code>.</p>
+
+<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p><font><font>Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. </font><font>В первой ошибки выше,  </font></font><em><font><font>строка</font></font></em><font><font>  будет заменена на неожиданный персонаж (ей) , </font><font>что браузер нашел вместо кавычек в начале строки. </font><font>Вторая ошибка означает , </font><font>что строка не закончилась кавычки.</font></font></p>
+
+<p>При всех этих ошибках действуйте так, как в наших  примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!</p>
+
+<div class="note">
+<p><strong><font><font>Примечание</font></font></strong><font><font> : Смотрите наш </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token"><font><font>SyntaxError: Неожиданный токен</font></font></a><font><font> и </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal"><font><font>SyntaxError: незавершенная строка</font></font></a><font><font> эталонных страниц для получения </font><font>более подробной информации об этих ошибках.</font></font></p>
+</div>
+
+<h2 id="Резюме"><font><font>Резюме</font></font></h2>
+
+<p>Итак, мы научились основам  выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.</p>
+
+<h2 id="Смотрите_также"><font><font>Смотрите также</font></font></h2>
+
+<div>
+<ul>
+ <li><font><font>Есть много других типов ошибок, которые не перечислены здесь; </font><font>мы составляем ссылку , </font><font>которая объясняет , </font><font>что они означают подробно - см. </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors"><font><font>ссылку ошибки JavaScript</font></font></a><font><font> .</font></font></li>
+ <li><font><font>Если вы столкнетесь с любыми ошибками в коде, </font><font>которые вы не знаете , </font><font>как исправить после прочтения этой статьи, вы можете получить помощь! </font><font>Спросите на </font></font><a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294"><font><font>нить обучения Область дискурсе</font></font></a><font><font> , или в </font></font><a href="irc://irc.mozilla.org/mdn"><font><font>#mdn</font></font></a><font><font> IRC канал на </font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC"><font><font>Mozilla IRC</font></font></a><font><font>. </font><font>Расскажите нам, какая</font><font> у вас ошибка, и мы постараемся вам помочь. </font><font>Приложите пример своего кода для большей ясности проблемы.</font></font></li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}</p>