Сами по себе изучать скриптовые языки не имеет смысла, т.к. они
тесно связаны с объектной моделью броузера и, по сути дела, большая
часть скриптов просто устанавливает соответствующие свойства объектов
или вызывает их методы.
Что такое объектная модель?
Давным-давно, когда броузеры ещё имели номер версии равный единице,
ничего подобного не было и в помине. Информация просто выводилась на
дисплей по мере поступления, не подвергаясь никаким изменениям. Всё
было просто, и даже глюков совместимости ещё не было :).
Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим её путь:
- Страничка скачивается с сайта и размещается в памяти компьютера;
- Производится анализ странички, в результате которого она препарируется на составляющие;
- Блоки, из которых состоит страничка
(<body></body>, <head></head>,
<p></p> и т.д.), размещаются во временной базе данных
соответственно структуре объектной модели;
- База данных становится доступной другим программам и,
в-частности, рендеру, который выводит страничку на экран. Для доступа и
управления содержимым этой базы данных броузер предоставляет нам
механизм объектов и скриптовый язык, посредством которого и выполняется
доступ.
Разумеется, содержимое базы может быть изменено до вывода на экран,
что и позволяет работать DHTML. Но объектная модель остаётся работать
даже после того, как страничка показана на экране дисплея. Это даёт нам
возможность в небольших пределах (а в последних версиях HTML 4.0
практически полностью) менять содержимое странички после загрузки.
Структура объектной модели
Чтобы было понятно, о чём мы говорим, рассмотрим общую структуру
объектной модели. Ниже приведена объектная модель Internet Explorer-а
версии 4 и выше:
- window - объект, дающий доступ к окну броузера
- frames - объект, дающий доступ к фреймам
- 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.
(Материал с www.cherry-design.spb.ru)
|