Диалоговые окна позволяют взаимодействовать с пользователем и работать с данными, которые получены от этого пользователя. Вы, несомненно, видели их, использовали их и они вас всегда раздражали, когда они появлялись на каком-то сайте. Теперь пришло время научиться самому их создавать. С помощью диалоговых окон 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.
Вот и все на сегодня. Спасибо за внимание!
К основным преимуществам движка WordPress можно отнести множество бесплатных и премиальных тем (шаблонов) и плагинов.…
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…