Объектная модель браузера. Описании сценариев.

Здравствуйте, уважаемые читатели!
Через этот промежуток летнего отпуска я рад снова приступить к своим обзорам. Честно сказать, перед написанием этого обзора я долго думал, как же преподнести ту громадную информацию по DHTML, которая существует... Но, поскольку данная рассылка все-таки называется "азы...", я решил начать действительно с основ. Возможно, что данный обзор покажется многим не очень интересным или уже знакомым, однако, возможно, для многих он будет открытием. По крайней мере, я посчитал, что обойтись без данных знаний многим, только начинающим разбираться в web-дизайне, данный обзор будет просто необходим.

Итак, приступим к рассмотрению объектной модели браузера.
Сразу предупреждаю, что дать полное и подробное описание нет возможности в небольшом обзоре (для этой темы пришлось бы делать отдельный цикл), впрочем, для нормального знания DHTML подобного и не нужно.

(Не могу удержаться от истории: впервые объектная модель появилась в браузере Netscape 2, за что его сразу же полюбили).
Объектная модель - интерфейс между исходным текстом страницы на языке HTML и программой браузера, которая в свою очередь создает окно и заполняет его элементами, которые определены на странице. Как это происходит не столь важно. Важно учесть другое: DHTML - теоретически платформенно-независимый язык, следовательно все браузеры, поддерживающие DHTML должны иметь одну и ту же объектную модель, иначе невозможно создать страницы корректно работающие в разных браузерах. Объектную модель можно определить как совокупность объектов, методов и свойств, а также событий, которые имеются и происходят в программном обеспечении браузера.

Теперь давайте поясним, что такое объекты, методы, свойства на простом примере.
Объектом мы можем назвать телевизор, который включается и выключается по установленному нами таймеру, но как это происходит знать для нас совершенно необязательно.
Метод - это способ работы с объектом (телевизором), кнопки включить, выключить, переключить канал (мы не указываем телевизору в каком порядке должны идти электроны из трубки, мы лишь нажимаем кнопки).
События - способ объекта сообщить нам о том, что произошло: телевизор выключится при долгом отсутствии изображения.
Свойства - это некие характеристики: громкость, яркость нашего телевизора (эти свойства мы можем менять). Или же свойства read-only (только для чтения): дата выпуска телевизора. (изменить их мы не можем, можем лишь обратиться к ним, спросить о них "телевизор")

После краткого описания того, что такое есть объектная модель, давайте приступим к описанию сценариев и того, что это такое. Образно говоря, сценарий- это способ научить страницу реагировать на события, давая возможность общаться с пользователем, чего не могли сделать страницы, написанные на языке HTML 3.2.
Откуда берутся события? (см. объектная модель браузера) Когда вы щелкаете по какому-то объекту в среде Windows, операционнная система формирует некое событие.
В случае с браузером и DHTML постоянный обмен событиями позволяет странице реагировать на сообытия идущие от браузера. И главное, именно создатель страницы может определить на какие события отвечать странице и какие инструкции дать при этом браузеру. Однако, чтобы страница отреагировала на событие, она должна его сначала получить. И мы решим, как длжен отреагировать браузер: например, при клике на ссылку браузер перейдет на другую страницу, но произойдет и событие onclick, отреагировать на которое мы и можем.
Итак, наша задача "захватить" событие и передав его коду на странице, решить нужна ли на него какая-то реакция.
Всего существует 39 событий, которые браузер может передать коду. Но! Каждому элементу в отдельности можн определить лишь ограниченное их количество. Например, тег <h2> поддерживает 14 событий, <img> - 25 и т.д. (Если вас заинтересует список тегов, поддерживающих то или иное событие, пишите, это будет представлено в следующих обзорах).

Маленькое, но необходимое отклонение от темы.
Языки на которых создаются сценарии: JavaScript, VBScript (а также различные "вариации": JScript- написанный Microsoft, например). Сразу вставлю пару слов о своей любимой теме - совместимости. Сценарии поддерживаются и NN и IE начиная с третьих версий. Но: IE 4 и выше поддерживает JavaScript, JScript, VBScript; NN поддерживает только Java Script (если в нем не установлен интерпретатор VBScript). Таким образом, на мой взгляд, стоит изучить Java Script, чем писать на очень похожем, и гораздо более простом в изучении и применении VBScript.
И еще пару слов о том, где расположить сценарий: он должен находится между тегами <script> и </script>, это ясно, но где на странице? Решать вам! Какие есть варианты и в чем их преимущества:
   - поместить сценарий в теге <head>. В этом случае код выполниться перед тем, как загрузиться содержимое страницы (например, для вставки времени или для того чтобы сделать предзагрузку картинок)
   - в конце страницы: тогда основная часть страницы будет загружена до того, как интерпретатор выполнит заданные кодом действия
   - в середине страницы - что-то среднее между двумя вариантами.
Решать вам, согласно вашим целям.

А теперь, после небольшого пояснения, вернемся к тому, как же возможно передать союбытие коду сценария на странице. Я не буду, по указанным выше причинам, рассматривать способы передачи события коду в языке VBScript, скажу лишь, что существует 4 способа. В Java Sсript не так много возможностей для обработки кода. У этого языка есть 2 особенности:
   - в нем поддерживаются только функции,
   - он понятен всем браузерам - это принятый стандарт. (см выше)
Самый привычный способ поймать событие

<script language=JavaScript>
<!--
function fun1(){    //объявление названия функции
if(confirm("Хочется загрузить эту страницу?")){    //окно подтверждения, если верно, то выполняется следующая строка
alert('Отлично! Уже загружено')    //после согласия будет загружена страница
}
else {alert('Ну и не надо! :((')
window.location.href="http://www.rusmedserv.com/pedsurg/"};    //если согласие не дано, то браузер будет переадресован на другую страницу.
}
//--></script>
А теперь как поймать событие:
<body onunload="fun1()">
Привет, рад, что загрузились!
</body>
При полной загрузке страницы будет выполнена функция fun1().

Второй способ - поместить код непосредственно в элемент:
<h2 onclick="alert ('Не кликай по мне!')">Кликни меня! </h2>

Третий способ - написать для каждого элемента свой код:
<h2 id=head2> Сделай двойной клик по мне! </h2>
<script for=head2 event=ondblclick>
<!--
alert('Отличный двойной клик!')
//-->
</script>

Есть еще пара способов, они используются для обработки событий на уровне window - главного элемента в объектной модели браузера. Например в IE мы можем использовать следующий способ:
<html onclick="fun2()">
При клике где - то на странице, будет выполнена функция fun2
И еще одна вариация. Данный метод не является общепринятым и похож на использование VBScript <h2 id=head2> Сделай двойной клик по мне! </h2>

<script >
<!-- function head2.ondblclick(){
alert('Отличный двойной клик!')}
//-->
</script>

<script >
<!-- 
function window.onload(){
alert('Я отлично загрузилась!')}
//-->
</script>