Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript

Раздел: 

В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.

alert

Применяется для вывода на экран браузера модального окна (это означает, что пользователь ничего не может нажать на странице, пока не закроет это окно. В рассматриваемом примере, до тех пор, пока не кликнет «ОК» в окне).

Пример alert в JavaScript

После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.

Для примера запустите следующий скрипт из одной строки:

alert('Наше модальное окно');

Обычно используется для вывода на экран пользователя оповещений о чем-либо (к примеру о неверно заполненных полях формы) или же для отладки кода, чтобы выяснить на каком месте кода начинается некорректное выполнение скрипта.

prompt

Второй по распространенности после операции alert является prompt. Данная команда предоставляет пользователю больше возможностей для взаимодействия с модальным окном, делая доступными для нажатия две кнопки (OK и CANCEL) и поле для ввода информации.

Для того, чтобы продолжить работу с сайтом, юзеру необходимо или закрыть данное окно, кликнув на CANCEL (нажатие EST на клавиатуре также сработает) или ввести информацию в поле для ввода и нажать ОК.

Пример prompt в JavaScript

В случае отмены ввода текста в поле (нажатие CANCEL) в скрипт будет возвращено специальное значение null. Подробнее о котором можно почитать тут.

В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.

Синтаксис данной команды несколько сложнее, чем предыдущей, поскольку позволяет задать текст обращения к пользователю и содежимое поля для ввода информации, которое будет выводиться по умолчанию: result = prompt(title, default); , где

  • title — сообщение, которое будет выведено пользователю в модальном окне. Аргумент обязательный для заполнения.
  • default — то, что выведется в поле для ввода текста по умолчанию. Также обязателен для заполнения, поскольку если его не задать, то это может привести к ошибкам в некоторых браузерах. Если же вы хотите оставить поле ввода информации пустым, то просто задайте prompt следующим образом:
    var myTest = prompt("Любое инфо", "'');

Маленький пример использования prompt:

var year = prompt('В каком году вы закончили ВУЗ?', 2008);
alert('Вы выпускник ' + year + ' года!');

Обычно данная команда используется для сбора данных у пользователей, которые необходимы скрипту для продолжения дальнейшей работы.

confirm

Также представляет собой модальное окно. Как не сложно догадаться из названия используется обычно для согласования чего-либо с пользователем.

Для того и заточена — для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.

Пример confirm в JavaScript

По синтаксису не отличается от alert.

Пример:

var legalAge = confirm("Вам исполнилось 18 лет?");
alert(legalAge);

Обратите внимание

Мы не можем влиять на оформление модального окна, выводящего эти команды.Это с одной стороны не позволяет адаптировать вывод сообщений под дизайн сайта, с другой стороны делает эти команды невероятно простыми, благодаря чему они и заслужили такую популярность среди веб-разработчиков.

Способов получить информацию от пользователей проще, чем искользование команд alert, prompt, confirm просто не существует.