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

 

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