alert, prompt и confirm - диалоговые окна в JavaScript

Содержание:
  1. Метод alert()
  2. Метод prompt()
  3. Метод confirm()
  4. Итого
  5. Примеры
  6. Комментарии

В этой статье мы разберём 3 метода браузера (объекта window): alert, prompt и confirm.

Метод alert()

Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК». При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.

Синтаксис метода alert():

JavaScript
// message - текст сообщения
alert(message);

Метод alert() имеет один аргумент (message) - текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.

Например, выведем при клике в диалоговое окно alert координаты курсора:

JavaScript
// es6
document.addEventListener('click', (e) => {
alert(`Координаты: (${e.clientX},${e.clientY})`);
});
// es5
document.addEventListener('click', function (e) {
alert('Координаты: (' + e.clientX + ',' + e.clientY + ')');
});
JavaScript - пример работы с методом alert

Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n:

JavaScript
// перенос строки в alert
alert('Строка 1\nСтрока 2');

Метод prompt()

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

Синтаксис:

JavaScript
// message - текст сообщения (является не обязательным), предназначено для информирования пользователя о том, какие данные у него запрашиваются
// default - начальное значение для поля ввода, которое будет по умолчанию в нём отображаться (является не обязательным)
const result = prompt(message, default);

В переменную result возвращается значение введённое пользователем или null. Если пользователь не ввёл данные (поле ввода пустое) и нажал на «ОК», то в result будет находиться пустая строка.

Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome:

JavaScript
<div id="welcome"></div>
<script>
const name = prompt('Пожалуйста, представьтесь?');
if (name) {
  document.querySelector('#welcome').innerHTML = `<b>${name}</b>, добро пожаловать на сайт!`;
} else {
  document.querySelector('#welcome').innerHTML = '<b>Гость</b>, добро пожаловать на сайт!';
}
</script>
JavaScript - пример работы с методом prompt

Метод confirm()

Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.

Синтаксис метода confirm():

JavaScript
// question - текст сообщения (вопроса)
const result = confirm(question);

В переменную result возвращается:

  • true - если пользователь нажал на кнопку «ОК»;
  • false - в остальных случаях.

Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:

HTML
<div id="result"></div>
<script>
// es6
const result = confirm('Вам нравится JavaScript?');
if (result) {
document.querySelector('#result').textContent = 'Вы ответили, что Вам нравится JavaScript';
} else {
document.querySelector('#result').textContent = 'Вы ответили, что Вам не нравится JavaScript';
}
</script>
JavaScript - пример работы с методом confirm

Итого

В этой статье мы рассмотрели 3 функции браузера: alert, prompt и confirm. Они предназначены для взаимодействия с пользователем. Диалоговые окна создаваемые этими методами являются модальными. Это значит, что они блокируют доступ пользователя к остальной части страницы пока оно не будет закрыто. Кроме этого, они ещё приостанавливают загрузку дальнейшей части страницы. По этим причинам, их имеет смысл использовать в скриптах только при изучении JavaScript, чтобы запросить или вывести некоторую информацию на экран. В настоящих проектах они обычно не используются.

Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.

Примеры

1. Использование методов prompt и alert для создания игры «Угадай число»?

JavaScript
<script>
// число, которое нужно угадать, в данном случае 7
const number = 7;
let result = false;

while (!result) {
  const answer = prompt('Угадай число от 1 до 10?');
  if (answer === null) {
    break;
  }
  switch (+answer) {
    case number - 2:
    case number + 2:
      alert('Уже теплее!');
      break;
    case number - 1:
    case number + 1:
      alert('Горячо!');
      break;
    case number:
      alert('Ты угадал! Это число {$number}.');
      result = true;
      break;
    default:
      alert('Холодно!');
  }
}
</script>
JavaScript - пример работы с методом prompt

Комментарии: 33

Emma
Emma

Добрый день.

Спасибо за полезную статью.

Пожалуйста, помогите с заданием, если вам не сложно)

Имеется массив с элементами: ['milk', 'beer', 'beer', 'milk', 'milk']. Необходимо запустить в цикле проверку для каждого элемента массива - когда встречается элемент со значением "milk", в консоль выводить строку "good", если встречается элемент со значением "beer", выводить в консоль строку "bad". Результат в консоли:
good
bad
bad
good
good
Для цикла использовать цикл for. Спасибо!
Александр Мальцев
Александр Мальцев

Привет! Это же таже самая задача что и в этом комментарии.

DimaF
DimaF

Добрый день, спасибо за статью)

Если не сложно, можете пожалуйста помочь решить эту задачу?

буду очень благодарен!!!

Напишите код который будет предлагать логин с помощью prompt()

Если будет вводится "admin" - должно предложить ввести за помощью тоже prompt()

вести пароль. Если ввели пустую строку или нажали esс - показать "отменено!" Если же

ввели какую-то другую строку - "Неизвестный пользователь"

  1. Если он равен "qwerty" то надо будет показать "Welcome"
  2. Другая строка - показать "пароль не верный!"
  3. Если пустая строка или было отменено "отменено!"

Использывать блоки IF

Когда нажимаешь esc - возвращалось пустой строчку " "
Александр Мальцев
Александр Мальцев

Здравствуйте! Пожалуйста.

Если правильно понял задачу, то так:
const login = prompt('Введите логин?');
if (login === null || login === '') {
  alert('Отменено!');
} else if (login === 'admin') {
  const password = prompt('Введите пароль?');
  if (password === null || password === '') {
    alert('Отменено!');
  } else if (password === 'qwerty') {
    alert('Welcome');
  } else {
    alert('Отменено!');
  }
} else {
  alert('Неизвестный пользователь!');
}
ahni
ahni

Решаю похожую задачу. Но не знаю, в чем ошибка. Не работает как хотелось бы:

const welcome = prompt('Введите логин');
if (welcome != 'admin') {
  alert('Неверное имя пользователя');
} else if (welcome == null) {
  confirm('Вы отменили вход');
} else (welcome == 'admin'); {
  pass = prompt('Введите пароль');  
} if (pass != '0000') {
  alert('Неверный пароль');
} else if (pass == null) {
  confirm('Вы отменили пароль');
} else (pass == '0000'); {
  confirm('Добро пожаловать');
}
Александр Мальцев
Александр Мальцев

Вы запутались с if..else. Чтобы было проще, просто разделите их на отдельные конструкции:

const welcome = prompt('Введите логин');

if (welcome === null) {
  confirm('Вы отменили вход');
} else if (welcome !== 'admin') {
  alert('Неверное имя пользователя');
}

if (welcome === 'admin') {
  const pass = prompt('Введите пароль');  
  if (pass === '0000') {
    confirm('Добро пожаловать');
  } else if (pass === null) {
    confirm('Вы отменили пароль');
  } else {
    alert('Неверный пароль');
  }
}
ded-mazay
ded-mazay

Подскажите почему отправляется форма вместо окошка с подтверждением?

<input type="submit" name="send_def" value="АКТ" onclick="return confirm('ВНИМАНИЕ!!! Сообщение с результатом было отправлено 13.12.2022
ОК - отправить все равно
Отмена - ничего не делать')">

P.S.

У формы могут быть в зависимости от ситуации до 3-х сабмитов, на момент поста их было 2
ded-mazay
ded-mazay

Разобрался - перевод строк надо было дополнительно заэкранировать

ВладислаУ
ВладислаУ
Добрый день
Спасибо за прошлую работу. А можете мне и с этой помочь, если не сложно… Буду очень благодарен
{{
Написать программу, которая по паролю определяет уровень доступа сотрудника к секретной информации в базе данных.
Доступ к базе данных имеют сотрудники, разбитые на три группы по уровням доступа. Они имеют следующие пароли:
9583, 1747 — доступные модули баз А, В и С;
3331, 7922 – доступны модули баз В и С;
9455, 8997 – доступный модуль базы С.
Выводить доступные модули по запросу.
}}
Александр Мальцев
Александр Мальцев
Здравствуйте! Пожалуйста!
Можно решить так:
const password = '7922';

const passwords = [
  [['9583', '1747'], ['A', 'B', 'C']],
  [['3331', '7922'], ['B', 'C']],
  [['9455', '8997'], ['C']],
];
const find = passwords.find(el => el[0].includes(password));
if (find) {
  alert('Ваш уровень доступа: ' + find[1]);
} else {
  alert('Не найден уровень доступа по данному паролю: ' + password);
}
ВладислаУ
ВладислаУ
Спасибо большое:)
ВладислаУ
ВладислаУ
Помогите пожалуйсть буду очень благодпрен
Запрашивать у пользователя ввести название валюты (доллар, евро, гривна, злотые) (метод javascript prompt). Выводить курс валюты согласно рублю. При вводе другой валюты выводить сообщение «Неизвестная валюта»
Александр Мальцев
Александр Мальцев
Можно решить так:
const currency = prompt('Введите название валюты (доллар, евро, гривна, злотые)?');
const exchangeRate = {
  'доллар': 62.08,
  'евро': 61.37,
  'гривна': 1.67,
  'злотые': 12.86,
}
if (exchangeRate[currency]) {
  alert(`Курс: 1 ${currency} = ${exchangeRate[currency]} руб.`);
} else {
  alert('Неизвестная валюта!');
}
ВладислаУ
ВладислаУ
Александр, БОЛЬШОЕ ВАМ СПАСИБО… Очень помогли
_maxen_
_maxen_

Здравствуйте! Подскажите пожалуйста, как ввести три числа в переменные a, b, c по очереди, через метод prompt(). Потом вывести на экран значения введенных переменных методом write() и вывести на экран значение наибольшего введенного числа. Если значения всех чисел равны, вывести сообщение: «Все числа равны».

Александр Мальцев
Александр Мальцев

Здравствуйте!

Пример скрипта для решения такой задачи:
// вводим 3 числа через prompt
const a = +prompt('Введите 1-ое число');
const b = +prompt('Введите 2-ое число');
const c = +prompt('Введите 3-ое число');
// выводим на экран введённые числа посредством метода write
document.write('1-ое число: ' + a);
document.write('<br>');
document.write('2-ое число: ' + b);
document.write('<br>');
document.write('3-ое число: ' + c);
document.write('<br>');
// выводим на экран наибольшее число
document.write('Наибольшее число: ' + Math.max(a, b, c));
document.write('<br>');
// если числа равны, то выведем соответствующее сообщение
if (a === b && a === c) {
  document.write('Все числа равны.');
}
_maxen_
_maxen_
Александр, благодарю Вас!
Alexey
Alexey

С Вашего позволения, небольшое уточнение. Ваш код выводит наибольшее число даже если все три числа равны. Возможно так и задумано. Я немного изменил Ваш код, чтобы исправить эту ситуацию:

// вводим 3 числа через prompt
const a = +prompt('Введите 1-ое число');
const b = +prompt('Введите 2-ое число');
const c = +prompt('Введите 3-ое число');
// выводим на экран введённые числа посредством метода write
console.log(`<br>`);
console.log('1-ое число: ' + a);
console.log(`<br>`);
console.log('2-ое число: ' + b);
console.log(`<br>`);
console.log('3-ое число: ' + c);
console.log(`<br>`);
// проверяем, равны ли числа: если числа равны, то выведем соответствующее сообщение
if (a === b && a === c) {
  console.log('Все числа равны.');
} else {
  // если числа не равны, выводим на экран наибольшее число
  console.log('Наибольшее число: ' + Math.max(a, b, c));
  console.log(`<br>`);
}

Поправьте, если ошибаюсь. Спасибо

Александр Мальцев
Александр Мальцев
Зависит от условия задачи. Может так будет более правильно.
Alexey
Alexey
Понял Вас. Спасибо за ответ!
deca
deca

Здравствуйте, не могли бы вы мне помочь! В чем ошибка? Как сделать, чтобы было несколько вариантов выигрыша и чтобы к каждому варианту говорили тепло или холодно. Как сделать, чтобы варинатов было от 0-20?

const name = prompt('Здравствуйте вы зашли на Каз.лото. Введите ваше имя');
if (user_asw == '6' || user_asw == '1') {
  alert('Поздравляем вы выйграли 1000000$!!!');
  count = count + 1000000;
}
let result = false;

while (!result) {
  const answer = prompt('Введите ваш номер билета');
  if (answer === null) {
    break;
  }
  switch (+answer) {
    case number - 2:
    case number + 2:
      alert('Уже теплее!');
      break;
    case number - 1:
    case number + 1:
      alert('Горячо!');
      break;
    case number:
      alert('Ты угадал! Это число (6 || 1).');
      result = true;
      break;
    default:
      alert('Холодно!');
  }
}
Александр Мальцев
Александр Мальцев

Эту задачу можно решить так:

// массив чисел (одно из которых нужно угадать пользователю)
const numbers = [1, 6];
let result = false;

// функция, которая будет возвращать число из массива, к которому переданное число оказалось ближе
const returnCloserNumber = (number) => {
  let searchIndex = 1;
  let difference = 0;
  numbers.forEach((value, index) => {
    if (index === 0) {
      searchIndex = index;
      difference = Math.abs(value - number);
    } else {
      if (Math.abs(value - number) < difference) {
        searchIndex = index;
        difference = Math.abs(value - number);
      }
    }
  });
  return numbers[searchIndex];
};

while (!result) {
  let answer = prompt('Введите число?');
  // прерываем выполнение цикла, если пользователь нажал на «Отмена», ничего не ввёл и нажал «Ок» или оно не является целым числом
  if (answer === null || answer === '' || Number.isInteger(+answer) === false) {
    break;
  }
  // приведем answer к числу
  answer = +answer;
  // возвратим ближайшее к нему число из массива
  const number = returnCloserNumber(answer);

  switch (answer) {
    case number - 2:
    case number + 2:
      alert('Уже теплее!');
      break;
    case number - 1:
    case number + 1:
      alert('Горячо!');
      break;
    case number:
      alert(`Ты угадал! Это должно быть одно из чисел: ${numbers.join(', ')}`);
      result = true;
      break;
    default:
      alert('Холодно!');
  }
}
.
.

Подскажите, как сделать, например, чтобы при нажатии на <figure> выскакивало сообщение alert.

Александр Мальцев
Александр Мальцев

Скрипт, который будет выводить alert при нажатии на элемент <figure> или внутри него:

document.addEventListener('click', (e) => {
  if (e.target.closest('figure')) {
    alert('Вы нажали на элемент <figure> или внутри него!');
  }
});
Dimka
Dimka

Мне нужно сделать диалоговое окно prompt:

const name = prompt('Как вас зовут?');
console.log('Привет, ' + name);

Но у меня не получается, что делать?

Manvel
Manvel

Может что со скобками?

Александр Мальцев
Александр Мальцев

Может код не заключили в тег <script>?

<script>
  const name = prompt('Как вас зовут?');
  console.log('Привет, ' + name);
</script>
ДАРЬЯ
ДАРЬЯ

Доброго времени суток!

Подскажите, как сделать пример, выполняющий операции сложения, вычитания или умножения 2 чисел, полученных из prompt. А после вычисления результата, отображал его посредством alert?
Александр Мальцев
Александр Мальцев

Привет!

Пример кода:
// знак + используем для того, чтобы привести значение к числу
const num1 = +prompt('Введите 1 число?');
const num2 = +prompt('Введите 2 число?');
const znak = prompt('Введите знак операции?');
let result;
switch (znak) {
  case '+':
    result = num1 + num2;
    break;
  case '-':
    result = num1 - num2;
    break;
  case '*':
    result = num1 * num2;
    break;
  case '/':
    result = num1 / num2;
    break;
}
alert(`${num1} ${znak} ${num2} = ${result}`);
Здесь в первом окошке promt вводим 1 число, во втором - 2 число, в третьем - знак операции. Далее в зависимости от знака операции выполняем то или иное действие и выводим полученный результат в alert.
ДАРЬЯ
ДАРЬЯ

Спасибо, теперь окошко запрашивает числа, а затем то, что я хочу сделать.

Но, почему-то в конце, он не выводит результат в alert:
alert(`${num1} ${znak} ${num2} = ${result}`);
Александр Мальцев
Александр Мальцев

Может у вас браузер не поддерживает шаблонные строки. Тогда напишете в alert так:

alert(num1 + ' ' + znak + ' ' + num2 + ' = ' + result);
ДАРЬЯ
ДАРЬЯ
Спасибо огромное!!!
Работает!!! Ураааа
Aleksandra
Aleksandra
Подскажите пожалуйста, а как в этом примере не ограничиться каким то количеством вводных чисел? К примеру мы хотим спросить у пользователя, какое количество чисел вы хотите посчитать? Он может ввести как 3, так и 6.