Введение
В этом уроке мы рассмотрим, как получать ввод от пользователя с помощью функции prompt в JavaScript. prompt позволяет отображать диалоговое окно с запросом ввода данных, что делает веб-страницы более интерактивными.
Основы использования prompt
Функция prompt отображает диалоговое окно с текстом запроса и полем для ввода данных. Она возвращает введенное пользователем значение в виде строки.
Пример использования prompt:
let userName = prompt("Введите ваше имя:");
console.log("Привет, " + userName + "!");
Особенности:
promptпринимает два аргумента: текст запроса и необязательное значение по умолчанию.- Возвращаемое значение всегда является строкой. Если пользователь нажмет “Отмена”, будет возвращено
null.
Работа с введенными данными
Преобразование строки в число
Если пользователь вводит числовые данные, их можно преобразовать из строки в число с помощью функции Number.
Пример:
let ageString = prompt("Введите ваш возраст:");
let age = Number(ageString);
console.log("В следующем году вам будет " + (age + 1) + " лет.");
Проверка на null
Важно учитывать, что пользователь может нажать “Отмена”, в этом случае prompt вернет null. Необходимо обрабатывать этот случай в коде.
Пример:
let userInput = prompt("Введите что-нибудь:");
if (userInput !== null) {
console.log("Вы ввели: " + userInput);
} else {
console.log("Ввод был отменен.");
}
Обработка числовых данных
Проверка, является ли введенное значение числом
Иногда важно проверить, ввел ли пользователь именно число. Для этого можно использовать функцию isNaN (означает “is Not a Number”).
Пример:
let numberInput = prompt("Введите число:");
if (!isNaN(numberInput)) {
let number = Number(numberInput);
console.log("Квадрат вашего числа: " + (number * number));
} else {
console.log("Это не число!");
}
Примеры использования prompt в реальных сценариях
Пример 1: Калькулятор
let num1 = Number(prompt("Введите первое число:"));
let num2 = Number(prompt("Введите второе число:"));
let sum = num1 + num2;
console.log("Сумма: " + sum);
Пример 2: Проверка возраста
let age = Number(prompt("Введите ваш возраст:"));
if (age >= 18) {
console.log("Вы совершеннолетний.");
} else {
console.log("Вы несовершеннолетний.");
}
Пример 3: Ввод и вывод нескольких значений
let firstName = prompt("Введите ваше имя:");
let lastName = prompt("Введите вашу фамилию:");
console.log("Привет, " + firstName + " " + lastName + "!");
Заключение
Функция prompt — это простой и эффективный способ получения ввода от пользователя. Понимание того, как использовать prompt и обрабатывать введенные данные, поможет вам создавать более интерактивные веб-страницы.
Контрольные вопросы
Какую функцию в JavaScript используют для получения ввода от пользователя?
alertconsole.logpromptconfirm
Что возвращает функция prompt, если пользователь нажимает “Отмена”?
- Пустую строку
nullundefinedfalse
Как преобразовать строку, введенную пользователем, в число?
- Использовать функцию
String - Использовать функцию
Boolean - Использовать функцию
Number - Использовать функцию
parseString
Как проверить, что введенное пользователем значение является числом?
- Использовать функцию
isNaN - Использовать функцию
isString - Использовать метод
toFixed - Использовать метод
toString
Какой тип данных всегда возвращает функция prompt?
- Число
- Строка
- Логическое значение
- Объект
Упражнения
Упражнение 1: Приветствие пользователя
Создайте код, который запрашивает имя пользователя и выводит приветственное сообщение в консоль.
let userName = prompt("Введите ваше имя:");
console.log("Привет, " + userName + "!");
Упражнение 2: Преобразование введенного возраста
Запросите у пользователя его возраст, преобразуйте введенные данные в число и выведите сообщение, сколько лет ему будет через 5 лет.
let ageString = prompt("Введите ваш возраст:");
let age = Number(ageString);
console.log("Через 5 лет вам будет " + (age + 5) + " лет.");
Упражнение 3: Проверка на отмену ввода
Создайте код, который запрашивает у пользователя любой текст и проверяет, был ли ввод отменен.
let userInput = prompt("Введите что-нибудь:");
if (userInput !== null) {
console.log("Вы ввели: " + userInput);
} else {
console.log("Ввод был отменен.");
}
Упражнение 4: Квадрат числа
Запросите у пользователя число, проверьте, действительно ли это число, и выведите его квадрат в консоль.
let numberInput = prompt("Введите число:");
if (!isNaN(numberInput)) {
let number = Number(numberInput);
console.log("Квадрат вашего числа: " + (number * number));
} else {
console.log("Это не число!");
}
Упражнение 5: Сложение двух чисел
Создайте код, который запрашивает у пользователя два числа, складывает их и выводит результат в консоль.
let num1 = Number(prompt("Введите первое число:"));
let num2 = Number(prompt("Введите второе число:"));
let sum = num1 + num2;
console.log("Сумма: " + sum);
Упражнение 6: Проверка возраста
Запросите у пользователя его возраст и выведите сообщение, является ли он совершеннолетним.
let age = Number(prompt("Введите ваш возраст:"));
if (age >= 18) {
console.log("Вы совершеннолетний.");
} else {
console.log("Вы несовершеннолетний.");
}
Упражнение 7: Ввод имени и фамилии
Создайте код, который запрашивает у пользователя его имя и фамилию, а затем выводит полное имя в консоль.
let firstName = prompt("Введите ваше имя:");
let lastName = prompt("Введите вашу фамилию:");
console.log("Привет, " + firstName + " " + lastName + "!");
Упражнение 8: Проверка на число
Запросите у пользователя значение и проверьте, является ли это число. Выведите соответствующее сообщение в консоль.
let input = prompt("Введите значение:");
if (!isNaN(input)) {
console.log("Вы ввели число: " + input);
} else {
console.log("Это не число.");
}
Упражнение 9: Умножение числа на 2
Запросите у пользователя число, умножьте его на 2 и выведите результат в консоль.
let num = Number(prompt("Введите число:"));
let result = num * 2;
console.log("Результат умножения на 2: " + result);
Упражнение 10: Проверка строки на пустоту
Запросите у пользователя строку и проверьте, ввел ли он пустую строку. Выведите соответствующее сообщение в консоль.
let str = prompt("Введите строку:");
if (str === "") {
console.log("Вы ввели пустую строку.");
} else {
console.log("Вы ввели: " + str);
}
