Учебник Macromedia Dreamweaver (стр. 104 из 135)
Особые случаи создания поведений
Итак, создание поведений и привязку их к элементам страницы и событиям мы рассмотрели. Но все это были весьма тривиальные случаи. Сейчас же поговорим кое о чем особенном...
Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту текста в абзаце?
Если вы готовы пожертвовать совместимостью с 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, чтобы вам было понятнее.
Вы познакомились с двумя, можно сказать, "детищами" 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 сам создал его так же, как создал анимации и поведения.
Рис. 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-сценариев вообще. Поговорим о следующем, последнем шаге работы над любой программой — об отладке.
Но прежде, чем мы начнем говорить об отладке Web-сценариев, поговорим об ошибках и о том, как они выявляются.
Какие ошибки бывают в программах
Очень часто только что написанная программа содержит ошибки. Более того, если она имеет объем более десяти строк, будьте уверены — хоть одна ошибка там обязательно присутствует. (Уж не говоря о более сложных программах...) Проистекает все это из пресловутой "ненадежности" людей. В самом деле, компьютеры при всех их недостатках никогда не ошибаются сами по себе. Все компьютерные ошибки всегда обусловлены либо неблагоприятными внешними воздействиями (космическое излучение, скачки напряжения в сети, отсутствие дискеты в дисководе и т. п.), либо внутренними (ненадежная электроника, опять же, ошибки в программах). Только люди ошибаются без всяких причин.
Ошибки в программах бывают двух видов:
· Синтаксические ошибки — это неточности в написании самого программного кода. В результате синтаксической ошибки интерпретатор или компилятор не может правильно расшифровать выражение. В этом случае он выдает сообщение о синтаксической ошибке. Например, Internet Explorer огорошит нас таким сообщением — см. рис. 13.35.
Рис. 13.35. Сообщение о синтаксической ошибке Internet Explorer
· Логические ошибки — это ошибки в логике работы программы. Программный код выглядит абсолютно правильным, но работает неправильно. Такие ошибки выявить и исправить намного сложнее.
Обычно программист сразу же после написания программы обязательно ее проверит, "погоняет" сам, чтобы прячущиеся в ней ошибки "вылезли" наружу, проявились. Этот процесс и называется отладкой. За отладкой обычно следует исправление найденных ошибок и новая отладка. И так повторяется довольно долго, пока программист не будет уверен, что ошибок в его творении больше нет.
Не всегда, правда, это бывает так. Очень часто уже готовые программы содержат ошибки. Но разговор сейчас не об этом. Давайте поговорим, почему процесс отладки не всегда позволяет выявить все ошибки.
Вообще-то все ошибки в достаточно сложной, многокомпонентной программе выявить невозможно. Дело в том, что программа может устанавливаться на компьютерах самых разных конфигураций, и для того, чтобы быть уверенным, что программа действительно будет на всех них работать, разработчик должен на всех них ее и проверить. Сами понимаете, что это физически невозможно. Другое дело, что программист может пропустить какую-то ошибку, не исправить ее. Здесь можно говорить как о его невнимательности, так и о его ограниченности. С невнимательностью все понятно. А вот с ограниченностью...