Изучите методы Browser Object Model (BOM) в JavaScript

Введение

В этом лабе участники изучат методы Browser Object Model (BOM) в JavaScript, создав комплексный демонстрационный проект. Лаб-руководство помогает ученикам настроить базовый HTML и JavaScript-окружение, а затем последовательно представляет ключевые методы взаимодействия с BOM, такие как alert(), prompt(), confirm() и методы управления окном.

Участники постепенно создадут практический проект, демонстрирующий различные методы взаимодействия с браузером, начиная от создания структуры проекта и завершая реализацией диалогов уведомлений пользователям и экспериментацией с функциями управления окном. Следуя пошаговым инструкциям, студенты получат практический опыт в использовании методов JavaScript, связанных с браузером, для создания интерактивных веб-опытов и поймут, как общаться с пользователями с помощью различных типов диалогов и методов управления окном.

Настройка HTML-проекта для демонстрации BOM

В этом шаге вы настроите базовый HTML-проект для демонстрации методов Browser Object Model (BOM) в JavaScript. Мы создадим простую структуру проекта, которая будет служить основой для изучения различных взаимодействий с BOM.

Во - первых, перейдите в директорию проекта:

cd ~/project

Создайте новую директорию для проекта демонстрации BOM:

mkdir bom-demo
cd bom-demo

Теперь используйте WebIDE для создания файла index.html с базовой структурой HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Демонстрация методов BOM</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Создайте соответствующий JavaScript-файл bom-methods.js в той же директории:

// Этот файл будет содержать наши демонстрации методов BOM
console.log("Проект методов BOM инициализирован");

Проверьте, были ли файлы созданы правильно:

ls

Пример вывода:

index.html
bom-methods.js

Откройте файл index.html в веб-браузере, чтобы убедиться, что все настроено правильно. Вы должны увидеть заголовок страницы и быть able открыть консоль разработчика браузера, чтобы просмотреть исходное сообщение журнала.

Эта структура проекта обеспечивает чистую, простую среду для изучения и демонстрации различных методов Browser Object Model (BOM) в последующих шагах лабы.

Реализация метода alert для базовых уведомлений пользователя

В этом шаге вы узнаете о методе window.alert(), который является фундаментальным методом Browser Object Model (BOM) для отображения простых сообщений уведомлений пользователям. Метод alert создает всплывающее диалоговое окно, которое приостанавливает выполнение скрипта и требует подтверждения от пользователя.

Перейдите в директорию проекта:

cd ~/project/bom-demo

Откройте файл bom-methods.js в WebIDE и добавьте следующий JavaScript-код:

// Демонстрация метода window.alert()
function showBasicAlert() {
  window.alert("Добро пожаловать в Демонстрацию методов BOM!");
}

// Создайте кнопку для вызова алерта
function createAlertButton() {
  const button = document.createElement("button");
  button.textContent = "Показать алерт";
  button.onclick = showBasicAlert;
  document.body.appendChild(button);
}

// Вызовите функцию для добавления кнопки при загрузке страницы
createAlertButton();

Измените файл index.html, чтобы убедиться, что JavaScript подключен правильно:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Демонстрация методов BOM</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Когда вы откроете файл index.html в веб-браузере, вы увидите кнопку "Показать алерт". Нажатие на эту кнопку вызовет всплывающее диалоговое окно с сообщением "Добро пожаловать в Демонстрацию методов BOM!".

Основные моменты о window.alert():

Это метод объекта window
Создает блокирующее диалоговое окно, которое приостанавливает выполнение скрипта
Требует от пользователя нажать "ОК", чтобы продолжить
Обычно используется для простых уведомлений или отладки

Пример внешнего вида диалогового окна алерта:

[Диалоговое окно алерта]
Добро пожаловать в Демонстрацию методов BOM!
                [ОК]

Создание диалогового окна prompt для взаимодействия с вводом пользователя

В этом шаге вы изучите метод window.prompt(), который позволяет получать интерактивный ввод от пользователя через диалоговое окно. Этот метод BOM позволяет собирать простой текстовый ввод от пользователей прямо в браузере.

Перейдите в директорию проекта:

cd ~/project/bom-demo

Откройте файл bom-methods.js в WebIDE и добавьте следующий JavaScript-код:

// Демонстрация метода window.prompt()
function showPromptDialog() {
  // Предложите пользователю ввести свое имя с значением по умолчанию
  let userName = window.prompt("Как вас зовут?", "Guest");

  // Проверьте, ввел ли пользователь имя
  if (userName !== null && userName !== "") {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = `Привет, ${userName}! Добро пожаловать в методы BOM.`;
  } else {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = "Имя не введено.";
  }
}

// Создайте кнопку для вызова prompt
function createPromptButton() {
  const button = document.createElement("button");
  button.textContent = "Ввести имя";
  button.onclick = showPromptDialog;
  document.body.appendChild(button);
}

// Вызовите функцию для добавления кнопки при загрузке страницы
createPromptButton();

Обновите файл index.html, чтобы включить div для вывода:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Демонстрация методов BOM</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Основные моменты о window.prompt():

Возвращает текст, введенный пользователем
Позволяет указать необязательное значение по умолчанию
Возвращает null, если пользователь отменяет prompt
Блокирует выполнение скрипта до ответа пользователя

Пример взаимодействия с диалоговым окном prompt:

[Диалоговое окно prompt]
Как вас зовут? [Guest]
        [ОК]   [Отмена]

Когда вы откроете файл index.html в веб-браузере:

Нажмите кнопку "Ввести имя"
Появится prompt, запрашивающий ваше имя
Введите имя или нажмите "ОК" с значением по умолчанию
В div вывода будет отображено персональное приветствие

Добавление диалогового окна confirm для принятия решений пользователем

В этом шаге вы изучите метод window.confirm(), который предоставляет простой способ получить подтверждение пользователя через диалоговое окно с вариантами "ОК" и "Отмена". Этот метод BOM полезен для создания интерактивных сценариев принятия решений в веб-приложениях.

Перейдите в директорию проекта:

cd ~/project/bom-demo

Откройте файл bom-methods.js в WebIDE и добавьте следующий JavaScript-код:

// Демонстрация метода window.confirm()
function showConfirmDialog() {
  const outputDiv = document.getElementById("output");

  // Отобразите диалоговое окно подтверждения
  const userDecision = window.confirm("Вы хотите продолжить?");

  // Проверьте ответ пользователя
  if (userDecision) {
    outputDiv.textContent = "Пользователь нажал OK. Продолжаем действие.";
    outputDiv.style.color = "green";
  } else {
    outputDiv.textContent = "Пользователь нажал Отмена. Действие отменено.";
    outputDiv.style.color = "red";
  }
}

// Создайте кнопку для вызова диалогового окна confirm
function createConfirmButton() {
  const button = document.createElement("button");
  button.textContent = "Показать диалоговое окно подтверждения";
  button.onclick = showConfirmDialog;
  document.body.appendChild(button);
}

// Вызовите функцию для добавления кнопки при загрузке страницы
createConfirmButton();

Обновите файл index.html, чтобы убедиться, что div для вывода присутствует:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Демонстрация методов BOM</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Основные моменты о window.confirm():

Возвращает true, если пользователь нажимает "ОК"
Возвращает false, если пользователь нажимает "Отмена"
Блокирует выполнение скрипта до тех пор, пока пользователь не сделает выбор
Полезен для простых решений "да/нет"

Пример взаимодействия с диалоговым окном confirm:

[Диалоговое окно confirm]
Вы хотите продолжить?
        [ОК]   [Отмена]

Когда вы откроете файл index.html в веб-браузере:

Нажмите кнопку "Показать диалоговое окно подтверждения"
Появится диалоговое окно подтверждения
Выберите либо "ОК", либо "Отмена"
В div вывода будет отображено результат вашего выбора

Экспериментируем с методами window.open и window.close

В этом шаге вы изучите методы window.open() и window.close(), которые позволяют программно создавать и управлять новыми окнами или вкладками браузера.

Перейдите в директорию проекта:

cd ~/project/bom-demo

Во - первых, создайте новый HTML-файл с именем popup.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Всплывающее окно</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Это всплывающее окно</h1>
    <p>Открыто с помощью метода window.open()</p>
    <button onclick="window.close()">Закрыть окно</button>
  </body>
</html>

Теперь обновите файл bom-methods.js методами управления окном:

// Функция для открытия нового окна
function openNewWindow() {
  const outputDiv = document.getElementById("output");

  // Откройте новое окно с заданными размерами
  const newWindow = window.open(
    "popup.html",
    "PopupWindow",
    "width=400,height=300,resizable=yes"
  );

  // Проверьте, открылось ли окно успешно
  if (newWindow) {
    outputDiv.textContent = "Новое окно открылось успешно!";
  } else {
    outputDiv.textContent =
      "Всплывающее окно заблокировано. Разрешите всплывающие окна.";
  }
}

// Функция для закрытия наиболее недавно открытого окна
function closeLastWindow() {
  const outputDiv = document.getElementById("output");

  try {
    // Попытайтесь закрыть последнее открытое окно
    const lastWindow = window.open("", "_blank");
    if (lastWindow) {
      lastWindow.close();
      outputDiv.textContent = "Последнее открытое окно закрыто.";
    } else {
      outputDiv.textContent = "Нет окна для закрытия.";
    }
  } catch (error) {
    outputDiv.textContent = "Ошибка при закрытии окна.";
  }
}

// Создайте кнопки для операций с окном
function createWindowButtons() {
  const openButton = document.createElement("button");
  openButton.textContent = "Открыть новое окно";
  openButton.onclick = openNewWindow;

  const closeButton = document.createElement("button");
  closeButton.textContent = "Закрыть последнее окно";
  closeButton.onclick = closeLastWindow;

  document.body.appendChild(openButton);
  document.body.appendChild(closeButton);
}

// Вызовите функцию для добавления кнопок при загрузке страницы
createWindowButtons();

Обновите файл index.html, чтобы обеспечить совместимость:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Демонстрация методов BOM</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Основные моменты о window.open() и window.close():

window.open() создает новое окно или вкладку браузера
Можно указать URL, имя окна и параметры
window.close() закрывает текущее или указанное окно
Препятствия для всплывающих окон могут помешать открытию окна

Когда вы откроете файл index.html в веб-браузере:

Нажмите "Открыть новое окно", чтобы создать новое всплывающее окно
Нажмите "Закрыть последнее окно", чтобы закрыть недавно открытое окно
В div вывода будет показано состояние операций с окном

Резюме

В этом лабе участники изучали методы Browser Object Model (BOM) на практике при помощи проекта на JavaScript. Лаб работала с созданием структурированной HTML и JavaScript среды, создавая основу для демонстрации различных методов взаимодействия с браузером. Участники узнали, как создавать проектные файлы, настраивать базовую HTML структуру и готовить JavaScript файл для демонстрации методов.

Начальные шаги были сосредоточены на понимании фундаментальных методов BOM, начиная с метода window.alert() для уведомлений пользователя. Постепенно реализуя различные методы взаимодействия с браузером, такие как запросы, подтверждения и управление окнами, участники приобрели практический опыт в использовании браузерных API JavaScript для создания интерактивных веб-опытов и управления поведением окон браузера.