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

Александр Мальцев
Александр Мальцев
119.2K
29
alert, prompt и confirm - диалоговые окна в JavaScript
Содержание:
  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

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

  1. DimaF
    DimaF
    20.01.2023, 23:35

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

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

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

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

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

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

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

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

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

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

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

      Если правильно понял задачу, то так:
      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('Неизвестный пользователь!');
      }
  2. ded-mazay
    ded-mazay
    14.12.2022, 09:12

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

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

    P.S.

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

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

  3. ВладислаУ
    ВладислаУ
    03.11.2022, 14:02
    Добрый день
    Спасибо за прошлую работу. А можете мне и с этой помочь, если не сложно… Буду очень благодарен
    {{
    Написать программу, которая по паролю определяет уровень доступа сотрудника к секретной информации в базе данных.
    Доступ к базе данных имеют сотрудники, разбитые на три группы по уровням доступа. Они имеют следующие пароли:
    9583, 1747 — доступные модули баз А, В и С;
    3331, 7922 – доступны модули баз В и С;
    9455, 8997 – доступный модуль базы С.
    Выводить доступные модули по запросу.
    }}
    1. Александр Мальцев
      Александр Мальцев
      06.11.2022, 12:37
      Здравствуйте! Пожалуйста!
      Можно решить так:
      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);
      }
    2. ВладислаУ
      ВладислаУ
      07.11.2022, 11:46
      Спасибо большое:)
  4. ВладислаУ
    ВладислаУ
    02.11.2022, 21:39
    Помогите пожалуйсть буду очень благодпрен
    Запрашивать у пользователя ввести название валюты (доллар, евро, гривна, злотые) (метод javascript prompt). Выводить курс валюты согласно рублю. При вводе другой валюты выводить сообщение «Неизвестная валюта»
    1. Александр Мальцев
      Александр Мальцев
      03.11.2022, 11:42
      Можно решить так:
      const currency = prompt('Введите название валюты (доллар, евро, гривна, злотые)?');
      const exchangeRate = {
        'доллар': 62.08,
        'евро': 61.37,
        'гривна': 1.67,
        'злотые': 12.86,
      }
      if (exchangeRate[currency]) {
        alert(`Курс: 1 ${currency} = ${exchangeRate[currency]} руб.`);
      } else {
        alert('Неизвестная валюта!');
      }
    2. ВладислаУ
      ВладислаУ
      03.11.2022, 13:57
      Александр, БОЛЬШОЕ ВАМ СПАСИБО… Очень помогли
  5. _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('Все числа равны.');
      }
      
    2. _maxen_
      _maxen_
      21.01.2021, 14:50
      Александр, благодарю Вас!
    3. 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>`);
      }
      
      Поправьте, если ошибаюсь. Спасибо
    4. Александр Мальцев
      Александр Мальцев
      14.04.2021, 07:48
      Зависит от условия задачи. Может так будет более правильно.
    5. Alexey
      Alexey
      14.04.2021, 10:14
      Понял Вас. Спасибо за ответ!
  6. 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('Холодно!');
        }
      }
      
  7. .
    .
    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>
      
    2. Dimka
      Dimka
      03.06.2020, 18:36
      Зраствуйте мне нужно сделать даилоговое окно promp -var name = prompt(«Как вас зовут?»);
      console.log(«Привет, » +name); от так но у меня не получатся что делать???
    3. Manvel
      Manvel
      04.06.2020, 13:41
      Вместо << надо было ставить ' или ".
      Ещё предлагаю използват let потому что var старешийа версия
    4. Александр Мальцев
      Александр Мальцев
      04.06.2020, 14:57
      Может вы его не заключили в тег script?
      <script>
        var name = prompt('Как вас зовут ?');
        console.log('Привет, ' + name);
      </script>
      
    5. ДАРЬЯ
      ДАРЬЯ
      07.08.2020, 02:15
      Доброго времени суток!
      Подскажите как сделать что бы в prompt можно было к примеру сложить, вычесть или умножить 2 случайных числа а после результат был отображен в алерте?
    6. Александр Мальцев
      Александр Мальцев
      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.
    7. ДАРЬЯ
      ДАРЬЯ
      07.08.2020, 05:32
      Спасибо, теперь окошко запрашивает числа а затем что я хочу сделать.
      Но почему то в конце он не выводит результат т.е сумму итого, только то что я указала в «alert»:
      ${num1} ${znak} ${num2} = ${result}`);
    8. Александр Мальцев
      Александр Мальцев
      07.08.2020, 06:08
      Может у вас браузер не поддерживает шаблонные литералы. Тогда напишете alert так:
      alert(num1 + ' ' + znak + ' ' + num2 + ' = ' + result);
      
    9. ДАРЬЯ
      ДАРЬЯ
      07.08.2020, 06:56
      Спасибо огромное!!!
      Работает!!! Ураааа
    10. Aleksandra
      Aleksandra
      11.05.2021, 17:50
      Подскажите пожалуйста, а как в этом примере не ограничиться каким то количеством вводных чисел? К примеру мы хотим спросить у пользователя, какое количество чисел вы хотите посчитать? Он может ввести как 3, так и 6.