Полезные методы для строк - Изучение веб-разработки

Полезные методы для строк
=========================

* Назад
* Обзор: Первые шаги
* Далее

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

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

Строки как объекты
------------------

Почти всё в JavaScript является объектами. Когда вы создаёте строку, например:
```

let string = 'This is my string';
```

ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу `String` и просмотрев на ней список свойств и методов!

**Только не волнуйтесь!** Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.

Введем несколько примеров в консоль разработчика.

### Поиск длины строки

Это легко — вы просто используете свойство `length`. Попробуйте ввести следующие строки:
```

let browserType = 'mozilla';
browserType.length;
```

Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.

### Получение определённого строкового символа

Вы можете вернуть любой символ внутри строки, используя **обозначение в квадратных скобках.** Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:
```

browserType[0];
```

Компьютеры считают от 0, а не 1! Чтобы получить последний символ *любой* строки, мы могли бы использовать следующую строку, объединив эту технику с свойством `length`:
```

 browserType[browserType.length-1];
```

Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна `length-1`. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.

### Поиск подстроки внутри строки и её извлечение

1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода `indexOf ()`, который принимает одну parameter (en-US) - подстроку, которую вы хотите найти. Введите:
```

browserType.indexOf('zilla');
```

Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
2. Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее:
```

browserType.indexOf('vanilla');
```

Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
 Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
```

if(browserType.indexOf('mozilla') === -1) {
  // сделать что-то, если 'mozilla'
  // не является частью этой строки
}

if(browserType.indexOf('mozilla') !== -1) {
  // сделать что-то, если 'mozilla'
  // является частью этой строки
}
```

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

browserType.slice(0,3);
```

Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку\*.\* Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её \*(\*помним, что *счёт идёт с 0, а не с 1)*. Также можно сказать, что второй параметр равен длине возвращаемой строки.
4. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите:
```

browserType.slice(2);
```

Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.

**Примечание:** второй параметр `slice()` не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу `slice ()`, чтобы узнать, что ещё вы можете узнать.

### Изменение регистра

Строковые методы `toLowerCase ()` и `toUpperCase ()` преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.

Попробуем ввести следующие строки, чтобы узнать, что происходит:
```

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();
```

### Обновление частей строки

Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод `replace ()`. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.

Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:
```

browserType.replace('moz','van');
```

Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: `browserType = browserType.replace('moz','van');`

Активные примеры обучения
-------------------------

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

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

### Фильтрация приветственных сообщений

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

1. Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
2. Затем вам нужно будет написать условный тест *операнд1 оператор операнд2*. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
3. Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.
```

<h2>Результат</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="playable-code" style="height: 290px; width: 95%">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var greetings = ['С днём рождения!',
                 'С Рождеством, любовь моя',
                 'Счастливого Рождества всей твоей семье',
                 'Ты — та, кто нужен мне на Рождество',
                 'Поправляйся скорее'];

for (var i = 0; i < greetings.length; i++) {
  var input = greetings[i];
  // Ваше решение должно быть в фигурных скобках
  // ниже: вы должны что-то добавить
  if (greetings[i]) {
    var result = input;
    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
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;
}
```

```
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 = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  updateCode();
});

var jsSolution =
  "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar greetings = ['С днём рождения!',\n 'С Рождеством, любовь моя',\n 'Счастливого Рождества всей твоей семье',\n 'Ты — та, кто нужен мне на Рождество',\n 'Поправляйся скорее'];\n\nfor(var i = 0; i < 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 === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Исправление регистра (*размера букв в тексте—прим. пер.*)

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

1. Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.
2. Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.
3. Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
4. Измените значение переменной `result` на равную конечному результату (не `input`).

**Примечание:** Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.
```

<h2>Результат</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="playable-code" style="height: 250px; width: 95%">
var list = document.querySelector('.output ul');
list.innerHTML = '';
var cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ'];
for(var i = 0; i < cities.length; i++) {
  var input = cities[i];
  // пишите код ниже

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
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;
}
```

```
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 = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  updateCode();
});

var jsSolution =
  "var list = document.querySelector('.output ul');\nlist.innerHTML = '';\nvar cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ'];\n\nfor(var i = 0; i < 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 === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

### Создание новых строк из старых частей

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

MAN675847583748sjt567654;Manchester Piccadilly
```

Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:
```

MAN: Manchester Piccadilly
```

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

1. Извлеките трёхбуквенный код станции и сохраните его в новой переменной.
2. Найдите номер символьного номера точки с запятой.
3. Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
4. Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
5. Измените значение переменной `result` равной конечной строке (не `input`).
```

<h2>Результат</h2>

<div class="output" style="min-height: 125px;">
  <ul></ul>
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="playable-code" style="height: 285px; width: 95%">
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 < stations.length; i++) {
  var input = stations[i];
  // пишите ваш код ниже

  var result = input;
  var listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
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;
}
```

```
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 = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  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 < 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 === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Заключение
----------

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

* Назад
* Обзор: Первые шаги
* Далее


Что пошло не так? Устранение ошибок JavaScript - Изучение веб-разработки

Что пошло не так? Устранение ошибок JavaScript
==============================================

* Назад
* Обзор: Первые шаги
* Далее

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

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

Типы ошибок
-----------

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:

* **Синтаксические ошибки:** Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!
* **Логические ошибки:** Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.

Ладно, все *не так* просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.

Ошибочный пример
----------------

Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

1. Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
2. Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!

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

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

Исправление синтаксических ошибок
---------------------------------

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

1. Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
 ![](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong/not-a-function.png)
2. Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
    * Красный «x» означает, что это ошибка.
    * Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
    * Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
    * Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
    * Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
3. Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:

```js
guessSubmit.addeventListener("click", checkGuess);
```

4. В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn *имя-функции*» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: `addEventListener()`.
5. Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.

>
> \*\*Примечание:\*\*См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.
>
>
>

### Синтаксические ошибки: второй раунд

**Примечание:** `console.log()` это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение `lowOrHi` в консоли, как только мы попытаемся установить его в строке 48.

1. Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
2. Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку!
 ![](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong/variable-is-null.png)
3. На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78.

**Примечание:** `Null` — это специальное значение, которое означает "ничего" или "не значение". Поэтому `lowOrHi` был объявлен и инициализирован без значения — у него нет типа или значения.

**Примечание:** Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри `checkGuess() { ... }` блока). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция `checkGuess()` не была запущена строкой 86.
4. Посмотрите на строку 78, и вы увидите следующий код:

```js
lowOrHi.textContent = "Last guess was too high!";
```

5. Эта строка пытается установить свойство `textContent` переменной `lowOrHi` как текстовую строку, но это не работает, поскольку `lowOrHi` не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры `lowOrHi` в коде. Самый ранний экземпляр, который вы найдёте в JavaScript, находится в строке 48:

```js
const lowOrHi = document.querySelector("lowOrHi");
```

6. На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение `null` после выполнения этой строки. Добавьте следующий код в строку 49:

```js
console.log(lowOrHi);
```

7. Сохраните и обновите, и вы должны увидеть результат работы `console.log()` в консоли браузера.
 ![](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong/console-log-output.png) Разумеется, значение `lowOrHi` на данный момент равно `null`, поэтому определённо существует проблема в строке 48.
8. Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод `document.querySelector()` для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент `<p>`:

```js
<p class="lowOrHi"></p>
```

9. Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод `querySelector()` в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить `lowOrHi` на `.lowOrHi` в строке 48.
10. Повторите попытку сохранения и обновления, и ваш вызов `console.log()` должен вернуть элемент `<p>`, который мы хотим. Уф! Ещё одна ошибка исправлена! Вы можете удалить строку с `console.log()` сейчас, или оставить для дальнейшего применения — выбирайте сами.

**Примечание:** Загляните на справочную страницу TypeError: "x" is (not) "y", чтобы узнать больше об этой ошибке.

### Синтаксические ошибки: третий раунд

1. Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
2. На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.
3. Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить `addeventListener` на `addEventListener`.
Логическая ошибка
-----------------

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

Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

1. Найдём переменную `randomNumber` , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:

```js
let randomNumber = Math.floor(Math.random()) + 1;
```

И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры:

```js
randomNumber = Math.floor(Math.random()) + 1;
```

2. Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу `console.log()` снова — вставьте её ниже строк с ошибками:

```js
console.log(randomNumber);
```

3. Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что `randomNumber` равна 1 в каждой точке, где вы её записали после строк с ошибками.
### Работаем через логику

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

```js
Math.random();
```

Дальше, мы передаём результат вызова `Math.random()` через `Math.floor()`, который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:
```

Math.floor(Math.random()) + 1;
```

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

```js
Math.floor(Math.random() \* 100);
```

поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

```js
Math.floor(Math.random() \* 100) + 1;
```

А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

Другие распространённые ошибки
------------------------------

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

### SyntaxError: отсутствует ; перед постановкой

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

```js
var userGuess = Number(guessField.value);
```

на эту

```js
var userGuess === Number(guessField.value);
```

Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (`=`), который присваивает значение переменной — с оператором сравнения (`===`), который строго сравнивает операнды, и возвращает `true`/`false` .

**Примечание:** Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

### В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

Причиной этому является все то же перепутывание оператора присваивания (`=`) со строгим сравнением (`===`). Например, если мы изменим внутри `checkGuess()` эту строку кода:

```js
if (userGuess === randomNumber) {
```

на эту

```js
if (userGuess = randomNumber) {
```

мы всегда будем получать `true`, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

### SyntaxError: отсутствует ) после списка аргументов

Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

**Примечание:** Загляните на справочную страницу SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

### SyntaxError: missing : after property id

Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив

```js
function checkGuess() {
```

на

```js
function checkGuess( {
```

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

### SyntaxError: missing } after function body

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

### SyntaxError: expected expression, got '*string*' or SyntaxError: unterminated string literal

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

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

**Примечание:** : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.

Резюме
------

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

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

* Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно - см. ссылку ошибки JavaScript .
* Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на нить обучения Область дискурсе , или в #mdn IRC канал на Mozilla IRC. Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.
* Назад
* Обзор: Первые шаги
* Далее


Первое погружение в JavaScript - Изучение веб-разработки

Первое погружение в JavaScript
==============================

* Назад
* Обзор: Первые шаги
* Далее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### Подготовка

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

Место, где мы будем добавлять весь наш код, находится внутри элемента `<script>` в нижней части HTML:

```html
<script>
 // Your JavaScript goes here
</script>
```

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

Давайте начнём. Прежде всего добавьте следующие строки внутри элемента `<script>` :
```

var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

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

var guessCount = 1;
var resetButton;
```

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

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

* Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.
* Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде:

```html
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
```

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

```html
<label for="guessField">Enter a guess: </label
><input type="text" id="guessField" class="guessField" />
<input type="submit" value="Submit guess" class="guessSubmit" />
```

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

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

### Функции (Functions)

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

```js
function checkGuess() {
  alert("I am a placeholder");
}
```

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

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

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

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

```js
checkGuess();
```

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

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

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

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript console</title>
    <style>
 \* {
 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;
 }
 </style>
  </head>
  <body></body>

  <script>
 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 = ">";
 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();
 </script>
</html>
```

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

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

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

```js
var name = "Bingo";
name;
var hello = " says hello!";
hello;
var greeting = name + hello;
greeting;
```

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

```js
name += " says hello!";
```

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

```js
name = name + " says hello!";
```

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

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

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

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

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

```js
function checkGuess() {
  var userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses: ";
  }
  guesses.textContent += userGuess + " ";

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = "";
  guessField.focus();
}
```

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

* Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем `userGuess` и устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод `Number()`, чтобы убедится, что значение точно является числом.
* Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова `if`, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает `true`, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная `guessCount` числу `1` (то есть является ли это первой попыткой игрока или нет):

```js
guessCount === 1;
```

Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.
* Строка 6 добавляет текущее значение `userGuess` в конец параграфа `guesses`, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.
* Следующий блок (строки 8–24 ) делает несколько проверок:
    + `Первая конструкция if(){ }` проверяет, совпадает ли предположение пользователя с `randomNumber` установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зелёным цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.
    + Теперь мы добавили ещё одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.
    + Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него ещё остались догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем ещё один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.
* Последние три строки в функции (строки 26–28 ) готовят нас к следующей попытке. Мы добавляем 1 к переменной `guessCount` так как игрок использовал свой ход (`++` оператор инкремента — увеличивает на 1), очищаем значение текстового поля и фокусируемся на нем снова, готовы для ввода следующего ответа.
### События (Events)

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

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

```js
guessSubmit.addEventListener("click", checkGuess);
```

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

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

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

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

```js
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);
}
```

* Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключённые свойства как `true`. Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.
* Следующие три строки генерируют новый элемент `<button>`, устанавливают его текстовую метку « Start new game» и добавляют её к нижней части нашего HTML.
* Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на неё запускается функция `resetGame()`.

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

```js
function resetGame() {
  guessCount = 1;

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

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();

  lastResult.style.backgroundColor = "white";

  randomNumber = Math.floor(Math.random() \* 100) + 1;
}
```

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

* Устанавливает значение `guessCount` на 1.
* Удаляет все пункты информации.
* Удаляет кнопку сброса из нашего кода.
* Включает элементы формы, устанавливает фокус, делает поле доступным для следующих угадываний.
* Удаляет цвет фона из абзаца `lastResult`.
* Создаёт новое случайное число, чтобы вы не угадывали одно и тоже!

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

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

### Циклы (Loops)

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

Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:

```js
for (var i = 1; i < 21; i++) {
  console.log(i);
}
```

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

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

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

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

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

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

```js
guessField.focus();
```

Эта строка использует метод `focus()` (en-US), чтобы автоматически помещать текстовый курсор в текстовое поле `<input>`, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.

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

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

```js
var guessField = document.querySelector(".guessField");
```

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

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

```js
guessField.focus();
```

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

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

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

1. Для начала запустите свою программу в браузере.
2. Далее, откройте инструменты разработчика в вашем браузере, и убедитесь, что вы перешли во вкладку с консолью JavaScript.
3. Введите `guessField` и консоль покажет, что переменная содержит элемент `<input>`. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!
4. Теперь введите следующее:

```js
guessField.value = 2;
```

Свойство `value` представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!
5. Попробуйте ввести `guesses` и нажать return. Консоль покажет, что в переменной содержится элемент `<p>`.
6. Теперь попробуйте ввести:

```js
guesses.value;
```

Браузер вернёт вам `undefined`, потому что `value` не существует в параграфах.
7. Для изменения текста внутри параграфа, взамен используйте свойство `textContent`. Попробуйте:

```js
guesses.textContent = "Where is my paragraph?";
```

8. Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой:

```js
guesses.style.backgroundColor = "yellow";
guesses.style.fontSize = "200%";
guesses.style.padding = "10px";
guesses.style.boxShadow = "3px 3px 6px black";
```

Каждый элемент на странице имеет свойство `style`, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.
Теперь можно отдохнуть
----------------------

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

* Назад
* Обзор: Первые шаги
* Далее


Работа с текстом — строки в JavaScript - Изучение веб-разработки

Работа с текстом — строки в JavaScript
======================================

* Назад
* Обзор: Первые шаги
* Далее

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

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

Сила слов
---------

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

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

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

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

### Создание строки

1. Для начала введите следующие строки:

```js
const string = "Революция не будет транслироваться по телевидению.";
string;
```

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

```js
const badString = Тест;
const badString = 'Тест;
const badString = Тест';
```

Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
4. Следующий код будет выполнен только в том случае, если ранее была объявлена переменная `string` — убедитесь сами:

```js
const badString = string;
badString;
```

В настоящее время строка `badString` имеет то же значение, что и строка `string`.
### Одиночные кавычки vs. Двойные кавычки

1. В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:

```js
const sgl = "Одиночные кавычки.";
const dbl = "Двойные кавычки.";
sgl;
dbl;
```

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

```js
const badQuotes = 'Что происходит?";
```

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

```js
const sglDbl = 'Я не сказала "да", милорд…';
const dblSgl = "Вы не сказали 'нет'… (королева, Бэкингем)";
sglDbl;
dblSgl;
```

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

```js
const bigmouth = 'Жанна Д'Арк — народная героиня Франции.';
```

Что приводит нас к следующей теме.
### Экранирование кавычек в строках

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

```js
const bigmouth = "Жанна Д'Арк — народная героиня Франции.";
bigmouth;
```

Так лучше. Таким же образом можно экранировать и другие символы, например `"\`. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.

Конкатенация строк
------------------

1. Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.

```js
const one = "Привет, ";
const two = "как дела?";
const joined = one + two;
joined;
```

Результат этой программы - это переменная `joined`, содержащая значение "Привет, как дела?".
2. В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите `+` между ними. Попробуйте это:

```js
const multiple = one + one + one + one + two;
multiple;
```

3. Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:

```js
const response = one + "Я в порядке — " + two;
response;
```

**Примечание:** Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется **строковым литералом**.

### Конкатенация строк в контексте

Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:

```html
<button>Press me</button>
```

```js
const button = document.querySelector("button");

button.onclick = function () {
  const name = prompt("Как тебя зовут?");
  alert("Привет, " + name + ", рад тебя видеть!");
};
```

Здесь мы используем функцию `Window.prompt ()` в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае **`name`**. Затем мы используем функцию `Window.alert ()` в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной `name`.

### Числа vs. строки

1. Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:

```js
"Front " + 242;
```

Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
2. Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор `typeof` для того, чтобы установить является ли переменная числом или строкой):

```js
const myDate = "19" + "67";
typeof myDate;
```

3. Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
    * Объект `Number` преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
     js
    ```js
    const myString = "123";
    const myNum = Number(myString);
    typeof myNum;

    ```
    * С другой стороны, каждое число имеет метод, называемый `toString()`, который преобразует его в эквивалентную строку. Попробуй это:
     js
    ```js
    const myNum = 123;
    const myString = myNum.toString();
    console.log(typeof myString);

    ```

Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через `Number()`, чтобы справиться с этим. Именно это мы сделали в нашей Number Guessing Game, в строке 59.

Совмещение строк с различными выражениями
-----------------------------------------

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

```js
const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `Мне нравится песня ${song}. Я оценил её на ${
 (score / highestScore) \* 100
}%.`;
console.log(output); // "Мне нравится песня Fight the Youth. Я оценил её на 90%."
```

Многострочный текст
-------------------

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

```js
const output = `Мне нравится эта песня.
 Я оценил её на 90%.`;
console.log(output);

/\*
 Мне нравится эта песня.
 Я оценил её на 90%.
 \*/
```

Чтобы получить эквивалентный вывод с использованием обычной строки, вам придется включить в строку символы переноса строки (`\n`):

```js
const output = "Мне нравится эта песня.\nЯ оценил её на 90%.";
console.log(output);

/\*
 Мне нравится эта песня.
 Я оценил её на 90%.
 \*/
```

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

Заключение
----------

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

* Назад
* Обзор: Первые шаги
* Далее


Базовая математика в JavaScript — числа и операторы - Изучение веб-разработки

Базовая математика в JavaScript — числа и операторы
===================================================

* Назад
* Обзор: Первые шаги
* Далее

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

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

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

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

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

### Типы чисел

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

* **Целые** — это целые числа, такие как: 10, 400, или -5.
* **С плавающей точкой** *(или: с плавающей запятой)* — имеют целую и дробную части, например: 12.5 или 56.7786543.
* **Doubles** — тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).

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

* **Бинарная** — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
* **Восьмеричная** — 8-ми разрядная, использует 0–7 в каждом столбце;
* **Десятичная** — 10-ти разрядная, использует 0-9 в каждом столбце;
* **Шестнадцатеричная** — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.

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

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

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

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

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

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

```js
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```

2. Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать ещё пару переменных, содержащих числа, прежде чем двигаться дальше.
3. Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор `typeof`, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведённые ниже строки:

```js
typeof myInt;
typeof myFloat;
```

В обоих случаях вы должны получить `"number"` — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.
Арифметические операторы
------------------------

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

| Оператор | Имя | Функция | Пример |
| --- | --- | --- | --- |
| `+` | Сложение | Объединение чисел в одно целое. | `6 + 9` |
| `-` | Вычитание | Вычитает правое число от левого. | `20 - 15` |
| `*` | Умножение | Умножает два числа вместе. | `3 * 7` |
| `/` | Деление | Делит левое число на правое. | `10 / 5` |
| `%` | Модуль числа | Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число. | `11 % 3 = 2` (поскольку число 3 вмещается три раза, остатком будет число 2) |
| `**` | показатель степени | Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016. | `5 ** 5` (возвращает 3125, или как: 5\*5\*5\*5\*5) |

**Примечание:** Иногда числа участвующие в математических операциях называют операндами ( operands (en-US) ).

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

1. Для начала попробуйте ввести простые примеры, такие как:

```js
10 + 7;
9 \* 8;
60 % 3;
```

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

```js
var num1 = 10;
var num2 = 50;
9 \* num1;
num2 / num1;
```

3. И напоследок, попробуйте ввести более сложные выражения, например:

```js
5 + 10 \* 3;
(num2 % 9) \* num1;
num2 + num1 / 8 + 2;
```

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

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

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

```js
num2 + num1 / 8 + 2;
```

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

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

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

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

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

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

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

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

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

```js
guessCount++;
```

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

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

```js
3++;
```

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

```js
var num1 = 4;
num1++;
```

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

```js
num1;
```

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

```js
var num2 = 6;
num2--;
num2;
```

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

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

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

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

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

| Operator | Name | Purpose | Example | Shortcut for |
| --- | --- | --- | --- | --- |
| `+=` | Присваивание сложения | Прибавляет значение справа к переменной слева и возвращает новое значение переменной | `x = 3; x += 4;` | `x = 3; x = x + 4;` |
| `-=` | Присваивание вычитания | Вычитает значение справа из переменной слева и возвращает новое значение переменной | `x = 6; x -= 3;` | `x = 6; x = x - 3;` |
| `*=` | Присваивание умножения | Умножает переменную слева на значение справа и возвращает новое значение переменной | `x = 2; x *= 3;` | `x = 2; x = x * 3;` |
| `/=` | Присваивание деления | Делит переменную слева на значение справа и возвращает новое значение переменной | `x = 10; x /= 5;` | `x = 10; x = x / 5;` |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```html
<button>Запустить машину</button>
<p>Машина остановлена</p>
```

```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.";
  }
}
```

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

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

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

Итого
-----

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

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

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

* Назад
* Обзор: Первые шаги
* Далее


Генератор глупых историй - Изучение веб-разработки

Генератор глупых историй
========================

* Назад
* Обзор: Первые шаги

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

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

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

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

* Перейти и скопировать файл HTML как пример, сохранив его локальную копию как `index.html` в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.
* Перейти на страницу, содержащую исходный текст, и оставить её открытой в отдельной вкладке браузера. Она вам понадобится позже.

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

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

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

* Создаёт глупую историю по нажатию на кнопку "Generate random story".
* Заменяет стандартное имя "Bob" в истории на своё имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.
* Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.
* Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )

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

![](/ru/docs/Learn/JavaScript/First_steps/Silly_story_generator/assessment-1.png)

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

Шаги к цели
-----------

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

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

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

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

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

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

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

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

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

* Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.
* Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента `<html>` красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:

```js
document.querySelector("html").style.backgroundColor = "red";
```

* Math.round() - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.
Оценка и помощь
---------------

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

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