Скриптовые языки в некотором роде
перевернули мир, и именно благодаря им появился
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, мы рассмотрим в
следующей статье.
Статьи веб-мастеру
Новичкам
