В Javascript имеются три встроенных элемента для взаимодействия с пользователем страницы: alert
, prompt
, confirm
. Начнем с самого простого и двинемся по нарастающей.
Модальное окно alert
Строка кода:
alert("Message");
… вводит на странице модальное окно. Модальными окнами называются окна, которые блокируют работу всей страницы в целом (и скриптов - в частности) до тех пор, пока пользователь не выполнит требуемое окном действие. Пока модальное окно запущено, пользователь не сможет прокручивать страницу, нажимать на ней какие-либо кнопки или переходить по ссылкам.
Конкретное место, где выводится модальное окно с вопросом — обычно это центр viewport браузера и внешний вид окна выбирает браузер. Разработчик не может на это влиять. С одной стороны — это недостаток, так как нельзя вывести окно в своем, особо красивом, дизайне.
В случае с alert требуемое от пользователя действие одно - нажать кнопку “ОК”.
Задача alert - донести до сведения пользователя страницы какую-либо информацию, будь то справочная информация, информация об ошибке и так далее. Функция alert - единственная, которая ничего не возвращает!
Модальное окно prompt
Функция prompt также, как и alert, создает модальное окно. Но, в отличие от модального окна alert, окно prompt немного сложнее. Синтаксис функции prompt выглядит таким образом:
var result = prompt (title, default);
То есть, функция prompt принимает два аргумента. Первый аргумент title
- это заголовок модального окна. Второй аргумент default
- это строка по умолчанию как образец ввода в поле.
Создаваемое функцией prompt окно имеет поле для ввода и две кнопки OK
и Cancel. Вызов prompt возвращает то, что ввел посетитель — строку или
специальное значение null
, если ввод отменен.
var ageUser = prompt (How old are you?, 30);
alert(Your are + ageUser + old!);
Рекомендуется всегда указывать второй аргумент:
var test = prompt(Тест, );
Окно prompt предназначено для получения у пользователя какой-либо информации в виде данных любого типа.
Модальное окно confirm
Это модальное окно служит для получения от пользователя подтверждения
на заданный вопрос - ДА или НЕТ. Функция confirm выводит окно с
вопросом question с двумя кнопками: OK и CANCEL. Результатом будет true
при нажатии OK и false
– при CANCEL(ESC):
var sex = confirm(Are you male?);
console.log(sex);
Заключение
Рассмотренные три способа взаимодействия с пользователем являются самыми простыми. Это простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда важна простота, а всякие «красивости» особой роли не играют.
Итог
alert
выводит сообщение;prompt
выводит сообщение и ждет, пока пользователь введет текст, а затем возвращает введенное значение илиnull
, если ввод отменен (CANCEL/ESC);confirm
выводит сообщение и ждет, пока пользователь нажмет «OK» или «CANCEL» и возвращаетtrue/false
;
Данная статья является пересказом соответствующего материала с ресурса learn.javascript.ru и не претендует на оригинальность.
Комментарии