Уроки JavaScript – Диалоговые окна alert, confirm и prompt
Диалоговые окна позволяют взаимодействовать с пользователем и работать с данными, которые получены от этого пользователя. Вы, несомненно, видели их, использовали их и они вас всегда раздражали, когда они появлялись на каком-то сайте. Теперь пришло время научиться самому их создавать. С помощью диалоговых окон JavaScript вы можете взаимодействовать с посетителем вашего сайта довольно простым и тривиальным способом. Например, вы можете запрашивать имя посетителя, а затем как-то его отображать на сайте. Или вы можете сделать диалоговое окно с подтверждением, которое даст пользователям возможность выбора (выполнять или нет указанное действие), например входить ли на сайт с ограниченным доступом. Для этих целей есть три метода (команды) JavaScript, которые мы сегодня и рассмотрим.
Диалоговые окна оповещения, подтверждения и подсказки
В JavaScript есть три «команды», которые создают диалоговые окна оповещения (alert), подтверждения (confirm) и подсказки (prompt):
window.alert()
или простоalert()
window.confirm()
или простоconfirm()
window.prompt()
или простоprompt()
Теперь давайте рассмотрим их подробно.
Первая команда – это оповещение (или предупреждения):
window.alert() // или просто alert()
Эта команда отображает диалоговое окно с таким сообщением, которое вы сюда вставили. Это может быть, например, простой статический текст:
<body> <script type="text/javascript"> window.alert("Приветствуем вас на нашем сайте!") </script> </body>
В диалоговом окне будет отображаться то, что вы укажете в кавычках. В примере выше это простой текст. Также это может быть результат выполнения какой-то функции (например, с целью отладки).
Вторая команда – диалоговое окно с подтверждением:
window.confirm() // или просто confirm()
Это окно используется для подтверждения пользователем выполнения определенного действия и выбора между двумя вариантами. Результат зависит от выбора пользователя. Ниже простой пример кода:
<script type="text/javascript"> var confDialog = window.confirm("У вас сегодня хорошее настроение?") if (confDialog) window.alert("Отлично!") else window.alert("Плохо :(") </script>
Немного рассмотрим код выше. Прежде всего, мы объявляем переменную (var confDialog
), которая будет хранить результат окна подтверждения. Переменная confDialog
получит результат, а именно true
(истина) или false
(ложь). Затем мы используем оператор if
, чтобы учесть два пути, в зависимости от результата. Если результат истинный (пользователь нажал «ОК»), будет показано диалоговое окно с оповещением «Отлично!». Если результат ложный (пользователь нажал «отменить»), вместо этого покажется предупреждение «Плохо :(».
Третья команда – диалоговое окно с подсказкой:
window.prompt() // или просто prompt()
Диалоговое окно с подсказкой используется для того, чтобы позволить пользователю что-то ввести и потом что-то сделать с этой информацией:
<script type="text/javascript"> var promptDialog = window.prompt("Укажите, пожалуйста, свое имя") window.alert(promptDialog) </script>
Концепция здесь очень похожа. В диалоговом окне мы запрашиваем имя у пользователя и после того как он его ввел, мы показываем его в диалоговом окне оповещения. Мы также можем вывести имя пользователя не в окне, а, например, в каком-то блоке, используя манипуляции с DOM.
Вот и все на сегодня. Спасибо за внимание!
Последние посты
Томас Эдисон
Наша самая большая слабость заключается в том, что мы быстро сдаемся. Самый верный способ добиться… Читать далее
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее
Стивен Кинг
Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее