`prompt()`

Вызываем модальное окно браузера с полем ввода.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

Пример

Скопировано

Открыть демо в новой вкладке

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

Как пишется

Скопировано

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

Результат работы 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) из-за деления на 2 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() с самостоятельно созданным диалоговым окном:

Открыть демо в новой вкладке