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

Начиная

Зайдите на glitch.com/~8ball-starter и нажмите Сделайте ремикс самостоятельно. Этот код содержит весь HTML и CSS для вашего Magic 8 Ball, который вы можете предварительно просмотреть, нажав кнопку Показать в реальном времени.

Прямо сейчас кнопка «Встряхнуть» ничего не делает. Вы исправите это, когда напишете JavaScript. Но вы можете видеть, что пользователю предлагается ввести вопрос для Magic 8 Ball, когда он нажимает «Встряхнуть».

Когда вы нажмете на index.html в списке файлов слева, вы увидите этот код внутри тегов body:

<h1>Magic 8 Ball</h1>
<p>Type in your question:</p>
<input type="text" id="input" />
<div class="eight-ball">
  <div class="answer">
    <p id="eight">8</p>
    <p id="answer"></p>
  </div>
</div>
<button id="button">
  Shake
</button>

Вы, вероятно, узнаете многие теги, такие как h1, p и div. Помните, что элементы HTML обычно состоят из закрывающего и открывающего тегов с содержимым между ними (хотя обратите внимание, что input самозакрывающийся, а один из наших тегов p пуст).

Возможно, вы знаете, что атрибут class помогает применять стили CSS к определенным элементам HTML. Связанный атрибут id помогает более точно нацеливать определенные элементы - в то время как вы можете применить class ко многим элементам, вы должны применять id только к одному элементу.

Мы также можем использовать id элемента для нацеливания на него с помощью JavaScript. Давай сделаем это сейчас.

Захват HTML-элементов с помощью JavaScript

Если вы хотите управлять элементом HTML с помощью JavaScript, вы не можете сделать это непосредственно в HTML. Хотя вы могли видеть, что JavaScript смешан с HTML, содержащимся в тегах script, лучше всего создать отдельный файл script.js для всего вашего JavaScript.

Если вы нажмете на файл script.js в списке файлов слева, вы получите пустой документ, готовый для заполнения с помощью JavaScript.

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

JavaScript знает весь HTML в вашем файле index.html как большой объект с именем document (технически объектная модель документа), и мы можем использовать метод JavaScript getElementById для извлечения определенных HTML-элементов по их id.

На какие элементы я хочу настроить таргетинг в HTML? Во-первых, я хочу, чтобы что-то происходило при нажатии кнопки, поэтому я сохраню кнопку в переменной. Его id равно button, поэтому я могу сохранить его в переменной с помощью этого кода:

var button = document.getElementById("button");

var сообщает компьютеру, что я объявляю переменную. Теперь весь HTML-элемент кнопки содержится в переменной JavaScript с именем button! Это позволяет мне делать вещи, когда нажимают кнопку, или даже манипулировать стилем и текстом на самой кнопке.

Какие еще элементы я хочу сохранить в переменной?

  • Поле ввода - я хочу получить все права пользователя в поле ввода.
  • Абзац ответа - я хотел бы изменить ответ Magic 8 Ball («Вероятно», «Ответить туманным» и т. Д.)
  • Абзац, содержащий восьмерку - я бы хотел избавиться от него, когда хочу показать ответ Magic 8 Ball!

Найдите эти элементы в HTML и определите их id. Затем, моделируя следующие строки кода после строки выше, в которой мы сохранили кнопку в переменной, также сохраните эти элементы в переменных JavaScript.

Когда вы объявили эти переменные, сравните свои ответы с моими:

var input = document.getElementById("input");
var answer = document.getElementById("answer");
var eight = document.getElementById("eight");

Убедитесь, что в вашем файле script.js объявлены четыре переменные. Для удобства я рекомендую называть ваши переменные так же, как мои.

Теперь, когда у нас есть переменные, мы можем начать манипулировать нашим HTML!

Добавление прослушивателя событий

Когда пользователь нажимает кнопку «Встряхнуть», мы хотим, чтобы восьмерка исчезла с Magic 8 Ball и появился ответ.

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

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

button.addEventListener("click", function() {
  alert("The button was clicked!");
});

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

Поместите код для прослушивателя событий НИЖЕ вашего объявления переменных. Проверьте это в предварительном просмотре приложения. При нажатии на кнопку появляется предупреждение?

Ура! Оно работает!

Добавление функциональности Magic 8 Ball

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

Поскольку я сохранил элемент поля ввода HTML в переменной с именем input, я могу получить все, что пользователь ввел с помощью input.value. Я также могу узнать длину их ввода с помощью input.value.length (это не так сложно!).

Когда кнопка нажата, я проверю, меньше ли введенное значение единицы. Если да, я отправляю предупреждение, предлагая пользователю ввести вопрос!

button.addEventListener("click", function(){
  if (input.value.length < 1) {
    alert("Please enter a question!");
  }
});

Проверьте это!

Но я также должен что-то делать, если пользователь вводит вопрос. Я собираюсь добавить ветвь else к оператору if.

button.addEventListener("click", function(){
  if (input.value.length < 1) {
    alert("Please enter a question!");
  } else {
    // We're going to add more code in here!
  }
});

Если пользователь вводит вопрос, сначала я хочу, чтобы цифра 8 исчезла с экрана. Я могу сделать это, установив innerText переменной eight на пустой текст: "".

Тогда я хочу дать ответ. А пока я сделаю заполнитель и установлю innerText переменной answer на фиктивную строку, например "answer".

Теперь мой слушатель событий выглядит так:

button.addEventListener("click", function(){
  if (input.value.length < 1) {
    alert("Please enter a question!");
  } else {
    eight.innerText = "";
    answer.innerText = "answer";
  }
});

Проверьте это! Введите вопрос и нажмите кнопку «Встряхнуть». Посмотрите, появляется ли фиктивный текст «ответ»!

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

Генерация случайных ответов с помощью массивов

Открою вам секрет: случайности не бывает. Эти «случайно сгенерированные» числа на самом деле генерируются формулами, которые пытаются достичь случайности, но на самом деле это просто формулы в конце дня.

Мы сделаем то же самое! Мы собираемся определить длину ввода пользователя и использовать ее для генерации «случайного» ответа от Magic 8 Ball.

Но сначала нам нужен набор опций. Я имею в виду буквально массив - это термин для структуры данных в виде списка, которая может содержать множество других элементов, таких как строки (да, нет) или числа. Мы собираемся создать массив строк (слова / фразы в кавычках) для хранения возможных ответов Magic 8 Ball.

Добавьте этот код вместе с остальными вашими переменными над слушателем событий:

var options = ["yes", "no", "maybe"];

Прямо сейчас это довольно упрощенный Magic 8 Ball. Мы уточним это позже.

Компьютеры считают, начиная с 0, поэтому, чтобы получить доступ к «случайному» элементу из массива, мы собираемся выбрать число от 0 до 2 и извлечь из массива соответствующий пронумерованный элемент.

Для этого я собираюсь вычислить длину вводимого пользователем текста и выполнить над ним модульную операцию. Операторы модуля возвращают остаток после деления - например, 5, деленное на 2, имеет остаток 1, поэтому 5 по модулю 2 равно 1.

Я хочу вычислить input.value.length mod options.length (количество ответов, из которых мы должны выбирать). Это приведет к остатку от 0 до последнего элемента массива options. Для нашего текущего массива это будет число от 0 до 2.

Убедитесь, что вы объявили массив параметров НАД слушателем событий. Если еще нет, переместите его.

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

button.addEventListener("click", function(){
  if (input.value.length < 1) {
    alert("Please enter a question!");
  } else {
    eight.innerText = "";
    var num = input.value.length % options.length;
    answer.innerText = options[num];
  }
});

Можете ли вы найти оператор модуля? Похоже на знак процента: %. Какая переменная хранит «случайное» число, сгенерированное операцией модуля? (Если вы сказали num, вы правы!)

Также обратите внимание на то, как мы извлекли элемент из массива options, используя квадратные скобки, чтобы конкретно получить элемент в местоположении num (на данном этапе в диапазоне от 0 до 2).

Протестируйте свой Magic 8 Ball прямо сейчас. Он говорит «да», «нет» или «может быть»? Меняется ли ответ, когда вы вводите разные ответы?

Если нет, сравните свой код с кодом решения или, если вы чувствуете себя смелым, откройте консоль JavaScript.

Если это работает, поздравляем с созданием полнофункционального веб-приложения!

Написание Magic 8 Ball ответы

А теперь самое интересное - предоставьте различные ответы для Magic 8 Ball! Вы можете написать свои собственные совершенно сумасшедшие ответы, дурацкие состояния или просто взять все стандартные ответы Magic 8 Ball, как это сделал я:

var options = [
  "It is certain",
  "It is decidedly so",
  "Without a doubt",
  "Yes – definitely",
  "You may rely on it",
  "As I see it, yes",
  "Most likely",
  "Outlook good",
  "Yes",
  "Signs point to yes",
  "Don’t count on it",
  "My reply is no",
  "My sources say no",
  "Outlook not so good",
  "Very doubtful",
  "Reply hazy, try again",
  "Ask again later",
  "Better not tell you now",
  "Cannot predict now",
  "Concentrate and ask again"
];

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

Удачного кодирования!

Сделайте Magic 8 Ball своим собственным

  • Настройте ответы!
  • Играйте с CSS!
  • Сможете ли вы сделать 8 Ball психоделическим? (Вы захотите изучить цветную анимацию.)
  • Пойдите дальше: узнайте больше о JavaScript в Codecademy, SoloLearn или FreeCodeCamp.