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

Александр Мальцев
Александр Мальцев
72K
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

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

  1. _maxen_
    _maxen_
    18.01.2021, 15:24
    Здравствуйте! Подскажите пожалуйста, как ввести три числа в переменные «a, b, c» по очереди, через метод prompt(). Потом вывести на экран значения введенных переменных методом write() и вывести на экран значение наибольшего введенного числа. Если значения всех чисел равны, вывести сообщение: «Все числа равны».
    1. Александр Мальцев
      Александр Мальцев
      20.01.2021, 14:50
      Здравствуйте!
      Пример скрипта для решения такой задачи:
      // вводим 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('Все числа равны.');
      }
      
      1. Alexey
        Alexey
        13.04.2021, 10:38
        С Вашего позволения, небольшое уточнение. Ваш код выводит наибольшее число даже если все три числа равны. Возможно так и задумано. Я немного изменил Ваш код, чтобы исправить эту ситуацию:
        // вводим 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>`);
        }
        
        Поправьте, если ошибаюсь. Спасибо
        1. Александр Мальцев
          Александр Мальцев
          14.04.2021, 07:48
          Зависит от условия задачи. Может так будет более правильно.
          1. Alexey
            Alexey
            14.04.2021, 10:14
            Понял Вас. Спасибо за ответ!
        2. _maxen_
          _maxen_
          21.01.2021, 14:50
          Александр, благодарю Вас!
      2. deca
        deca
        03.09.2020, 23:49
        Здравствуйте, не могли бы вы мне помочь! В чем ошибка? Как сделать чтобы было несколько вариантов выигрыша и чтобы к каждому варианту говорили тепло, холодно. Как сделать, чтобы варинатов было от 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. Александр Мальцев
          Александр Мальцев
          05.09.2020, 05:09
          Эту задачу можно решить так:
          // массив чисел (одно из которых нужно угадать пользователю)
          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('Холодно!');
            }
          }
          
        2. .
          .
          16.05.2020, 17:19
          Здравствуйте, подскажите как сделать так чтобы при нажатии к примеру фигуры, будет выскакивать сообщение alert
          1. Александр Мальцев
            Александр Мальцев
            17.05.2020, 10:38
            Скрипт, который будет выводить alert при нажатию на элемент <figure> или внутри него:
            <script>
            document.addEventListener('click', function (e) {
              if (e.target.closest('figure') !== null) {
                alert('Вы нажали на элемент <figure> или внутри него!');
              }
            });
            </script>
            
            1. Dimka
              Dimka
              03.06.2020, 18:36
              Зраствуйте мне нужно сделать даилоговое окно promp -var name = prompt(«Как вас зовут?»);
              console.log(«Привет, » +name); от так но у меня не получатся что делать???
              1. Александр Мальцев
                Александр Мальцев
                04.06.2020, 14:57
                Может вы его не заключили в тег script?
                <script>
                  var name = prompt('Как вас зовут ?');
                  console.log('Привет, ' + name);
                </script>
                
                1. Manvel
                  Manvel
                  04.06.2020, 13:41
                  Вместо << надо было ставить ' или ".
                  Ещё предлагаю използват let потому что var старешийа версия
                  1. ДАРЬЯ
                    ДАРЬЯ
                    07.08.2020, 02:15
                    Доброго времени суток!
                    Подскажите как сделать что бы в prompt можно было к примеру сложить, вычесть или умножить 2 случайных числа а после результат был отображен в алерте?
                    1. Александр Мальцев
                      Александр Мальцев
                      07.08.2020, 04:59
                      Привет!
                      Пример кода:
                      // перед 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.
                      1. Aleksandra
                        Aleksandra
                        11.05.2021, 17:50
                        Подскажите пожалуйста, а как в этом примере не ограничиться каким то количеством вводных чисел? К примеру мы хотим спросить у пользователя, какое количество чисел вы хотите посчитать? Он может ввести как 3, так и 6.
                        1. ДАРЬЯ
                          ДАРЬЯ
                          07.08.2020, 05:32
                          Спасибо, теперь окошко запрашивает числа а затем что я хочу сделать.
                          Но почему то в конце он не выводит результат т.е сумму итого, только то что я указала в «alert»:
                          ${num1} ${znak} ${num2} = ${result}`);
                          1. Александр Мальцев
                            Александр Мальцев
                            07.08.2020, 06:08
                            Может у вас браузер не поддерживает шаблонные литералы. Тогда напишете alert так:
                            alert(num1 + ' ' + znak + ' ' + num2 + ' = ' + result);
                            
                            1. ДАРЬЯ
                              ДАРЬЯ
                              07.08.2020, 06:56
                              Спасибо огромное!!!
                              Работает!!! Ураааа
              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.