LearnJS

prompt()

prompt() - это встроенная функция браузера, которая показывает модальное окно с полем для ввода. С ее помощью можно задать пользователю вопрос и получить введенный ответ в JavaScript-код.

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

Что такое prompt()

prompt() похож на alert(), но кроме сообщения показывает поле ввода. Пользователь может что-то написать и нажать ОК.

prompt('Как вас зовут?');

После выполнения кода браузер покажет окно с вопросом и полем для ввода текста.

Но если просто вызвать prompt(), ответ пользователя нигде не сохранится. Чтобы использовать введенное значение дальше, его нужно записать в переменную.

Синтаксис

Общая запись выглядит так:

prompt(message, defaultValue);

message - текст вопроса или подсказки, который увидит пользователь.

defaultValue - необязательное значение по умолчанию. Оно заранее появится в поле ввода.

Простой вариант с одним параметром:

prompt('Введите ваше имя');

Вариант со значением по умолчанию:

prompt('Введите ваше имя', 'Алексей');

Как получить ответ пользователя

Чтобы сохранить ответ пользователя, результат prompt() записывают в переменную.

let userName = prompt('Как вас зовут?');

console.log(userName);

Если пользователь введет Ирина и нажмет ОК, в переменную userName попадет строка ‘Ирина’.

Дальше это значение можно вывести в модальном окне:

let userName = prompt('Как вас зовут?');

alert(userName);

Или добавить текст:

let userName = prompt('Как вас зовут?');

alert('Привет, ' + userName);

Если ввести Ирина, появится сообщение:

Привет, Ирина

Значение по умолчанию

Вторым аргументом в prompt() можно передать значение по умолчанию. Оно сразу появится в поле ввода.

let city = prompt('В каком городе вы живете?', 'Москва');

console.log(city);

Пользователь может оставить это значение, изменить его или полностью стереть. После нажатия ОК в переменную попадет то, что осталось в поле.

Такой вариант удобен, когда мы хотим подсказать пример ответа.

prompt() возвращает строку

Важный момент: prompt() возвращает строку. Даже если пользователь ввел число, JavaScript получит его как текст.

let age = prompt('Сколько вам лет?');

console.log(age);

Если ввести 25, в переменной будет строка ‘25’, а не число 25.

Это особенно важно при вычислениях:

let a = prompt('Введите первое число');
let b = prompt('Введите второе число');

console.log(a + b);

Если ввести 10 и 5, результатом будет:

105

Так происходит потому, что JavaScript складывает строки, а не числа. Чтобы выполнить именно математическое сложение, значения нужно преобразовать в числа.

let a = Number(prompt('Введите первое число'));
let b = Number(prompt('Введите второе число'));

console.log(a + b);

Теперь при вводе 10 и 5 в консоли будет:

15

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

Что вернет кнопка Отмена

В окне prompt() пользователь может нажать не только ОК, но и Отмена.

let answer = prompt('Введите любое значение');

console.log(answer);

Если нажать Отмена, в переменную попадет значение null. Это специальное значение, которое означает отсутствие результата.

Если пользователь ничего не введет и нажмет ОК, результатом будет пустая строка:

''

То есть Отмена и пустое поле - это разные ситуации.

prompt(), alert() и console.log()

Эти три инструмента часто используются вместе в первых примерах.

prompt() получает данные от пользователя:

let name = prompt('Введите имя');

alert() показывает сообщение в модальном окне:

alert('Привет, ' + name);

console.log() выводит значение в консоль:

console.log(name);

Полный пример:

let name = prompt('Введите имя');

alert('Привет, ' + name);
console.log(name);

Так можно и показать ответ пользователю, и дополнительно проверить значение в консоли.

Частые ошибки

1. Ответ не сохранен в переменную

prompt('Введите имя');

alert(name);

В этом примере ответ пользователя нигде не сохранен, а переменной name нет. Правильно:

let name = prompt('Введите имя');

alert(name);

2. Ожидание числа после prompt()

let a = prompt('Введите число');
let b = prompt('Введите число');

console.log(a + b);

Если нужны числа, используем преобразование:

let a = Number(prompt('Введите число'));
let b = Number(prompt('Введите число'));

console.log(a + b);

3. Неправильно написано имя функции

Prompt('Введите имя');

JavaScript чувствителен к регистру. Правильно:

prompt('Введите имя');

4. Пропущены кавычки в тексте вопроса

prompt(Введите имя);

Текст нужно писать в кавычках:

prompt('Введите имя');

Что дальше

prompt() позволяет получить данные от пользователя прямо через модальное окно браузера. На первых уроках это удобный способ быстро добавить ввод в программу.

Дальше разберем confirm() - функцию, которая задает вопрос и возвращает один из двух вариантов: согласен пользователь или нет.