Когда вы только начинаете учить JavaScript, у вас, как правило, нет инструментов взаимодействия с пользователями, а получить некое значение, введенное пользователем, необходимо по условиям задачи, например. Тут отличным выбором будут диалоговые окна prompt() или confirm(), которые формируются браузером. Их внешний вид зависит от того браузера, который вы используете, и даже от его версии.
Метод prompt()
Диалоговое окно формируется методом объекта Window prompt(). Для его вызова можно написать window.prompt() или просто prompt(), т.к. объект Window является глобальным объектом в JavaScript, т.е. доступен из любой конструкции скрипта.
Синтаксис:
| 1 | let result = prompt( 'Запрос', 'Начальное значение'); |
Два аргумента метода prompt() нужны для вывода текста для отображения некого запроса в диалоговом окне и указания начального значения в этом текстовом поле. Начальное значение указывать необязательно.
Метод prompt() возвращает строковое значение, которое для использования в коде вы можете записать в переменную или как один из параметров функции:
| 1 2 | let result = prompt( 'Вы использовали уже окно prompt()', 'Это первый раз'); alert(result); |
В примере выше мы просто выводим это значение в другом диалоговом окне alert(). Попробуйте сами:
Вы, как пользователь-тестировщик, можете напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result. Если отменить ввод нажатием на кнопку «Отмена» клавишей Esc, то значением переменной result станет null.
Преобразование строк в числа
По условиям задачи вам может понадобиться, чтобы пользователь ввел 2 числа, которые вы будете складывать. Однако prompt() возвращает строку, поэтому результат сложения вас сильно удивит, т.к. произойдет склеивание, или конкатенация строк.
| 1 2 3 | let num1 = prompt("Введите первое число", "100"), num2 = prompt("Введите второе число", 15); alert(num1 + num2); |
Обратите внимание, что начальное значение в виде числа можно задать, как в кавычках, так и без.
Если вы нажали кнопку "Ок", не изменяя значений, то получили вместо 115 строку "10015". Это вряд ли может вас устроить при каких-то расчетах.
Для того чтобы результат сложения совпадал с математическим, необходимо использовать какой-либо из вариантов преобразования строк в числа. Например, так:
| 1 2 3 4 5 | do { num1 = +prompt("Введите первое число", "100"), num2 = +prompt("Введите второе число", 15); } while ( isNaN(num1) || isNaN(num2) ) alert(num1 + num2); |
В скрипте выше мы предлагаем пользователю ввести числа, и будем делать это несколько раз, если он решит вводить строки с помощью цикла do...while. В условии do...while мы проверяем, а не являются ли введенные значения после преобразования в строку NaN (Not a Number, т.е. не числом). Для этого в JavaScript существует функция isNaN().
Использование prompt() в качестве параметра функции
Если вам необходимо вызвать функцию с параметрами, которые вводит пользователь, то вы можете записать вызов метода prompt() без использование переменной внутри скобок при вызове функции. Например, нам нужно получить строку, перевернутую наоборот. Используем для этого метод строк split() и методы массива reverse() и join():
| 1 2 3 4 5 | function reverseStr( somestr ){ const newStr = somestr .split('').reverse().join(''); alert( newStr ); } reverseStr( prompt( "Введите строку для переворачивания", "Туча мглою небо кроет") ); |
Попробуйте сами:
Метод confirm()
Метод confirm(), как и метод prompt(), является методом объекта Window, поэтому его можно вызывать, используя window.confirm() или просто confirm(). В качестве параметра вы передаете строку с запросом для пользователя, а он получает диалоговое окно с этим запросом и кнопками "Ок" и "Отмена".
При нажатии на кнопку "Ок" метод confirm() возвращает логическое значение true, при нажатии на кнопку "Отмена" - логическое значение false.
| 1 2 3 4 5 | let res = confirm("Вам нравится JavaScript?"); alert(res); // или так: alert( confirm("Вам нравится JavaScript?") ); |
Давайте попробуем:
Использование диалогового окна confirm() для условий
Достаточно часто метод confirm() используется в условной конструкции if...else или в тернарном операторе:
| 1 2 3 | if( confirm("Делится ли число 387954 на 3?") ){ alert( "Все верно. Будет " +(387954/3) ); } else alert("Вы не правы. Будет " +(387954/3)); |
Поскольку любое условие подразумевает, что его результатом будет логическое значение в виде true или false, confirm() отлично подходит для условий.
| 1 2 3 | confirm("Вам нравится JavaScript?")? alert("Успехов в изучении JS!"): alert("Что вы тогда здесь делаете?"); // или так alert( confirm("Вам нравится JavaScript?")? "Успехов в изучении JS!": "Что вы тогда здесь делаете?"); |
Тернарный оператор также подразумевает, что в условии будет true или false, соответственно, метод confirm() можно в нем использовать сразу, без дополнительной переменной.
Операция сложения и confirm()
Далеко не все знают, что при сложении логическое значение true преобразуется в 1, а false в 0. Поэтому в некоторых случаях confirm() можно использовать для сложения:
| 1 2 3 4 5 | let summa =0; summa+= confirm("Дельфины не являются рыбами?"); summa+= confirm("Атмосферное давление уменьшается с высотой?"); summa+= confirm("Пипидастр - это метелка для смахивания пыли?"); alert("Количество верных ответов = "+summa); |
Попробуйте сами:
Несложно догадаться, что правильные ответы засчитываются при клике на кнопку "ОК".
