Вы находитесь на странице: 1из 5

УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ «БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ

УНИВЕРСИТЕТ ИНФОРМАТИКИ И РАДИОЭЛЕКТРОНИКИ» ФИЛИАЛ «МИНСКИЙ


РАДИОТЕХНИЧЕСКИЙ КОЛЛЕДЖ»

Программные средства создания Internet-приложения

Лабораторная работа №22


«Работа с элементами объекта браузера средствами JavaScript. Обработка
событий браузера»

Выполнила: Проверила:
учащаяся группы №62492 Виничук О.Н.
Гулида А.В.

Минск 2020
1. Цель работы

Формирование умений работы с объектной моделью браузера, навыков обработки


событий браузера на языке JavaScript.

2. Задание

Создать HTML-документ, содержащий сценарии работы с объектной моделью


браузера на языке JavaScript.

3. Оснащение работы
ПК, текстовый редактор, браузер.

Результат выполнения работы:


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" onclick="showAllProperties()">
<p id="navig"></p>
<input type="button" value="First" onclick="showFirstPage()">
<input type="button" value="Second" onclick="showSecondPage()">
<script type="text/javascript" src="index.js"></script>
</body>
</html>

setTimeout(openPage, 3000);
function openPage() {
alert("You'll be reconnect");
const page = open("http://mrk-bsuir.by/ru");
const close = setInterval(closePageWithTomeOut, 10000, page);

function closePageWithTomeOut(page) {
page.close();
}
}
function showFirstPage() {
return window.open("", "",
"width=200,height=200,menubar=no,toolbar=no,location=no,scrollbars=yes")
}
const showSecondPage = () => {
const secondWindow = window.open("http://mrk-bsuir.by", "My First Window",
"width=400,height=400,menubar=yes,toolbar=yes,location=no,scrollbars=no");
};
const showAllProperties = () => {
let navig = "";
for (let property in navigator)
{
navig += "<strong>"+property+"</strong> :" + navigator[property];
navig +="<br />";
}
document.getElementById("navig").innerHTML = navig;
};

Контрольные вопросы
1. Что представляет собой объектная модель браузера (BOM)?
Объектная модель браузера (анг. Browser Object Model (BOM)) – это часть
JavaScript, которая позволяет скрипту взаимодействовать с программой просмотра веб-
страниц. BOM представляет объекты, через свойства и методы которых можно управлять
внешним видом и поведением обозревателя.
BOM-интерфейс позволяет работать с окном браузера как с объектом, у которого
имеются свои свойства и методы. Данным объектом является объект window (он же
является глобальным объектом в JavaScript). Объект window представляет собой одно из
окон или вкладку браузера с его панелями инструментов, меню, строкой состояния,
HTML страницей и другими объектами.
Некоторые браузеры открывают страницы не в отдельных окнах, а во вкладках
одного окна. В этом случае каждая вкладка также имеет свой собственный объект window.
Однако, при обращении к свойствам, которые не могут относиться к вкладкам (например,
изменяющие размер окна браузера), автоматически используется общий объект window
окна браузера. Например, если внутри отдельной вкладки происходит вызов метода
window.resizeTo(), тогда window ссылается на общий объект окна браузера.
2. Перечислите основные объекты BOM.
Основные объекты BOM и связи между ними

Объекты браузера Window – самый главный объект в браузере, который отвечает за


одно из окон (вкладок) браузера. Он является корнем иерархии всех объектов доступных
веб-разработчику в сценариях JavaScript.
3. Опишите свойства объекта Window.
Window – самый главный объект в браузере, который отвечает за одно из окон
(вкладок) браузера. Он является корнем иерархии всех объектов доступных веб-
разработчику в сценариях JavaScript. Объект window имеет много разнообразных свойств,
но используются из них лишь некоторые. Весь список свойств можно получить с
помощью простого кода:

<html>
<head>
<title>BOM-интерфейс</title>
</head>
<body>
</body>
</html>

<script>
var all = '';
for (var prop in window) {
all += window.prop + '\n';
}
alert(all);
</script>
Объект window кроме глобальных объектов (document, screen, location, navigator и
др.) имеет собственные свойства и методы.
К объекту Window нельзя обратиться напрямую, однако он имеет свойство window,
ссылающееся на сам объект, которое можно использовать вместо ключевого слова this для
ссылки на глобальный объект.

Свойство Описание
Closed Возвращает логическое значение, указывающее закрыто окно или
открыто.
Document Возвращает объект Document текущего окна
Frames Возвращает массив со всеми элементами текущего окна
History Возвращает ссылку на объект History
InnerHeight Возвращает высоту области просмотра окна
InnerWidth Возвращает ширину области просмотра окна
Lenght Возвращает количество элементов в окне
Location Возвращает ссылку на объект Location
Name Задает или получает значение, указывающее имя окна
Navigator Возвращает ссылку на объект Navigator
Opener Задает или получает ссылку на окно, которое было создано в текущем
окне
outerHeight Возвращает внешнюю высоту окна, включая панели инструментов и
полосы прокрутки
outerWidth Возвращает внешнюю ширину окна, включая панели инструментов и
полосы прокрутки
pageXOffset Возвращает количество пикселей, на которое текущий документ был
прокручен (по горизонтали) от верхнего левого угла окна
pageYOffset Возвращает количество пикселей, на которое текущий документ был
прокручен (по вертикали) от верхнего левого угла окна
Parent Возвращает родительское окно текущего окна
Screen Возвращает ссылку на объект Screen, связанный с окном
screenLeft Получает x-координату верхнего левого угла окна относительно верхнего
левого угла
screenTop Получает y-координату верхнего угла окна, по отношению к верхней
части экрана
scrollX Эквивалент свойства pageXOffset
scrollY Эквивалент свойства pageYOffset
self Извлекает ссылку на текущее окно или фрейм
status Получает/устанавливает текст в строке состояния в нижней части
браузера

Оценить