This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Первое погружение в JavaScript
Теперь, когда вы получилибазовое представление о JavaScript — самое время познакомиться с ним на практике! В данной статье представлен ускоренный практический курс, демонстрирующий основные возможности JavaScript. В этом курсе, шаг за шагом, вы создадите простую игру «Угадай число».
| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript. |
|---|---|
| Цели: | Получение первого опыта в программировании на JavaScript. |
Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!
Примечание:Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.
Думай как программист
Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:
- Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.
- Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.
Всё вместе это потребует тяжёлой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнёте "думать как программист", но предоставим для этого достаточно возможностей в этой статье.
Учитывая вышесказанное, на примере простой игры, давайте детально разберём каждый этап создания программы и познакомимся с некоторыми конструкциями языка.
Игра «Угадай число»
В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:
Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.
Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:
Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.
Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:
Сгенерировать случайное число между 1 и 100.
Начать запись количества попыток игрока угадать число. Начать с 1.
Предоставить попытку угадать игроку загаданное число.
Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
Далее, проверить было ли это число верным.
Если число верное:
- Показать поздравительное сообщение.
- Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
- Предоставить возможность для перезапуска игры.
Если число не верное и есть попытки:
- Сказать игроку, что он не угадал.
- Разрешить ему использовать ещё попытку.
- Повысить число попыток на 1.
Если число не верное и попыток нет:
- Сказать игроку, что игра окончена.
- Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
- Предоставить возможность для перезапуска игры.
Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
Давайте теперь перейдём к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.
Подготовка
В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файлаnumber-guessing-game-start.html (см. здесь). Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.
Место, где мы будем добавлять весь наш код, находится внутри элемента<script> в нижней части 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></p><p></p><p></p>Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки .
html<label for="guessField">Enter a guess: </label><input type="text" /><input type="submit" value="Submit guess" />Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).
Примечание:В дальнейшем вы узнаете намного больше о переменных.
Функции (Functions)
Затем добавьте следующие ниже предыдущего #"I am a placeholder");}
Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое словоfunction, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки ({ }). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.
Код запускается вводом имени функции, за которым следуют две скобки.
Сейчас попробуйте сохранить код и обновить его в браузере.
Перейдите кконсоли JavaScript в инструментах разработчика, и введите следующую строку:
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 |
Вы также можете использовать оператор+ для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:
var name = "Bingo";name;var hello = " says hello!";hello;var greeting = name + hello;greeting;Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:
name += " says hello!";Это эквивалентно этому:
name = name + " says hello!";Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотриниже), мы используем операторы сравнения, например:
| Оператор | Имя | Пример |
|---|---|---|
=== | Строгое равенство (это точно одно и то же?) | 5 === 2 + 4 |
!== | Строгое неравенство (это не одно и то же?) | 'Chris' !== 'Ch' + 'ris' |
< | Меньше чем | 10 < 6 |
> | Больше чем | 10 > 20 |
Условные выражения (Conditionals)
Вернёмся к нашей функцииcheckGuess(), я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответствующие реагировала.
Теперь, заменим вашу текущую функциюcheckGuess() на эту версию:
function checkGuess() { var userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = "Previous guesses: "; } guesses.textContent += userGuess + " "; if (userGuess === randomNumber) { lastResult.textContent = "Congratulations! You got it right!"; lastResult.style.backgroundColor = "green"; lowOrHi.textContent = ""; setGameOver(); } else if (guessCount === 10) { lastResult.textContent = "!!!GAME OVER!!!"; setGameOver(); } else { lastResult.textContent = "Wrong!"; lastResult.style.backgroundColor = "red"; if (userGuess < randomNumber) { lowOrHi.textContent = "Last guess was too low!"; } else if (userGuess > randomNumber) { lowOrHi.textContent = "Last guess was too high!"; } } guessCount++; guessField.value = ""; guessField.focus();}Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.
Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем
userGuessи устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный методNumber(), чтобы убедится, что значение точно является числом.Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова
if, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращаетtrue, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменнаяguessCountчислу1(то есть является ли это первой попыткой игрока или нет):jsguessCount === 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():
guessSubmit.addEventListener("click", checkGuess);Здесь мы добавляем обработчик событий к кнопкеguessSubmit. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случаеclick) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функцияcheckGuess() - обратите внимание, что нам не нужно указывать круглые скобки при записи внутриaddEventListener()).
Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определённого момента. Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы ещё не определили функциюsetGameOver(), которая должна запускаться после завершения игры. Давайте добавим наш недостающий код и завершим пример функциональности.
Завершение игры
Давайте добавим функциюsetGameOver() в конец нашего кода, а затем пройдём по ней. Добавьте это под нижней частью вашего #"button"); resetButton.textContent = "Start new game"; document.body.appendChild(resetButton); resetButton.addEventListener("click", resetGame);}