Уроки JavaScript – Диалоговые окна alert, confirm и prompt

09/02/2019

Диалоговые окна позволяют взаимодействовать с пользователем и работать с данными, которые получены от этого пользователя. Вы, несомненно, видели их, использовали их и они вас всегда раздражали, когда они появлялись на каком-то сайте. Теперь пришло время научиться самому их создавать. С помощью диалоговых окон 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.

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

Теги: JavaScript