браузере, например перемещать рисунок в окне браузера. Для это- го в HTML-документ встраивают небольшую программу (сцена- рий), выполняемую по мере необходимости браузером. Стандарт- ным языком для написания сценариев является JavaScript. Фирма Microsoft разработала язык сценариев VBScript, но он не получил широкого распространения.

Динамичность страницам сайтов придается совокупностью языков HTML и JavaScript. В HTML для расширения возможно-

стей управления видом и расположением элементов на странице стали применяться каскадные таблицы стилей (Cascading Style Sheets или CSS). Браузер при открытии HTML-документа строит его объектную модель (Document Object Model или DOM), исполь- зуемую как при отображении документа, так и при его изменении скриптом. Организация World Wide Web Consortium (W3C) разра-

ботала стандарты на CSS и DOM. Версия HTML 4, поддерживаю- щая стандарты DOM и CSS, называется динамическим HTML (Dynamic HTML или DHTML).

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

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

Объектная модель документа имеет иерархическую структуру. На вершине иерархии находится объект window. Он имеет сле-

дующие дочерние объекты: navigator, screen, history, location, document.

В скриптах в основном используется объект document, так как он целиком описывает загружаемый в браузер HTML-документ. Объекты navigator, screen и history используются для справки о свойствах браузера и компьютера пользователя. Объект location удобно использовать для загрузки страниц или фреймов.

5

Структура HTML-документа. HTML-документ состоит из элементов (абзацев, гиперссылок, таблиц и т.д.). Элемент обычно делится на три части: начальный тег, содержимое и конечный тег. Название элемента появляется в начальном теге (<назва-

ние_элемента>) и в конечном (</название_элемента>). Пример элемента:

<H1> Структура HTML-документа</H1>

Начальный тег может содержать атрибуты, определяющие свойства элемента. Для некоторых элементов допускается отсутст- вие конечного тега (например, для тегов <P>, <TR>, <TD>). Не- которые типы элементов HTML-документа не имеют содержимо- го. Например, обрыв строки <BR> не имеет содержимого, его единственная задача − обозначить конец строки текста. Такие пустые элементы никогда не имеют конечного тега.

Элементы HTML-документа могут входить друг в друга, обра- зуя сложную иерархическую структуру.

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

В HTML-документе может быть несколько элементов с одина- ковым названием, например контейнеров DIV. Поэтому каждый элемент имеет атрибут ID – идентификатор элемента. Объекту, соответствующему элементу, автоматически присваивается ID этого элемента. Кроме того, объекты в модели нумеруются по по- рядку их появления в модели. Использовать номера объектов нуж- но осторожно, так как при внесении изменений в документ коли- чество и порядок объектов могут меняться.

Для идентификации некоторых элементов (FORM, IMG), кро- ме атрибута ID, используется атрибут NAME. Области действия ID и NAME совпадают лишь частично. Рекомендуется в случае од- новременного применения обоих атрибутов присваивать им оди- наковые значения.

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

6

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

∙ оnclick − указательное устройство щёлкает на элемен-

те;

∙ondblclick − указательное устройство дважды щёлкает на элементе;

∙onmousedown − кнопка указательного устройства «нажа- ла» на элемент;

∙onmouseup − кнопка указательного устройства отпущена над элементом;

∙onmouseover − указательное устройство проходит над элементом;

∙onmousemove − указательное устройство перемещается в тот момент, когда находится над элементом;

∙onmouseout − указательное устройство убирается с эле-

мента;

∙onkeypress − клавиша нажата и отпущена над элемен-

том;

∙onkeydown − клавиша нажата над элементом;

∙onkeyup − клавиша отпущена над элементом. Указательным устройством, как правило, служит мышка. Рассмотрим пример простейшей динамической страницы. До-

пустим, что в браузере после загрузки страницы видно только од- но слово − Письмо. При щелчке по этому слову всплывает малень- кое окошко с сообщением Это заголовок. HTML-код этой страни- цы:

<html>

<H1 onclick="window.alert('Это заголовок')">Письмо</h1> </html>

При загрузке этого документа браузер добавит в объектную модель объекты HEAD и BODY. Вставленный в заголовок H1

7