урок 7: объекты и события браузера
дополнительный материал

суть динамического web-программирования

Когда браузер загружает HTML-файл, он не просто отображает документ на экране, выполняя указания тегов, но и строит объект window, в котором содержится информация о документе, о свойствах окна, в котором документ изображается и информация о самом браузере.

Все это вместе называется объектной моделью документа (или браузера).

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

Построение собственных обработчиков событий наделяет документ программируемой интерактивностью.

пример

Встретив в HTML-коде тег

<IMG src=pic.gif>

браузер построит на экране картинку:

Если же написать

<IMG src=pic.gif onclick="alert('Привет!')">

то браузер тоже построит картинку, но не только. Когда по картинке щелкают мышью, срабатывает функция alert — метод объекта window:

Скрипт-значение “событийного” атрибута может быть очень длинным:

<IMG src=pic.gif onclick= "function Compare(a,b) { return a-b; } var a = new Array(26,71,9,1); var b = new Array(); for(var i=a.length; --i>=0;) b[i] = a[i]; b.sort(Compare); alert('Исходный массив: '+a+ '\nОтсортированный массив: '+b);">

Щелкни по картинке!

Длинный скрипт редко записывают прямо в теге, на котором возникает событие. Обычно в теге оставляют лишь обращение к функции, а саму функцию помещают в отдельный блок <SCRIPT>...</SCRIPT>:

<SCRIPT language=JavaScript>
  function Compare(a,b)
  {
    return a-b;
  }
  function Make()
  {
    var a = new Array(26,71,9,1);
    var b = new Array();
    for(var i=a.length; --i>=0;) b[i] = a[i];
    b.sort(Compare);
    alert('Исходный массив: '+a+
          '\nОтсортированный массив: '+b);">
  }
</SCRIPT>
<IMG src=pic.gif onclick="Make()">

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

Кроме того, в состав объекта document входят несколько специальных массивов со ссылками на объекты. Эти массивы (их называют коллекциями) удобно использовать для доступа к элементам модели без учета иерархии.

Так коллекция с именем all содержит объекты, построенные для всех тегов документа, а коллекция images — содержит объекты, построенные для тегов IMG.

Пусть документ закодирован так:

Тогда добраться до свойства src объекта, построенного для тега IMG можно следующими способами:

В качестве индекса массива (коллекции) разрешается использовать имя тега — браузер автоматически преобразует такой “индекс” в число.

Рассмотрим пример:

Если щелкнуть по картинке pic.gif, она заменится на картинку pic1.gif. Замена картинки задается кодом document.images[0].src="pic1.gif".

Ссылки на картинки хранятся в массиве images следующим образом. Первой картинке соответствует ссылка document.images[0], второй — document.images[1] и так далее.

Понятно, что использовать числовые индексы не очень удобно. Нужно высчитывать порядковый номер картинки в HTML-файле. Кроме того, вставка в HTML-файл нового тега IMG (или удаление) может привести к неверной работе скрипта, так как нумерация нарушается.

Вот почему на практике в качестве индекса массива используют не число, а имя тега, заданное атрибутом name — браузер сам преобразует это имя в правильный индекс.

Следующий код нечувствителен к вставкам и удалениям картинок в HTML-файле:

“Услужливые” браузеры (к которым относится Microsoft Internet Explorer) позволяют обратиться к объекту, построенному для картинки и еще более просто:

Браузер будет самостоятельно просматривать иерархические уровни модели, пока не найдет объект с именем pic.

управление логикой программного кода при помощи событий

Управление логикой программного кода при помощи событий — это вторая характерная черта ООП наряду с понятием объекта.

Немного упрощенно можно так объяснить разницу между классическим и объектно-ориентированным программированием.

Программа, написанная без принципов ООП, отражает иерархию логической структуры алгоритма:

главный модуль
  модуль01
    модуль0101
      модуль010101
      модуль010102
      ...
    ...
  модуль02
    модуль0201
      модуль020101
      модуль020102
      ...
    ...
 ...

Данные, попадающие на обработку в главный модуль, проходят, следуя кодам программы, по ветвям логической структуры, пока не окажутся полностью обработанными в каком-нибудь листе иерархического дерева.

Можно сказать, что в классическом программировании коды первичны, а данные вторичны.

В ООП нет единой структуры управления работой программы. Есть независимые друг от друга объекты:

объект01
объект02
объект03
...

Управление выполняется посредством событий: возникает событие, и браузер передает управление в нужный объект.

Например, на картинке выполнен щелчок. Браузер передает управление объекту, построенному для соответствующего тега IMG. Атрибут onclick="Fun()" является указанием: при возникновении события “щелчок мыши на теге IMG” запустить функцию Fun().

Таким образом, атрибуты onxxxxx="скрипт" позволяют добавлять в объекты браузера наши собственные коды. Если в объекте предусмотрена стандартная обработка события, то она выполняется после того, как закончена работа нашего обработчика.

Рассмотрим такой пример.

Когда пользователь щелкает по образу этого тега на экране:

<A href=f.htm>документ f</A>

браузер передает событие объекту, построенному для тега A. Для события “щелчок мыши” в этом объекте предусмотрен стандартный обработчик — он загружает в окно документ f.htm.

Давайте попробуем “перехватить” это событие:

<A href=f.htm
   onclick="alert('Хода нет?')">документ f</A>

Щелкаем по ссылке, на экране возникает надпись “Хода нет?”. Событие перехвачено? Закрываем окно alert, и видим, что браузер по-прежнему грузит документ f.htm.

Что произошло? При помощи атрибута onclick мы установили в объекте, “отвод” на собственный обработчик. Но когда скрипт нашего обработчика выполнен, управление возвращается к стандартному обработчику, и это вызывает загрузку документа f.htm.

Отключение стандартной обработки кодируется так:

<A href=f.htm
   onclick="alert('Хода нет!');return false">документ f</A>