Далее на странице...
Здесь будут рассмотрены простые способы взаимодействия между JavaScript и пользователем, который находится на сайте.
Здесь вы узнаете о методах alert, confirm и prompt. Каждый из них вызывает модальное окно, но все они отличны и используются в различных ситуациях.
Далее рассмотрим отдельно каждый из методов, особенности синтаксиса и работы метода prompt и общую особенность методов alert, confirm и prompt.
Метод alert - Окно предупреждение
1-ый способ взаимодействия JavaScript с пользователем - это метод alert.
Метод alert вызывает модальное окно с указанным текстом. Это окно встроено в браузер: мы не можем изменить его стиль.
Метод/команда alert используется для предупреждения пользователя о чем-то важном. Например, чтобы он не покидал страницу, иначе, введенные им данные не будут сохранены.
Пример 1.1
alert('Hello');
Метод confirm - Да или Нет
2-ой способ взаимодействия JavaScript с пользователем - это метод confirm.
Метод confirm вызывает модальное окно с указанным текстом и с кнопками ОК и Отмена.
Метод/команда confirm используется для того, чтобы получить от пользователя ответ ДА или НЕТ. В зависимости от ответа команда confirm возвращает булевы значения true или false.
Пример 1.2
const result = confirm('Are you here?');
console.log(result);
Метод prompt - Поле для ввода - Синтаксис
3-ий способ взаимодействия с пользователем - метод prompt.
Метод prompt вызывает модальное окно с указанным текстом, полем для ввода данных (текст, числа или оно уже может содержать информацию, которую можно менять) и с кнопками ОК и Отмена.
Метод/команда prompt используется если от пользователя нужно получить конкретный ответ, который он сможет ввести в поле для ввода.
Здесь нужно отметить два важных момента.
1. Правильный синтаксис при использовании метода prompt таков:
Пример 1.3
const answer = prompt("Вам есть 18 лет?", "");
console.log(answer);
Здесь речь шла о том, что метод prompt может содержать один или два параметра. Первый параметр – это текст (утверждение или вопрос) отображаемый в модальном окне. Второй параметр - это значение, которое по умолчанию располагается в поле для ввода. Второй параметр метода prompt не является обязательным, но...
На сегодняшний день принято так: даже если второй параметр не указывается, то как видно из примера, правильно после первого параметра и после запятой оставлять пустые кавычки.
2. Чтобы ни ввел пользователь в поле для ввода: число или текст, в любом случае метод prompt возвращает строку. То есть в переменной answer в любом случае будет тип данных строка.
Проверим это при помощи оператора typeof.
Пример 1.4
const answer = prompt("Вам есть 18 лет?", "");
console.log(typeof(answer));
Если в поле для ввода ввести строку или число, то результат будет один и тот же - string. Тип данных строка.
Следует запомнить, что вся информация, приходящая от пользователя - это всегда строка.
Метод prompt - Конвертация строк в числа
Итак, теперь мы знаем, что метод prompt всегда возвращает строку.
Но существуют способы обхода этого правила: способы конвертации строк в числа. Подробно об этом будет говориться в дальнейшем. Сейчас рассмотрим один из способов - использование знака плюс +.
Если в примере 1.4 перед методом prompt поставить знак +, то будет происходить автоматическая конвертация строки в числовой тип данных.
Пример 1.5
const answer = +prompt("Вам есть 18 лет?", "");
console.log(typeof(answer));
Рассмотренный пример является одним из случаев динамической типизации.
Метод prompt - Занесение данных в массив
Приведем еще один пример того, как может использоваться метод prompt - для занесения данных в массив.
const answers = [];
answers[0] = prompt('Как Ваше имя?', '');
answers[1] = prompt('Как Ваша фамилия?', '');
answers[2] = prompt('Сколько Вам лет?', '');
document.write(answers);
Как работает этот код?
-
Сначала создается пустой массив answers.
-
Здесь мы говорили о том, как происходит доступ к элементам массива?
Занесение данных в массив происходит аналогично. Только после указания имени и порядкового номера элемента массива нужно указать что именно мы заносим в массив.
В данном случае - это данные, которые возвращает метод prompt. Три вопроса будут заданы пользователю и три ответа будут по порядку заноситься в массив.
-
В этом примере мы выводим информацию не в консоль, а непосредственно на страницу при помощи метода write объекта document.
На практике этот способ вывода данных на веб-страницу практически не используется (потому что эта команда заменяет все содержимое страницы на то, что выводит на экран). Но знать о нем нужно.
Особенность методов alert, confirm и prompt
У методов alert, confirm и prompt есть одна особенность.
Если запустить код с этими методами в редакторе Visual Studio Code то мы увидим подобное сообщение об ошибке: prompt is not defined. Почему так происходит?
В начале статьи, когда речь шла о методе alert, было сказано, что вызываемое им модальное окно - это окно, которое встроено в браузер. И редактору Visual Studio Code о существовании этого окна ничего не известно. Тоже самое относится и к методам confirm и prompt.
То есть существуют вещи, относящиеся исключительно к браузеру (кроме методов alert, confirm и prompt - это объекты documetn, window и др.), но с помощью языка JavaScript мы можем с ними взаимодействовать. Тестировать это можно только в браузере.
Итак, в этой статье Вы узнали о том, как происходит взаимодействие между JavaScript и пользователем на самом простом уровне. И увидели, что мы можем получать данные от пользователя и как-то их использовать.
