Взаимодействие: alert, prompt, confirm
Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert , prompt и confirm .
alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
alert("Hello");
Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, [default]);
Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title Текст для отображения в окне. default Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки в синтаксисе [. ]
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result . Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc . В этом случае значением result станет null .
Вызов prompt возвращает текст, указанный в поле для ввода, или null , если ввод отменён пользователем.
let age = prompt('Сколько тебе лет?', 100); alert(`Тебе $ лет!`); // Тебе 100 лет!
Для IE: всегда устанавливайте значение по умолчанию
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку «undefined» в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
let test = prompt("Test");
Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:
let test = prompt("Test", ''); //
confirm
result = confirm(question);
Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Результат – true , если нажата кнопка OK. В других случаях – false .
let isBoss = confirm("Ты здесь главный?"); alert( isBoss ); // true, если нажата OK
Итого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:
alert показывает сообщение. prompt показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null , если была нажата кнопка «Отмена» или Esc с клавиатуры. confirm показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true , если нажата OK, и false , если нажата кнопка «Отмена» или Esc с клавиатуры.
Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
- Расположение окон определяется браузером. Обычно окна находятся в центре.
- Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.
Что можно задать вторым параметром функции prompt

Создание игр на Unreal Engine 5
Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.
В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.
Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
![]()
Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
![]()
Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
![]()
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
Бесплатный курс
Мастер-класс по созданию сайта на WordPress 6
Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить - не составит труда!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
Как создать профессиональный Интернет-магазин
После семинара:
- Вы будете знать, как создать Интернет-магазин.
- Вы получите бесплатный подарок с подробным описанием каждого шага.
- Вы сможете уже приступить к созданию Интернет-магазина.
Функция prompt
Функция prompt выводит окно для ввода данных. Первым параметром она принимает сообщение, которое будет показано пользователю, а вторым - текст по умолчанию в поле ввода Второй параметр - не обязательный.
В окошке что появится будет находится текстовое поле, и две кнопки - ОК, CANCEL. При нажатии на ОК - возвращается введенная пользователем строка, а при нажатии на CANCEL - null .
Синтаксис
prompt(сообщение, [текст по умолчанию]);
Пример
По нажатию на кнопку спросим имя пользователя, а затем выведем это имя с помощью функции alert :
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?'); alert(res); >);
Пример
Сделаем так, что имя пользователя уже будет вставлено по умолчанию, однако пользователь сможет его поменять:
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?', 'John'); alert(res); >);
Смотрите также
- функцию alert ,
которая выводит диалоговое окно с сообщением - функцию confirm ,
которая выводит диалоговое окно для подтверждения
prompt
Выводит сообщение в окне с текстовым полем и двумя кнопками: "ОК" и "ОТМЕНА".
Возвращает введенное значение или null, если посетитель нажал на кнопку "ОТМЕНА".
Как и в alert, окно - модальное, то есть посетитель не может делать ничего другого, пока не выберет одну из кнопок.
var years=prompt('Сколько вам лет?',100) alert('Вам '+years+' лет!')
Автор: Гость (не зарегистрирован), дата: 28 августа, 2009 - 08:47
а как можно задать координаты окна prompt? В Firefox оно в центре окна,а в IE - в левом верхнем углу. Нельзя его оттуда перетащить?
Автор: ГостьНейм (не зарегистрирован), дата: 19 августа, 2013 - 12:53
Автор: Вит (не зарегистрирован), дата: 1 ноября, 2009 - 23:39
Спасибо огромное;)
нужна была обработка веденного ключа на
правильное, неправильное значения и на отмену ввода
до этого момента не знал как разделить последние два события..
Автор: Romych, дата: 20 февраля, 2010 - 16:26

объясните пожалуйста, как исправить размер модального окна в IE ?
с методом prompt
вот это окно в Опере

Автор: ivsid50@yandex.ru (не зарегистрирован), дата: 7 декабря, 2012 - 08:01
Уважаемый товарищ, у меня тот же вопрос. Если Вы уже знаете ответ, то прошу сообщить и мне. Спасибо.
Автор: maxmaster, дата: 2 января, 2013 - 15:42
Размеры и положение модальных окон регулируются браузерами самостоятельно. На них никак нельзя повлиять. Поэтому там, где требуется красивая форма ввода, не используют prompt, а получают значение из красиво нарисованной на HTML формы
Автор: Данил Агеев (daxiz555) (не зарегистрирован), дата: 7 июня, 2010 - 15:54
В том примере не доработка.
Скрипт расщитан на вывод alert(ом) данные введенные тогда.
но если пользователь оставит поле пустым он выведет "Вам null лет", нужно исправить:
var years=prompt('Сколько вам лет?','100'); if (years == '') else
Автор: SWS (не зарегистрирован), дата: 3 августа, 2010 - 10:08
var years=prompt('Сколько вам лет?','100'); if (years == '') alert('Вам '+years+' лет!');
var years=prompt('Сколько вам лет?','100'); if (years == '')
Автор: Loydi (не зарегистрирован), дата: 23 августа, 2010 - 22:18
var years=prompt('Сколько вам лет?','100');
if (years == '')
alert('Вам '+years+' лет!');
Лучше:
var years=prompt('Сколько вам лет?','100'); years = years == '' ? 0 : years; alert('Вам '+years+' лет!');
А вобще null и пустая строка - разные вещи, а значит здесь как проверку нужно использовать:
years = years == null ? 0 : years;
А вообще, лучше всунуть в цикл и проверить что вводится именно число:
do < var years=prompt('Сколько вам лет?','100'); years = parseInt(years, 10); // округляем =>если не число, то NaN > while (isNaN(years)); alert('Вам '+years+' лет!');
Ну и идеальный вариант - объёдинить проверку на null и на NaN
Автор: Loydi (не зарегистрирован), дата: 23 августа, 2010 - 22:55
years = parseInt(years, 10); // округляем => если не число, то NaN
упс, глюкануло: parseInt - выделение числ. части, конечно.
Автор: Гость (не зарегистрирован), дата: 4 октября, 2020 - 19:59
а почему именно число , может с айпона голосовым вводом вводят - и там строка появится.
Автор: Гость (не зарегистрирован), дата: 6 июля, 2011 - 19:48
Как избавиться от самопроизвольного повторного выскакивания промптовского окна после получения результата?
Автор: Гость (не зарегистрирован), дата: 26 января, 2012 - 07:55
Попроще, чтоб два раза не выскакивало, я сразу в окно поместил ответы, вот мой пример:
var imya = prompt ("Напишите свое имя здесь:"," "); var gody = prompt ("Напишите, сколько вам лет здесь:"," "); var nastroenie = prompt ("Напишите, какое у вас настроение здесь:"," "); document.write("Здравствуй, " + imya + "! Тебе"); document.write(" " + gody + " лет(год),"); document.write(" и у тебя " + nastroenie + " настроение!"); document.write(" Всё верно, не так-ли?!");
Автор: Micha (не зарегистрирован), дата: 23 сентября, 2013 - 23:10
Параметр value использовать все же рекомендуется, т.к. в ИЕ по умолчанию в поле написано undefinded, но мы ведь этого не хотим, верно?
поэтому так корректнее:
promt("Введите что нибудь","")
Автор: Гость (не зарегистрирован), дата: 17 октября, 2013 - 06:49
Собрал в работающий пример всё прозвучавшее в комментариях, добавил замену запятой на точку, проверку на допустимость значения и выбор "год-года-лет":
Автор: Гость (не зарегистрирован), дата: 17 октября, 2013 - 06:57
// тут ещё нужно условие на 111..114 лет :-D document.writeln( 'Вам ' + years + (years%10==1&&years!=11&&years!=111?' год.':( (years%10>1&&years%10<5)&&(years<11||years>14&&years<111||years>114) ?' года.':' лет.')) + '
' )
Автор: Гость (не зарегистрирован), дата: 27 мая, 2014 - 10:27
Вот вы реально идиоты ))
Отлично позамарачивались! ))
Автор: Гость (не зарегистрирован), дата: 21 декабря, 2014 - 22:18
Возможно ли и каким обазом ,задав значение переменной можно задать ею значение атрибута тега?
(например тега
P.S. сея прога не работает, как ее можно исправить?
Автор: Гость (не зарегистрирован), дата: 21 декабря, 2014 - 22:21
Возможно ли и каким обазом ,задав значение переменной можно задать ею значение атрибута тега?
x1=prompt(". ");
y1=prompt(". ");
(например тега
P.S. сея прога не работает, как ее можно исправить?
Автор: Гость (не зарегистрирован), дата: 21 декабря, 2014 - 22:23
Автор: Гость (не зарегистрирован), дата: 5 января, 2015 - 04:06
А как сделать так,чтобы если ответ в промпте не целевой,опять отрывался начальный промпт,после второго сообщения.?
Автор: Гость (не зарегистрирован), дата: 20 февраля, 2016 - 12:19
Автор: OMD (не зарегистрирован), дата: 29 января, 2015 - 11:51
var years=prompt('Сколько вам лет?', '100'); // return string | null if (years === '' || years === null) < alert('Вы не указали свой возраст!'); >else
Автор: Георгий Тамразян (не зарегистрирован), дата: 20 февраля, 2016 - 12:18
Самый короткий способ:
var years=prompt('Сколько вам лет?', '100'); // return string | null if (!years) < // будет истина только если вернет строку alert('Вы не указали свой возраст!'); >else
Но в 2016 году ни один из представленных способов не работает, если нажать Отмена. Возвращает все равно null. За исключением IE.
Автор: Гость (не зарегистрирован), дата: 3 ноября, 2016 - 01:11
как ввести данные в яваскрипт без модального окна? просто на странице в окошке среди текста. нужен калькулятор валют, только без всплывающих окон.
Автор: Гость (не зарегистрирован), дата: 7 ноября, 2016 - 17:08
элементарно Ватсон: меняете кому нибудь innerHTML
Автор: Гость (не зарегистрирован), дата: 20 ноября, 2016 - 13:59
Здравствуйте! А как можно сделать так, чтобы в огромном "вопроснике", после неудачного ответа в середине "вопросника", выводила обратно на этот же вопрос, а не в начало "вопросника"?
Автор: Гость (не зарегистрирован), дата: 20 ноября, 2016 - 14:02
я понял, через do. while, а можно небольшой кодик, в пример этому способу?(