Взаимодействие с пользователем: alert, prompt, confirm
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.
В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.
alert
alert(сообщение)alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
alert( "Привет" );Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, default);Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.
Safari 5.1+ не возвращает null
Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.
Как и в случае с alert , окно prompt модальное.
var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')Всегда указывайте default
Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .
Запустите этот код в IE, чтобы понять о чём речь:
var test = prompt("Тест");Поэтому рекомендуется всегда указывать второй аргумент:
var test = prompt("Тест", ''); // confirm
result = confirm(question);confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL( Esc ).
var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );Особенности встроенных функций
Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.
С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.
Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Резюме
- alert выводит сообщение.
- prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null , если ввод отменён (CANCEL/ Esc ).
- confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false .
Функция prompt
Функция prompt выводит окно для ввода данных. Первым параметром она принимает сообщение, которое будет показано пользователю, а вторым - текст по умолчанию в поле ввода Второй параметр - не обязательный.
В окошке что появится будет находится текстовое поле, и две кнопки - ОК, CANCEL. При нажатии на ОК - возвращается введенная пользователем строка, а при нажатии на CANCEL - null .
Синтаксис
prompt(сообщение, [текст по умолчанию]);
Пример
По нажатию на кнопку спросим имя пользователя, а затем выведем это имя с помощью функции alert :
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?'); alert(res); >);
Пример
Сделаем так, что имя пользователя уже будет вставлено по умолчанию, однако пользователь сможет его поменять:
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?', 'John'); alert(res); >);
Смотрите также
- функцию alert ,
которая выводит диалоговое окно с сообщением - функцию confirm ,
которая выводит диалоговое окно для подтверждения
alert, prompt и confirm - диалоговые окна в JavaScript
Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК» . При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.
Синтаксис метода alert() :
JavaScript
// message - текст сообщения alert(message);Метод alert() имеет один аргумент ( message ) - текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.
Например, выведем при клике в диалоговое окно alert координаты курсора:
JavaScript
// es6 document.addEventListener('click', (e) => { alert(`Координаты: (${e.clientX},${e.clientY})`); }); // es5 document.addEventListener('click', function (e) { alert('Координаты: (' + e.clientX + ',' + e.clientY + ')'); });
Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n :
JavaScript
// перенос строки в alert alert('Строка 1\nСтрока 2');Метод prompt()
Метод prompt() предназначен для вывода диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Это окно предназначено для запроса данных, которые пользователю нужно ввести в текстовое поле.
JavaScript
// message - текст сообщения (является не обязательным), предназначено для информирования пользователя о том, какие данные у него запрашиваются // default - начальное значение для поля ввода, которое будет по умолчанию в нём отображаться (является не обязательным) const result = prompt(message, default);В переменную result возвращается значение введённое пользователем или null . Если пользователь не ввёл данные (поле ввода пустое) и нажал на «ОК», то в result будет находиться пустая строка.
Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome :
JavaScript
Метод confirm()
Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.
Синтаксис метода confirm() :
JavaScript
// question - текст сообщения (вопроса) const result = confirm(question);- true - если пользователь нажал на кнопку «ОК»;
- false - в остальных случаях.
Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:
Итого
В этой статье мы рассмотрели 3 функции браузера: alert , prompt и confirm . Они предназначены для взаимодействия с пользователем. Диалоговые окна создаваемые этими методами являются модальными. Это значит, что они блокируют доступ пользователя к остальной части страницы пока оно не будет закрыто. Кроме этого, они ещё приостанавливают загрузку дальнейшей части страницы. По этим причинам, их имеет смысл использовать в скриптах только при изучении JavaScript, чтобы запросить или вывести некоторую информацию на экран. В настоящих проектах они обычно не используются.
Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.
Примеры
1. Использование методов prompt и alert для создания игры «Угадай число»?
JavaScript
prompt ( )
При помощи функции prompt ( ) можно вывести на экран пользователя модальное окно c полем ввода и текстом-пояснением.
�� Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует работу пользователя с браузером до тех пор, пока пользователь это окно не закроет.
Пример
Скопировать ссылку "Пример" Скопировано
�� Это крайне быстрый вариант кода, который взаимодействует с пользователем, но окно созданное таким образом не изменяется через CSS, а значит использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы юзать модальное окно нежелательно.
Как пишется
Скопировать ссылку "Как пишется" Скопировано
prompt ( ) принимает 1 или 2 аргумента — это текст для отображения и значение по умолчанию для поля ввода.
Результат работы prompt ( ) можно записать в переменную:
const answer1 = prompt('Как тебя зовут?')const answer2 = prompt('Как тебя зовут?', 'Имя')const answer1 = prompt('Как тебя зовут?') const answer2 = prompt('Как тебя зовут?', 'Имя')
Если при вызове prompt ( ) использовать только один параметр, тогда в появившемся окне поле ввода не будет содержать «подсказки» ввода.
В случае когда использовано два параметра, то в поле ввода будет с подсказкой ввода. Это полезно, чтобы показать пользователю, какой результат ввода ожидается.
Как понять
Скопировать ссылку "Как понять" Скопировано
Аргументы prompt ( ) должны быть строками. Если это не так — будет автоматическое приведение к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке.
prompt('Как тебя зовут?', 'Саша')// Текст: 'Как тебя зовут?', значение поля ввода: 'Саша'prompt('Введите возраст', 18)// 'Введите возраст', СТРОКА '18'prompt('Как тебя зовут?', 'Саша') // Текст: 'Как тебя зовут?', значение поля ввода: 'Саша' prompt('Введите возраст', 18) // 'Введите возраст', СТРОКА '18'
�� Результат prompt ( ) — строка, если была нажата кнопка «OK» или null , если была нажата «Отмена».
Поэтому не стоит полагаться на то, что результат prompt ( ) всегда будет строкой. Это может привезти к ошибкам в работе скрипта, например:
const result = prompt('Введите четное число', '')// вводим ДЕСЯТЬ и нажимаем ОКif (result % 2 === 0) // Проверка на четность alert('Число четное')> else alert('Число нечетное')> // Результат: сообщение 'Число нечетное'const result = prompt('Введите четное число', '') // вводим ДЕСЯТЬ и нажимаем ОК if (result % 2 === 0) // Проверка на четность alert('Число четное') > else alert('Число нечетное') > // Результат: сообщение 'Число нечетное'
С точки зрения синтаксиса ошибок нет, но
- Нет явной обработки null — result примет значение null в случае нажатия кнопки «Отмена»: Конечно null % 2 выполнится без ошибок, но работа программы будет некорректной. Правильнее будет обработать и отказ от ввода числа.
- Нет обработки ситуаций, когда введено не число.
В операции (result % 2 = = = 0 ) из-за деления на 2 JavaScript осуществляет приведение строки result к численному типу. Если не получится, то результат работы будет некорректным.
Более корректный вариант обработки ввода:
var result = prompt('Введите четное число', '')if (result === null) alert('Вы отказались от ввода')> else if (isNaN(result % 2)) alert('Ошибка, введено НЕ ЧИСЛО')> else if (result % 2 === 0) alert('Число четное')> else alert('число нечетное')>var result = prompt('Введите четное число', '') if (result === null) alert('Вы отказались от ввода') > else if (isNaN(result % 2)) alert('Ошибка, введено НЕ ЧИСЛО') > else if (result % 2 === 0) alert('Число четное') > else alert('число нечетное') >
Вариант обработки всех возможных случаев ввода более громоздкий, но он намеренно написан наиболее простым способом. В случае использование switch или отдельных самостоятельно написанных функций проверки код примет более элегантный вид.
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� Ниже представлен пример использования prompt ( ) с самостоятельно созданным диалоговым окном: