prompt()

При помощи функции prompt() выводим на экран пользователя модальное окно с полем ввода и пояснительным текстом.

Из-за того, что окно модальное, работа с интерфейсом браузера и страницами заблокируется. Это неудобно и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока тот его не закроет.

Это быстрый код, который взаимодействует с пользователем. Окно, созданное таким образом, не изменяется через CSS. Это значит, что его лучше использовать для прототипирования интерфейса. На сайте использовать модальное окно нежелательно.

prompt() принимает один или два аргумента: текст для отображения и значение по умолчанию для поля ввода.

Результат работы prompt() можно записать в переменную:

        
          
          const answer1 = prompt('Как тебя зовут?')const answer2 = prompt('Как тебя зовут?', 'Имя')
          const answer1 = prompt('Как тебя зовут?')
const answer2 = prompt('Как тебя зовут?', 'Имя')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если при вызове prompt() использовать только один параметр, поле ввода в появившемся окне не будет содержать подсказки для ввода.

Поле ввода будет с подсказкой, если используете два параметра. Это полезно, когда показываете пользователю ожидаемый результат ввода.

Аргументы prompt() должны быть строками. Другие аргументы будут автоматически приведены к строке. Пока аргумент — примитив или встроенный тип, приведение к строке не проблема.

        
          
          prompt('Как тебя зовут?', 'Саша')// Текст: 'Как тебя зовут?', значение поля ввода: 'Саша'prompt('Введите возраст', 18)// 'Введите возраст', СТРОКА '18'
          prompt('Как тебя зовут?', 'Саша')
// Текст: 'Как тебя зовут?', значение поля ввода: 'Саша'
prompt('Введите возраст', 18)
// 'Введите возраст', СТРОКА '18'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере результат prompt() — строка, если была нажата кнопка «OK»; null, если была нажата «Отмена».

Лучше не полагаться на то, что результат prompt() всегда будет строкой. Это приводит к ошибкам в работе скрипта. Посмотрим на пример:

        
          
          const result = prompt('Введите чётное число', '')// Вводим ДЕСЯТЬ и нажимаем ОКif (result % 2 === 0) {  // Проверка на чётность  alert('Число чётное')} else {  alert('Число нечётное')}// Результат: сообщение 'Число нечётное'
          const result = prompt('Введите чётное число', '')
// Вводим ДЕСЯТЬ и нажимаем ОК
if (result % 2 === 0) {
  // Проверка на чётность
  alert('Число чётное')
} else {
  alert('Число нечётное')
}

// Результат: сообщение 'Число нечётное'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере нет синтаксических ошибок, но:

• нет явной обработки null;
• нет обработки ситуаций, когда введено не число.

result примет значение null в случае нажатия кнопки «Отмена». Конечно, null % 2 выполнится без ошибок, но работа программы не будет корректной. Лучше обработать отказ от ввода числа.

В операции (result % 2 === 0) из-за деления на два JavaScript осуществляет приведение строки result к численному типу. Если не получится, результат работы будет некорректным.

Корректный вариант обработки ввода:

        
          
          var result = prompt('Введите чётное число', '')if (result === null) {  alert('Вы отказались от ввода')} else if (isNaN(result % 2)) {  alert('Ошибка, введено НЕ ЧИСЛО')} else if (result % 2 === 0) {  alert('Число чётное')} else {  alert('Число нечётное')}
          var result = prompt('Введите чётное число', '')
if (result === null) {
  alert('Вы отказались от ввода')
} else if (isNaN(result % 2)) {
  alert('Ошибка, введено НЕ ЧИСЛО')
} else if (result % 2 === 0) {
  alert('Число чётное')
} else {
  alert('Число нечётное')
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Код для обработки всех случаев ввода гораздо длиннее. В случае использования switch или отдельных функций проверки, код получится более элегантным.

На практике

Скопировать ссылку "На практике" Скопировано

Дока Дог советует

Скопировать ссылку "Дока Дог советует" Скопировано

🛠 Пример использования prompt() с самостоятельно созданным диалоговым окном: