JavaScript - Методы alert, prompt и confirm

На этом уроке мы познакомимся с методами объекта window: alert(), prompt() и confirm().

Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой "ОК". Оно может использоваться для того чтобы донести до пользователя важную информацию.

window.alert(Параметр_1);

JavaScript - метод alert

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

Например, выведем для посетителя сайта при нажатии на ссылку предупреждающее диалоговое окно:
<a href="http://yandex.ru" onclick="alert('Вы сейчас перейдёте на сайт Яндекса!')">
  Перейти на сайт
<a/>

JavaScript - пример работы с методом alert

Метод confirm() объекта window предназначен для вывода на экран пользователя диалогового окна с указанным сообщением и кнопками "ОК" и "Отмена". Окно с подтверждением можно использовать, чтобы запросить у пользователя разрешение на выполнение того или иного действия.
var resultConfirm = confirm(Параметр_1);

JavaScript - метод confirm

Данный метод имеет один параметр - это текст сообщения, которое будет выведено в диалоговое окно.

Метод confirm() в качестве результата (resultConfirm) своего выполнения возвращает одно из двух значений:

  • true, если пользователь нажал "ОК";
  • false, если пользователь нажал "Отмена" или закрыл его.

Например, выведем в элемент р с id="resultConfirm" результат нажатия пользователем на кнопку "ОК" в диалоговом окне:

<p id="resultConfirm"></p>
<script>
var resultActionUser = confirm("Пользователь, пожалуйста нажми на кнопку ОК.");
if (resultActionUser) {
  document.getElementById("resultConfirm").innerHTML = "Пользователь, спасибо что Вы нажали на кнопку ОК";
}
else {
 document.getElementById("resultConfirm").innerHTML = "Пользователь, мы разочаровались в Вашем ответе";
}
</script>

JavaScript - пример работы с методом confirm

Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками "ОК" и "Отмена". Оно предназначено для того, чтобы запросить данные у пользователя.

var resultPrompt = prompt(Параметр_1, Параметр_2);

JavaScript - метод prompt

Данный метод имеет два параметра:

  • сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором "говорится", какие данные должен ввести пользователь в текстовое поле;
  • второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.

В зависимости от действий пользователя метод prompt() может возвращать следующие данные:

  • текстовое значение - если в поле ввода содержатся данные и пользователь нажал "ОК";
  • пустая строка - если в поле ввода не содержатся данные и пользователь нажал "ОК";
  • null - если пользователь нажал "Отмена" или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.

Примечание: диалоговое окно, которое появляется в результате выполнения одного из методов alert(), confirm() или prompt() является модальным, т.е. оно блокирует доступ пользователя к родительскому приложению (браузеру) до тех пор, пока пользователь не закроет это диалоговое окно.

Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id="nameUser":

<p id="nameUser"></p>
<script>
  var nameUser = prompt ("Введите своё имя?");
  if (nameUser) {
    document.getElementById("nameUser").innerHTML = nameUser +", добро пожаловать на сайт!";
  }
  else {
    document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!";
  }
</script>

JavaScript - пример работы с методом prompt

Например, попросим пользователя угадать число 8:

<script>
function guessNumber()
{
  var findNumber = prompt ("Угадай число от 1 до 10?"); 
  switch (findNumber) {
    case "6": alert("Уже теплее!"); break;
    case "7": alert("Горячо!"); break;
    case "8": alert("Ты угадал! Это число 8."); break; 
    case "9": alert("Уже теплее!"); break; 
    default: alert("Холодно!"); break;
  }
}
</script>
...
<a href="javascript:guessNumber()">Угадай число</a>

JavaScript - пример работы с методом prompt



   JavaScript и jQuery 0    3071 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.