2015-05-10
372
Практически любой объект HTML -документа можно сделать интерактивным. Любой участок текста, любое изображение, ячейки таблиц и слои могут изменять свои свойства при выполнении учеником каких-либо действий на клавиатуре или мышью. Изменение свойств объектов осуществляется с помощью программ на языке JavaScript. Благодаря тесной интеграции с форматом HTML, программы на языке JavaScript могут получить доступ к свойствам всех объектов HTML-страницы. А использование технологии событийного программирования позволяет отслеживать события, происходящие на HTML-странице, и выполнять те или иные действия.
HTML-редактор Dreamweaver с помощью специального инструмента Behaviors позволяет управлять поведением объектов в зависимости от происходящих на странице событий, а также предоставляет набор готовых, часто используемых скриптов.
Вызов окна инструмента Behaviors выполняется по команде Window=>Behaviors.
Выделив объекты, поведение которых будет изменяться в зависимости от происходящих событий, в окне Behaviors (рис. 1.5) необходимо указать, какие действия (Actions) будут выполняться после возникновения того или иного события (Events). Параметры управления поведением элемента станицы будут, в конечном итоге, установлены для соответствующего тега HTML. Имя текущего выделенного в поле документа тега отображается в заголовке окна Behaviors (рис. 1.5). Если для одного и того же события было назначено несколько реакций, то они перечисляются в порядке своего выполнения.
|
|
|
Рисунок 1.5 - Окно для определения поведения объектов и назначения реакции на события
Кнопку 
следует использовать для назначения действия, применимого к выделенному объекту, а кнопку 
- для отмены назначенного ранее действия. Порядок выполнения действий можно изменить с помощью кнопок 
и 
.
Список основных заранее предусмотренных действий перечислен в таблице 1.1. Список основных событий, после которых можно назначить выполнение определенных действий, перечислен в таблице 1.2. Рассмотрим назначение некоторых из них.
Таблица 1.1 - Список основных действий
| Call JavaScript | вызов любой программы на JavaScript |
| Change Property | изменение свойств любого объекта |
| Check Browser | проверка версии браузера |
| Check Plugin | проверка наличия Plugin на Web-клиенте |
| Drag Layer | перемещение слоя |
| Go to URL | переход к другому файлу или Internet-ресурсу |
| Open Browser Window | создание нового окна с заданными параметрами |
| Play Sound | вставка в документ звуковых фрагментов |
| Popup Message | вывод окна с сообщением |
| Preload Images | предварительная загрузка изображений в кэшпамять браузера |
| Set Nav Bar Image | изменение свойств навигационной панели |
| Set Text of Frame | динамический вывод HTML-текста во фрейм |
| Set Text of Layer | динамический вывод HTML-текста в слой |
| Set Text of Status Bar | динамический вывод текста в строку состояния |
| Set Text of Text Field | динамический вывод текста в текстовое поле |
| Show-Hide Layers | показать/скрыть слои |
| Swap Image | изменить изображение |
| Swap Image Restore | восстановить измененное изображение |
| Validate Form | проверка соответствия типа данных, введенных в поля формы |
Таблица 1.2 - Список основных действий
|
|
|
| onLoad | Загрузка документа завершилась |
| onAbort | Пользователь остановил загрузку документа |
| onError | Ошибка при загрузке документа |
| onUnload | Пользователь завершил просмотр и переходит к другому документу |
| События окна браузера | |
| onResize | Размеры окна или фрейма изменились |
| onMove | окно или фрейм перемещается по экрану |
| onScroll | Пользователь прокручивает документ |
| OnHelp | Пользователь выбрал пункт меню Help в окне браузера |
| События на клавиатуре | |
| OnKeyDown | Пользователь нажал клавишу на клавиатуре |
| OnKeyUp | Пользователь отпустил клавишу на клавиатуре |
| OnKeyPress | Пользователь нажал и отпустил клавишу на клавиатуре |
| События на мыши | |
| OnClick | над объектом сделан щелчок кнопкой мыши |
| OnDblClick | над объектом сделан двойной щелчок кнопкой мыши |
| OnMouseDown | над объектом нажата кнопка мыши |
| OnMouseUp | Кнопка мыши отпущена над объектом |
| OnMouseMove | курсор мыши движется над объектом |
| OnMouseOut | курсор мыши вышел за границы объекта |
| OnMouseOver | курсор мыши вошел в пределы объекта |
| События на элементах управления | |
| OnReset | Очистка значений элементов формы по кнопке Reset |
| OnSubmit | Подтверждение значений полей элементов формы по кнопке Submit |
| OnBlur | Элемент управления теряет фокус |
| OnFocus | Элемент управления получает фокус |
| OnChange | Изменилось содержимое элемента управления |
| OnSelect | Пользователь выделил участок текста |
