В 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?"));

Чтобы отобразить разрывы строк внутри диалоговых окон, используйте символ новой строки или перевод строки (\n); обратный слеш, за которым следует символ n.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.