Взаимодействие с пользователем: 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 .
Window: alert() method
window.alert() instructs the browser to display a dialog with an optional message, and to wait until the user dismisses the dialog.
Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to dismiss the dialog.
Syntax
alert() alert(message)
Parameters
A string you want to display in the alert dialog, or, alternatively, an object that is converted into a string and displayed.
Return value
Examples
.alert("Hello world!"); alert("Hello world!");
Notes
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window).
Specifications
| Specification |
|---|
| HTML Standard # dom-alert-dev |
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Oct 4, 2023 by MDN contributors.
Your blueprint for a better internet.
alert ( )
Разработчики делают красивые модальные окна неделю, но у нас всегда есть готовое некрасивое.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева
Обновлено 13 ноября 2021
Кратко
Скопировать ссылку "Кратко" Скопировано
При помощи директивы alert ( ) можно вывести на экран пользователя модальное окно с каким-нибудь текстом.
�� Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.
Пример
Скопировать ссылку "Пример" Скопировано
�� Это самый быстрый и простой способ что-то сказать пользователю, но такое окно никак не стилизовать, а значит, использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы использовать подобные модальные диалоги нежелательно.
Как пишется
Скопировать ссылку "Как пишется" Скопировано
alert ( ) принимает только один аргумент:
alert("Message")alert("Message")
В качестве строки для отображения также можно передать и переменную:
var text = "Another message"alert(text)var text = "Another message" alert(text)
Как понять
Скопировать ссылку "Как понять" Скопировано
alert ( ) позволяет вывести любое сообщение, но необходимо помнить, что аргумент будет приведён к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке.
// Helloalert("Hello") // 100alert(100) // falsealert(false) // 1,10,100alert([1, 10, 100])// Hello alert("Hello") // 100 alert(100) // false alert(false) // 1,10,100 alert([1, 10, 100])
Вывести окно с текстом из «сложного» значения можно — окно появится, но не с тем текстом, который, возможно, ожидается:
// [object Object]alert(<>) // [object Object]alert(< text: "Some message" >)// [object Object] alert(>) // [object Object] alert( text: "Some message" >)
�� Чтобы объяснить JavaScript, как нужно выводить объект с данными в alert ( ) , необходимо описать функцию объекта to String , которая отвечает за приведение к строке:
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� Ниже представлен пример самостоятельного создания диалогового окна на замену alert ( ) :
Что возвращает метод alert в javascript?
Метод alert выводит в браузере небольшое окно с сообщением и кнопкой "ОК" и ждёт, когда пользователь нажмёт на кнопку. При этом метод alert всегда возвращает undefined.
В этом можно убедиться, если открыть в браузере "Инструменты веб-разработчика" и во вкладке "Console" вызвать метод alert .
Синтаксис
alert(message) - message это необязательная строка текста, которую alert отобразит в окне, или же объект, который будет преобразован в строку и отображён.
Пример
alert('Hexlet') Браузер отобразит окно с сообщеним "Hexlet", но в "Сonsole" можно будет заметить, что метод вернул undefined.