Альтернативные технологии

О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которые можно применять вместо сценариев для расширения функциональности Web-страниц.

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

Невысокое быстродействие интерпретируемого программного кода.
"Открытость", т. е. легкочитаемость, интерпретируемого кода.

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

А таких технологий всего две. И обе они являются близкими родственниками, что бы ни говорили пламенные приверженцы каждой из них. И обе они найдут свои области применения.

Первая технология вам уже знакома — это элементы ActiveX, рассмотренные нами в главе 4, посвященной графическим изображениям и вообще внедренным элементам. Напомним, что это такое.

Элементы ActiveX были разработаны как общий стандарт компонентов для использования в различных приложениях, Web-страницах и в качестве расширений самой операционной системы Windows. Эта технология представляет собой дальнейшее развитие технологии COM (Component Object Model — объектная модель компонентов), позволяющей встраивать одни программы (так называемые СОМ-серверы) в другие (СОМ-клиенты или СОМ-контейнеры). Элемент ActiveX представляет собой библиотеку DLL, содержащую сервер СОМ; как всякий СОМ-сервер, он регистрируется в особом разделе Реестра Windows, чтобы его смогли найти клиенты.

Элемент ActiveX помещается на Web-страницу с помощью парного тега <OBJECT>. . .</OBJECT>. Внутри этого тега пишутся определения свойств элемента, выполненные с помощью набора одинарных тегов <PARAM>. Подробнее о работе с элементами ActiveX в среде Dreamweaver см. главу 4.

Элементы ActiveX создаются на компилируемых языках программирования, поэтому реализованный у них код работает очень быстро и почти не поддается "взлому". Распространяются они по Сети в виде дистрибутивных файлов, представляющих собой файл-архив, содержащий все необходимые для работы элемента ActiveX файлы. Как правило, Web-обозреватель, если нужный ему элемент ActiveX на компьютере не установлен, сам загружает его дистрибутивный файл, руководствуясь значениями атрибутов тега <OBJECT>.

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

Вторая технология, о которой обязательно нужно рассказать и которая в наши дни, кажется, завоевала популярность, — это апплеты Java. Апплеты (калька с англ, applet— буквально, "приложеньице") — это аналоги элементов ActiveX, но написанные на языке программирования Java и не привязанные к какой-либо компьютерной платформе. По большому счету, они похожи на элементы ActiveX за несколькими исключениями, которые сейчас будут перечислены.

Прежде всего, программный код апплетов Java выполняется не самим процессором компьютера, а интерпретатором (так называемой виртуальной машиной) Java. Этот особый программный код, называемый байт-кодом, не является командами центрального процессора. Он порождается компилятором Java, который как бы компилирует программу "не до конца". Такие "не-докомпилированные" программы выполняются значительно быстрее, чем исходный код JavaScript, но все же несколько медленнее, чем программы, откомпилированные "до конца", в "родные" команды процессора. С другой стороны, программы в байт-коде не привязаны к конкретному процессору, а значит, к конкретной компьютерной платформе, поэтому могут быть выполнены где угодно. Эта платформонезависимость и обусловила большую популярность Java-апплетов по сравнению с элементами ActiveX.

Далее, интерпретатор Java-кода организует для апплетов своего рода "компьютер в компьютере", "внутри" которого они и исполняются. (Поэтому интерпретатор Java и называют виртуальной, "кажущейся" машиной.) "В реальный компьютер" апплеты "выбраться" оттуда не могут; благодаря этому даже вредоносный Java-апплет, созданный с явно преступными целями, не может серьезно набедокурить — интерпретатор его просто остановит, предупредив об этом пользователя.

Апплеты Java помещаются на страницу с помощью парного тега <APPLET>. .. </APPLET>. Как и у тега <OBJECT>, внутри него находятся определения свойств апплета, выполненные с помощью набора одинарных тегов <PARAM>.

Чтобы поместить на страницу апплет Java, работая в Dreamweaver, вы можете нажать кнопку Applet, находящуюся на вкладке Media панели объектов. Также вы можете выбрать пункт Applet подменю Media меню Insert. После этого на экране появится диалоговое окно Select File, где вы должны будете задать имя файла, содержащего код апплета (так называемый файл класса апплета Java). Помещенный на страницу апплет выглядит так.

Вид редактора свойств при выбранном апплете Java . Мы рассмотрим подробно только те параметры, которые характерны именно для апплета. А таких параметров всего два.

В поле ввода Code задается имя файла класса, реализующего данный апплет. Вы можете также щелкнуть по значку папки справа от поля ввода и выбрать нужный файл в диалоговом окне Select File. Также вы можете выбрать пункт Code контекстного меню апплета.

Файл класса Java может содержаться как на вашем компьютере, так и на удаленном Web-сервере. Во втором случае Web-обозреватель скопирует файл класса и все файлы, необходимые для его работы, на компьютер клиента и поместит их в специальную папку. В дальнейшем, если этот же ап-плет понадобится снова, он будет загружать его оттуда вместо того, чтобы снова "тянуть" по Сети.

В поле ввода Base вводится папка Web-сервера, где находится файл класса, реализующего апплет, и все необходимые для его работы файлы. Если вы пользовались диалоговым окном Select File для выбора файла класса, Dreamweaver сам подставит в поле ввода Base нужное значение.

Остальные параметры (и соответствующие им элементы управления редактора свойств) сходны с параметрами элемента ActiveX, описанного в главе 4.

Где же можно найти нужные элементы ActiveX и апплеты Java? Во-первых, вы можете сами их написать. Но для этого придется изучить либо Java, либо один из компилируемых языков программирования (C++, Pascal и т. п.). Во-вторых, вы можете поискать бесплатные или условно-бесплатные элементы ActiveX или апплеты, выложенные на специальных сайтах-архивах для общего использования. (Кстати, существуют аналогичные архивы и для JavaScript-сценариев.) В-третьих, вы можете их купить или заказать другому программисту.

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

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

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

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

<HTML>

<HEAD>

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

<STYLE>

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

</STYLE>

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 lD="div1" STYLE="top: 50; left: 50; position: absolute;

z-index: 1">J</DIV> <DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;

z-index: -1">a</DIV> <DIV ID="div3" STYLE="top: 50; left: 150; position: absolute;

z-index: 1">v</DIV> <DIV ID="div4" STYLE="top: 50; left: 200; position: absolute;

z-index: -1">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; если движение анимированного элемента покажется вам слишком медленным, вы можете это значение увеличить. А вот второй переменной займемся поближе.

Что дальше?

Ох, сколько всего можно сотворить на обычной Web-странице! Просто глаза разбегаются...

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

Итак, просим любить и жаловать: метатеги и серверные директивы!

Использование сценариев

ГЛАВА 13. Использование сценариев

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

Как вы уже знаете, Web-сценарии позволяют преодолеть ограничение HTML, обусловленное его природой языка разметки страницы. Это ограничение заключается в том, что с помощью HTML можно описать только внешний вид данных, отображаемых на Web-странице, но никак не их поведение при наступлении того или иного события (о событиях и их обработке см. в главе 12). Говорят, что HTML — язык представления данных, но не описания способов их обработки.

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

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

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

Web-сценарии практически всегда пишутся на языке программирования JavaScript. Конечно, существуют и другие языки, по именно JavaScript завоевал широкую популярность. Этот язык начал полноценно поддерживаться Internet Explorer 4.0 и Navigator 3.0. Также ограниченная поддержка JavaScript была реализована в Internet Explorer 3.0. Ну, a Opera и Mozilla поддерживают его с самого "рождения".

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

Изменение графического изображения (Swap Image)

Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для этого используется поведение swap image; специальный Web-сценарий меняет значение атрибута SRC тега <IMG>. Это будет полезно во многих случаях.

Выберите пункт Swap Image меню поведений. На экране появится диалоговое окно Swap Image, показанное на Рисунок 13.32.

Изменение изображенияэлемента

Изменение изображения-элемента полосы навигации (Set Nav Bar Image)

О полосе навигации речь шла в главе 7, посвященной фреймам и фреймовому дизайну. Как вы помните, при создании полосы навигации Dreamweaver создает также множество сценариев, обеспечивающих смену изображений каждого элемента в ответ на различные события. Эти сценарии и представляют собой поведение set Nav Bar image.

Как правило, вам самим не нужно создавать это поведение — это сделает за вас Dreamweaver. Если же это вам понадобится, выберите пункт Set Nav Bar Image в меню поведений. На экране появится диалоговое окно Set Nav Bar Image (Рисунок 13.20).

Как видите, содержимое вкладки Basic этого окна почти совпадает с содержимым диалогового окна Insert Navigation Ваг, показанного на Рисунок 7.23. Элементы управления этой вкладки позволяют настроить выделенный вами элемент полосы навигации: задать для него изображения, "альтернативный" текст, интернет-адрес гиперссылки и др. Все это вам уже знакомо по главе 7.

А вот содержимое вкладки Advanced данного окна позволяет вам задать кое-какие дополнительные настройки, затрагивающие другие элементы полосы навигации. Эта вкладка показана на Рисунок 13.21. В частности, с ее помощью вы можете задать изменение изображения другого элемента полосы, если посетитель щелкнет выделенный вами элемент.

В раскрывающемся списке When element <название выделенного элемента> is displaying выбирается состояние, в котором находится выделенный вами элемент полосы навигации. Если выбран пункт Over Image or Over While Down Image, то элемент должен находиться в состоянии, когда посетитель поместил над ним курсор мыши. Если выбран пункт Down Image, то посетитель должен щелкнуть по этому элементу ("нажатое" состояние).

Изменение значения свойства (Change Property)

Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property. Выберите одноименный пункт меню поведений. На экране появится диалоговое окно Change Property (Рисунок 13.8).

Прежде всего необходимо выбрать тег элемента страницы, свойство которого будет изменено. Это делается с помощью раскрывающегося списка Туре of Object. После этого выберите сам объект в раскрывающемся списке Named Object. Имейте в виду, что в этом списке отображаются имена элементов, чей тег выбран в списке Type of Object; для элементов, не имеющих уникального имени, отображается строка unnamed. Поэтому автор рекомендует для всех элементов страницы, которые вы собираетесь использовать в сценариях, задавать уникальное имя.

Язык JavaScript

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

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

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

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

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

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

b = z / t;

Это выражение делит значение переменной z на значение переменной t и результат помещает в переменную ь. Как вы уже поняли, знак "/" обозначает оператор деления, а знак "=" — оператор присваивания значения какой-либо переменной. Знак ";", помещенный в конце выражения, обозначает, собственно, его конец; встретив этот знак, интерпретатор JavaScript считает выражение законченным.

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

sum = a1 + а2 + а3 - 20; square = х * у;

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

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

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

s = (а + b) / (с - d);

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

s = a+b/c — d;

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

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

а = а + 1;

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

а += 1;

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

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

var a1, a2, а3, х, у

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

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

а = 10;

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

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

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

var arr;

arr[0] = 1;

arr[1] = 2;

arr[5] = arr[0] + arr[1];

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

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

var arr2;

агг2[0] [0] = 0;

агг2[0][1] = 1;

агг2[1] [0] = 2;

агг2[1][1] = 3;

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

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

if (x== 1)

f = 2 else

f = 12;

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

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

if (х == 1) {

f = 2;

h = 3; } else {

f = 12;

h = 14; }

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

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

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 получит значение двойка (часть сазе 2), и т. д. Если же переменная а содержит значение, не перечисленное в списке case, выполняется часть default, и out принимает значение другое число.

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

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

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

for (i = 1; i < 101; i++) { a = a * i; b = b + i;

}

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

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

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

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

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

do {

а = а * i + 2;

i = ++i; } while (a < 100);

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

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

while (a < 100) { a = a * i + 2; i = ++i; }

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

while (a < 100) { i = ++i;

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

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

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

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

function valuePlus2 (v) {

var с;

с = v + 2;

return с; }

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

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

h = d + valuePlus2 (r) ;

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

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

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

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

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

function someFunc1() { return 2+2; }

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

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

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

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

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

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

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

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

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

<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 4.x.

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

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

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

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

<HEAD>

function para_onClick() {

para.style.color = "#FF0000"; }

</SCRIPT> </HEAD> <BODY>

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

</BODY>

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

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

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

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

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

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

<Р ID="para" STYLE="color: #0000FF" onClick="para.style.color = #'FF0000';">Heкий текст.</Р>

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

Какие ошибки бывают в программах

Очень часто только что написанная программа содержит ошибки. Более того, если она имеет объем более десяти строк, будьте уверены — хоть одна ошибка там обязательно присутствует. (Уж не говоря о более сложных программах...) Проистекает все это из пресловутой "ненадежности" людей. В самом деле, компьютеры при всех их недостатках никогда не ошибаются сами по себе. Все компьютерные ошибки всегда обусловлены либо неблагоприятными внешними воздействиями (космическое излучение, скачки напряжения в сети, отсутствие дискеты в дисководе и т. п.), либо внутренними (ненадежная электроника, опять же, ошибки в программах). Только люди ошибаются без всяких причин.

Ошибки в программах бывают двух видов:

Синтаксические ошибки — это неточности в написании самого программного кода. В результате синтаксической ошибки интерпретатор или компилятор не может правильно расшифровать выражение. В этом случае он выдает сообщение о синтаксической ошибке. Например, Internet Explorer огорошит нас таким сообщением — см. Рисунок 13.35.

Написание своих Webсценариев

Написание своих Web-сценариев

Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web-дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript-код самим. И все же...

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

Объектная модель документа (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 4.x и интернет-стандартов. Старые версии Navigator используют атрибут ID только для присвоения элементам стилей, а для задания имен признают только атрибут NAME. Видите, какая морока!..

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

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

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

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

Давайте приведем небольшой пример, поясняющий вышесказанное.

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

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

para.style.color = "#FF0000";

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

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

para. align = "center";

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

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

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

document ["someImage"] .src = "image2.gif";

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

<IMG>.

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

document.linkColor = "#FF0000";

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

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

address = document.location.href;

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

filename = document.location.pathname;

либо загрузить другую страницу:

document.location.href = "http://www.othersite.ru/otherpage.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();

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

Объекты

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

Это объекты.

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

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

currentWebBrowser.address = "http://www.w3c.org"; currAddr = currentWebBrowser.address + "/сss/";

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

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

currentWebBrowser.gо ();

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

currentWebBrowser.goTo("http://www.w3c.org");

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

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

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

var currentWebBrowser; currentWebBrowser = new WebBrowser();

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

WebBrowser.

Удалить ненужный объект можно с помощью метода delete.

currentWebBrowser.delete();

Имейте в виду, что ненужные объекты, созданные вами, всегда надо удалять, чтобы освободить ресурсы системы. Исключение составляют только истемные объекты, создаваемые самим интерпретатором или предоставляемые интерпретатору 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_jpage.htm");

currentWebBrowser.goTo("http://www.w3c.org");

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

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

var d;

d = new Date () ;

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

var dayNumber; dayNumber = d.getDay(};

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

var year;

year = d.getFullYear();

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

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

Особые случаи создания поведений

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

Останов проигрывания анимации (Stop Timeline)

Поведение stop Timeline позволяет вам остановить проигрывание анимации, запущенной ранее поведением Play Timeline. Для его создания воcпользуйтесь пунктом Stop Timeline подменю Timeline меню поведений. На экране появится диалоговое окно Stop Timeline (Рисунок 13.31).

Открытие нового окна Webобозревателя (Open Browser Window)

Открытие нового окна Web-обозревателя (Open Browser Window)

Это поведение аналогично поведению GO to URL за тем исключением, что оно открывает новую страницу в новом окне Web-обозревателя. При этом оно позволяет задать различные параметры нового окна: размеры, наличие инструментария и строки статуса и т. п.

Выберите в меню поведений пункт Open Browser Window. На экране появится диалоговое окно Open Browser Window, показанное на Рисунок 13.16.

Отладка Webсценариев

Отладка Web-сценариев

Но прежде, чем мы начнем говорить об отладке Web-сценариев, поговорим об ошибках и о том, как они выявляются.

Панель Behaviors

Вся работа с поведениями будет протекать в специальной панели Behaviors. Чтобы вызвать ее на экран, включите пункт-выключатель Behaviors меню Window или нажмите комбинацию клавиш <Shift>+<F3>. Панель Behaviors показана на Рисунок 13.3.

Переход на другую Webстраницу (Go to URL)

Переход на другую Web-страницу (Go to URL)

Иногда бывает нужно загрузить в текущем окне Web-обозревателя другую страницу, не дожидаясь, пока это сделает посетитель. Для таких случаев Dreamweaver предлагает поведение GO to URL. Выберите в меню поведений соответствующий пункт; на экране появится диалоговое окно Go To URL, показанное на Рисунок 13.15.

Переход на заданный кадр анимации (Go To Timeline Frame)

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

Для таких случаев Dreamweaver предусматривает поведение GO TO Timeline Frame. Выберите одноименный пункт в подменю Timeline меню поведений. На экране появится диалоговое окно Go To Timeline Frame (Рисунок 13.14).

Перенаправление на другую страницу

Перенаправление на другую страницу в зависимости от версии Web-обозревателя (Check Browser)

Несовместимость различных Web-обозревателей уже давно стала притчей во языцех. В качестве решения этой проблемы Web-дизайнеры очень часто создают различные версии одной и той же Web-страницы, предназначенные для разных Web-обозревателей. Иногда для того, чтобы перенаправить посетителя на соответствующую страницу, используются "говорящие" гиперссылки вида: "Пользователям Navigator 1.0 — сюда. А вы слышали: вышла версия 2.0!". Но чаще всего на главной странице сайта помещается Web-сценарий, определяющий версию программы Web-обозревателя и перенаправляющий посетителя на соответствующую ей страницу.

Практически всегда такие сценарии выполняются при наступлении события onLoad объекта страницы (тег <BODY>), т. е. когда страница полностью загрузится. При этом посетитель перемещается на другую страницу автоматически, не делая никаких щелчков по гиперссылкам. (Конечно, если его программное обеспечение поддерживает Web-сценарии. В противном случае нужно все-таки будет предусмотреть на главной странице соответствующие гиперссылки, иначе он не попадет, куда нужно.)

Автоматическое перенаправление на другую страницу стало в наше время настолько популярным, что все более-менее мощные Web-редакторы позволяют создавать такие штуковины. Dreamweaver не стал исключением. Если вы выберете пункт Check Browser меню поведений, вы в этом убедитесь.

А пока посмотрим на диалоговое окно Check Browser, показанное на Рисунок 13.9. Что же предлагает нам Dreamweaver?

А предлагает он нам три возможности:

остаться на текущей странице;
перейти на "основную" страницу ("основная" - - в терминологии Dreamweaver);
перейти на "альтернативную" страницу ("альтернативная" — также в терминологии Dreamweaver).

Перетаскивание свободно позиционируемого

Перетаскивание свободно позиционируемого элемента (Drag Layer)

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

Поведение Drag Layer, реализующее перетаскивание свободных элементов, привязывается к событию onLoad тега <BODY>. Выберите одноименный пункт меню поведений; на экране появится диалоговое окно Drag Layer, показанное на Рисунок 13.12.

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

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

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

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

Показ и скрытие свободно позиционируемых

Показ и скрытие свободно позиционируемых элементов (Show-Hide Layers)

Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различные подсказки при наведении курсора мыши на гиперссылки или графические изображения. Также можно на их основе создавать начальные заставки, показываемые посетителю сайта на самой первой его странице. (Почти всегда, однако, для этого используются фильмы форматов Flash, RealMedia или GIF. Но эту традицию стоит нарушить.) И, разумеется, появляющиеся и пропадающие в ответ на действия пользователя элементы страницы незаменимы при создании игр, обучающих пособий и программ, созданных на основе Web-страниц.

Вы уже знаете, как создать на странице свободный элемент, как задать его размеры и сделать невидимым (до поры до времени). Поговорим теперь, как заставить его появляться и исчезать в ответ на события. А для этого Dreamweaver предоставляет поведение show-Hide Layers.

Выберите пункт Show-Hide Layers в меню поведений. На экране появится диалоговое окно Show-Hide Layers (Рисунок 13.30).

Поведения и анимации

Вы познакомились с двумя, можно сказать, "детищами" Dreamweaver: анимацией и поведением. Они называются так потому, что не являются возможностями ни HTML, ни JavaScript, ни объектной модели документа DOM. И анимация, и поведения "придуманы" самим Dreamweaver, чтобы помочь вам создавать сложные Web-сценарии, решающие весьма непростые задачи. Вы работаете с анимациями и поведениями, используя удобный интерфейс Web-редактора, создаете их, изменяете и удаляете, a Dreamweaver за вашей спиной выполняет над кодом довольно сложные действия.

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

Давайте еще раз откроем панель Timelines, выбрав пункт Timelines подменю Others меню Window, или иным способом. И еще раз посмотрим на нее (см. Рисунок 12.1). Над серой линейкой с отметками времени (в кадрах) вы можете увидеть еще один канал анимации, пока еще нами не использованный. Это канал поведений. Он обозначен буквой В, от англ, behavior — поведение.

Чтобы привязать к какому-либо кадру анимации поведение, сначала выберите необходимый кадр в канале поведений. В результате этот кадр будет выделен черным. Далее выберите в меню поведений нужный пункт, например, Show-Hide Layers. Как обычно, на экране появится диалоговое окно задания параметров выбранного поведения, в нашем случае — Show-Hide Layers. Введите параметры и нажмите кнопку ОК. И поведение, привязанное к кадру анимации, будет создано.

Против соответствующего кадра анимации в канале поведений появится небольшой значок (Рисунок 13.33). А в списке панели Behaviors — новое поведение, привязанное к событию оnFramе<номер кадра> (Рисунок 13.34). Такого события в объектной модели документа не предусмотрено; Dreamweaver сам создал его так же, как создал анимации и поведения.

Предварительная загрузка графических

Предварительная загрузка графических изображений (Preload Images)

Как вы помните из материала предыдущей главы, на Web-страницах часто используются анимированные картинки, представляющие собой обычный набор графических изображений, быстро сменяющих друг друга. Такая анимация в среде Dreamweaver создается очень просто, да и при "ручной" работе также не вызывает особой сложности у достаточно опытного Web-программиста. Проблема в другом: при загрузке страницы из Интернета загружается только одно, первое изображение, а остальные Web-обозревателю приходится подгружать в процессе проигрывания анимации, создавая значительные задержки при проигрывании анимации в первый раз.

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

Для выполнения предварительной загрузки графических изображений могут применяться два подхода:

Статический, самый очевидный. На странице создается соответствующее количество графических изображений (тег <IMG>) размером 1x1 пиксел (или даже 0x0, если это сработает). В качестве значения атрибута SRC указывается имя одного из файлов, содержащих разные кадры анимации. При загрузке страницы Web-обозреватель тотчас загружает все нужные для анимации файлы и сохраняет их в своем кэше. Этот способ очень прост и надежен, если анимация содержит небольшое количество кадров. Однако, если кадров в анимации достаточно много, Web-обозреватель займет для сохранения этих изображений в памяти слишком много системных ресурсов, что не всегда приемлемо.
Динамический. Используется Web-сценарий, загружающий все эти файлы. При этом графические изображения не хранятся в памяти и, таким образом, не занимают системные ресурсы, стало быть, анимация может содержать сколько угодно кадров. Однако этот подход несколько сложнее из-за необходимости создания сценария.

И все же для предварительной загрузки изображений рекомендуется использовать второй, динамический подход. И Dreamweaver вам в этом поможет, предоставив поведение Preload images. Очевидно, что это поведение привязывается к событию onLoad тега <BODY>. Чтобы создать его, выберите одноименный пункт в меню поведений. После этого на экране появится диалоговое окно Preload Images, показанное на Рисунок 13.19.

Привязка поведений к тексту

Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту текста в абзаце?

Если вы готовы пожертвовать совместимостью с Navigator, можете использовать такой прием:

<Р>Это <SPAN onClick="doSomething();">текст, по которому можно щелкать</span>.</Р>

function doSomething() {

Что-то делаем. .. }

Как видите, нужный фрагмент текста выделен тегом <SPAN> и привязан к этому тегу обработчик события onclick. Это работать будет, но только в Internet Explorer. Этот Web-обозреватель предоставляет Web-программисту доступ к любому элементу страницы и, соответственно, может обрабатывать события, происходящие в них.

Это можно сделать и в среде Dreamweaver, воспользовавшись диалоговым окном Tag Chooser. Выделите нужный фрагмент текста и выберите пункт Tag меню Insert или нажмите комбинацию клавиш <Ctrl>+<E>. В левом списке окна Tag Chooser разверните ветвь HTML Tags и выберите пункт Formatting and Layout, далее выберите в правом списке пункт span и нажмите кнопку Insert. После этого выделенный вами фрагмент текста будет "взят" в тег <SPAN>. Вы можете поставить в него текстовый курсор и привязать к нему любое поведение.

Кстати, так можно привязать поведение к любому тегу. Смотрите сюда:

<FONT SIZE="+2" onClick="doSomething();">Это текст, по которому можно щелкать. </FONT>

И в этом случае Dreamweaver придет вам на помощь. Вам останется только поставить текстовый курсор на нужный текст и создать поведение.

Но это будет работать только в Internet Explorer.

У Navigator поддержка Web-программирования значительно ограничена. Он дает доступ к ограниченному набору элементов: гиперссылкам, графическим изображениям, внедренным элементам, фреймам, свободно позиционируемым элементам и еще кое-чему. К обычным абзацам текста и уж тем более элементам <SPAN> нашему брату Web-программисту путь заказан.

Что делать?

Есть один способ. Если уж Navigator требует гиперссылки, дадим ему гиперссылку.

Взгляните на следующий код:

<Р>Это <А HREF="javascript:;" onClick="doSomething();">текст, по которому можно щелкать</А>.</Р>

Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onclick. В качестве значения интернет-адреса мы задали "javascript: ;", чтобы Web-обозреватель при щелчке по такой гиперссылке никуда не переходил. Можете проверить — такой код будет работать и в Internet Explorer, и в Navigator.

Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете вставить в Тег <А> стиль. Задайте атрибуту стиля text-decoration значение попе, чтобы отключить подчеркивание, а атрибуту color — значение цвета вашего текста. И пусть после этого кто-нибудь скажет, что это гиперссылка!

Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver. Вы можете ввести текст javascript:; в поле ввода Link редактора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors. Автор описал все это в HTML, чтобы вам было понятнее.

Проигрывание аудиоклипа (Play Sound)

В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на какое-либо событие проиграть аудиоклип с помощью поведения Play Sound. Для этого выберите пункт Play Sound меню поведений. После этого на экране появится диалоговое окно Play Sound (Рисунок 13.17).

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

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

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

<HTML>

<HEAD>

<ТIТLЕ>Сегодня</ТIТLЕ>

</HEAD>

<SCRIPT LANGUAGE="JavaScript"> var d;

d=new Date ( ) ;

document. write (d.toString () ) ;

</SCRIPT>

</BODY>

</HTML>

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

Проверка наличия модуля расширения (Check Plugin)

В главе 4, посвященной графическим изображениям и мультимедийным элементам, помещаемым на Web-страницы, говорилось о модулях расширения Web-обозревателя — специальных программах, работающих совместно с Web-обозревателем и предназначенных для обработки не поддерживаемых им непосредственно данных. Существуют модули расширения Web-обозревателя для проигрывания фильмов Flash, Shockwave, аудио- и видеоклипов форматов RealMedia, MP3 и т. п. Некоторые из модулей расширения поставляются в составе Web-обозревателей, другие же должны покупаться или загружаться из Интернета отдельно.

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

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

К Событию onLoad тега <BODY>.

Для выполнения такой проверки вы можете воспользоваться поведением check plugin, для чего вам достаточно будет выбрать одноименный пункт меню поведений. После этого на экране появится диалоговое окно Check Piugin, показанное на Рисунок 13.10.

Работа с поведениями

Здесь мы изучим приемы работы с поведениями в нашем любимом Dreamweaver. Изучать мы их будем на примере страницы default2.htm, созданной в качестве новой главной страницы первого сайта Sample site 1. Откройте ее в окне документа.

Текущая дата на Webстранице

Рисунок 13.1. Текущая дата на Web-странице

Давайте рассмотрим наш пример подробнее.

Если мы отбросим весь маловажный код, у нас останется единственный текстовый абзац <р>, внутри которого помещен сценарий. Вот он:

<р>

var d;

d=new Date();

document. write (d.toString( ) );

</SCRIPT>

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

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

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

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

Анимированный элемент страницы

Рисунок 13.2. Анимированный элемент страницы

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

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

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

function setupAnimation() {

timer = window.setlnterval("movelmage()", 100) }

Эта функция, в свою очередь, является обработчиком события onLoad, возникающего сразу по окончании загрузки Web-страницы. В качестве параметров метода setlnterval МЫ Передаем ИМЯ функции movelmage И 100 -

интервал между "тиками" в миллисекундах. Обратите также внимание на следующий код:

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

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

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; }

Разберем его по строкам. Первая строка:

livediv.style.pixelLeft += dx;

или, как понятнее,

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

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

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

if (livediv.style.pixelLeft + livediv.style.pixelWidth >= document.body.clientwidth) dx = -dx;

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

body — саму Web-страницу, значит, выражение body.clientwidth возвращает значение ширины всей страницы в пикселах.

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

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;

<TITLE>Анимация</TITLE> <SCRIPT>

var dx, timer; dx = 2;

function move Image ( ) {

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; font-weight: bold">

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

z-index: 1">J</DIV> <DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;

<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-обозревателях...

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

Панель Behaviors

Рисунок 13.3. Панель Behaviors

Большую часть этой панели занимает список уже созданных к этому време,-ни поведений, привязанных к выделенному в окне документов элементу страницы. Наименование тега элемента, к которому привязаны отображаемые в списке поведения (по умолчанию это сама страница), находится выше этого списка. Если вы выделите в окне документа другой элемент, в списке панели тотчас отобразятся привязанные к нему поведения. К сожалению, узнать, к какому элементу страницы привязаны поведения, иным способом нельзя.

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

Если вы поставите текстовый курсор на саму Web-страницу, выделив ее таким образом, то увидите, что в списке уже присутствует одно поведение -

Play Animation, привязанное к событию onLoad. Это поведение было добавлено самим Dreamweaver, когда мы включили флажок Autoplay в панели Timelines. Так что некоторые поведения создаются самим Dreamweaver без вашего ведома.

Вы, наверно, уже заметили, что в столбце Events списка, правее отображаемого в нем значения, находится небольшая кнопка со стрелкой, направленной вниз. При нажатии на эту кнопку на экране появляется меню событий, в котором вы можете выбрать событие, в ответ на которое будет происходить заданное вами действие. Это меню показано на Рисунок 13.4. Таким образом, вы можете изменить событие, в ответ на которое выполняется какое-либо действие, например, заставить анимацию проигрываться в ответ на щелчок мышью.

Меню событий панели Behaviors

Рисунок 13.4. Меню событий панели Behaviors

Чтобы отобразить в этом меню только события, поддерживаемые какой-либо программой Web-обозревателя, выберите пункт Show Events For. На экране появится небольшое подменю; включите пункт-выключатель, соответствующий нужной программе. Все пункты этого подменю перечислены в табл. 13.4.

Диалоговое окно Play Timeline

Рисунок 13.5. Диалоговое окно Play Timeline

Меню поведений панели Behaviors

Рисунок 13.6. Меню поведений панели Behaviors

Итак, чтобы создать новое поведение, сначала выделите нужный элемент страницы. Вы также можете привязать поведение к самой странице, для чего щелкните по пустому месту на ней или выберите тег <BODY> в строке тегов. Затем выберите необходимый пункт в меню поведений. После этого на экране появится диалоговое окно задания параметров выбранного вами поведения. Такое окно для поведения Play Timeline показано на Рисунок 13.5. Задайте требуемые параметры и нажмите кнопку ОК. Диалоговые окна задания параметров для других поведений будут рассмотрены ниже.

Кнопка со знаком "минус" позволит вам удалить выбранное в списке поведение. С таким же успехом вы можете нажать клавишу <Del>. He забудьте только выделить в окне документа нужный элемент страницы.

Кнопки вверх и вниз перемещают выбранное в списке поведение на позицию вверх или вниз. Дело в том, что если несколько поведений привязано к одному и тому же событию, они выполняются в порядке следования в списке поведений. С помощью кнопок t и -I вы можете изменить этот порядок.

Диалоговое окно Call JavaScript

Рисунок 13.7. Диалоговое окно Call JavaScript

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

Диалоговое окно Change Property

Рисунок 13.8. Диалоговое окно Change Property

Набор переключателей Property позволяет выбрать способ задания нужного свойства.

Если выбран переключатель Select, вы сможете выбрать нужное свойство в раскрывающемся списке, находящемся правее этого переключателя. Имейте, однако, в виду, что в этом списке для многих объектов отображаются как свойства самого этого объекта, так и его внутреннего объекта style. Таким образом, вы можете изменить также и значения атрибутов его стиля.

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

NS3 — отображаются только свойства, поддерживаемые Navigator 3.0;
IE3 — Internet Explorer 3.0;
NS4 — Navigator 4.0;
IE4 — Internet Explorer 4.0 (выбран по умолчанию).

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

Осталось ввести новое значение свойства в поле ввода New Value — и можно нажимать кнопку ОК.

Диалоговое окно Check Browser

Рисунок 13.9. Диалоговое окно Check Browser

Интернет-адрес "основной" страницы задается в поле ввода URL. Интернет-адрес "альтернативной" страницы — в поле ввода Alt URL. Конечно, вы можете нажать кнопку Browse, находящуюся правее нужного поля ввода, и выбрать необходимый файл в диалоговом окне Select File.

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

Группа элементов управления Netscape Navigator позволяет задать, на какие страницы будет произведено перенаправление, если посетитель сайта пользуется Navigator. Сама версия Web-обозревателя задается в небольшом поле ввода, называющемся так же - Netscape Navigator. Если версия Web-обозревателя окажется такой же, как вы ввели, или более поздней, осуществляется переход на страницу, заданную в раскрывающемся списке or later. В противном случае переход будет выполнен на страницу, заданную в раскрывающемся списке otherwise.

Раскрывающиеся списки or later и otherwise имеют по три пункта:

Stay on this Page — оставаться на текущей странице;
Go to URL — перейти на "основную" страницу;
Go to Alt URL — перейти на "альтернативную" страницу.

Как видите, все довольно просто.

Точно так же задаются страницы для пользователей различных версий Internet Explorer. Для этого служит группа элементов управления Internet Explorer. Для задания страницы, предназначенной для пользователей других программ Web-обозревателей, используется единственный раскрывающийся список Other Browsers.

По умолчанию Dreamweaver предлагает нам следующее:

пользователей Internet Explorer 4.0 и Navigator 4.0 или более новых версий этих программ — переслать на "основную" страницу;
пользователей более старых версий Internet Explorer 4.0 и Navigator 4.0, а также других программ Web-обозревателей — переслать на "альтернативную" страницу.

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

Диалоговое окно Check Piugin

Рисунок 13.10. Диалоговое окно Check Piugin

Группа переключателей Piugin задает способ, которым выбирается модуль расширения. Если вы включите переключатель Select (он, кстати, включен по умолчанию), то сможете выбрать нужный модуль расширения в раскрывающемся списке, расположенном правее кнопки. В этом списке доступны пять пунктов:

Flash — модуль расширения Macromedia Flash; Shockwave — Macromedia Shockwave; LiveAudio — Creative LiveAudio; QuickTime — Apple QuickTime;
Windows Media Player — стандартный проигрыватель мультимедийных файлов, поставляемый в составе Microsoft Windows.

Как видите, в этом списке перечислены не все модули расширения, которые могут быть реально у вас установлены, а только "известные" Dreamweaver. Если же вам нужно проверить "существование" какого-то другого модуля, выберите переключатель Enter и введите имя нужного модуля расширения в поле ввода, расположенное правее этого переключателя.

В поле "ввода If Found, Go To URL вводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужный модуль расширения будет найден на компьютере. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым; часто так и делают.

В поле ввода Otherwise, Go To URL вводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужного модуля расширения не будет найдено. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым. Обычно, если какого-либо модуля расширения на компьютере клиента нет, выполняется переход на страницу с разъяснениями и предложением установить его, а если такой модуль есть, посетитель остается на той же странице и наблюдает данные, отображаемые с помощью этого модуля.

Бывает так, что Web-сценарий, определяющий присутствие модуля расширения, не работает или работает некорректно. (В частности, так происходит в некоторых версиях Internet Explorer.) В этом случае выполняется автоматический переход на страницу, чей адрес указан в поле ввода Otherwise, Go То URL. Если же вы хотите, чтобы в этом случае всегда осуществлялся переход на страницу, чей интернет-адрес указан в поле ввода If Found, Go To URL (т. е. как будто проверка прошла удачно, и модуль расширения был бы найден), включите флажок Always go to first URL if detection is not possible.

Как обычно, кнопка OK сохраняет сделанные вами установки, а кнопка Cancel — отменяет их.

Диалоговое окно Control Shockwave or Flash

Рисунок 13.11. Диалоговое окно Control Shockwave or Flash

Прежде всего, выберите соответствующий нужному фильму элемент <EMBED> или <OBJECT> в раскрывающемся списке Movie. Имейте в виду, что в этом меню отображаются имена таких элементов; для тех из них, кто не имеет уникального имени, отображается строка unnamed. Поэтому автор рекомендует для всех фильмов, которыми вы собираетесь управлять из сценариев, задавать уникальное имя.

Выбрав фильм, задайте действия, которое хотите над ним совершить. Это действие задается с помощью набора переключателей Action. Всего переключателей в этом наборе четыре:

Play — начинает проигрывание фильма;
Stop — останавливает его;
Rewind — перематывает его к началу;
Go to Frame — перематывает его к заданному в расположенном правее поле ввода кадру.

Задав нужные параметры, нажмите кнопку ОК.

Диалоговое окно Drag Layer (вкладка Basic)

Рисунок 13.12. Диалоговое окно Drag Layer (вкладка Basic)

В раскрывающемся списке Layer выбирается свободный элемент, который вы хотите позволить посетителю перемещать.

Вы можете выбрать ограниченное или неограниченное движение выбранного свободного элемента. Это делается с помощью раскрывающегося списка Movement. Пункт Unconstrained задает неограниченное движение; в этом случае свободный элемент может перемещаться посетителем куда угодно. Пункт Constrained списка задает ограниченное движение; в этом случае свободный элемент может двигаться в пределах прямоугольной области, чьи размеры задаются с помощью набора полей ввода, которые в этом случае появятся правее списка Movement:

Up — задает вертикальную координату верхней границы области в пикселах;
Down — вертикальную координату нижней границы; Left — горизонтальную координату левой границы; Right — горизонтальную координату правой границы.

Вы также можете предусмотреть некую точку на странице, куда будет "стремиться" перемещаемый свободный элемент. Координаты этой точки задаются в пикселах в полях ввода группы Drop Target: Left (горизонтальная) и Тор (вертикальная). Нажатие кнопки Get Current Position позволит вам поместить в эти поля ввода текущие координаты свободного элемента. В поле ввода Snap if Within ... Pixels of Drop Target задается расстояние в пикселах до вышеуказанной точки, при достижении которого перемещаемый элемент сам "приклеивается" к ней.

Выше мы рассмотрели элементы управления, находящиеся на вкладке Basic диалогового окна Drag Layer, показанного на Рисунок 13.12. Если вы делаете простейшую головоломку, их вам будет достаточно. Если же хотите большего, переключитесь на вкладку Advanced (Рисунок 13.13).

Диалоговое окно Drag Layer (вкладка Advanced)

Рисунок 13.13. Диалоговое окно Drag Layer (вкладка Advanced)

По умолчанию, чтобы перетащить свободный элемент на другое место, посетитель должен "ухватиться" мышью за любое его место. С помощью раскрывающегося списка Drag Handle и набора полей ввода правее его вы можете задать ограниченную прямоугольную область внутри этого элемента, за которую его можно будет таскать. Для этого выберите в данном списке пункт Area Within Layer и введите в поля ввода соответствующие координаты:

в поле ввода L — горизонтальную координату левой границы области в пикселах;
Т — вертикальную координату верхней границы; W — ширину области; Н — высоту области.

Чтобы задать поведение по умолчанию, выберите пункт Entire Layer раскрывающегося списка Drag Handle.

С помощью флажка While Dragging и раскрывающегося списка Bring Layer to Front, then вы можете задать поведение свободного элемента при перетаскивании. Если включен флажок While Dragging, перетаскиваемый элемент будет находиться над всеми остальными свободными элементами, имеющимися на странице. При этом если в раскрывающемся списке Bring Layer to Front, then выбран пункт Leave on Top, то этот элемент так и останется "наверху" после отпускания, а если выбран пункт Restore z-index, то он будет помещен на ту же позицию в порядке перекрытия, на которой находился до начала перетаскивания.

В поле ввода Call JavaScript вы можете ввести строку JavaScript-кода, например вызов написанной ранее функции, которая будет вызываться периодически во время перетаскивания элемента по странице. Этот код может, например, показывать координаты элемента в строке статуса окна Web-обозревателя.

В поле ввода When Dropped: Call JavaScript вы можете ввести строку JavaScript-кода, которая будет вызвана после отпускания элемента. При этом если включен флажок Only if snapped, этот код будет вызван только тогда, когда перетаскиваемый элемент "приклеится" к конечной точке, чьи координаты были заданы на вкладке Basic диалогового окна Drag Layer.

Задав нужные параметры, нажмите кнопку ОК.

Диалоговое окно Go To Timeline Frame

Рисунок 13.14. Диалоговое окно Go To Timeline Frame

Прежде чем задать кадр анимации, нужно выбрать саму анимацию. Это делается в раскрывающемся списке Timeline. Номер же кадра вводится в поле ввода Go to Frame. После этого остается только нажать кнопку ОК.

Вы, наверно, удивились, почему мы не рассмотрели поле ввода Loop ... times. Потерпите, о нем еще будет рассказано, когда мы будем рассматривать специальные случаи создания поведений. Это будет ближе к конт главы.

Диалоговое окно Go To URL

Рисунок 13.15. Диалоговое окно Go To URL

Сам интернет-адрес задается в поле ввода URL. Вы также можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.

В списке Open In задается фрейм, в котором будет открыта новая страница. Если ваша страница не представляет собой набор фреймов, в этом списке будет присутствовать единственный пункт Main Window (все окно), как в нашем случае.

Задав нужные параметры, нажмите кнопку ОК.

Диалоговое окно Open Browser Window

Рисунок 13.16. Диалоговое окно Open Browser Window

В поле ввода URL to Display задается интернет-адрес страницы, которая будет показана в новом окне. Вы можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.

В полях ввода Window Width и Window Height задаются соответственно ширина и высота нового окна. Заметьте, что координатами окна управлять вы не можете.

С помощью группы флажков Attributes задаются дополнительные параметры нового окна:

Navigation Toolbar - включает или отключает наличие у нового окна главного инструментария с кнопками Вперед (Forward), Назад (Back), Остановить (Stop) и Обновить (Reload);
Location Toolbar — включает или отключает наличие у нового окна инструментария с полем ввода интернет-адреса;
Status Bar — включает или отключает наличие у нового окна строки статуса;
Menu Bar — включает или отключает наличие у нового окна системного меню;
Scrollbars as Needed — разрешает или запрещает появление у нового окна полос прокрутки, если его содержимое в нем не помещается;
Resize Handles — разрешает или запрещает пользователю изменять размеры нового окна.

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

В поле ввода Window Name задается имя создаваемого окна. Впоследствии вы можете использовать это имя, например, при создании поведения GO to URL для вывода в нем новой Web-страницы.

Кнопка ОК диалогового окна сохраняет сделанные вами установки, а кнопка Cancel — отменяет их.

Диалоговое окно Play Sound

Рисунок 13.17. Диалоговое окно Play Sound

Это диалоговое окно содержит одно-единственное поле ввода Play Sound, предназначенное для ввода имени аудиофайла, который будет проигран. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File. После этого нажмите кнопку ОК.

Диалоговое окно Popup Message

Рисунок 13.18. Диалоговое окно Popup Message

Введите текст предупреждения в область редактирования Message и нажмите кнопку ОК.

Вы можете использовать в тексте предупреждения любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код: Сегодня {new Date()}

Если же вам понадобится для каких-то целей ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Диалоговое окно Preload Images

Рисунок 13.19. Диалоговое окно Preload Images

Файлы, которые должны быть предварительно загружены, перечислены в списке Preload Images. Чтобы добавить файл в этот список, введите его имя в поле ввода Image Source File и нажмите кнопку со знаком "плюс". Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File. Чтобы изменить какой-либо файл, выберите его в списке, измените его имя в поле ввода Image Source File и после этого обязательно переключитесь на другой элемент управления, лучше всего — на сам список Preload Images. Чтобы удалить ненужный файл, выберите его в списке и нажмите кнопку со знаком "минус".

Теоретически, с помощью этого поведения можно предварительно загружать не только графические, но и любые другие файлы. В частности, это могут быть аудиофайлы, которые будут впоследствии проигрываться в ответ на действия пользователя, или видеоклипы Flash. Хотя в документации по Dreamweaver этого почему-то не написано.

После задания списка файлов, которые должны быть предварительно загружены, нажмите кнопку ОК. Кнопка Cancel позволит вам отказаться от сделанных изменений.

Диалоговое окно

Рисунок 13.20. Диалоговое окно Set Nav Bar Image (вкладка Basic)

Диалоговое окно

Рисунок 13.21. Диалоговое окно Set Nav Bar Image (вкладка Advanced)

В списке Also Set Image выбирается элемент полосы навигации, вид которого вы хотите изменить.

В поле ввода То Image File вводится имя файла изображения для выбранного в списке Also Set Image элемента. Это изображение будет отображаться, если выбранный в списке элемент находится в "ненажатом" состоянии. Вы также можете щелкнуть кнопку Browse и выбрать нужный файл в диалоговом окне Select File.

Если вы выбрали пункт Over Image or Over While Down Image в раскрывающемся списке When element <названш выделенного элемента> is displaying, то становится доступным также поле ввода If Down, To Image File. В нем задается имя файла изображения, которое будет отображаться, если выбранный в списке пункт находится в "нажатом" состоянии. Также здесь доступна кнопка Browse.

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

Диалоговое окно Set Text of Status Bar

Рисунок 13.22. Диалоговое окно Set Text of Status Bar

Это диалоговое окно содержит единственное поле ввода Message, в котором вводится текст, отображаемый в строке статуса. Введя его, нажмите кнопку ОК.

Вы можете использовать в тексте, отображаемом в строке статуса, любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Чтобы отобразить в строке статуса текст по умолчанию (он формируется самим Web-обозревателем -- обычно надпись "Готово" или адрес гиперссылки), задайте в диалоговом окне следующий текст:

{window.defaultStatus}

Свойство defaultStatus объекта window как раз и возвращает этот текст по умолчанию.

Диалоговое окно

Рисунок 13.23. Диалоговое окно Show Pop-Up Menu (вкладка Contents)

Чтобы создать новый пункт меню гиперссылок, введите его текст в поле ввода Text. В поле ввода Link вводится интернет-адрес соответствующей

пункту гиперссылки; также вы можете щелкнуть расположенный правее этого поля ввода значок папки и выбрать нужный файл в диалоговом окне Select File. А с помощью раскрывающегося списка Target - задать цель гиперссылки.

Кнопка Indent Item

Рисунок 13.24. Кнопка Indent Item вкладки Contents диалогового окна Show Pop-Up Menu

Результат показан на Рисунок 13.25. В данном случае пункт Links станет единственным пунктом подменю, раскрывающемся при щелчке на пункте Others.

Как видите, пункт Links отображается с отступом; это говорит о том, что он принадлежит подменю.

Подменю в меню гиперссылок

Рисунок 13.25. Подменю в меню гиперссылок

Чтобы вернуть пункт из подменю в основное меню или подменю более высокого уровня, нажмите кнопку Outdent Item (Рисунок 13.26).

Кнопка Outdent Item

Рисунок 13.26. Кнопка Outdent Item вкладки Contents диалогового окна Show Pop-Up Menu

Вкладка Appearance диалогового окна Show Pop-Up Menu (Рисунок 13.27) позволит вам настроить внешний вид меню гиперссылок.

Диалоговое окно

Рисунок 13.27. Диалоговое окно Show Pop-Up Menu (вкладка Appearance)

С помощью раскрывающегося списка, расположенного выше всех остальных элементов управления, вы можете выбрать расположение меню гиперссылок: вертикальное (пункт Vertical Menu) или горизонтальное (Horizontal Menu).

В раскрывающемся списке Font выбирается шрифт, которым набран текст пунктов меню. По умолчанию выбран пункт Default Font, обозначающий шрифт, заданный для выбранного вами в окне документа элемента страницы.

В поле ввода Size задается размер шрифта, которым набран текст пунктов меню.

С помощью кнопок-выключателей вверх и вниз вы можете сделать шрифт пунктов меню соответственно жирным или курсивным.

Правее кнопок вверх и вниз находится набор из трех кнопок-переключателей, задающих выравнивание текста пунктов меню. Они задают соответственно левое выравнивание, центрирование и правое выравнивание в порядке слева направо.

Группа селекторов цвета Up State задает цвета пунктов меню в "ненажатом" состоянии. Селектор цвета Text задает цвет текста, а селектор цвета Cell -цвет фона (фактически — цвет фона ячейки таблицы, которая и создает меню гиперссылок). Аналогично, группа селекторов цвета Down State задает цвета пункта меню, над которым посетитель поместил курсор мыши.

Результаты применения заданных вами параметров вы можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.

Вкладка Advanced диалогового окна Show Pop-Up Menu (Рисунок 13.28) позволит вам задать некоторые дополнительные параметры таблицы, создающей меню гиперссылок.

Поля ввода и раскрывающиеся списки Cell Width и Cell Height задают соответственно ширину и высоту ячеек этой таблицы. Если вы выберете в раскрывающихся списках пункт Automatic, то соответствующий размер будет устанавливаться самим Web-обозревателем. Чтобы самим задать нужный размер, выберите в соответствующем раскрывающемся списке пункт Pixels и введите этот размер в пикселах в поле ввода, расположенное левее.

Поля ввода Cell Padding и Cell Spacing задают соответствующие параметры таблицы.

В поле ввода Text Indent задается величина отступа красной строки в пикселах.

В поле ввода Menu Delay вводится задержка открытия меню и его подменю в миллисекундах.

Включите флажок Show Borders, если хотите, чтобы границы меню и подменю были видимы.

Диалоговое окно

Рисунок 13.28. Диалоговое окно Show Pop-Up Menu (вкладка Advanced)

В поле ввода Border Width вводится толщина границы меню и подменю в пикселах.

Селектор цвета Border Color задает цвет границы меню и подменю. Также вы можете задать цвет "затемненной" стороны границы в селекторе цвета Shadow, а цвет "освещенной" стороны — в селекторе цвета Highlight.

Результаты применения заданных вами параметров вы также можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.

Вкладка Position диалогового окна Show Pop-Up Menu (Рисунок 13.29) позволит вам задать местонахождение меню гиперссылок относительно элемента страницы, к которому оно привязано.

Набор из четырех больших кнопок-переключателей Menu Position позволит вам задать собственно местоположение меню гиперссылок. Эти кнопки заставляют меню появляться соответственно в правом нижнем углу, ниже, выше и в правом верхнем углу элемента, к которому оно привязано. (Порядок перечисления кнопок — слева направо.)

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

Диалоговое окно

Рисунок 13.29. Диалоговое окно Show Pop-Up Menu (вкладка Position)

По умолчанию меню гиперссылок убирается с экрана сразу же после того, как посетитель уберет курсор мыши с элемента страницы, к которому оно привязано. Если вы хотите, чтобы оно оставалось на экране, отключите флажок Hide Menu on onMouseOut Event.

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

Диалоговое окно ShowHide Layers

Рисунок 13.30. Диалоговое окно Show-Hide Layers

Все имеющиеся на странице свободно позиционируемые элементы перечислены в списке Named Layers. Вы можете выбрать в этом списке любой из них и задать для него выполняемое действие: показ или скрытие.

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

Show — показывает свободный элемент (при этом в соответствующей строке списка правее его имени появляется надпись "(show)");
Hide — скрывает свободный элемент (надпись "(hide)");
Default — восстанавливает видимость свободного элемента, заданную при его создании (надпись "(default)").

Выберите необходимый свободный элемент в списке и нажмите нужную кнопку. Чтобы отменить ошибочно выбранное действие, нажмите ту же кнопку еще раз. После этого нажмите кнопку ОК, чтобы сохранить сделанные установки.

Диалоговое окно Stop Timeline

Рисунок 13.31. Диалоговое окно Stop Timeline

Это диалоговое окно содержит только раскрывающийся список Stop Timeline. В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL TIMELINES ** позволяет остановить проигрывание всех анимаций, созданных на данной странице. После выбора анимации не забудьте нажать кнопку ОК.

Диалоговое окно Swap Image

Рисунок 13.32. Диалоговое окно Swap Image

Все имеющиеся на странице графические изображения перечислены в списке Images. Выберите нужное. После этого введите имя файла нового изображения в поле ввода Set Source to; также вы можете нажать кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне Select File.

Если вы хотите изменить сразу несколько изображений, выполните вышеприведенную последовательность действий для всех нужных элементов. Созданный Dreamweaver Web-сценарий выполнит все эти замены одновременно.

Если включен флажок Preload Images (а он включен по умолчанию), Dreamweaver создаст еще один сценарий, выполняющий предварительную загрузку нужных файлов изображений. (Фактически для этого он создаст поведение Preload images.) Если вы отключите этот флажок, то сами должны будете выполнить их предзагрузку, либо мириться с задержками при изменении изображений.

Если вы привязываете поведение swap image к событию onMouseOver, то Dreamweaver автоматически создаст поведение swap image Restore, восстанавливающее все изначальные изображения, и привязывает его к событию onMouseOut. Если вы не хотите, чтобы он так делал, отключите флажок Restore Images onMouseOut.

Закончив работу, нажмите кнопку ОК.

Кадр анимации в

Рисунок 13.33. Кадр анимации в канале поведений, к которому привязано поведение

Поведение привязанное

Рисунок 13.34. Поведение, привязанное к кадру анимации, в списке панели Behaviors

Таким образом, вы можете создать сколько угодно поведений, привязанных к кадрам анимации. Чтобы просмотреть поведения, привязанные к какому-либо кадру, просто выберите его в канале поведений панели Timelines. Имейте в виду, что выбирать можно только кадры, помеченные знаком, показанным на Рисунок 13.33. Также вы можете привязать к одному кадру несколько поведений, просто добавив их в список поведений при выбранном кадре.

Вы можете изменить параметры привязанного к кадру анимации поведения, дважды щелкнув по соответствующей строке в списке поведений. Чтобы удалить ненужное поведение, либо удалите его из списка поведений, либо используйте пункт Remove Behavior контекстного меню панели Timelines или одноименный пункт подменю Timeline меню Modify.

Вы можете удивиться, почему автор не использовал для создания поведений пункт Add Behavior контекстного меню панели Timelines. (Кроме того, в подменю Timeline меню Modify есть пункт Add Behavior to Timeline.) Если вы выберете этот пункт, Dreamweaver выведет на экран предупреждение, предлагающее вам воспользоваться для создания поведения тем самым путем, который мы описали. Зачем разработчикам Dreamweaver это понадобилось, непонятно.

Ну, вот и все о создании поведений и о написании Web-сценариев вообще. Поговорим о следующем, последнем шаге работы над любой программой — об отладке.

Сообщение о синтаксической

Рисунок 13.35. Сообщение о синтаксической ошибке Internet Explorer

Логические ошибки — это ошибки в логике работы программы. Программный код выглядит абсолютно правильным, но работает неправильно. Такие ошибки выявить и исправить намного сложнее.

Обычно программист сразу же после написания программы обязательно ее проверит, "погоняет" сам, чтобы прячущиеся в ней ошибки "вылезли" наружу, проявились. Этот процесс и называется отладкой. За отладкой обычно следует исправление найденных ошибок и новая отладка. И так повторяется довольно долго, пока программист не будет уверен, что ошибок в его творении больше нет.

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

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

Программный код на современных компьютерах выполняется с большой скоростью. Более того, этот код зачастую представляет собой "вещь в себе"; разработчик не может "влезть" внутрь его, посмотреть, что хранится в той или иной переменной, хотя часто без этого не обойтись. В этом его ограниченность.

А человек всегда преодолевает свою ограниченность посредством созданных им машин. Поэтому были созданы специальные программы — отладчики, позволяющие "заглянуть" в программный код и увидеть, как он работает. Сейчас все средства для разработки программ имеют в своем составе такие отладчики.

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

Какие же возможности предлагают нам современные программы-отладчики?

Установка так называемых точек останова. Это особые метки в коде программы, на которых выполнение приостанавливается, после чего программист может посмотреть на результат работы своей программы. После этого выполнение программы может быть продолжено до ее конца или до следующей точки останова. Точки останова применяются, чтобы выяснить, что происходит в том или ином участке кода программы.
Пошаговое выполнение кода. Программист может выполнять программный код выражение за выражением и наблюдать за результатами выполнения. Пошаговое выполнение позволит точно узнать, как выполняется программа, и что происходит во время ее выполнения.
Просмотр значений переменных. Может пригодиться практически всегда.

Так, с отладчиками вообще мы разобрались. Обратимся теперь к конкретному представителю этого славного семейства - встроенному отладчику Dreamweaver.

Скрытие меню гиперссылок (Hide PopUp Menu)

Скрытие меню гиперссылок (Hide Pop-Up Menu)

Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver создает его сам, но иногда вам придется делать это самим.

После выбора в меню поведений пункта Hide Pop-Up Menu на экране появится небольшое окно-предупреждение. Закройте его, нажав кнопку ОК. На этом создание поведения Hide Pop-up Menu закончено. Никаких параметров оно не имеет.

Нажатие кнопки Cancel вышеупомянутого окна-предупреждения позволит вам отказаться от создания поведения Hide Pop-Up Menu.

Создание поведений

Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать.

Название поведения в терминологии самого Dreamweaver приведено в скобках, так что вы сразу сможете найти его в меню поведений.

Имейте только в виду, что здесь приводятся не все поведения, поддерживаемые Dreamweaver. Поведения, служащие для поддержки форм и элементов управления, рассмотрим в главе 16.

Некоторые методы класса Date

Таблица 13.1. Некоторые методы класса Date


	Метод	Описание
	getDate ( )	Возвращает число
	getDay ( )	Возвращает цифру, обозначающую день недели (0 — воскресенье, 1 — понедельник, 2 — вторник и т. д.)
	getFullYear()	Возвращает год
	getHours ( )	Возвращает час
	getMilliseconds ( )	Возвращает миллисекунды
	getMinutes ( )	Возвращает минуты
	getMonth ( )	Возвращает цифру, обозначающую месяц (от 0 до 11)
	getSeconds ( )	Возвращает секунды
	getTime ( )	Возвращает время в виде количества миллисекунд, прошедших с полуночи 1 января 1 970 года

Системный класс 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 объектом класса string и беспрепятственно "пускает" нас к свойству length этого класса, возвращающему длину строки текста, которую мы и помещаем в переменную 1.

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

var a, s;

а = 16765247;

s = a.toString();

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

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

Поведения поддерживаемые Dreamweaver

Таблица 13.2. Поведения, поддерживаемые Dreamweaver


	Название в терминологии Dreamweaver	Описание
	Call JavaScript	Вызов фрагмента JavaScript-кода или функции, написанной на JavaScript
	Change Property	Изменение значения свойства какого-либо объекта
	Check Browser	Перенаправление посетителей на разные Web-страницы в зависимости от программы Web-обозревателя
	Check Plugin	Перенаправление посетителей на разные Web-страницы в зависимости от того, установлен ли у них нужный модуль расширения Web-обозревателя
	Control Shockwave or Flash	Управление проигрыванием фильма Shockwave или Flash
	Drag Layer	Позволяет посетителю перетаскивать свободно позиционируемый элемент страницы с места на место
	Go to Timeline Frame	Перемещение к заданному кадру анимации
	Go to URL	Перенаправление посетителей на другую Web-страницу
	Hide Pop-Up Menu	Скрытие меню гиперссылок, выведенного ранее на экран с помощью поведения Show Pop-Up Menu
	Jump Menu	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок. Пользователю обычно не нужно создавать это поведение самому
	Jump Menu Go	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок к кнопке Go (Перейти). Пользователю обычно не нужно создавать это поведение самому
	Open Browser Window	Открытие какой-либо Web-страницы в новом окне Web-обозревателя
	Play Sound	Проигрывание аудиофайла
	Play Timeline	Запуск проигрывания анимации
	Popup Message	Вывод окна-предупреждения с заданным текстом и кнопкой ОК
	Preload Images	Загрузка из файлов графических изображений. Эти изображения могут использоваться затем для вывода на страницу в качестве ответа на событие
	Set Nav Bar Image	Создается самим Dreamweaver при создании полосы навигации. Пользователю обычно не нужно создавать это поведение самому


	Set Text of Frame	Помещение какого-либо текста во фрейм
	Set Text of Layer	Помещение какого-либо текста в свободно позиционируемый элемент
	Set Text of Status Bar	Помещение какого-либо текста в строку статуса окна Web-обозревателя
	Set Text of Text Field	Помещение какого-либо текста в поле ввода
	Show Pop-Up Menu	Вывод на экран меню гиперссылок, например, в ответ на помещение посетителем страницы курсора мыши над каким-либо элементом страницы
	Show-Hide Layers	Показ или скрытие свободно позиционируемого элемента
	Stop Timeline	Остановка проигрывания анимации
	Swap Image	Замена одного графического изображения другим
	Swap Image Restore	Восстановление изначально присутствовавшего на странице графического изображения после его замены с помощью поведения Swap Image
	Validate Form	Проверка введенных в форму данных на правильность (о формах см. главу 16)

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

События поддерживаемые Dreamweaver

Таблица 13.3. События, поддерживаемые Dreamweaver


	Название	Описание
	onAbort onBlur onChange onClick	Наступает, когда пользователь останавливает загрузку Web-страницы, например, нажав кнопку Останов Наступает, когда элемент управления или сама страница теряет фокус ввода Наступает, когда посетитель изменяет значение элемента управления Наступает при щелчке мышью по элементу страницы или по самой странице


	onDblClick	Наступает при двойном щелчке мышью по элементу страницы или по самой странице
	onError	Наступает при возникновении ошибки при загрузке страницы, графического изображения или внедренного элемента
	onFocus	Наступает, когда элемент управления или сама страница получает фокус ввода
	onHelp	Наступает, когда пользователь вызывает интерактивную справку Web-обозревателя
	onKeyDown	Наступает при нажатии клавиши клавиатуры
	onKeyPress	Наступает при нажатии и отпускании клавиши клавиатуры
	onKeyUp	Наступает при отпускании клавиши клавиатуры
	onLoad	Наступает по окончании загрузки страницы, графического изображения или внедренного элемента
	onMouseDown	Наступает при нажатии кнопки мыши
	onMouseMove	Периодически наступает при перемещении курсора мыши над элементом страницы или над самой страницей
	onMouseOut	Наступает при "уводе" курсора мыши с элемента страницы
	onMouseOver	Наступает, когда курсор мыши "заходит" на элемент страницы
	onMouseUp	Наступает при отпускании кнопки мыши
	onMove	Наступает при перемещении окна Web-обозревателя
	onReset	Наступает, когда посетитель нажимает кнопку Сброс формы
	onResize	Наступает при изменении размеров окна Web-обозревателя
	onScroll	Наступает при прокрутке содержимого страницы или ее элемента посетителем
	onSelect	Наступает при выделении текста в поле ввода
	onSubmit	Наступает, когда посетитель нажимает кнопку Отправить формы, запуская отправку данных
	onUnload	Наступает, когда посетитель покидает текущую Web-страницу

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

Пункты подменю Show Events For меню событий

Таблица 13.4. Пункты подменю Show Events For меню событий


	Пункт подменю	Отображаемые события
	3.0 and Later Browsers	Internet Explorer и Navigator, версии 3.0 и более поздние
	4.0 and Later Browsers	Internet Explorer и Navigator, версии 4.0 и более поздние
	IE 3.0	Interhet Explorer 3.0
	IE 4.0	Internet Explorer 4.0
	IE 5.0	Internet Explorer 5.0
	IE 5.5	Internet Explorer 5.5
	IE 6.0	Internet Explorer 6.0
	Netscape 3.0	Navigator 3.0
	Netscape 4.0	Navigator 4.0
	Netscape 6.0	Navigator 6.0

Dreamweaver также предоставляет вам возможность изменить параметры выбранного в списке поведения. Для этого просто дважды щелкните по нему мышью, после чего на экране появится диалоговое окно задания параметров соответствующего поведения. Например, для поведения play Timeline такое окно выглядит так, как на Рисунок 13.5. В раскрывающемся списке Play Timeline выберите нужную анимацию и не забудьте нажать кнопку ОК для сохранения сделанных изменений или Cancel — для отказа от них.

Управление фильмом Shockwave или

Управление фильмом Shockwave или Flash (Control Shockwave or Flash)

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

Так, фильм Flash может запускаться в ответ на нажатие кнопки или наведение курсора мыши на какой-либо элемент страницы. Существуют сайты, почти целиком реализованные на Flash-фильмах и Web-сценариях, которые ими управляют.

Dreamweaver предоставляет вам возможность управлять фильмом в формате Shockwave или Flash из обработчика того или иного события. Для этого используется поведение Control Shockwave or Flash. Для создания такого поведения выберите одноименный пункт меню поведений. Диалоговое окно Control Shockwave or Flash, показанное на Рисунок 13.11, позволит вам задать параметры этого поведения.

Когда будете изменять событие или

Внимание

Когда будете изменять событие или параметры поведения, не забудьте выделить в окне документа нужный элемент страницы.
В верхней части панели Behaviors находятся четыре кнопки: +, —, вверх и вниз. Давайте рассмотрим их по очереди.

Кнопка со знаком "плюс" позволит вам создать новое поведение. При ее нажатии на экране появляется довольно большое меню поведений (Рисунок 13.6), в котором можно выбрать нужное поведение. Некоторые из пунктов этого меню могут быть недоступными; это обычно означает, что в данный момент времени на странице нет необходимых элементов. Также некоторые поведения могут "прятаться" в подменю, например поведения, управляющие анимациями, находятся в подменю Timeline.

С помощью пунктов уже знакомого вам подменю Show Events For, находящегося в этом же меню, можно задать, поддерживаемые каким Web-обозревателем события будут отображаться в меню событий. Пункты этого подменю перечислены в табл. 13.4. Чтобы вывести нужный набор событий, просто выберите соответствующий пункт-выключатель.

обозревателя сейчас считается дурным тоном.

Внимание

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

Перед тем как создать меню

Внимание

Перед тем как создать меню гиперссылок, дайте элементу страницы, к которому оно привязывается, уникальное имя.
Выберите в меню поведений пункт Show Pop-Up Menu. На экране появится диалоговое окно Show Pop-Up Menu (Рисунок 13.23).

в этом случае верен своему

Внимание

Dreamweaver и в этом случае верен своему кредо!.. Если вы введете русский текст в поле ввода Text, он будет искажен до неузнаваемости. Поэтому либо задавайте для пунктов меню гиперссылок только английский текст, либо правьте сам JavaScript-код вручную.
Вы можете не вводить данные в поле ввода Link. В этом случае пункт меню не будет гиперссылкой и, соответственно, не будет реагировать на щелчки мышью. Таким образом вы можете создавать, например, разделители.

Все созданные вами к данному времени пункты меню гиперссылок отображаются в списке, занимающем большую часть вкладки Contents. Этот список состоит из трех колонок: Text (текст пункта меню), Link (интернет-адрес гиперссылки) и Target (цель гиперссылки). Вы можете выбрать любой пункт в этом списке и выполнить над ним различные манипуляции.

Чтобы создать новый пункт, нажмите кнопку со знаком "плюс", расположенную над списком пунктов, и задайте в полях ввода Text, Link и раскрывающемся списке Target нужные данные.

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

Чтобы удалить ненужный пункт, выберите его в списке пунктов и нажмите кнопку со знаком "минус", расположенную над этим списком.

Кнопки вверх и вниз позволят переместить выбранный вами пункт на позицию вверх или вниз соответственно.

Вы также можете создавать вложенные меню. Для этого создайте пункт основного меню, при щелчке на котором будет открываться подменю, причем не вводите ничего в поле ввода Link. Далее создайте первый пункт подменю и поместите его точно перед созданным ранее пунктом. Теперь вам останется нажать кнопку Indent Item (Рисунок 13.24).

При создании на странице меню

Внимание

При создании на странице меню гиперссылок Dreamweaver помещает в корневую папку сайта файл mm_menu.js, содержащий необходимые сценарии, и графическое изображение arrows.gif. Не удаляйте их! И не забудьте поместить их на Web-сервер.

Создавать поведение Swap image Restore

Внимание

Создавать поведение Swap image Restore можно только после создания поведения Swap Image.

Для того чтобы запустить отладчик

Внимание

Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows XP эта виртуальная машина не поставляется — вам самим придется загружать ее с сайта этой фирмы.

После загрузки и запуска отладчика Dreamweaver выведет небольшое предупреждение с кнопкой ОК и флажком Don't show me this message again. Это предупреждение предлагает вам установить точки останова и запустить отладку. Закройте это окно, нажав ОК; вы можете перед этим включить флажок Don't show me this message again, если больше не хотите его видеть.

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

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

Теперь мы должны, как предлагает Dreamweaver, установить точки останова и запустить отладку. Давайте так и сделаем.

Чтобы установить точку останова, поставьте текстовый курсор на нужной строке программного кода (кода JavaScript, а не HTML) и нажмите клавишу <F7>. Вы также можете выбрать пункт Set/Remove Breakpoint в контекстном меню или нажать одноименную кнопку инструментария отладчика. Точка останова обозначается специальным маркером — небольшим красным кружком, стоящим на серой полосе с номерами строк напротив соответствующей строки кода.

Если вы случайно ошиблись и поставили точку останова не там, поставьте на строке, где стоит точка останова, текстовый курсор и снова нажмите клавишу <F7>, кнопку Set/Remove Breakpoint или пункт в контекстном меню. Вы также можете убрать одновременно все точки останова в коде, нажав кнопку Remove All Breakpoints или выбрав в контекстном меню одноименный пункт.

Расставив точки останова, можно запускать код на выполнение. Для этого нажмите кнопку Run инструментария отладчика или клавишу <F8>. Кнопка Stop Debugging позволит вам отключить отладчик и продолжить выполнение JavaScript-кода без него.

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

Дойдя до ближайшей установленной вами точки останова, выполнение кода временно прервется. Маркер точки останова в этом случае примет такой вид . Чтобы запустить его дальше, нажмите кнопку Run инструментария отладчика или клавишу <F8>.

Вы также можете использовать кнопки Step Over, Step Into и Step Out инструментария отладчика для пошагового выполнения кода, выражение за выражением.

Нажатие кнопки Step Over или клавиши <F9> вызывает простой переход на следующее выражение.

Кнопка Step Into (нажатие клавиши <F10>) аналогична Step Over за одним исключением. Если следующее выражение программного кода является вызовом функции, то далее начнет выполняться первое выражение кода функции, т. е. вы как бы "зайдете" в функцию. Имейте в виду, что "зайти" таким образом можно только в функции, созданные самим программистом.

Кнопка Step Out (нажатие клавиши <F11>) действует только тогда, когда выполняется код какой-либо функции. При ее нажатии выполняется весь код функции, и очередная остановка происходит на выражении, следующим за вызовом этой функции, т. е. кнопка Step Out позволит вам "выйти" из функции.

Теперь обратимся к списку переменных, находящемуся в нижней части окна отладчика. Вы видите, что этот список, как и многие списки Dreamweaver, представляет собой таблицу, состоящую из двух колонок. В первой колонке - Variable Name — отображается имя переменной или свойства, а во второй - Value — его значение. Вы можете выделить любую строку в списке и выполнить над ней некоторые действия.

Над самим списком находятся две кнопки со знаками "плюс" и "минус". Их назначение уже должно быть вам понятно. Кнопка со знаком "плюс" добавляет новую строку в список, после чего вам останется ввести в добавленную строку имя нужной переменной или нужного свойства и нажать клавишу <Enter> . Кнопка со знаком "минус" позволит вам удалить выделенную в списке строку. Как видите, все очень удобно, за исключением того, что, как вы уже заметили, русские буквы опять отображаются некорректно.

Также вы можете изменить имя переменной (свойства) или его значение. Для этого выберите нужную строку в списке и щелкните мышью по значению в колонке Variable Name или Value. После этого введите новое имя или значение в появившееся в строке поле ввода и нажмите клавишу <Enter>.

Чтобы закончить отладку, либо закройте окно отладчика и окно Web-обозревателя, либо нажмите кнопку Stop Debugging. В первом случае выполнение всех сценариев будет прервано, а сам Web-обозреватель — выгружен, а во втором — выполнение продолжится без отладчика.

Восстановление всех изначальных

Восстановление всех изначальных изображений (Swap Image Restore)

Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте поведение Swap image Restore. Для этого выберите пункт Swap Image Restore меню поведений. На экране появится небольшое окно-предупреждение; нажмите кнопку ОК, чтобы закрыть его. Нажатие кнопки Cancel позволит вам отказаться от создания этого поведения.

Встроенный отладчик Dreamweaver

Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш <Alt>+<F12> или <Ctrl>+<Alt>+<F12>. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая -во вторичном. (О первичном и вторичном Web-обозревателях см. главу 2.) Также вы можете выбрать нужный пункт в подменю Debug in Browser меню File или меню кнопки Preview/Debug in Browser инструментария документа . После этого нажмите кнопку ОК в нескольких появившихся на экране окнах-предупреждениях, чтобы собственно запустить отладчик. И подождите некоторое время, пока все это загрузится и запустится.

Вывод на экран меню гиперссылок (Show PopUp Menu)

Вывод на экран меню гиперссылок (Show Pop-Up Menu)

В последнее время в моду вошли меню гиперссылок, раскрывающиеся после наведения курсора мыши на какой-либо элемент Web-страницы или щелчка по нему. Родоначальником этой моды, вероятно, были Web-дизайнеры, разрабатывавшие сайт фирмы Microsoft, после чего меню "разбежались" по другим сайтам и страницам. Разумеется, разработчики Dreamweaver не могли пройти мимо этого и ввели в свое детище возможность создания такого меню с помощью поведения show Pop-up Menu и привязки его к любому элементу страницы.

Вывод предупреждения (Popup Message)

Очень часто для сообщения пользователю о чем-либо (например, необходимости ввести данные в поле ввода на странице) используются окна-предупреждения. Они представляют собой обычное стандартное предупреждение Windows: небольшое окно с текстом предупреждения, изображением восклицательного знака и кнопкой ОК. Для вывода такого предупреждения вы можете воспользоваться поведением Popup Message. Выберите одноименный пункт меню поведений, после чего на экране появится диалоговое окно Popup Message (Рисунок 13.18).

Вывод текста в строке статуса

Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar)

Dreamweaver также позволяет вам вывести любой текст в строке статуса текущего окна Web-обозревателя. Это может быть использовано, например, для показа краткого описания гиперссылки, над которой находится курсор мыши, или просто краткого описания текущей страницы сайта. (Иногда в статусной строке выводится текущее время, "ползущий" справа налево либо "вырастающий" слева направо текст или другие чудеса.) Выберите пункт Set Text of Status Bar в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Status Bar, показанное на Рисунок 13.22.

Вызов JavaScriptкода (CallJavaScript)

Вызов JavaScript-кода (CallJavaScript)

Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript-код, создайте для этого элемента поведение Call JavaScript. Для этого вызовите одноименный пункт меню поведений. После этого на экране появится диалоговое окно Call JavaScript, показанное на Рисунок 13.7.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web-программы имеют только два недостатка. Во-первых, они доступны только после подключения к Интернету. (Хотя, конечно, их можно распространять на дискетах, CD, по электронной почте и другими путями.) Во-вторых, из-за ограничений интерпретатора JavaScript с помощью таких программ невозможно сохранение документов на дисках клиентского компьютера.

Задание нового содержимого

Задание нового содержимого

свободно позиционируемого элемента (Set Text of Layer)

Dreamweaver позволяет вам поместить новое содержимое в любой из свободно позиционируемых элементов, имеющихся на странице. Для этого выберите пункт Set Text of Layer в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Layer

В раскрывающемся списке Layer выбирается свободный элемент, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводится в область редактирования New HTML, Задав нужные настройки, нажмите кнопку ОК.

Вы можете использовать в HTML-коде нового содержимого свободного элемента любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Задание нового содержимого фрейма (Set Text of Frame)

Dreamweaver позволяет вам поместить новое содержимое в любой из фреймов текущего набора. Для этого выберите пункт Set Text of Frame в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Frame.

В раскрывающемся списке Frame выбирается фрейм, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводится в область редактирования New HTML. Вы также можете нажать кнопку Get Current HTML, чтобы скопировать в эту область редактирования текущее содержимое фрейма, после чего внести необходимые изменения. Если вы включите флажок Preserve Background Color, Web-сценарий, обновляющий содержимое фрейма, сохранит цветовые настройки текста и фона;

в противном случае эти настройки пропадут. Задав нужные настройки, нажмите кнопку ОК.

Вы можете использовать в HTML-коде нового содержимого фрейма любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Запуск проигрывания анимации (Play Timeline)

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

Диалоговое окно Play Timeline показано на Рисунок 13.5. Оно содержит один-единственный раскрывающийся список, называющийся Play Timeline. В нем выбирается анимация, которую нужно проиграть, после чего нажимается кнопка ОК. Как видите, все очень просто.