Вы здесь: Главная » JavaScript » Диалоговые окна prompt() и confirm()

Диалоговые окна prompt() и confirm()

Когда вы только начинаете учить JavaScript, у вас, как правило, нет инструментов взаимодействия с пользователями, а получить некое значение, введенное пользователем,  необходимо по условиям задачи, например. Тут отличным выбором будут диалоговые окна prompt() или confirm(), которые формируются браузером. Их внешний вид зависит от того браузера, который вы используете, и даже от его версии.

prompt() в разных браузерах

Метод prompt()

Диалоговое окно формируется методом объекта Window prompt(). Для его вызова можно написать window.prompt() или просто prompt(), т.к. объект Window является глобальным объектом в JavaScript, т.е. доступен из любой конструкции скрипта.

Синтаксис:

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

Метод prompt() возвращает строковое значение, которое для использования в коде вы можете записать в переменную или как один из параметров функции:

В примере выше мы просто выводим это значение в другом диалоговом окне alert(). Попробуйте сами:

Вы, как пользователь-тестировщик, можете напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result. Если отменить ввод нажатием на кнопку «Отмена» клавишей Esc, то значением переменной result станет null.

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

По условиям задачи вам может понадобиться, чтобы пользователь ввел 2 числа, которые вы будете складывать. Однако prompt() возвращает строку, поэтому результат сложения вас сильно удивит, т.к. произойдет склеивание, или конкатенация строк.

Обратите внимание, что начальное значение в виде числа можно задать, как в кавычках, так и без.

Если вы нажали кнопку "Ок", не изменяя значений, то получили вместо 115 строку "10015". Это вряд ли может вас устроить при каких-то расчетах.

Для того чтобы результат сложения совпадал с математическим, необходимо использовать какой-либо из вариантов преобразования строк в числа. Например, так:

В скрипте выше мы предлагаем пользователю ввести числа, и будем делать это несколько раз, если он решит вводить строки с помощью цикла do...while.  В условии do...while мы проверяем, а не являются ли введенные значения после преобразования в строку NaN (Not a Number, т.е. не числом). Для этого в JavaScript существует функция isNaN().

Использование prompt() в качестве параметра функции

Если вам необходимо вызвать функцию с параметрами, которые вводит пользователь, то вы можете записать вызов метода prompt() без использование переменной внутри скобок при вызове функции. Например, нам нужно получить строку, перевернутую наоборот. Используем для этого метод строк split() и методы массива reverse() и join():

Попробуйте сами:

confirm() в разных браузерах

Метод confirm()

Метод confirm(), как и метод prompt(), является методом объекта Window, поэтому его можно вызывать, используя window.confirm() или просто confirm(). В качестве параметра вы передаете строку с запросом для пользователя, а он получает диалоговое окно с этим запросом и кнопками "Ок" и "Отмена".

При нажатии на кнопку "Ок" метод confirm() возвращает логическое значение true, при нажатии на кнопку "Отмена" - логическое значение false.

Давайте попробуем:

Использование диалогового окна confirm() для условий

Достаточно часто метод confirm() используется в условной конструкции if...else или в тернарном операторе:

Поскольку любое условие подразумевает, что его результатом будет логическое значение в виде true или false, confirm() отлично подходит для условий.

Тернарный оператор также подразумевает, что в условии будет true или false, соответственно, метод confirm() можно в нем использовать сразу, без дополнительной переменной.

Операция сложения и confirm()

Далеко не все знают, что при сложении логическое значение true преобразуется в 1, а false в 0. Поэтому в некоторых случаях confirm() можно использовать для сложения:

Попробуйте сами:

Несложно догадаться, что правильные ответы засчитываются при клике на кнопку "ОК".

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *