Диалоговые окна и поиск на странице

Последнее обновление: 01.11.2023

Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна или взаимодействуют с содержимым окна:

  • alert(): выводит окно с сообщением

  • confirm(): отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена

  • prompt(): позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные

  • print(): отображает диалоговое окно для вывода страницы на печать

  • find(): позволяет найти на странице определенный текст

alert

Например, с помощью метода 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>
функция alert в JavaScript

confirm

Метод 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>
Функция confirm в JavaScript

prompt

Метод 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.

Функция prompt в JavaScript

find

Метод 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>

В данном случае по нажатию на кнопку ищем на странице введенный в текстовое поле текст. Если текст найден, то он выделяется.

Функция find и поиск на странице в JavaScript

print

Метод 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:

Функция print и вывод страницы на печать в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм