Prompt javascript что это
Взаимодействие с пользователем: alert, prompt, confirm
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.
alert
alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».
prompt
Функция prompt принимает два аргумента:
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
Запустите этот код в IE, чтобы понять о чём речь:
Поэтому рекомендуется всегда указывать второй аргумент:
confirm
confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL( Esc ).
Особенности встроенных функций
Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.
С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.
Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Метод alert()
Синтаксис метода alert() :
Например, выведем при клике в диалоговое окно alert координаты курсора:
Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n :
Метод prompt()
Метод prompt() предназначен для вывода диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Это окно предназначено для запроса данных, которые пользователю нужно ввести в текстовое поле.
Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome :
Метод confirm()
Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.
Синтаксис метода confirm() :
Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:
Итого
Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.
Примеры
1. Использование методов prompt и alert для создания игры «Угадай число»?
Примеры prompt, alert и confirm в JS
Функция alert в JS
Функция alert запускает в браузере окно с текстом и кнопкой для подтверждения. Пока окно висит в браузере, выполнение скриптов приостанавливается, до тех пор, пока пользователь не подтвердит, нажав на кнопку ‘OK’, что ознакомился с выведенной в окне информацией.
alert(«Мы больше не работаем в выходные!»);
В передаваемых параметрах, строку можно склеивать с переменными. Вместо ‘x’, подставится значение переменной, а оператор (+) склеит строки с переменной.
let x = 9;
alert(«Вы получите свой товар в » + x + » часов»);
Функция prompt в JS
let firstName = prompt(‘Как Вас зовут?’);
alert(«Добро пожаловать » + firstName);
Prompt показывает окно с полем для ввода запрашиваемых данных от пользователя и две кнопками (‘OK’ и ‘Отмена’). Если пользователь введет имя и нажмет ‘OK’, то введенное им имя присвоится переменной name. Тогда появится следующее окно, где мы приветствуем пользователя, обратившись к нему по имени. Возможен и другой вариант развития событий, если была нажата кнопка ‘Отмена’, то скрипт вернет null.
Функция prompt может принимать два параметра, вторым параметром устанавливается дефолтное значение в поле окна.
let age = prompt(‘Подтвердите, что вы совершеннолетний! Укажите ваш возраст!’, 18);
alert(«Вам есть «+ age + » заходите!»);
Цифра 18 автоматически выводится в поле ввода, которую можно изменить или оставить как есть.
Загадайте пользователю загадку и используя конструкцию if-else, сообщите ему правильно ли он ответил.
let user_otvet = prompt(«Два конца, два кольца. Посредине гвоздик.»);
if(user_otvet == «ножницы») <
alert(«Ответ верный!»); // инструкция 1
> else <
alert(«Ответ неверный!»); // инструкция 2
>
Зададим условие: Если в переменную попадет слово ножницы, то выполнится инструкция 1 и пользователь увидит окно «Ответ верный!»
Функция confirm в JS
Функция confirm запускает окно с текстом и кнопками: ‘OK’ и ‘Отмена’.
let sendMail = confirm(«Ты отправил письмо?»);
alert( sendMail );
Заключение
Все эти три функции взаимодействуют с пользователем. Функция alert не оставляет пользователю выбора, ему показывается только одна кнопка и ожидается клик по ней. Функция confirm предоставляет пользователю выбор между двумя кнопками. Функция prompt просит ввести данные и возвращает эти данные, если нажата кнопка ‘OK’. А в случае отмены, возвращает null.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Форум
Справочник
prompt
Синтаксис
Аргументы
Описание, примеры
Выводит сообщение в окне с текстовым полем и двумя кнопками: «ОК» и «ОТМЕНА».
Возвращает введенное значение или null, если посетитель нажал на кнопку «ОТМЕНА».
Спасибо огромное;)
нужна была обработка веденного ключа на
правильное, неправильное значения и на отмену ввода
до этого момента не знал как разделить последние два события..
Уважаемый товарищ, у меня тот же вопрос. Если Вы уже знаете ответ, то прошу сообщить и мне. Спасибо.
Размеры и положение модальных окон регулируются браузерами самостоятельно. На них никак нельзя повлиять. Поэтому там, где требуется красивая форма ввода, не используют prompt, а получают значение из красиво нарисованной на HTML формы
В том примере не доработка.
Скрипт расщитан на вывод alert(ом) данные введенные тогда.
но если пользователь оставит поле пустым он выведет «Вам null лет», нужно исправить:
var years=prompt(‘Сколько вам лет?’,’100′);
if (years == »)
alert(‘Вам ‘+years+’ лет!’);
Лучше:
А вообще, лучше всунуть в цикл и проверить что вводится именно число:
Как избавиться от самопроизвольного повторного выскакивания промптовского окна после получения результата?
Попроще, чтоб два раза не выскакивало, я сразу в окно поместил ответы, вот мой пример:
Параметр value использовать все же рекомендуется, т.к. в ИЕ по умолчанию в поле написано undefinded, но мы ведь этого не хотим, верно?
поэтому так корректнее:
promt(«Введите что нибудь»,»»)
Собрал в работающий пример всё прозвучавшее в комментариях, добавил замену запятой на точку, проверку на допустимость значения и выбор «год-года-лет»:
Вот вы реально идиоты ))
Отлично позамарачивались! ))
(например тега
P.S. сея прога не работает, как ее можно исправить?
Диалоговые окна prompt() и confirm()
Метод prompt()
Два аргумента метода prompt() нужны для вывода текста для отображения некого запроса в диалоговом окне и указания начального значения в этом текстовом поле. Начальное значение указывать необязательно.
Метод prompt() возвращает строковое значение, которое для использования в коде вы можете записать в переменную или как один из параметров функции:
Преобразование строк в числа
По условиям задачи вам может понадобиться, чтобы пользователь ввел 2 числа, которые вы будете складывать. Однако prompt() возвращает строку, поэтому результат сложения вас сильно удивит, т.к. произойдет склеивание, или конкатенация строк.
Обратите внимание, что начальное значение в виде числа можно задать, как в кавычках, так и без.
Тестируем cумму чисел, введенных в prompt()
Если вы нажали кнопку «Ок», не изменяя значений, то получили вместо 115 строку «10015». Это вряд ли может вас устроить при каких-то расчетах.
Для того чтобы результат сложения совпадал с математическим, необходимо использовать какой-либо из вариантов преобразования строк в числа. Например, так:
Сумма чисел с преобразованием строки в число
Использование prompt() в качестве параметра функции
Если вам необходимо вызвать функцию с параметрами, которые вводит пользователь, то вы можете записать вызов метода prompt() без использование переменной внутри скобок при вызове функции. Например, нам нужно получить строку, перевернутую наоборот. Используем для этого метод строк split() и методы массива reverse() и join() :