Лабораторные работы. Краева / Web-технологии. Отчет №5

Цель работы — познакомиться с объектной моделью браузера (BOM), изучить объекты и их свойства, позволяющие управлять поведением браузера из JavaScript.

Ход выполнения

Внутри тела страницы находится контейнер, содержащий заголовок и сетку кнопок. Каждая кнопка привязана к функции JavaScript, которая, при нажатии, выводит соответствующую информацию о браузере, операционной системе, размерах экрана и других характеристиках. Результаты отображаются в элементе с идентификатором "output".

Рисунок 1. HTML

<div class="container"> создает контейнер для содержимого страницы. <h1> содержит заголовок лабораторной работы. <div class="button-grid"> содержит кнопки, каждая из которых вызывает соответствующую JavaScript-функцию при клике. <div id="output"> служит местом для отображения результатов вызовов функций. <script src="script.js"></script> подключает внешний JavaScript-файл, в

котором реализованы функции для обработки событий.

Создан файл стилей, в котором:

Секция body задает общие стили для всего документа, устанавливая шрифт Arial, увеличивая межстрочный интервал, убирая отступы и добавляя внутренние отступы в 20 пикселей. Фоновый цвет страницы — светло-серый (#f4f4f4).

Секция .container определяет стили для основного контейнера, ограничивая его максимальную ширину до 800 пикселей и центрируя его на странице. Контейнер имеет белый фон.

Секция .buttons-grid настраивает сетку для кнопок, используя CSS Grid. Кнопки располагаются в два столбца с равной шириной, между ними устанавливается отступ в 10 пикселей. Сетка имеет дополнительные отступы сверху и снизу в 20 пикселей.

Секция button определяет стили для кнопок, включая внутренние отступы в 10 пикселей, синий фон (#007cba), белый текст.

Секция .output задает стили для области вывода информации. Устанавливает верхний отступ в 20 пикселей, внутренние отступы в 15 пикселей и светло-серую рамку с закругленными углами. Фон области вывода — светло-серый (#f9f9f9), а минимальная высота — 50 пикселей.

Рисунок 2. Файл стилей

BOM означает Browser Object Model (Объектная Модель Браузера). Она представляет различные объекты, предоставляемые средой браузера, позволяя JavaScript взаимодействовать с самим браузером, обрабатывать свойства окна и управлять взаимодействием с пользователем.

Navigator — это объект, который предоставляет информацию о браузере, в котором запущен JavaScript. Он содержит различные свойства, такие как userAgent, который позволяет определить тип браузера, и appVersion, который указывает версию браузер

Рисунок 3. Navigator

Результат работы:

Рисунок 4. Вид страницы

showOSInfo() — определяет операционную систему пользователя путем анализа строки userAgent.

Рисунок 5. Код функции

Результат работы:

Рисунок 6. Определение ОС

Screen — это объект, который предоставляет информацию о разрешении экрана пользователя. Он содержит свойства, такие как width и height, которые указывают размеры экрана.

Рисунок 7. Screen

Результат работы:

Рисунок 8. Размер экрана

showAvailScreenSize() — показывает доступные размеры экрана (с учетом служебных элементов).

Рисунок 9. showAvailScreenSize

Результат работы:

Рисунок 10. Получившееся окно

showColorDepth() — выводит информацию о глубине цвета экрана.

Рисунок 11. Функция глубины цвета

Результат работы:

Рисунок 12. Вывод глубины цвета

checkConnection() проверяет наличие подключения к интернету. showLanguage() отображает предпочтительный язык браузера.

Рисунок 13. Функции checkConnection() и showLanguage()

Результат работы checkConnection():

Рисунок 14. Работа checkConnection():

Результат работы showLanguage():

Рисунок 15. Работа showLanguage()

Location — это объект, который предоставляет информацию о текущем URLадресе страницы. Он содержит свойства, такие как href, который указывает на текущий URL-адрес, и search, который содержит строку запроса.

showURL() показывает полный URL текущего документа и строку запроса (если присутствует).

Рисунок 16. Код функции

Результат работы:

Рисунок 17. Работа функции

showProtocol() выводит протокол, используемый для загрузки страницы. showHost() отображает информацию о хосте (домен и порт).

Рисунок 18. Функции showProtocol() и showHost()

Результат работы showProtocol():

Рисунок 19. Отображение протокола

Результат работы showHost():

Рисунок 20. Отображение хоста

Заключение

В ходе лабораторной работы были изучены основные объекты Browser Object Model (BOM): Window, Navigator, Screen, Location. Были реализованы функции для получения различной информации о браузере, системе пользователя и текущем

URL.