/ ↲
    Расширенный поиск

    JavaScript

    prompt()

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. Как это понять
    5. На практике
      1. doka-dog

    Кратко

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

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

    Пример

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

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

    Как пишется

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

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

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

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

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

    Как это понять

    Аргументы prompt() должны быть строками. Если это не так — будет автоматическое приведение к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке.

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

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

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

            
          
          var result = prompt("Введите четное число", "")// вводим ДЕСЯТЬ и нажимаем ОКif (result % 2 === 0) {  // Проверка на четность  alert("Число четное")} else {  alert("Число нечетное")}// Результат: сообщение "Число нечетное"
          var 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...case или отдельных самостоятельно написанных функций проверки код примет более элегантный вид.

    На практике