Объектная модель браузера (BOM, Browser Object Model) •Объектная модель браузера (BOM, Browser Object Model) – это инструмент, с помощью которого язык JavaScript получает доступ к объектам браузера. •Браузер интерпретирует html-страницы, но и страница может взаимодействовать с браузером благодаря тому, что браузер представлен в виде совокупности отдельных элементов – объектов. •Объект способен к изменению, имеет имя и обладает свойствами, методами и событиями. Совокупность объектов браузера образуют объектную модель браузера (BOM). •ВОМ имеет иерархическую структуру, упрощенный вариант которой представлен на рисунке 1 Рассмотрим свойства и методы объектов BOM. Все свойства объекта могут быть выведены на экран с помощью кода JavaScript. Объект Window Свойства Свойство status позволяет выводить или считывать информацию в строке состояния: window.status=”сообщение в строке состояния”; Методы Метод open обеспечивает открытие файла в окне с заданными свойствами, указанными в аргументе param. window.open("file1.html", "my_win", "param"); Метод возвращает ссылку на объект, сохраненную в примере в переменной newWin. var newWin=window.open("file1.html", "my_win", "width=200, height=200"); 2 Метод alert активизирует окно предупреждения с заданным сообщением: window.alert("сообщение"); Метод prompt активизирует окно приглашения с заданным сообщением и текстовым полем для ввода информации пользователя: window.prompt("сообщение", "умолчание"); Метод возвращает значение, введенное пользователем. Метод confirm активизирует окно подтверждения с заданным сообщением и кнопками ok и cancel: window.confirm("сообщение? "); Метод возвращает значение true при нажатии кнопки ok и false при нажатии кнопки cancel. Метод setTimeout(функция, время)обеспечивает запуск однократного таймера для отсчета интервала времени и запуска функции: setTimeout(функция, время); останов таймера: t1= setTimeout(функция, время); clearTimeout(t1); 3 Метод setInterval(функция, время) обеспечивает запуск таймера для периодического запуска функции через заданный интервал времени: setInterval(функция, время); останов таймера: t2= setInterval(функция, время); clearInterval(t2); Объект location (адресная строка) Свойство Свойство href сообщает адрес загруженной страницы, который находится в адресной строке: Например, можно сохранить содержимое адресной строки и вывести на экран: var a= location.href; alert(a); Свойство может также использоваться для записи: location.href="file2.html"; 4 Объект navigator Объект содержит информацию об имени, версии, платформе, кодовом имени браузера, языке, подключению к Сети, наличию cookie и другую. Свойства Свойство appName предоставляет информацию об имени браузера. Свойство appVersion предоставляет информацию о версии браузера. Например, можно вывести на экран значения свойств объекта navigator: alert("имя браузера – "+navigator.appName+"версия="+navigator.appVersion); Свойство appCodeName предоставляет информацию о кодовом имени браузера. Свойство userAgent предоставляет наиболее полную информацию о браузере и используется браузером в заголовке http-протокола для передачи на сервер. Свойство language предоставляет информацию о языке браузера, используемого пользователем. Свойство geolocation предоставляет информацию о местоположении пользователя. 5 Объект history Объект хранит адреса просмотренных страниц и позволяет реализовать действия, соответствующие действиям кнопок “назад” и “вперед”. Методы Метод back() позволяет загрузить предыдущую страницу ("назад"). Метод forward() позволяет загрузить следующую страницу из списка просмотренных (“вперед”). Метод go() позволяет загрузить любую из просмотренных страниц. Объект screen Объект позволяет идентифицировать свойства монитора пользователя. Свойства Свойство colorDepth предоставляет информацию о глубине цвета (числе бит на пиксел). Свойства width и height предоставляют информацию о ширине и высоте экрана. Объект event Свойства объекта содержат информацию о событии. Например, для события, генерируемого мышью, свойства screenX и screenY содержат Х и У координаты курсора мыши относительно экрана. 6 Объект document Свойства: Свойство lastModified содержит дату последней модификации страницы. Свойства fgColor, bgColor содержат информацию о цвете текста и фона. Метод write() Метод write() позволяет выводить информацию на экран. Например, document.write(document.lastModified); - выводится дата последней модификации страницы; document.write(""); - создается html-код; document.write("текст") - выводится текст. 7 Объектная модель документа (Document Object Model, DOM) • Объектная модель документа (Document Object Model, DOM) – это инструмент, с помощью которого язык JavaScript получает доступ к документу, и может изменять содержимое html-страниц. • При загрузке документа браузер производит разбор его содержимого и на основе разбора создает объектную модель документа – DOM (Document Object Model). • DOM состоит из вложенных, иерархически расположенных объектов, которые называются узлами. Каждый узел в структуре представляет располагающийся на странице html элемент. Эту структуру называют также DOM-дерево. • Используя DOM можно взаимодействовать с содержимым htmlдокументов (считывать, изменять, удалять), пользуясь конструкциями JavaScript без перезагрузки браузера. 8 Далее приведен код html-документа, а на рисунке следующего слайда DOM, которая соответствует данному коду.

Пример DOM

Текстовый контент

9 Узлы (nodes) DOM различаются по своему назначению: • узел HTML является корневым; • элементам html соответствуют элементные узлы; • содержимое элементов хранится в текстовых узлах; • для атрибутов html-элемента создаются атрибутные • узлы. Отношения между узлами Узлы в объектной структуре связаны друг с другом. Существует несколько специальных терминов для описания отношений между узлами. -Родительским узлом (parent node) по отношению к объекту является узел, в который вложен объект. На рис узел является родительским по отношению к узлам

и

. Для узла

Первый абзац

Второй абзац

14 Результат в окне браузера: Первый абзац Второй абзац 15 3. Используем последовательное перемещение по объектной модели (рис. DOM) для того чтобы найти текстовое содержимое узла

. С помощью свойства childNodes можно обратиться к узлам - потомкам элемента, которые образуют массив, индекс 0 в нем соответствует первому узлу – потомку, 1 – второму и т.д. Для того чтобы обратиться к первому узлу - потомку используется свойство childNodes[0], ко второму –childNodes[1] и т.д. С помощью свойства nodeValue можно найти контент (содержимое) узла. Последовательное перемещение по объектной модели: 1. Обращение к объекту document, в котором находится DOM. Код на данном шаге имеет вид: document. 2. Обращение к корневому узлу (т.е. тэгу ), который находится внутри объекта document. Код на данном шаге имеет вид: document.documentElement. 3. Обращение ко второму потомку корневого узла, поскольку в коде страницы body располагается после head. Код на данном шаге будет иметь вид: document.documentElement.childNodes[1]. Можно напрямую обратиться к body, используя следующий код document.body. 4. Обращение ко второму потомку body (элемент

задан в коде после

). Код на данном шаге будет иметь вид: document.body.childNodes[1]. 5. Обращение к текстовому узлу, который является первым потомком

и его свойству. Код на данном шаге будет иметь вид: document.body.childNodes[1].childNodes[0].nodeValue. 16 Изменение свойств CSS Свойства элемента, заданные с помощью оформительских возможностей CSS, можно изменять с помощью объекта style. В стилевых свойствах, написание которых включает дефис, например, background-color, свойство записывается без дефиса, а часть после дефиса начинается с прописной буквы - backgroundColor. В приведенном далее коде строки таблицы приобретают цвет фона после выполнения кода JavaScript. 17

1	2
3	4

Если обращение к объекту происходит из самого объекта, то для обращения к объекту можно использовать ключевое слово this. Например, при создании ролловера, в котором изображение меняется при наведении мыши, и возвращается в прежнее состояние при сведении мыши с объекта. Это достигается изменением свойства src (source – источник) объекта img при наступлении событий mouseover и mouseout. Обращение к объекту происходит из самого объекта с помощью ключевого слова this: в элементе . • Файл myScript.js подключается к файлу myFile.html с помощью элемента 24 Код файла myStyle.css приведен далее. div { background-color:red; position:absolute; left:50px; top:50px; width:200px; height:200px; } 25 Код файла myScript.js приведен далее. function start(){ document.getElementById("d1").style.backgroundColor="green"; } var divBg=document.getElementById("but"); divBg.onclick=start; В переменной divBg сохранено обращение к элементу (кнопка) с id="but". var divBg=document.getElementById("but"); Следующая строка обеспечивает подключение обработчика события (функции start) в ответ на произошедшее в элементе (кнопке) событии click. divBg.onclick=start; 26 Задания по теме «Объектная модель браузера» (Browser object model (BOM)) и Объектная модель документа (Document object model (DOM)) Задание 1_BOM Цель: Знакомство с объектами, их свойствами, методами и событиями объектной модели браузера (Browser Object Model, BOM). 1. Познакомьтесь с методами объекта window. 1.1. Выведите на экран -окно предупреждения с помощью метода alert alert("Это окно предупреждения с одной кнопкой ОК"), -окно подтверждения с помощью метода confirm confirm("Вы согласны, что это окно подтверждения: в нем две кнопки-OK and Cancel?") -окно приглашения с помощью метода prompt prompt("Введите свою фамилию", "Студент…"). Поместите эту конструкцию в разделе 3. Выполните пример изменения фона слоя при щелчке на кнопке. При этом должно изменяться стилевое свойство background-color. Для решения этой задачи создайте три файла: myFile.html с HTML-кодом, myStyle.css со стилевыми свойствами, myScript.js с кодом JavaScript. Файл myStyle.css подключается к файлу myFile.html с помощью элемента в элементе . Файл myScript.js подключается к файлу myFile.html с помощью элемента 30 Код файла myScript.js приведен далее. function start(){ document.getElementById("d1").style.backgroundColor="green"; } var divBg=document.getElementById("but"); divBg.onclick=start; В переменной divBg сохранено обращение к элементу (кнопка) с id="but". var divBg=document.getElementById("but"); Следующая строка обеспечивает подключение обработчика события (функции start) в ответ на произошедшее в элементе (кнопке) событии click. divBg.onclick=start; 3.1 Запустите html-код и проанализируйте результаты работы трех файлов. 31 4. Выполните расположенный далее код и проанализируйте работу метода обращения к элементам страницы по имени тега (факультативно).

Первый абзац

Второй абзац

32