Всплывающие окна (alert, prompt, confirm)

Всплывающие окна (alert, prompt, confirm)

Coursme
12-14 мин.
22 дек. 2023

JavaScript предоставляет элегантный механизм для взаимодействия с пользователем через всплывающие окна: alert, prompt и confirm.

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

Alert (Оповещение)

Окно alert используется для вывода сообщения пользователю. Оно просто выводит указанный текст в окне браузера и останавливает выполнение кода до тех пор, пока пользователь не закроет окно.

Пример с приветствие пользователя

alert("Добро пожаловать на наш сайт!");

Пример оповещение о завершении операции

let result = 5 + 10;
alert("Операция завершена. Результат: " + result);

Prompt (Запрос данных)

Окно prompt используется для запроса данных от пользователя. Он выводит сообщение, поле ввода и кнопки "OK" и "Отмена". Введенные данные можно сохранить в переменной.

Пример с запросом имени пользователя и вывод

let userName = prompt("Как вас зовут?");
alert("Привет, " + userName + "!");

Пример с простым калькулятором (сложение)

let num1 = prompt("Введите первое число:");
let num2 = prompt("Введите второе число:");
let sum = parseFloat(num1) + parseFloat(num2);
alert("Сумма: " + sum);

Confirm (Подтверждение действия)

Окно confirm предназначено для подтверждения действия пользователя. Оно выводит сообщение и кнопки "OK" и "Отмена". Результат (true или false) можно использовать в условных операторах.

Пример с подтверждением отправки формы

let isSubmitConfirmed = confirm("Вы уверены, что хотите отправить форму?");
if (isSubmitConfirmed) {
   alert("Форма успешно отправлена!");
} else {
   alert("Отправка формы отменена.");
}

Пример с проверкой возраста пользователя

let userAge = prompt("Сколько вам лет?");
let isAdult = parseInt(userAge) >= 18;
if (isAdult) {
   alert("Доступ разрешен!");
} else {
   alert("Извините, доступ ограничен для несовершеннолетних.");
}

alert используется для вывода оповещений.prompt позволяет получить данные от пользователя.confirm используется для подтверждения действий.

Полезные советы:

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

Проверка ввода: При использовании prompt учтите возможность пустого ввода или нажатия "Отмена" и обработайте эти случаи.

Модальные окна: Всплывающие окна блокируют выполнение кода, поэтому избегайте их злоупотребления.

Заключение

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

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Статьи и курсы
Меню