Уроки 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.

 

Вот и все на сегодня. Спасибо за внимание!

 

Recent Posts

Использование конструкторов WordPress – основные их преимущества и недостатки

К основным преимуществам движка WordPress можно отнести множество бесплатных и премиальных тем (шаблонов) и плагинов.…

10 часов ago

Возможна ли анонимность, конфиденциальность или приватность в Интернете?

Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…

2 недели ago

Как появился Pro Plan: путь от идеи до мирового успеха

Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…

2 недели ago

Стефан Цвейг

Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…

2 недели ago

Можно ли найти доступный хостинг в 2024 году?

Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…

3 недели ago

Зачем выбирать образование за границей: преимущества для будущего вашего ребенка

Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…

3 недели ago