HTML-контейнеры как объекты программирования

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом не происходит перезагрузки страницы.

На практике это выражается в том, что можно, например, изменить цвет фона страницы , или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.

Объекты

Для реализации этой идеи была предложена объектная модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:

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

Свойства

Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря имеет атрибут href, который превращает его в гипертекстовую ссылку:

<a href=kuku.htm>kuku</a>

если рассматривать контейнер якоря <A ...>...</A> как объект, то атрибут href будет задавать свойство объекта якорь. Программист может изменить значение атрибута и, следовательно, свойство объекта:

document.links[0].href="kuku1.htm";

Значения не всех атрибутов можно изменять. Например, высота и ширина графической картинки определяются по первой загруженной в момент загрузки страницы картинки. Все последующие картинки, которые заменяют начальную, масштабируются до нее. Справедливости ради следует заметить, что в Microsoft Internet Explorer картинка может изменить размер.

Для общности картины свойствами в JavaScript наделены объекты, которые не имеют аналогов в HTML-разметке. Например, среда исполнения, которая называется объектом navigator или окно браузера, которое является вообще самым старшим объектом JavaScript.


начало страницы

Методы

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом документ связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа:

function hello()
{ id=window.open("","example","width=400,height=150");
id.focus(); id.document.open();
id.document.write("<h1>Hello JavaScript</h1>");
id.document.write("<hr><form>");
id.document.write("<input type=button value='Закрыть окно' "); id.document.write("onClick='window.opener.focus();window.close();'>"); id.document.close();
}

В этом примере метод open() открывает поток записи в документ, метод write() осуществляет эту запись, метод close() закрывает поток записи в документ. Все происходит так же, как и при записи в обычный файл. Если у окна есть поле статуса(обычно в нем отображается процент загрузки документа), то при незакрытом потоке записи в документ в нем будет "метаться" прямоугольник продолжения записи, как это происходит при загрузки документа.


начало страницы

События

Кроме методов и свойств объекты характеризуются событиями, которые с ними могут происходить. Собственно, суть программирования на JavaScript заключена в написании обработчиков этих событий. Например, с объектом типа button(контейнер INPUT типа button - "кнопка") может происходить событие "Click", т.е. на кнопку могут нажать. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события Click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать автор HTML-документа на JavaScript:

<input type=button value="Don't click here" onClick="window.alert('We repeate again: DON\'T CLICK HERE');">

Обработчики событий указываются в тех контейнерах, с которыми эти события связаны. Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad.


начало страницы