Руководство по диалоговым окнам в JavaScript

В JavaScript вы можете создавать диалоговые окна или всплывающие окна для взаимодействия с пользователем. Вы можете использовать их для уведомления пользователя или для получения введенной в форму информация пользователем.

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

Внешний вид этих диалоговых окон определяется настройками операционной системы и/или браузера, их нельзя изменить с помощью CSS. Кроме того, диалоговые окна являются модальными окнами; когда отображается диалоговое окно, выполнение кода останавливается и возобновляется только после его закрытия.

В следующем разделе мы подробно обсудим каждое из этих диалоговых окон.

Создание диалогового окна Alert

Диалоговое окно предупреждения — это самое простое диалоговое окно. Оно позволяет отображать короткие сообщения для пользователя. Оно включает в себя кнопку ОК, и пользователь должен нажать ее, чтобы продолжить.

Вы можете создавать диалоговые окна предупреждений с помощью метода alert(). Вы уже видели много подобных примеров в предыдущих главах. Давайте посмотрим на еще один пример:

var message = "Всем привет! Нажмите OK, чтобы продолжить.";
alert(message);
 
/* Следующая строка не будет выполнена, пока вы не отклоните предыдущее предупреждение */
alert("Это еще одно окно предупреждения.");

Создание диалогового окна Confirm

Диалоговое окно подтверждения позволяет пользователю подтвердить или отменить действие. Диалоговое окно подтверждения выглядит аналогично диалоговому окну alert, но содержит кнопку «Отмена» и кнопку «ОК».

Вы можете создавать диалоговые окна подтверждения с помощью метода confirm(). Этот метод просто возвращает логическое значение (true или false) в зависимости от того, нажимает ли пользователь кнопку OK или кнопку «Отмена». Вот почему его результат часто присваивается переменной, когда он используется.

В следующем примере будет напечатан текст в браузере в зависимости от того, какая кнопка нажата.

var result = confirm("Вы уверены?");
 
if(result) {
    document.write("Вы нажали кнопку ОК!");
} else {
    document.write("Вы нажали кнопку Отмена!");
}

Создание диалогового окна Prompt

Диалоговое окно подсказки используется, чтобы предложить пользователю ввести информацию. Диалоговое окно подсказки содержит поле ввода текста, кнопку «ОК» и кнопку «Отмена».

Вы можете создавать диалоговые окна подсказок с помощью метода prompt(). Этот метод возвращает текст, введенный в поле ввода, когда пользователь нажимает кнопку ОК и null, если пользователь нажимает кнопку Отмена. Если пользователь нажимает кнопку ОК без ввода текста, возвращается пустая строка. По этой причине, когда он используется, его результат обычно присваивается переменной.

В следующем примере будет напечатано введенное вами значение при нажатии кнопки ОК.

var name = prompt("What's your name?");
 
if(name.length > 0 && name != "null") {
    document.write("Привет, " + name);
} else {
    document.write("Привет, аноним!");
}

Значение, возвращаемое методом prompt(), всегда является строкой. Это означает, что если пользователь вводит 10 в поле ввода, вместо числа 10 возвращается строка «10».

Поэтому, если вы хотите использовать возвращаемое значение в качестве числа, вы должны скрыть его или привести к числовому значению, например: var age = Number(prompt("What's your age?"));