JavaScript - Методы alert, prompt и confirm

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