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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабе участники изучат методы 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 в веб-браузере:

  1. Нажмите кнопку "Ввести имя"
  2. Появится prompt, запрашивающий ваше имя
  3. Введите имя или нажмите "ОК" с значением по умолчанию
  4. В 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 в веб-браузере:

  1. Нажмите кнопку "Показать диалоговое окно подтверждения"
  2. Появится диалоговое окно подтверждения
  3. Выберите либо "ОК", либо "Отмена"
  4. В 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 в веб-браузере:

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

Резюме

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

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