Тема 8. Объекты.

Объектная модель документа

Содержание:
1. Объекты. Свойства и методы объектов.
2. Объектная модель документа DOM.
3. Обращение к объектам.
4. Задание.

Объекты. Свойства и методы объектов

Для создания механизма управления страницами на клиентской стороне используется

объектная модель документа (DOM - Document Object Model). Суть модели в том, что
каждому HTML-контейнеру соответствует объект, который характеризуется тройкой:

 свойства
 методы
 события

Объектную модель можно представить как способ связи между страницами и браузером.
Объектная модель документа - это представление объектов, их методов, свойств и
событий, которые присутствуют и происходят в программном обеспечении браузера, в
виде, удобном для работы с ними из кода HTML и исходного текста сценария на странице.
Мы можем с ее помощью сообщать наши пожелания браузеру и далее - посетителю
страницы. Браузер выполнит наши команды и соответственно изменит страницу на
экране.

Объекты с одинаковым набором свойств, методов и событий объединяются в классы

однотипных объектов. Сами объекты появляются только после загрузки документа
браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не
обратиться к объекту, которого нет.

Встроенные объекты

Ниже перечислены встроенные объекты, свойства и методы которых доступны в

сценариях JavaScript без предварительного определения этих объектов.

Объект Описание
Array Массив
Boolean Логические данные
Date Календарная дата
Function Функция
Global Глобальные методы
Math Математические константы и функции
Number Числа
Object Объект
String Строки

1
Методы объекта Math

Метод Описание
sqrt (число) Возвращает квадратный корень из числа.

pow(основание, Возвращает результат возведения основания в указанную степень.

степень) Например, [Link](5, 3) вернёт 53=125.

random() Возвращает псевдослучайное число в диапазоне от 0 до 1.

randomInteger(min,
max) Возвращает псевдослучайное число в диапазоне от min до max.

ceil(число)
Производит округление в большую сторону, то есть возвращает наи
число, большее либо равное аргументу.

floor(число)
Производит округление в меньшую сторону, то есть возвращает наи
число, меньшее либо равное аргументу.

round(число) Округляет указанный аргумент до целочисленного значения.

cos(число) Возвращает косинус числа.

sin(число) Возвращает синус числа.

log(число) Возвращает натуральный логарифм числа.

Методы объекта Date

Создание экземпляра объекта Date с текущей датой и временем:

var a = new Date() - в переменной «а» текущая системная дата и системное время

var c = new Date(1958, 4, 21, 10, 15) - в переменной «c» дата – 21 мая 1958 года и время
10 часов 15 мин. Нумерация месяцев начинается с 0.

Описание
Метод

getTime() Возвращает примитивное значение объекта.

getYear() Возвращает номер года по местному времени

getMonth() Возвращает месяц по местному времени.

2
 getDate() Возвращает день месяца по местному времени.

getDay() Возвращает день недели по местному времени.

getHours() Возвращает часы по местному времени.

getMinutes() Возвращает минуты по местному времени.

getSeconds() Возвращает секунды по местному времени.

Пример 1. Скрипт отмечает точную дату и время открытия страницы:

Now = new Date();

dn= [Link]();
var dayn=new Array('воскресенье', 'понедельник', 'вторник', 'среда',
'четверг', 'пятница', 'суббота');
[Link]("Сегодня -" + dayn[dn] +", " + [Link]()+"-" +
[Link]() + "-" + [Link]() + ". Вы открыли страницу в:
" + [Link]() + ":" + [Link]() + " и " + [Link]()
+ " секунд.");

Иерархия классов DOM

Объектно-ориентированный язык программирования предполагает наличие иерархии

классов объектов. В JavaScript такая иерархия начинается с класса объектов window, т.е.
каждый объект приписан к тому или иному окну. Для обращения к любому объекту или
его свойству указывают полное или частичное имя этого объекта или свойства объекта,
начиная с имени объекта, старшего в иерархии, в который входит данный объект.

DOM (Document Object Model) - иерархическая модель документа. Окну браузера

соответствует объект window, а HTML-документу, загруженному в окно, – объект
document. Объект document входит в состав объекта window. В состав объекта document
входят другие объекты – элементы документа. Все множество объектов имеет
иерархическую структуру, называемую объектной моделью и образует коллекции (all,
forms, images и др.).

3
Коллекция - это структура данных JavaScript, похожая на массив. Отличие коллекции от
массивов заключается в том, что массивы программист создает сам в коде программы и
заполняет их данными; коллекции же создаются браузером и "населяются" объектами,
связанными с элементами Web-страницы. Коллекцию можно рассматривать как другой,
зачастую более удобный, способ доступа к объектам Web-страницы.

Например, если на странице имеются формы с именами f, g5 и h32, то у объекта document

есть соответствующие свойства-объекты document.f, document.g5 и т.д. Но, кроме того, у
объекта document есть свойство forms, являющееся коллекцией (массивом) всех форм, и
значит, к тем же самым объектам форм можно обратиться как [Link][0],
[Link][1] и т.д. Это бывает удобным, когда необходимо выполнить какие-то
действия со всеми объектами форм на данной странице. Указывая свойства того или
иного объекта, мы будем обычно коллекции писать со скобками: forms[], images[],
frames[], чтобы подчеркнуть, что это не обычные свойства, а коллекции.

Нумеруются элементы коллекции, начиная с нуля, в порядке их появления в исходном

HTML-файле. Доступ к элементам коллекций осуществляется либо по индексу (в круглых
или квадратных скобках), либо по имени (тоже в круглых или квадратных скобках, либо
через точку).

Пример объектной модели простой страницы:

<html> window
<h1> Моя страница</h1>
<img src=”[Link]” name=mypic>
<form name=”form1” id=”f1”> document
<input type=”text” name=”tt”
value=””>
<input type=”button” images forms
onclick=”f()”> Нажми здесь</button>
Таблица. Методы объекта Document
</form>
</html> mypic text button

Объект Window

var переменная = open(файл, имя_окна) - имя файла, который нужно отобразить в созданном
окне.

var переменная = open() - если параметр не задан, создается пустое окно. Тогда формирование
документа в этом окне нужно осуществлять динамически, с помощью метода [Link].

переменная.close() -

Объект Document

Метод Описание

4
close( )
закрывает поток ввода документа
open( )
открывает документ для ввода
clear()
очищает текущий документ из окна браузера

write( )
Записывает данные аргумента в документ
writeln( )

Способы обращения к объектам документа:

Любой доступ и изменения DOM происходит через объект document.

Стандарт DOM предусматривает несколько способов выбора элемента:

1. Использование метода getElements

getElementsById, getElementsByTagName и getElementsByName.

2. Доступ к компонентам объекта Document по индексу

[Link][0].elements[0]

3. Доступ к компонентам объекта Document по имени

[Link].form1 или document.form1

4. Доступ к компонентам объекта Document по условию

elements = [Link]('ul');

element = [Link] ('ul > li:last-child');

Пример изменения цвета текста на случайный:

<h1 id="lin" onClick="f1()" > Заголовок </h1>

<script>
function f1() {
var r = [Link]([Link]() * (256));
var g = [Link]([Link]() * (256));
var b = [Link]([Link]() * (256));
var c = 'rgb(' + r + ',' + g + ',' + b + ')';
[Link]("lin").[Link] = c;
}
</script>

Практическая работа №8. Объектная модель документа

1. На странице разместить элементы в соответствии с заданной структурой:

5
 window

document

Image1 Image2 Form Link h1 h2

Button1 Button2 Button3

2. Ввести заголовок «Обращение к объектам документа и браузера», изменяющим

размер или цвет шрифта (свойство fontSize и color) при наведении указателя
мыши.
3. Провести горизонтальную линию.
4. Разместить 2-3 рисунка.
5. Добавить подзаголовок «Форма с кнопками».
6. Задать для данных объектов идентификационные имена: im1, im2, f1, l1, id_h1,
id_h2, but1, but2, but3, .
7. Сформировать сообщение, содержащее следующую информацию о каждом
объекте:
 Номер объекта;
 Имя тэга;
 Id-значение.
Пример формирования строки:

mes=””;
for (i=0; i<[Link]; i++)
{ mes=mes+ i + " tagName= "+ [Link][i].tagName + " id=
"+[Link][i].id + "\n"}
В качестве разделителя строк используется параметр “\n”.

8. Кнопка Страница выводит в диалоговом окне список всех объектов с

информацией о них - [Link](mes).
9. Кнопка Даты выводит в диалоговом окне текущую дату и время и количество дней
до нового года.
10. Кнопка Линия изменяет цвет линии.
11. Кнопка Рисунок увеличивает размер рисунка при наведении мыши.

Пример выполнения задания: