|
|
|
|
JavaScript и объектная модель
|
Мельников Михаил
Михаил Мельников - дизайнер и основатель
студии "Cherry-Design" http://www.cherry-design.spb.ru
, находящейся в Санкт-Петербурге. Автор
ряда статей для начинающих web-дизайнеров.
Скриптовые языки в
некотором роде перевернули мир, и именно
благодаря им появился DHTML, который
позволяет делать со страничкой
практически что угодно. Как известно,
всего два языка претендуют на лавры
победителя в броузере. Это VBScript -
подмножество Visual Basic-а и JavaScript. Вот
последним мы и займемся, как наиболее
универсальным.
Сами по себе изучать
скриптовые языки не имеет смысла, т.к. они
тесно связаны с объектной моделью
броузера и, по сути дела, большая часть
скриптов просто устанавливает
соответствующие свойства объектов или
вызывает их методы.
Что такое объектная модель?
Давным-давно, когда
броузеры еще имели номер версии равный
единице, ничего подобного не было и в
помине. Информация просто выводилась на
дисплей по мере поступления, не
подвергаясь никаким изменениям. Все было
просто, и даже глюков совместимости еще не
было :)
Сейчас же путь странички
до дисплея гораздо дольше. Давайте
поэтапно проследим ее путь:
-
Страничка скачивается с сайта
и размещается в памяти компьютера
-
Производится анализ
странички, в результате которого она
препарируется на составляющие.
-
Блоки, из которых состоит
страничка (<body></body>, <head></head>,
<p></p> и т.д.) размещаются во
временной базе данных соответственно
структуре объектной модели.
-
База данных становится
доступной другим программам и, в
частности, рендеру, который выводит
страничку на экран. Для доступа и
управления содержимым этой базы данных
броузер предоставляет нам механизм
объектов и скриптовый язык, посредством
которого и выполняется доступ.
Разумеется, содержимое
базы может быть изменено до вывода на
экран, что и позволяет работать DHTML. Но
объектная модель остается работать даже
после того, как страничка показана на
экране дисплея. Это дает нам возможность в
небольших пределах (а в последних версиях
HTML 4.0 практически полностью) менять
содержимое странички после загрузки.
Структура объектной модели
Чтобы было понятно, о чем
мы говорим, рассмотрим общую структуру
объектной модели. Ниже приведена
объектная модель Internet Explorer-а версии 4 и
выше.
window - объект, дающий
доступ к окну броузера frames - объект, дающий
доступ к фреймам window... window... ... document - объект,
содержащий в себе всю страничку all - полная
коллекция всех тегов документа forms -
коллекция форм anchors - коллекция якорей appleеs
- коллекция апплетов embeds - коллекция
внедренных объектов filters - коллекция
фильтров images - коллекция изображений links -
коллекция ссылок plugins - коллекция
подключаемых модулей scripts - коллекция
блоков <script></script> selection - коллекция
выделений stylesheets - коллекция объектов с
индивидуально заданными стилями history -
объект, дающий доступ к истории посещенных
ссылок navigator - объект, дающий доступ к
характеристикам броузера location - объект,
содержащий текущий URL event - объект, дающий
доступ к событиям screen - объект, дающий
доступ к характеристикам экрана
Объектная модель Netscape
Navigator-а немного отличается от
вышеприведенной, но ее смысл точно такой
же. А использование JavaScript позволяет нам
обойти различия в реализации объектных
моделей.
Вместо того, чтобы
подробно объяснять каждый объект,
входящий в модель броузера, я буду
разъяснять смысл соответствующих
объектов, их свойств и методов на
конкретных примерах по мере возникновения
в том необходимости.
Как видите, структура
объектной модели достаточно сложна, но
строго определена, и существует
однозначный способ доступа к любому
свойству или методу. Синтаксис полностью
соответствует тому, что используется в
объектных языках. Т.е. нижележащие объекты
отделяются от вышележащих точкой, и для
доступа к конкретному свойству нужно
просто корректно построить строку доступа.
И, как Вы понимаете, вот
здесь-то на сцену и выходит скриптовый
язык, который и позволяет нам
манипулировать объектами.
Как любой язык
программирования, JavaScript имеет
определенный набор типов переменных,
операторов, встроенных функций и объектов.
Изучение JavaScript как такового как раз и
заключаются в запоминании всего этого. Но,
как Вы понимаете, оторванный от объектной
модели, он мало полезен сам по себе. А
потому я просто расскажу о популярных
эффектах, применяемых на страничках,
попутно давая пояснения. И надеюсь, что
если это Вас заинтересует, то более
сложные вещи Вы уже напишите сами.
Как и где размещать код скрипта?
Но сначала мы немного
отвлечемся от эффектов и поговорим о том,
как и где размещать JavaScript. Так как язык
скриптовый и рассчитан на работу на web-страничках,
то его код размещается непосредственно в
HTML-коде странички. Причем, код на JavaScript
обычно состоит из двух частей:
-
Функции, которые вызываются
из кода странички в ответ на какое-то
событие
-
Код событий, которые вызывают
функции :))
Описание функций должно
располагаться в теге <head></head> - это
гарантирует нам, что к моменту вызова
функции она уже будет находиться в памяти
компьютера. Для вставки кода используется
специальный тег <script>, в параметрах
которого мы и определяем конкретный язык.
Вот пример типичного описания JavaScript-вставки:
<script language="JavaScript">
<!--
function somefunction()
{
// здесь располагается код
функции
}
//-->
</script>
Обратите внимание, что
непосредственно сам код заключен в тег
комментария. Это сделано для того, чтобы
более старые броузеры игнорировали
непонятные им команды. Новые же программы
знают о существовании закомментированных
скриптов и им это не мешает.
Заметьте также, что
закрывающий тег комментария несколько
необычен и предваряется двумя косыми
чертами. Две косые черты - это комментарий
языка JavaScript, т.е. скрипт игнорирует все, что
идет после него. А сделана такая сложная
конструкция ради совместимости с Netscape,
который закрывающий HTML-комментарий
воспринимает как непонятную ему команду и,
соответственно, вызывает ошибку.
Ну вот, с основами
применения скриптов разобрались, а
примеры популярных и полезных эффектов,
реализованных при помощи JavaScript, мы
рассмотрим в следующей статье.
|
 |
[an error occurred while processing this directive] |
 |
|
|
|
|
