Macromedia Dreamweaver MX

Подробнее о Web-сценариях

Здесь будет рассказано о задачах, успешно решаемых с использованием Web-сценариев. Далее будет дан краткий урок основ JavaScript, после чего мы с вами перейдем к рассмотрению стандартных сценариев, поддерживае­мых Dreamweaver. Автор не ставит цели сделать из вас знатоков JavaScript — в конце концов, эта книга совсем о другом. Если же вы хотите побольше узнать об этом языке, найдите другие книги, благо сейчас их издано очень много.

Итак, пора дать ответ на вопрос...

Зачем нужны Web-сценарии

Web-сценарии могут быть применены везде, где не может быть использован "чистый" HTML, т. е. там, где элементы страницы должны вести себя так, как стандартом HTML не предусмотрено.

Возьмем ту же самую анимацию. За очень небольшим исключением (на­пример, нестандартный тег <marquee>, поддерживаемый Internet Explorer), элементы страницы не могут по ней двигаться. Если вам все же нужно, что­бы они двигались, не обойтись без применения Web-сценариев. Зная язык JavaScript, вы с легкостью реализуете нужное поведение элементов, застави­те их летать с требуемой скоростью и по желаемой траектории. HTML такое не может.

Очень часто Web-сценарии используются для изменения содержимого Web - страницы или даже для создания нового содержимого в ответ на действия пользователя. В частности, при наведении курсора мыши на гиперссылку рядом с ней может появляться краткое описание, либо изображение- гиперссылка может менять свой вид. (Кстати, такие "горячие" изображения, меняющиеся при наведении на них курсора мыши, мы уже создавали в гла­ве 3 при помощи Dreamweaver. Такие "фокусы" реализуются также с по­мощью Web-сценариев.) Иногда содержимое Web-страницы корректируется сразу же в процессе ее загрузки Web-обозревателем, что достигается поме­щением в HTML-код сценариев, исполняющихся при загрузке.

Вообще, фантазия ¥еЬ-дизайнера, решившего создать интерактивную Veb - страницу с использованием ¥еЬ-сценариев, почти ничем не ограничена. (Ограничения, конечно, существуют, но их очень мало, и касаются они, в основном, доступу к содержимому дисков клиентского компьютера.) В на­стоящее время существуют даже ¥еЬ-страницы, содержимое которых может изменяться самим пользователем прямо в окне ¥еЬ-обозревателя. (Другой вопрос: зачем это нужно?..) На страницах может отображаться, например, текущее время, причем, "часики" действительно будут "тикать". Также Veb - сценарии часто используются для правильного размещения на странице свободно позиционируемых элементов. В частности, можно создать свобод­ный элемент, который при любых изменениях размеров окна Yeb-o6o - зревателя всегда будет находиться в его центре.

С помощью ¥еЬ-сценариев можно создать принципиально новый интер­фейс пользователя для своей страницы. На многих страницах применяется иерархический список, в котором перечислены все разделы и подразделы сайта. Такие страницы напоминают окно Проводника Ymdows. Часто с по­мощью свободно позиционируемых элементов и сложных ¥еЬ-сценариев создают принципиально новые элементы управления для ввода данных, не снившихся даже самой великой и ужасной Yindows. Но это уже — удел дос­таточно опытных программистов.

Ну и, конечно, ¥еЬ-сценарии применяются для написания настоящих про­грамм, использующих в качестве интерфейса ¥еЬ-страницы. Известны, на­пример, игры "15", "Лото", различные головоломки и викторины, созданные на основе ¥еЬ-сценариев и размещенные в Интернете. Часто таким же об­разом создаются и более серьезные программы, например, утилиты подбора цветов для ¥еЬ-страниц или даже целые ¥еЬ-редакторы, конечно, не очень сложные.

Вообще, создание таких вот ¥еЬ-программ — достаточно новая область деятельности, еще даже толком не развившаяся, но довольно перспектив­ная. В самом деле, такие программы очень просто распространять и сопро­вождать. Они не требуют создания разработчиком дистрибутивного пакета, иной раз весьма "увесистого", и распространения его каким-либо образом, а потенциальным пользователям не придется его подолгу загружать. Они не требуют установки на компьютере пользователя, а становятся доступны сра­зу после набора в окне ¥еЬ-обозревателя нужного адреса. А при создании новой версии такой программы разработчику достаточно будет только обно­вить на своем сайте соответствующую ¥еЬ-страничку.

¥еЬ-программы имеют только два недостатка. Во-первых, они доступны только после подключения к Интернету. (Хотя, конечно, их можно распро­странять на дискетах, СО, по электронной почте и другими путями.) Во-вторых, из-за ограничений интерпретатора Лауа5спр1 с помощью таких программ невозможно сохранение документов на дисках клиентского ком­пьютера.

Язык JavaScript

Выше автор предупреждал, что не будет давать вам полный курс JavaScript. Эта книга не о JavaScript, а о Macromedia Dreamweaver MX, а все остальное вторично. Если вы хотите побольше узнать о JavaScript, принципах написа­ния программ на этом языке и, вообще, о "классическом" программирова­нии, найдите хорошие книги по этой теме. А мы вернемся к Dreamweaver.

Но, для того чтобы вы поняли, что есть на самом деле Web-сценарии, необ­ходимо провести хотя бы краткий ликбез. И сейчас он будет проведен.

Давайте вернемся к уже знакомому нам HTML. Что он собой представляет? Набор тегов, описывающих внешний вид и (отчасти) структуру представле­ния данных, которые будут отображаться в Web-обозревателе. HTML, как вы помните, язык описания данных.

JavaScript же — язык описания алгоритмов обработки этих самых данных. Поэтому он содержит набор инструкций, предписывающих выполнение тех или иных действий над данными. Чтобы облегчить работу программиста, способ написания этих инструкций максимально приближен к обычной ма­тематической нотации, слегка "разбавленной" словами обычного английско­го языка. (Вот еще один повод взяться за английский.)

Такие инструкции, описывающие действия над данными, называются вы­ражениями. Выражения состоят из операторов и операндов; операторы опи­сывают сами действия, а операнды — данные, над которыми будут произво­диться эти действия. Причем, операндами могут быть как константы (чис­ла, строки, даты, одним словом, неизменяемые значения), так и переменные (специально отведенные ячейки для хранения промежуточных результатов вычислений).

Давайте рассмотрим одно из таких выражений:

B = z / t;

Это выражение делит значение переменной z на значение переменной t и

Результат помещает в переменную ь. Как вы уже поняли, знак обознача­

Ет оператор деления, а знак "=" — оператор присваивания значения какой - либо переменной. Знак помещенный в конце выражения, обозначает, собственно, его конец; встретив этот знак, интерпретатор JavaScript считает выражение законченным.

Вот еще два выражения:

Sum = al + а2 + аЗ — 20;

Square = х * у;

Первое выражение складывает друг с другом значения переменных al, а2 и аЗ, после чего вычитает из результата 20 и помещает его в переменную sum.

Второе выражение перемножает значения переменных х и у и помещает ре­зультат в переменную square.

Чтобы управлять порядком вычисления выражения, вы можете использо­вать скобки:

S = (а + Ь) / (с — d) ;

В этом выражении сначала будет вычислена сумма а и ь, потом — разность с и d, после чего сумма будет поделена на разность. Если бы мы не исполь­зовали скобки, то выражение имело бы вид:

S = a + b/ с — d;

При этом сначала было бы вычислено частное от деления ь на с, после чего к нему была бы прибавлена а, а затем из этой суммы вычлось бы d. Попро­буйте подставить вместо а, ь, с и d реальные числовые значения и вычис­лить результаты этих выражений. Вы увидите, что они получатся разными.

В JavaScript можно написать и так:

А = а + 1;

И это выражение будет правильным. Оно предписывает интерпретатору из­влечь значение из переменной а, увеличить его на единицу и поместить в ту же переменную. Это выражение можно записать и короче:

А += 1;

Или совсем сжато:

А++;

Кстати, любая переменная перед тем, как будет использована, должна быть объявлена. Объявление переменных выполняется с помощью специального оператора объявления var:

Var al, а2, аЗ, х, у

Объявляемые переменные просто перечисляются после этого оператора, после чего их можно использовать в сценарии. Такие переменные называ­ются глобальными, т. к. могут быть использованы где угодно в программе.

Говорилось, что переменные могут содержать какие угодно данные. В са­мом деле, посмотрите сюда:

А = 10;

S = "Строка символов";

Здесь первой переменной присваивается числовое значение, а второй — строка (строковое значение). (Вообще, Web-сценарии, как правило, чаще обрабатывают текст, а не числа, так что в этом нет ничего необычного.)

В общем, одна переменная всегда содержит одно значение. Если перемен­ной присвоить новое значение, то старое значение пропадет. Но существует другой вид переменных, которые могут содержать несколько значений. Та­кие переменные называются массивами. Отдельные значения, содержащиеся в массиве, называются его элементами', доступ к элементам массива осуще­ствляется с помощью так называемого индекса.

Var arr; arr[Q] = 1; arr[l] = 2;

Arr[5] = arr[Q] + arr[l];

Как видите, индекс элемента массива указывается после его имени в квад­ратных скобках; этим массив и отличается от обычной переменной (скаля­ра). Сам массив объявляется точно так же, как обычная переменная, и со значениями его элементов можно делать то же самое, что и со значениями обычных переменных. Заметьте, что специально объявлять его как массив не нужно — как только вы при обращении к переменной укажете индекс элемента, интерпретатор JavaScript тут же преобразует переменную в мас­сив.

Для примера был создан одномерный массив. Но бывают и массивы дву­мерные:

Var arr2; агг2 [0] [0] = 0; агг2 [0] [1] = 1; arr2[1][0] = 2; arr2 [1] [1] = 3;

Ключевыми словами называются специально зарезервированные слова, обо­значающие некоторые операторы языка программирования. Так, условный оператор if—eise состоит из двух ключевых слов. Он позволяет выполнить какое-либо выражение только в том случае, если становится верным какое - либо условие. Если условие верно, выполняется выражение, стоящее после ключевого слова if, а если неверно, — стоящее после ключевого слова eise. Говорят, что оператор if-eise организует ветвление.

Ниже приведен пример использования этого оператора.

If (х == 1) f = 2

Eise f = 12;

Здесь, если значение переменной х равно единице, переменной f присваи­вается 2, в противном случае — 12.

Если в какой-либо из частей оператора if-eise нужно выполнить несколько выражений, используется так называемое составное выражение.

If (х == 1) {

F = 2; h = 3; } eise { f = 12; h = 14; }

Как видите, составное выражение состоит из нескольких простых выраже­ний, помещенных внутрь фигурных скобок. Интерпретатор JavaScript счита­ет их одним выражением.

Существует также "урезанная" форма оператора if-eise, без части eise. В этом случае, если условие неверно, никакого кода не выполняется.

If (х == 1) {

F = 2; h = 3; }

Существует также оператор-переключатель switch-case. Этот оператор заме­няет множество операторов if-eise.

Switch (а) { case 1 :

Out = "Единица"; break; case 2 :

Out = "Двойка"; break; case 3 :

Out = "Тройка"; break; default :

Out = "Другое число";

}

Если значение переменной а равно 1, переменной out будет присвоено зна­чение Единица (часть case l). Если значение переменной а равно 2, то пере­менная out получит значение Двойка (часть case 2), и т. д. Если же пере­менная а содержит значение, не перечисленное в списке case, выполняется часть default, и out принимает значение другое число.

Как видите, оператор-переключатель просто выполняет разные фрагменты кода в зависимости от значения переменной, находящейся в скобках после ключевого слова switch. Поэтому он и называется переключателем.

Оператор цикла for позволит вам выполнить какое-либо выражение (про­стое или составное) нужное количество раз, т. е. организовать цикл со счет­чиком. При этом на каждом проходе цикла содержимое переменной - счетчика будет сравниваться с конечным значением, и если оно его превыша­ет, цикл немедленно завершается. В противном случае содержимое счетчика увеличивается или уменьшается на единицу, и выполняется новый проход цикла.

Рассмотрим применение оператора for на примере.

For (і = 1; і < 101; і++) { а = а * і; b = Ь + і;

}

Первая строка сообщает интерпретатору JavaScript следующее:

□ переменная і будет использоваться в качестве счетчика цикла, т. е. в ней будет находиться значение количества уже выполненных проходов цикла;

□ начальное значение счетчика — 1 (і = l);

□ конечное значение счетчика — 100, т. е. повторять цикл нужно, пока со­держимое счетчика і остается меньше 101 (i < loi);

□ при каждом проходе цикла нужно будет увеличивать значение счетчика на единицу (i++; оператор ++ указывает увеличить значение какой-либо переменной на единицу, другими словами, инкрементировать, и помес­тить его в ту же переменную). (Оператор ++ называется оператором ин­кремента.)

В результате выполнения приведенного выше выражения в переменной а будет находиться факториал от 100, а в переменной ь — сумма от 1 до 100.

Кроме цикла со счетчиком, в JavaScript можно организовать и циклы без счетчика, так называемые циклы с условием. Они выполняются до тех пор, пока остается истинным какое-либо условие. Это циклы do-while и whiie.

Сначала рассмотрим цикл do-whiie.

Do {

А = а * і + 2; і = ++і;

} while (а < 100);

Этот цикл будет выполняться, пока значение переменной а остается мень­ше 100. Заметьте, что условие проверяется после прохода цикла, поэтому этот цикл выполнится хотя бы один раз, даже если условие будет изначаль­но ложно.

В цикле while условие проверяется перед проходом цикла, поэтому, если условие изначально ложно, цикл не выполнится ни разу.

While (а < 100) { а = а * i + 2; i = ++i;

}

Оператор завершения break немедленно завершает цикл, а оператор продол­жения continue — продолжает цикл, т. е. прекращает выполнение текущего прохода и начинает выполнение следующего (конечно, если условие завер­шения цикла это допускает).

While (а < 100) { i = ++i;

If (i > 50) break; if (i < 5) continue; a = a * i + 2;

}

Попробуйте сами разобраться, как работает вышеприведенный пример.

Если вам нужно выполнять в нескольких местах программы один и тот же фрагмент кода с разными числовыми значениями, вы можете создать на его основе функцию. Функция — это фрагмент кода, оформленный особым об­разом, который может быть вызван из различных мест программы и из дру­гих функций. Функция может принимать любое количество параметров и возвращать один результат, который может быть использован в дальней­ших вычислениях.

Давайте рассмотрим небольшой пример функции, увеличивающей передан­ное ей значение на два и возвращающей результат.

Function valuePlus2(v) { var с; с = v + 2; return с;

}

Автор назвал нашу функцию vaiuePius2 и передал ей единственный пара­метр v (см. в скобках после имени функции). Код, находящийся внутри функции, сначала объявляет локальную переменную с, "видимую" только внутри этой функции (вызвавшая функцию программа не сможет к ней об­ратиться). Далее этой переменной присваивается сумма значения передан­ного параметра v и 2. Последний оператор возвращает результат вызвавшей функцию программе (return — оператор возврата значения).

Как можно использовать полученную функцию? Например, так:

H = d + valuePlus2(г);

Здесь мы передаем функции vaiuePius2 значение г и используем возвра­щенный результат в выражении. В частности, мы складываем его с d и при­сваиваем результат h.

Кстати, нашу функцию можно было написать значительно короче и опти­мальнее. (Да, и здесь оптимизация!)

Function valuePlus2(v) { return v + 2; }

Опытные программисты так и пишут. Во-первых, код становится проще и "прозрачнее". Во-вторых, что еще важнее, код становится меньше и быстрее.

Функция может и не принимать параметров:

Function someFuncl() { return 2+2; }

Функции могут вызывать друг друга:

Function valuePlus3(v) { return valuePlus2(v) + 1; }

На этом краткий курс основ языка JavaScript подошел к концу. Нам оста­лось рассмотреть только объекты.

Объекты

Выше были рассмотрены два вида переменных: обычные переменные, иначе говоря, скаляры и массивы. Скаляры могут содержать только одно значе­ние, массивы же — множество пронумерованных значений, доступ к кото­рым можно получить по их номеру — индексу. И скаляры, и массивы нахо­дят свое применение в программах на JavaScript; нет смысла рассказывать, в каких случаях что применять, — это и так очевидно. Давайте лучше по­говорим еще об одном виде переменных, которого мы до сих пор не ка­сались.

Это объекты.

Объектом называется сложный тип данных, содержащий не какое-то одно значение, а целую сущность. Эта сущность может иметь набор свойств и методов, с помощью которых программа может ей управлять; свойство — это своего рода переменная, принадлежащая объекту, а метод — функция, также принадлежащая объекту и выполняющая над ним какие-либо дейст­вия. Объект (и сущность, содержащаяся в нем) представляет собой "вещь в себе"; ее внутренняя структура и принцип действия неизвестны исполь­зующему объект программисту.

В качестве примера объекта можно рассмотреть прекрасно знакомый вам Web-обозреватель. У него есть свойство "адрес" и метод "открыть Web - страницу, которой принадлежит этот адрес". Вы можете присвоить этому свойству нужный адрес, а также можете его оттуда считать и присвоить ка­кой-либо переменной или использовать иным способом:

CurrentWebBrowser. address = "Http://www. w3c. org"; currAddr = currentWebBrowser. address + "/css/";

Именно такой синтаксис используется для доступа к свойствам: <имя объек­та>. <имя свойства> (не забудьте поставить знак точки). В первом случае мы поместили В СВОЙСТВО address объекта currentWebBrowser строку С интернет - адресом комитета WWWC. Во втором случае мы извлекли из этого свойства находящийся в нем адрес, прибавили к нему справа текст "/css/" и при­своили переменной currAddr. (Как видите, для слияния (или конкатенации) строк использовался оператор +.)

Для вызова метода используется аналогичный синтаксис: <имя объекта>. <имя метода> ( ). Сейчас мы вызовем метод до вышеупомянутого объекта:

CurrentWebBrowser. до();

Метод до — не что иное, как обычная функция. В данный момент возвра­щенное ей значение игнорируется, но в других случаях оно может исполь­зоваться. Также метод, как и любая функция, может принимать параметры:

CurrentWebBrowser. goTo("Http://www. w3c. org");

Таким образом мы можем управлять Web-обозревателем. И — заметьте — ничего не зная о его внутреннем устройстве. Более того, мы не обязаны о нем знать. Использование объектов как раз и направлено на то, чтобы позволить программистам пользоваться различными инструментами и до­полнительными компонентами, не зная их внутреннего устройства, а также создавать такие инструменты и компоненты для своих коллег.

Говорят, что JavaScript — объектно-ориентированный язык программирова­ния, т. к. использует объекты. Этим он отличается от обычных, процедурных языков, которые используют только функции.

Каждый объект перед тем, как с ним можно будет работать, должен быть создан. Выполняется это с помощью оператора создания объекта new.

Var currentWebBrowser; currentWebBrowser = new WebBrowser();

Здесь объявляется переменная currentWebBrowser и ей присваивается вновь созданный с помощью оператора new объект. Этот объект создан на основе класса WebBrowser, который является как бы шаблоном для создаваемых объектов. A currentWebBrowser также иногда называется экземпляром класса

WebBrowser.

Удалить ненужный объект можно с помощью метода deiete. currentWebBrowser. deiete();

Имейте в виду, что ненужные объекты, созданные вами, всегда надо уда­лять, чтобы освободить ресурсы системы. Исключение составляют только системные объекты, создаваемые самим интерпретатором или предоставляе­мые интерпретатору Web-обозревателем. Если вы попытаетесь удалить сис­темный объект, интерпретатор выдаст сообщение об ошибке. О системных объектах мы поговорим ниже.

Но каким же образом создаются классы объектов? Исключительно просто. Более того, если бы остальные языки объектно-ориентированного програм­мирования увидели, как легко создаются классы в JavaScript, они бы умерли от зависти.

Взглянем еще раз на выражение, с помощью которого создаются объекты:

CurrentWebBrowser = new WebBrowser();

Согласитесь, это сильно напоминает вызов функции. Но дело в том, что WebBrowser — и есть функция, только специальным образом написанная. Она называется конструктором класса.

Давайте напишем конструктор для класса WebBrowser.

Function WebBrowser О {

This. address = "Http://www. server. ru/my_home_page. htm";

}

Этот код создает в классе WebBrowser одно-единственное свойство address. Обратите внимание на синтаксис, с помощью которого это делается. В ка­честве имени класса используется ключевое слово this, обозначающее те­кущий класс. Интерпретатор JavaScript создает свойства класса сразу же при первом обращении к ним; вот и в нашем случае он создал свойство address и дал ему значение, присвоенное нами.

Конструктор может принимать параметры:

Function WebBrowser(homePage) { this. address = homePage;

}

Таким образом мы можем передать конструктору класса адрес домашней страницы, с которой начнется путешествие по Интернету.

Var currentWebBrowser;

CurrentWebBrowser = new WebBrowser("Http://www. server. ru/home_page. htm");

"Но, позвольте! — скажете вы. — А как же создаются методы класса?" Тоже очень просто.

Прежде всего, нам нужно написать функцию, реализующую этот метод.

Function fGoTo(pageAddress) { this. address = pageAddress;

}

Мы назвали эту функцию fGoTo. Это имя состоит из буквы f (от англ. function — функция) и имени метода дото, который она реализует.

Теперь перепишем функцию-конструктор таким образом, чтобы создать но­вый метод доТо.

Function WebBrowser(homePage) { this. address = homePage; this. goTo = fGoTo;

}

Как видите, мы "присваиваем" написанную нами функцию fGoTo свойст­ву дото класса WebBrowser. После этого можно вызывать метод дото этого класса.

Var currentWebBrowser;

CurrentWebBrowser = new WebBrowser("Http://www. server. ru/home_page. htm"); currentWebBrowser. goTo("Http://www. w3c. org");

Только что вы научились создавать простейшие классы. Но на самом деле вам в очень редких случаях придется делать это. Куда чаще вы будете поль­зоваться уже готовыми системными классами, предоставляемыми самим ин­терпретатором JavaScript и другими программами, например Web-обо­зревателем. Поэтому давайте поговорим о системных классах.

Системных классов, предоставляемых программисту интерпретатором, до­вольно много. Среди них есть, например, класс Date, предназначенный для работы со значениями даты и времени.

Var d;

D = new Date();

Только что мы создали объект класса Date. Так как мы не передали пара­метр в функцию конструктора этого класса, интерпретатор поместил в этот объект значение текущей даты. После этого можно, например, узнать номер дня недели:

Var dayNumber; dayNumber = d. getDayO;

Или выяснить год:

Var year;

Year = d. getFullYear() ;

Некоторые методы класса Date перечислены в табл. 13.1.

Как видите, класс Date предусматривает полный набор методов для работы со значениями даты и времени. Другие системные классы также имеют дос­таточно большие наборы свойств и методов, которые мы не будем здесь рассматривать.

Системный класс Math — другого рода. Он включает набор свойств и мето­дов, реализующих различные математические и тригонометрические функ­ции. Единственный его объект создается самим интерпретатором JavaScript при запуске и уничтожается при завершении работы. Так что вам не нужно самим создавать объекты этого класса. Это как раз типичный случай сис­темного объекта.

Var f;

F = Math. sin(Math. PI);

В результате вычисления вышеприведенного выражения в переменной f окажется значение sin (л).

Существуют также системные классы Number и string, служащие для хране­ния данных соответственно числового и строкового форматов, и несколько других системных классов, используемых значительно реже.

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

Var s, 1; s = "JavaScript";

1 = s. length;

Здесь мы сначала помещаем в переменную s строку "JavaScript", а потом вызываем свойство length этой переменной. В таком случае интерпретатор считает переменную s объектом класса st ring и беспрепятственно "пускает" нас к свойству length этого класса, возвращающему длину строки текста, которую мы и помещаем в переменную 1.

Аналогичный "финт" можно проделать и с числовой величиной:

Var a, s; а = 16765247; s = a. toStringO ;

Здесь вызываем метод tostring класса Number, возвращающий строковое представление числа.

Раньше говорилось, что, помимо интерпретатора JavaScript, системные классы могут представляться также и другими программами. К числу этих самых "других" программ относится Web-обозреватель. Его классы и сис­темные объекты — это что-то особенное...

Объектная модель документа (DOM)

А теперь настало время поговорить о классах и объектах Web-обозревателя подробнее.

Давайте посмотрим на какую-нибудь Web-страницу. Что она собой пред­ставляет? Фактически, иерархию элементов. Мельчайшие элементы стра­ницы, например текстовые абзацы, являются потомками более крупных и сложных элементов, например, свободно позиционируемых элементов. Свободные элементы, в свою очередь, могут находиться в других свободных элементах или непосредственно в самой странице. Получается весьма слож­ная многоуровневая структура, в которой одни элементы зависят от других.

Описать такую структуру можно с помощью объектов. Точнее, сложной иерархии объектов, вложенных друг в друга и зависящих друг от друга. Та­кая структура называется объектной моделью документа (Document Object Model, DOM). Все современные программы Web-обозревателей представля­ют Web-страницу как иерархический набор объектов.

Какое преимущество дает пользователям такой подход? Никакого. Все это рассчитано только на программистов, разрабатывающих Web-сценарии.

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

Например, именно таким образом на Web-странице создаются анимирован­ные элементы (см. главу 12). Также с помощью сценариев можно изменять цвета, параметры шрифта и даже само содержимое элементов страницы. Более того, так можно управлять и самим Web-обозревателем: открывать и закрывать вспомогательные окна, перемещаться взад-вперед по списку "ис­тории" и даже принудительно загружать нужные Web-страницы без участия пользователя.

Неужели вы думали, что Web-программисты пройдут мимо такой возмож­ности! Если вы думаете, что пройдут, — вы плохо их знаете. Вспомните, например, что говорилось в предыдущей главе об анимации. Едва появилась возможность немного подвигать по странице тем или иным рисунком, как Web-программисты эту возможность реализовали. А сейчас анимацию под­держивают даже Web-редакторы, и Dreamweaver тому пример.

Но хватит говорить на отвлеченные темы! Давайте все-таки займемся объ­ектной моделью документа.

Сначала выясним, каким образом можно получить доступ к нужному эле­менту. Для этого ему необходимо дать уникальное имя. Делается это с по­мощью атрибута id или name. Атрибут id поддерживается практически всеми тегами HTML, атрибут name — только некоторыми. К тегам, поддерживаю­щим этот атрибут, относятся формы, элементы управления, фреймы, гипер­ссылки и некоторые другие.

Но почему же нельзя пользоваться только атрибутом id? Все дело в прокля­той несовместимости Navigator 4jc и интернет-стандартов. Старые версии Navigator используют атрибут id только для присвоения элементам стилей, а для задания имен признают только атрибут name. Видите, какая морока!..

Дав с помощью атрибутов id или name элементу страницы уникальное имя, вы можете обращаться к нему из сценария, вызывая его методы и свойства. Интерпретатор сам найдет нужный элемент по его имени. Для доступа к элементу страницы в Internet Explorer используется синтаксис:

<Имя элемента, заданное в атрибутах ID или NAME>.<Свойство или метод>

Если же вы пишете сценарий для Navigator 4.x, делайте так:

Document["<Имя элемента, заданное в атрибуте NAME>"]. <Свойство или метод> Давайте приведем небольшой пример, поясняющий вышесказанное.

<Р ID="para" STYLE="color: #0000ЕЕ">Некий текст.</Р>

Сначала мы создали текстовый абзац, назвали его para (обратите внимание на значение атрибута id) и присвоили ему встроенный стиль, задающий цвет текста. Сейчас мы этот цвет текста изменим, воспользовавшись Web - сценарием.

Para. style. color = "#ЕЕ0000";

Здесь нужны дополнительные пояснения. Дело в том, что каждый элемент страницы в объектной модели документа имеет внутренний объект style, дающий доступ к его встроенному стилю. Обратиться к этому объекту мож­но через одноименное свойство, что мы и сделали. А уж объект style пре­доставляет доступ ко всем атрибутам встроенного стиля через одноименные свойства. В данном примере для получения доступа к значению атрибута стиля color использовалось свойство color.

Вы можете изменить выравнивание текста этого абзаца, обратившись к свойству align:

Para. align = "center";

Свойство align предоставляет доступ к значению атрибута align тега <р>.

К несчастью, вышеприведенный пример будет работать только в самых по­следних программах Web-обозревателей. Пресловутый Navigator 4х не по­зволяет изменять внешний вид и содержимое элементов страницы после ее загрузки. Исключение составляют только графические изображения, фрей­мы и слои.

А вот этот код будет работать везде:

<IMG NAME="someImage" SRC="imagel. gif">

Document["somelmage"].src = "image2.gif";

Он меняет файл, содержимое которого отображается в элементе графиче­ского изображения, на другой. Для этого он присваивает иное значение свойству src объекта somelmage, предоставляющее доступ к атрибуту src тега

<IMG>.

Чтобы получить доступ к самой Web-странице, воспользуйтесь системным объектом document. В частности, вы можете задать цвет гиперссылок, вос­пользовавшись свойством linkcolor, предоставляющим доступ к значению атрибута link тега <body>:

Document. linkColor = "#FFQQQQ";

Оба рассмотренных нами объекта представляют собой соответственно ви­димый элемент страницы и саму страницу. Оба этих объекта были созданы с помощью тегов HTML. Теперь же мы начнем рассмотрение объектов, не являющихся элементами страницы. Это объекты Web-обозревателя, не ви­димые пользователю.

Объект document имеет внутренний объект location, предоставляющий дос­туп к интернет-адресу страницы и различным его частям. Доступен он через одноименное свойство. Воспользовавшись этим объектом, мы можем узнать, с какого интернет-адреса была загружена данная страница:

Address = document. location. href;

Выяснить имя файла этой страницы:

Filename = document. location. pathname; либо загрузить другую страницу:

Document. location. href = "http ://Www. othersite. ru/otheграде. htm";

Объект window представляет текущее окно Web-обозревателя либо текущий фрейм, если страница загружена во фрейме. С помощью этого объекта вы можете, например, закрыть это окно:

Window. close();

Или заменить текст, отображаемый в его строке статуса:

Window. status = "Сейчас работает Web-сценарий!";

Объект window имеет внутренний объект navigator, предоставляющий доступ к самой программе Web-обозревателя. Доступен он через одноименное свойство. Воспользовавшись этим объектом, мы можем выяснить, напри­мер, версию программы:

Version = window. navigator. appVersion; или название:

ProgramName = window. navigator. appName;

Объект window имеет внутренний объект history, предоставляющий доступ к списку "истории" Web-обозревателя. Он доступен также через одноимен­ное свойство. Воспользовавшись этим объектом, мы можем "путешество­вать" по списку "истории" вперед:

Window. history. forward(); и назад:

Window. history. back();

В объектной модели документа существует также еще несколько других объектов, но рассматриваться они не будут. Эти объекты применяются дос­таточно редко и в весьма специфических случаях. Если же вы все-таки захо­тите узнать побольше об объектной модели документа, обратитесь к соот­ветствующей литературе.

Как пишутся Web-сценарии

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

Прежде всего, выясним, как JavaScript-код помещается в HTML-код. Для этого служит парный тег <script>. . ,</script>, внутри которого помещается код сценария. Вне этого тега помещать сценарий можно, но выполняться он не будет.

Вообще, все Web-сценарии можно разделить на два вида: выполняющиеся при загрузке страницы (загрузочные) и вызывающиеся в ответ на событие (обработчики событий). В зависимости от того, является сценарий загрузоч­ным или обработчиком, различается способ его реализации.

Сценарии, выполняющиеся при загрузке страницы, представляют собой обычный код на JavaScript, помещенный в тег <script>. Он имеет такой вид:

<FORM ACTION="Http://www. somesite. ru/cgi/program. pl">

<INPUT TYPE="text" NAME="txtDate">

<SCRIPT> var d;

D = new Date();

Document. forms[0].txtDate. value = d. toString();

</SCRIPT>

</FORM>

Этот сценарий помещает в поле ввода txtDate значение текущей даты. (О формах и элементах управления см. главу 16.) Для этого он вызывает свойство value, отображающее значение, введенное в поле ввода. Заметьте, что для именования поля ввода мы использовали атрибут name, поэтому вышеприведенный код будет работать также и в Navigator Ах.

Этот сценарий будет выполняться непосредственно при загрузке страницы. Сначала Web-обозреватель загрузит и распознает тег <form>, потом — тег <input>, а сразу за ним выполнит наш сценарий. Такие сценарии очень час­то используются для занесения начальных значений в элементы управления и вообще для выполнения различных предустановок.

Мы поместили код сценария сразу же за тегом, задающим поле ввода, к ко­торому мы обращаемся. Если бы мы поместили сценарий перед тегом, Web - обозреватель не смог бы найти объект txtDate, т. к. он еще не был бы соз­дан, и выдал бы сообщение об ошибке. Имейте это в виду, когда будете писать загрузочные сценарии.

Если нужно, чтобы какие-либо предустановки выполнились перед тем, как будет загружен какой-либо "видимый" на странице HTML-код, выполняю­щий их сценарий помещается в секцию HTML-заголовка страницы (тег <head>). В основном, это касается кода, выполняющего предустановки для других сценариев, чаще всего, обработчиков событий.

Теперь поговорим о сценарии обработчика событий. И рассмотрим пример такого обработчика: <HEAD>

<SCRIPT>

Function para_onClick() {

Para. style. color = "#FFQQQQ";

}

</SCRIPT>

</HEAD>

<BODY>

<P ID="para" STYLE="color: #QQQQFF" onClick="para_onClick();">Некий текст. </P>

</BODY>

Это как раз пример сценария, помещаемого в секцию HTML-заголовка страницы. Он представляет собой функцию para_ondick, чей код меняет цвет текста абзаца para. Поместив сценарий в секцию HTML-заголовка, мы можем быть уверены, что Web-обозреватель обработает этот код перед тем, как будет загружена страница, и "отложит" определения функций в "долгий ящик", чтобы вызвать их впоследствии, при наступлении соответствующего события.

А теперь обратимся к нашему текстовому абзацу. Что видим? Нечто стран­ное... Откуда-то взялся новый, не знакомый нам атрибут onciick. Что он делает?

Это не совсем атрибут. Вернее, совсем не атрибут, хотя и выглядит похоже. Таким способом в HTML к какому-либо событию, происходящему в эле­менте страницы, привязывается обработчик. Общий синтаксис такой "привязки" следующий:

<Имя события>="<Код сценария обработчика>"

В данном случае мы привязали вызов функции para_onciick в качестве об­работчика к событию onciick, происходящему, когда пользователь щелкает мышью по этому абзацу.

Вообще, код этого обработчика столь мал, что его можно без всяких по­следствий поместить прямо в тег <р>:

<Р ID="para" STYLE="color: #QQQQFF" onClick="para. style. color =

'#FFQ000';">Некий текст.</P>

Таким образом, мы значительно уменьшим размер HTML-кода страницы, что нам совсем не помешает.

Простейший Web-сценарий

Давайте создадим простейшую Web-страничку, содержащую работающий Web-сценарий. Этот сценарий будет выводить текущие дату и время.

<HTML>

<HEAD>

<Т1ТЬЕ>Сегодня</Т1ТЬЕ>

</HEAD>

<BODY>

<Р>

<SCRIPT LANGUAGE="JavaScript"> var d;

D=new Date();

Document. write(d. toString());

</SCRIPT>

</P>

</BODY>

</HTML>

Сохраните этот код в файле под именем 13.l. htm и откройте в Web - обозревателе. Вы увидите, что на странице будут стоять сегодняшние дата и время (рис. 13.1).

Document. write(d. toString());

</SCRIPT>

</P>

Сам абзац не представляет собой ничего особенного. Сценарий — по боль­шому счету, тоже. Мы уже познакомились с такими сценариями; они вы­полняются непосредственно при загрузке страницы и обычно производят различные предустановки. В нашем случае такой предустановкой являет­ся помещение в текстовый абзац строки, содержащей сегодняшние дату и время.

Как это происходит? С помощью метода write объекта document. Автор не рассматривал этот метод, когда говорил об объекте document. Все объекты, входящие в объектную модель документа, имеют множество свойств и мето­дов, многие из которых используются в сценариях довольно часто. А объем книги ограничен; мы не можем уделять слишком много места описанию объектной модели в ущерб Dreamweaver. Поэтому кое о чем автор умолчал.

Теперь же настало время рассказать о методе write. Он помещает строку, переданную ему в качестве параметра, в то место документа, где встрети­лось выражение, вызывающее этот метод. Только и всего. В нашем случае он проделывает это со строковым значением текущей даты и помещает его внутри текстового абзаца <р>.

Остальной код вполне понятен. Мы объявляем переменную, помещаем в него значение текущей даты в виде объекта класса Date и преобразуем это значение в строку методом tostring. Вы также можете для этого использо­вать метод toLocaieString, выполняющий это преобразование с учетом национальных настроек операционной системы, но такой код, возможно, будет работать не во всех Web-обозревателях.

Более сложный Web-сценарий

В прошлой главе говорилось об анимации. Давайте же рассмотрим Web - сценарий, анимирующий какой-либо элемент страницы, а именно, застав­ляющий его двигаться по горизонтали взад-вперед. Вы увидите, что все это делается очень просто и довольно очевидно.

<HTML>

<HEAD>

<Т1ТЬЕ>Анимация</ТТТЪЕ>

<STYLE>

DIV { font-size: 72; font-weight: bold }

</STYLE>

<SCRIPT>

Var dx, timer; dx = 2;

Function movelmage() {

Livediv. style. pixelLeft += dx;

If (livediv. style. pixelLeft + livediv. style. pixelWidth >= ^document. body. clientWidth) dx = - dx; if (livediv. style. pixelLeft <= 0) dx = - dx;

Function setupAnimation() {

Timer = window. setlnterval("movelmage()", 100)

}

</SCRIPT>

</HEAD>

<BODY onLoad="setupAnimation();">

<DIV ID="divl" STYLE="top: 50; left: 50; position: absolute;

^z-index: 1">J</DIV>

<DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;

^z-index: - l">a</DIV>

<DIV ID="div3" STYLE="top: 50; left: 150; position: absolute;

^z-index: l">v</DIV>

<DIV ID="div4" STYLE="top: 50; left: 200; position: absolute;

^z-index: - l">a</DIV>

<DIV ID="livediv" STYLE="top: 80; left: 0; width: 30; position: absolute"><IMG SRC="tips. gif"></DIV>

</BODY>

</HTML>

Сохраните этот код в файле под именем 13.2.htm. Графическое изображение tips. gif, использованное в этом примере, вы можете найти в папке Web, вложенной в папку Windows или WinNT. Поместите файл tips. gif в ту же папку, где находится файл 13.2.htm, после чего откройте последний в Web - обозревателе. К сожалению, рис. 13.2 не может передать движение.

Рассмотрение кода нашего примера начнем с секции HTML-заголовка страницы (тег <head>). Здесь у нас находится небольшая таблица стилей с единственным стилем, переопределяющим шрифт тега <div>. Но, кроме того, здесь располагается код сценария. Он-то нас и интересует.

Этот КОД включает определение двух функций: setupAnimation И movelmage. Первая функция выполняет некие предустановки, необходимые для пра­вильной работы анимации, а вторая — осуществляет само движение аними­рованного элемента. (В дальнейшем вы тоже старайтесь давать вашим функциям "говорящие" имена.) Но, кроме этих функций, здесь есть и дру­гой код, выполняющийся при загрузке страницы:

Var dx, timer; dx = 2;

В этом коде мы объявляем две переменные: dx и timer. Первая из них за­дает значение приращения, "скачка" анимации, и с ней все понятно. Мы присваиваем ей значение 2; если движение анимированного элемента пока­жется вам слишком медленным, вы можете это значение увеличить. А вот второй переменной займемся поближе.

Уже не раз говорилось, что анимация всегда привязывается к системному таймеру. Это позволяет проигрывать одно и то же "кино" и на самых мед­ленных, и на самых быстрых компьютерах с одинаковой скоростью. Как правило, делается это следующим образом: пишется специальная функция - обработчик события "тика" этого системного таймера, которая и заставляет анимированный элемент двигаться.

Для того чтобы привязать функцию-обработчик к событию "тика" таймера, нужно использовать метод setinterval объекта window. Этот метод принима­ет в качестве параметра строку с именем функции-обработчика и интервал между "тиками" в миллисекундах, а возвращает особое значение, называе­мое идентификатором интервала. Впоследствии, когда анимация должна быть закончена, нужно будет вызвать метод ciearinterval объекта window, передав ему этот самый идентификатор. Но, т. к. у нас анимация проигры­вается бесконечно, то и метод ciearinterval не вызывается, и идентифи­катор, хранимый в переменной timer, фактически не нужен.

Функцию-обработчик мы привязываем к "тику" таймера в функции setupAnimation. Ее код приведен ниже.

Function setupAnimation() {

Timer = window. setlnterval("movelmage()", 100)

}

Эта функция, в свою очередь, является обработчиком события onLoad, воз­никающего сразу по окончании загрузки Web-страницы. В качестве пара­метров метода setlnterval мы передаем имя функции movelmage и 100 — интервал между "тиками" в миллисекундах. Обратите также внимание на следующий код:

<BODY onLoad="setupAnimation();">

С его помощью к событию onLoad привязывается функция-обработчик.

Обратимся теперь к функции, выполняющей движение анимированного элемента, — movelmage. Ее код выглядит так:

Function movelmage() {

Livediv. style. pixelLeft += dx;

If (livediv. style. pixelLeft + livediv. style. pixelWidth >=

^document. body. ciientwidth) dx = - dx; if (livediv. style. pixelLeft <= 0) dx = - dx;

}

Разберем его по строкам.

Первая строка:

Livediv. style. pixelLeft += dx; или, как понятнее,

Livediv. style. pixelLeft = livediv. style. pixelLeft + dx;

Увеличивает значение свойства pixelLeft объекта style на значение пере­менной dx. Свойство pixelLeft представляет значение горизонтальной ко­ординаты элемента страницы в пикселах.

Вторая строка:

If (livediv. style. pixelLeft + livediv. style. pixelWidth >=

^document. body. ciientwidth) dx = - dx;

Осуществляет проверку, дошел ли анимированный элемент до правого края страницы. Для этого мы сначала складываем значение уже знакомого свой­ства pixelLeft и нового свойства pixelWidth, представляющего ширину эле­мента страницы в пикселах. После этого мы сравниваем получившуюся сумму со значением свойства ciientwidth объекта body и, если она стала больше этого значения, меняем знак у значения переменной dx. Свойство ciientwidth представляет ширину элемента страницы в пикселах, а объект body — саму Web-страницу, значит, выражение body. ciientwidth возвращает значение ширины всей страницы в пикселах.

И последняя, третья, строка:

If (livediv. style. pixelLeft <= 0) dx = - dx;

Осуществляет проверку, дошел ли анимированный элемент до левого края страницы. Для этого мы просто сравниваем значение свойства pixelLeft с нулем и, если оно стало меньше нуля, изменяем знак значения перемен­ной dx.

После того как мы сменим знак значения dx, анимированный элемент "по­едет" в противоположную сторону. Таким образом, анимация будет проиг­рываться бесконечно.

Кстати, рассмотренный нами Web-сценарий не будет работать только в Navigator 4.x. Чтобы он работал в этой капризной программе, его нужно немного изменить. Измененный код страницы 13.2.htm по имени 13.3.htm приведен ниже. Подробно описываться он не будет — попробуйте разо­браться с этим кодом сами, на досуге.

If (livediv. style. pixelLeft <= 0) dx = - dx;

<HTML>

<HEAD>

<ТТТЪЕ>Анимация</ТТТЪЕ>

<SCRIPT>

Var dx, timer; dx = 2;

Function movelmage() {

Document. livediv. left += dx;

If (document. livediv. left >= document. width) dx = - dx; if (document. livediv. left <= 0) dx = - dx;

}

Function setupAnimation() {

Timer = window. setlnterval("movelmage()", 100)

}

</SCRIPT>

</HEAD>

<BODY onLoad="setupAnimation();" STYLE="font-size: 72;

4>font-weight: bold">

<DIV ID="divl" STYLE="top: 50; left: 50; position: absolute;

^z-index: 1">J</DIV>

<DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;

^z-index: - l">a</DIV>

<DIV ID="div3" STYLE="top: 50; left: 150; position: absolute;

^z-index: l">v</DIV>

<DIV ID="div4" STYLE="top: 50; left: 200; position: absolute;

^z-index: - l">a</DIV>

<DIV ID="livediv" STYLE="top: 80; left: 0; width: 30; position: absolute"><IMG SRC="tips. gif"></DIV>

</BODY>

</HTML>

Правда, исправленный вариант страницы перестанет работать в других Web- обозревателях. ..

Вот такая анимация...

Web-сценарии — подход Dreamweaver. Поведения

Сейчас, когда все объяснено, вам может показаться, что писать Web - сценарии проще простого. Однако это совсем не так. Web-програм­мирование — штука очень и очень непростая. Хотя бы из-за того, что вам придется держать в голове множество имен объектов, классов, свойств, ме­тодов и событий, с помощью которых создается тот или иной эффект. Вдо­бавок многие вещи делаются отнюдь не так очевидно, как, скажем, анима­ция. Поверьте, но над первыми своими Web-сценариями автор сидел не один час.

Но разработчики Dreamweaver решили облегчить жизнь начинающих Web - программистов. Для этого они ввели понятие поведения (по-английски — behavior) — заранее определенного действия, которое будет происходить в ответ на какое-либо событие, произошедшее внутри или вне системы. Dreamweaver поддерживает достаточный набор таких поведений, который покроет практически все потребности начинающего, да и опытного Web - дизайнера. Работа с поведениями в среде Dreamweaver осуществляется так же просто, как и с анимациями — щелчками мыши и нажатиями клавиш клавиатуры.

Когда вы задаете какое-либо поведение для того или иного элемента стра­ницы, Dreamweaver автоматически создает необходимый для этого набор Web-сценариев и помещает его в HTML-код страницы. Это делается неза­метно от пользователя; пользователь просто работает со списком созданных им поведений, отображаемым в специальном списке. Таким образом, Dreamweaver дает возможность прикоснуться к Web-программированию да­же тем Web-дизайнерам, которые не знают ни языка JavaScript, ни объект­ной модели документа.

Все поведения, поддерживаемые Dreamweaver, приведены в табл. 13.2.

Осталось привести список поддерживаемых Dreamweaver событий (табл. 13.3). Имейте, однако, в виду, что это не полный список поддерживаемых собы­тий — некоторые события используются достаточно редко, и поэтому опи­сываться здесь не будут.

На этом закончим наше затянувшееся вступление. Пора переходить к рабо­те над поведениями в Dreamweaver.