Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна или взаимодействуют с содержимым окна:
alert(): выводит окно с сообщением
confirm(): отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена
prompt(): позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные
print(): отображает диалоговое окно для вывода страницы на печать
find(): позволяет найти на странице определенный текст
Например, с помощью метода alert() по нажатию на кнопку выведем окно с сообщением:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="btn">Click</button> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", ()=>{ alert("Hello METANIT.COM"); // отображаем всплывающее окно при нажати на кнопку }); </script> </body> </html>
Метод confirm() отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена.
В зависимости от выбора пользователя метод возвращает true
(если пользователь нажал OK) или false
(если пользователь нажал кнопку Отмены):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="btn">Click</button> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", ()=>{ const result = confirm("Завершить выполнение программы?"); if(result===true) console.log("Работа программы завершена"); else console.log("Программа продолжает работать"); }); </script> </body> </html>
Метод prompt() позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные. Данный метод возвращает введенное пользователем значение. Например, запросим на странице имя пользователя:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="btn">Click</button> <script> const btn = document.getElementById("btn"); btn.addEventListener("click", ()=>{ const name = prompt("Введите свое имя:"); console.log("Ваше имя: ", name) }); </script> </body> </html>
Если пользователь откажется вводить значение и нажмет на кнопку отмены, то метод возвратит значение null.
Метод find() позволяет найти на странице текст, который передает в метод через параметр. Метод возвращает true
, если текст найден, и false
,
если текст не найден. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <input id="key" name="key" /> <button id="btn">Find</button> <div> <p>— Ах, виноват-с, Петр Николаич! Я буду тихо, — сказал секретарь и продолжал полушёпотом: — Ну-с, а закусить, душа моя Григорий Саввич, тоже нужно умеючи. Надо знать, чем закусывать. Самая лучшая закуска, ежели желаете знать, селедка. Съели вы ее кусочек с лучком и с горчичным соусом, сейчас же, благодетель мой, пока еще чувствуете в животе искры, кушайте икру саму по себе или, ежели желаете, с лимончиком, потом простой редьки с солью, потом опять селедки, но всего лучше, благодетель, рыжики соленые, ежели их изрезать мелко, как икру, и, понимаете ли, с луком, с прованским маслом... объедение! Но налимья печенка — это трагедия!</p> <p>— М-да... — согласился почетный мировой, жмуря глаза. — Для закуски хороши также, того... душоные белые грибы...</p> </div> <script> const btn = document.getElementById("btn"); const keyField = document.getElementById("key"); btn.addEventListener("click", ()=>{ const result = find(keyField.value); // ищем введенное в поле слово console.log(result); }); </script> </body> </html>
В данном случае по нажатию на кнопку ищем на странице введенный в текстовое поле текст. Если текст найден, то он выделяется.
Метод print отображает диалоговое сообщение для вывода страницы на печать:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="btn">Print</button> <p>Hello World</p> <script> const btn = document.getElementById("btn"); const keyField = document.getElementById("key"); btn.addEventListener("click", ()=>{ print(); // выводим текущую страницу на печать }); </script> </body> </html>
В зависимости от браузера окно печати может выглядеть различным образом. Например, вид в Google Chrome: