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

Александр Мальцев
Александр Мальцев
111K
19
Содержание:
  1. Метод alert()
  2. Метод prompt()
  3. Метод confirm()
  4. Итого
  5. Примеры
  6. Комментарии

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

Метод alert()

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

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

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

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

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

// 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:

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

Метод prompt()

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

Синтаксис:

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

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

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

<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():

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

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

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

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

<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 для создания игры «Угадай число»?

<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

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

  1. _maxen_
    _maxen_
    2021-01-18 15:24:40
    Здравствуйте! Подскажите пожалуйста, как ввести три числа в переменные «a, b, c» по очереди, через метод prompt(). Потом вывести на экран значения введенных переменных методом write() и вывести на экран значение наибольшего введенного числа. Если значения всех чисел равны, вывести сообщение: «Все числа равны».
  1. Александр Мальцев
    Александр Мальцев
    2021-01-20 14:50:07
    Здравствуйте!
    Пример скрипта для решения такой задачи:
    // вводим 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_
    2021-01-21 14:50:21
    Александр, благодарю Вас!
  • Alexey
    Alexey
    2021-04-13 10:38:45
    С Вашего позволения, небольшое уточнение. Ваш код выводит наибольшее число даже если все три числа равны. Возможно так и задумано. Я немного изменил Ваш код, чтобы исправить эту ситуацию:
    // вводим 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>`);
    }
    
    Поправьте, если ошибаюсь. Спасибо
  • Александр Мальцев
    Александр Мальцев
    2021-04-14 07:48:39
    Зависит от условия задачи. Может так будет более правильно.
  • Alexey
    Alexey
    2021-04-14 10:14:50
    Понял Вас. Спасибо за ответ!
  • deca
    deca
    2020-09-03 23:49:08
    Здравствуйте, не могли бы вы мне помочь! В чем ошибка? Как сделать чтобы было несколько вариантов выигрыша и чтобы к каждому варианту говорили тепло, холодно. Как сделать, чтобы варинатов было от 0-20?
    var 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('Холодно!');
      }
    }
    
    1. Александр Мальцев
      Александр Мальцев
      2020-09-05 05:09:02
      Эту задачу можно решить так:
      // массив чисел (одно из которых нужно угадать пользователю)
      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('Холодно!');
        }
      }
      
  • .
    .
    2020-05-16 17:19:42
    Здравствуйте, подскажите как сделать так чтобы при нажатии к примеру фигуры, будет выскакивать сообщение alert
    1. Александр Мальцев
      Александр Мальцев
      2020-05-17 10:38:04
      Скрипт, который будет выводить alert при нажатию на элемент <figure> или внутри него:
      <script>
      document.addEventListener('click', function (e) {
        if (e.target.closest('figure') !== null) {
          alert('Вы нажали на элемент <figure> или внутри него!');
        }
      });
      </script>
      
    2. Dimka
      Dimka
      2020-06-03 18:36:48
      Зраствуйте мне нужно сделать даилоговое окно promp -var name = prompt(«Как вас зовут?»);
      console.log(«Привет, » +name); от так но у меня не получатся что делать???
    3. Manvel
      Manvel
      2020-06-04 13:41:31
      Вместо << надо было ставить ' или ".
      Ещё предлагаю използват let потому что var старешийа версия
    4. Александр Мальцев
      Александр Мальцев
      2020-06-04 14:57:53
      Может вы его не заключили в тег script?
      <script>
        var name = prompt('Как вас зовут ?');
        console.log('Привет, ' + name);
      </script>
      
    5. ДАРЬЯ
      ДАРЬЯ
      2020-08-07 02:15:20
      Доброго времени суток!
      Подскажите как сделать что бы в prompt можно было к примеру сложить, вычесть или умножить 2 случайных числа а после результат был отображен в алерте?
    6. Александр Мальцев
      Александр Мальцев
      2020-08-07 04:59:40
      Привет!
      Пример кода:
      // перед promt используем знак + чтобы привести введённое значение к числу
      const num1 = +prompt('Введите 1 число?');
      // перед promt используем знак + чтобы привести введённое значение к числу
      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.
    7. ДАРЬЯ
      ДАРЬЯ
      2020-08-07 05:32:08
      Спасибо, теперь окошко запрашивает числа а затем что я хочу сделать.
      Но почему то в конце он не выводит результат т.е сумму итого, только то что я указала в «alert»:
      ${num1} ${znak} ${num2} = ${result}`);
    8. Александр Мальцев
      Александр Мальцев
      2020-08-07 06:08:21
      Может у вас браузер не поддерживает шаблонные литералы. Тогда напишете alert так:
      alert(num1 + ' ' + znak + ' ' + num2 + ' = ' + result);
      
    9. ДАРЬЯ
      ДАРЬЯ
      2020-08-07 06:56:46
      Спасибо огромное!!!
      Работает!!! Ураааа
    10. Aleksandra
      Aleksandra
      2021-05-11 17:50:15
      Подскажите пожалуйста, а как в этом примере не ограничиться каким то количеством вводных чисел? К примеру мы хотим спросить у пользователя, какое количество чисел вы хотите посчитать? Он может ввести как 3, так и 6.