Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно:
alert, prompt и confirm.alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
Например:
alert("Hello");Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция
prompt принимает два аргумента:result = prompt(title, [default]);Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
titleТекст для отображения в окне.
defaultНеобязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки в синтаксисе
[...]Квадратные скобки вокруг
default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной
result. Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc. В этом случае значением result станет null.Вызов
prompt возвращает текст, указанный в поле для ввода, или null, если ввод отменён пользователем.Например:
let age = prompt('Сколько тебе лет?', 100);alert(`Тебе ${age} лет!`); // Тебе 100 лет!Для IE: всегда устанавливайте значение по умолчанию
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку
"undefined" в поле для ввода.Запустите код в Internet Explorer и посмотрите на результат:
let test = prompt("Test");Чтобы
prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:let test = prompt("Test", ''); // <-- для IEconfirm
Синтаксис:
result = confirm(question);Функция
confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.Результат –
true, если нажата кнопка OK. В других случаях – false.Например:
let isBoss = confirm("Ты здесь главный?");alert( isBoss ); // true, если нажата OKИтого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:
alertпоказывает сообщение.
promptпоказывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или
null, если была нажата кнопка «Отмена» или Esc с клавиатуры.confirmпоказывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает
true, если нажата OK, и false, если нажата кнопка «Отмена» или Esc с клавиатуры.📌Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
Расположение окон определяется браузером. Обычно окна находятся в центре.
Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.