Prompt: примеры (JAVASCRIPT)

Простой пример использования

Базовый вызов с одним аргументом:

let name = prompt('Введите ваше имя:');
console.log(name);

// Если ввести 'Анна' и нажать OK, в консоли будет: 'Анна'

Использование с двумя аргументами:

let city = prompt('Введите город проживания:', 'Москва');
console.log(city);

// В поле будет значение 'Москва' по умолчанию. Если нажать OK, не меняя его, в консоли будет: 'Москва'

Обработка отмены ввода:

let age = prompt('Сколько вам лет?');
if (age === null) {
  console.log('Ввод отменен');
} else {
  console.log('Введенный возраст: ' + age);
}

// При нажатии Отмена в консоли будет: 'Ввод отменен'

Альтернативные методы в JavaScript

Модальное окно confirm

Функция confirm отображает диалоговое окно с сообщением и двумя кнопками: OK и Отмена. Возвращает логическое значение.

let isReady = confirm('Вы готовы продолжить?');
console.log(isReady); // true или false

Модальное окно alert

Функция alert показывает сообщение и одну кнопку OK. Не возвращает значения, используется только для информирования.

alert('Операция завершена успешно');

Кастомные модальные окна

Библиотеки (например, Bootstrap Modal) или собственные реализации на HTML/CSS/JS предоставляют больше контроля над внешним видом и поведением. Их предпочтительнее использовать для сложных форм, валидации и улучшенного пользовательского опыта.

Распространенные ошибки

Неучет возвращаемого null

При отмене ввода функция возвращает null. Попытка работать с этим значением как со строкой может вызвать ошибки.

let data = prompt('Введите число:');
let square = data * data; // Ошибка, если data = null
console.log(square);

// При отмене: TypeError

Сравнение без приведения типов

Поскольку prompt всегда возвращает строку, прямое сравнение с числами может дать неожиданный результат.

let number = prompt('Введите 10:');
if (number == 10) { // Нестрогое сравнение
  console.log('Совпадает с 10');
}
if (number === 10) { // Строгое сравнение
  console.log('Строго совпадает с 10'); // Этот код не выполнится
}

// Если ввести '10', первое условие выполнится, второе - нет.

Игнорирование пустой строки

Если пользователь нажмет OK, не вводя текст, функция вернет пустую строку (''), а не null.

let value = prompt('Введите что-нибудь:');
if (!value) {
  console.log('Пустая строка или отмена');
}

История изменений

Функция prompt существует с первых версий JavaScript и не претерпела значительных изменений в синтаксисе. Однако, современные браузеры могут блокировать или ограничивать её использование, так как модальные окна считаются плохим пользовательским опытом и могут использоваться для фишинга. Некоторые браузеры позволяют пользователям настраивать блокировку таких окон.

В спецификации HTML5 функция по-прежнему поддерживается, но рекомендуется избегать её в продакшн-коде в пользу более современных и удобных методов взаимодействия.

Расширенные примеры применения

Проверка и преобразование в число

Пример с обработкой ввода и преобразованием в число с проверкой.

let input = prompt('Введите ваш возраст:');
if (input === null) {
  console.log('Отменено');
} else {
  let age = parseInt(input);
  if (isNaN(age)) {
    console.log('Это не число');
  } else {
    console.log(`Через 5 лет вам будет ${age + 5}`);
  }
}

Многострочная подсказка

Использование символа новой строки \n для форматирования.

let answer = prompt('Пожалуйста, введите ваши данные:\n(Имя, Фамилия, Возрост)');

Цикл с проверкой корректности ввода

Повторный запрос, пока не будет получено корректное значение.

let number;
do {
  let input = prompt('Введите положительное число:');
  if (input === null) {
    console.log('Отменено');
    break;
  }
  number = Number(input);
} while (isNaN(number) || number <= 0);
if (number) {
  console.log('Корень числа: ' + Math.sqrt(number));
}

Сохранение и использование значения по умолчанию

Использование предыдущего ввода как значения по умолчанию для следующего запроса (имитация памяти).

let lastCity = '';
function askCity() {
  lastCity = prompt('Введите ваш город:', lastCity);
  if (lastCity !== null) {
    alert('Ваш город: ' + lastCity);
  }
}
// Первый вызов: поле пустое
// Последующие вызовы: поле содержит предыдущий ввод

Аналоги в других языках программирования

Python (консольный ввод)

Функция input() считывает строку из стандартного ввода.

name = input('Введите ваше имя: ')
print(f'Привет, {name}')

PHP

В веб-контексте данные обычно получают через формы ($_POST, $_GET). Для консольного скрипта можно использовать fgets(STDIN).

// console.php
echo 'Введите город: ';
$city = trim(fgets(STDIN));
echo 'Вы ввели: ' . $city;

C

Используются функции типа scanf() или fgets() для чтения из стандартного потока ввода.

#include <stdio.h>
int main() {
    char name[50];
    printf('Введите имя: ');
    scanf('%s', name);
    printf('Привет, %s\n', name);
    return 0;
}

Основное отличие от JavaScript prompt: эти методы обычно работают в консоли, а не в браузере.