кликаем по кнопке видим в alert е то что введено в поле поиска
Взаимодействие с пользователем: 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 для создания игры «Угадай число»?
Взаимодействие: alert, prompt, confirm
alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title Текст для отображения в окне. default Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку «undefined» в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:
confirm
Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Итого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:
Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.
Блог Vaden Pro
Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript
В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.
alert
Применяется для вывода на экран браузера модального окна (это означает, что пользователь ничего не может нажать на странице, пока не закроет это окно. В рассматриваемом примере, до тех пор, пока не кликнет «ОК» в окне).
После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.
Для примера запустите следующий скрипт из одной строки:
Обычно используется для вывода на экран пользователя оповещений о чем-либо (к примеру о неверно заполненных полях формы) или же для отладки кода, чтобы выяснить на каком месте кода начинается некорректное выполнение скрипта.
prompt
Второй по распространенности после операции alert является prompt. Данная команда предоставляет пользователю больше возможностей для взаимодействия с модальным окном, делая доступными для нажатия две кнопки (OK и CANCEL) и поле для ввода информации.
Для того, чтобы продолжить работу с сайтом, юзеру необходимо или закрыть данное окно, кликнув на CANCEL (нажатие EST на клавиатуре также сработает) или ввести информацию в поле для ввода и нажать ОК.
В случае отмены ввода текста в поле (нажатие CANCEL) в скрипт будет возвращено специальное значение null. Подробнее о котором можно почитать тут.
В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.
Маленький пример использования prompt:
Обычно данная команда используется для сбора данных у пользователей, которые необходимы скрипту для продолжения дальнейшей работы.
confirm
Также представляет собой модальное окно. Как не сложно догадаться из названия используется обычно для согласования чего-либо с пользователем.
Для того и заточена – для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.
По синтаксису не отличается от alert.
Мы не можем влиять на оформление модального окна, выводящего эти команды.Это с одной стороны не позволяет адаптировать вывод сообщений под дизайн сайта, с другой стороны делает эти команды невероятно простыми, благодаря чему они и заслужили такую популярность среди веб-разработчиков.
Способов получить информацию от пользователей проще, чем искользование команд alert, prompt, confirm просто не существует.
Способы взаимодействия с пользователем – Методы alert, confirm и prompt
Здесь будут рассмотрены простые способы взаимодействия между JavaScript и пользователем, который находится на сайте.
Здесь вы узнаете о методах alert, confirm и prompt. Каждый из них вызывает модальное окно, но все они отличны и используются в различных ситуациях.
Метод alert вызывает модальное окно с указанным текстом. Это окно встроено в браузер : мы не можем изменить его стиль.
Пример 1.1
Пример 1.2
1. Правильный синтаксис при использовании метода prompt таков:
Пример 1.3
На сегодняшний день принято так : даже если второй параметр не указывается, то как видно из примера, правильно после первого параметра и после запятой оставлять пустые кавычки.
2. Чтобы ни ввел пользователь в поле для ввода: число или текст, в любом случае метод prompt возвращает строку. То есть в переменной answer в любом случае будет тип данных строка.
Проверим это при помощи оператора typeof.
Пример 1.4
Итак, теперь мы знаем, что метод prompt всегда возвращает строку.
Пример 1.5
Рассмотренный пример является одним из случаев динамической типизации.
Как работает этот код?
Здесь мы говорили о том, как происходит доступ к элементам массива?
В этом примере мы выводим информацию не в консоль, а непосредственно на страницу при помощи метода write объекта document.
На практике этот способ вывода данных на веб-страницу практически не используется (потому что эта команда заменяет все содержимое страницы на то, что выводит на экран). Но знать о нем нужно.
Особенность методов alert, confirm и prompt
Итак, в этой статье Вы узнали о том, как происходит взаимодействие между JavaScript и пользователем на самом простом уровне. И увидели, что мы можем получать данные от пользователя и как-то их использовать.