JavaScript методы alert, prompt и confirm

JavaScript методы alert, prompt и confirm

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся сразу с несколькими методами JavaScript — это методы alert, prompt и confirm. Все указанные методы позволяют выводить стандартное модальное окно браузера и таким образом взаимодействовать вашей программе с пользователем. Начнем!

Начнем с того, что данные методы в реальной практике используются не так часто, поскольку методы вызывают стандартные модальные окна браузера. Выглядят эти окна не очень привлекательно и могут не вписываться в концепцию дизайна сайта. Поэтому зачастую для реализации модальных окон с указанным функционалом используются сторонние библиотеки или собственные решения.

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

Итак, начнем с первого метода — метод alert. С ним мы уже сталкивались в предыдущих статьях. Метод alert просто выводит модальное окно со строкой, которая передана ему в качестве параметра:

alert('Привет, мир!');

В результате мы получили модальное окно с заданным текстом и кнопку ОК. Окно будет висеть до тех пор, пока мы нажмем на кнопку. Собственно, больше ничего данный метод и не делает. Используется он чаще всего для отладки скрипта, например, на каком-то этапе вы хотите приостановить выполнение скрипта и посмотреть значение некой переменной, которую можно передать параметром функции alert.

Следующий метод — prompt. Он уже чуть более информативен, поскольку позволяет запросить от пользователя некие данные, которые затем можно использовать в вашей программе. В качестве первого параметра метод prompt принимает вопрос, который и будет выведен в модальном окне. Также в модальном окне появится поле для ввода ответа:

var name = prompt('Как вас зовут?');
alert('Привет, ' + name);

Результат пользовательского ввода мы записываем в переменную name, которую используем в методе alert. Попробуем представиться и нажать кнопку ОК:

Как видим, alert вывел набранное нами имя. Если же мы нажмем кнопку Отмена, тогда в переменную запишется уже знакомое нам значение null.

Стоит обратить внимание на то, что метод prompt позволяет использовать и второй параметр, кроме вопроса. Во втором параметре мы можем указать некое значение по умолчанию:

var name = prompt('Как вас зовут?', 'Гость');
alert('Привет, ' + name);

Если вам не нужно значение по умолчанию, тогда все равно рекомендуется использовать второй параметр, указав в качестве него пустую строку:

var name = prompt('Как вас зовут?', '');
alert('Привет, ' + name);

Так желательно делать, поскольку браузер IE выведет в качестве значения по умолчанию строку undefined, если мы не используем второй параметр.

Ну и, наконец, последний метод, который мы рассмотрим, метод confirm. Этот метод выводит модальное окно, которое выполняет функцию соглашения. Например, мы можем запросить подтверждение совершеннолетия пользователя, чтобы продолжить дальнейшую работу скрипта. В зависимости от нажатой кнопки метод confirm вернет true (если нажата ОК) или false (если нажата Отмена).

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

После нажатия одной или другой кнопки мы увидим в окне alert значение true или false. В реальной программе мы использовали бы булево значение (true или false) в условии, согласно которому ветвилась бы наша программа.

На этом мы завершаем статью и знакомство с основными операторами JavaScript. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree