JS для новичков: всплывающие окна alert, prompt, confirm

Метод alert()

Метод alert() создает стандартное всплывающее окно с информационным сообщением и кнопкой «OK». Внешний вид окна определяется браузером и не подлежит кастомизации. Для создания всплывающих окон с кастомным стилем потребуется самостоятельная разработка блока и управление его отображением с помощью JavaScript.

Пример использования alert():

alert("Какая хорошая погода!");

Этот код создаст всплывающее окно с сообщением «Какая хорошая погода!». Метод alert() можно вызывать многократно.

Метод confirm()

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

Пример использования confirm():

let data = confirm("Вы сейчас дома?");
console.log(data);

Этот код выведет в консоль true, если пользователь нажмет «OK», и false, если нажмет «Отмена». Это значение можно использовать в дальнейшей логике скрипта:

let data = confirm("Вы сейчас дома?");
if (data) {
  alert("Вы молодец!");
}

Метод prompt()

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

Пример использования prompt():

let age = prompt("Скажите, сколько Вам лет?", "20");
console.log(age);

Этот код отобразит всплывающее окно с вопросом «Скажите, сколько Вам лет?» и полем ввода со значением «20» по умолчанию. Если пользователь нажмет «Отмена», функция вернет null. Если нажмет «OK», вернет введенное значение (или пустую строку, если ничего не было введено).

Комплексный пример

Рассмотрим пример, сочетающий confirm() и prompt():

let person = null;
if (confirm("Вы точно уверены?")) {
  let name = prompt("Введите ваше имя");
  person = name;
  alert("Привет, " + person + "!");
} else {
  alert("Вы нажали на Отмена");
}

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

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

Что будем искать? Например,программа