Уроки 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.
Вот и все на сегодня. Спасибо за внимание!
Последние посты
Генри Форд
Человек имеет два мотива поведения — один настоящий и второй, который красиво звучит Генри Форд…
Фридрих Ницше
Не нужно додумывать слишком много. Так вы создаете проблемы, которых изначально не было Фридрих Ницше…
Такой разный инвертор! Выбираем между кондиционерами Inverter, Inverter DC и Full DC
Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…
Омар Хайям
Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…
Полезные советы по выбору раздвижной двери
Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…