Иллюстрированный самоучитель по Macromedia HOMESITE

Создание сценариев на JavaScript и VBScript


Оба языка предназначены для создания «клиентских» сценариев, то есть сценариев, выполняемых броузером читателя.

Основной частью сценария (программы на языке JavaScript или на VBScript) является описание событий и обработчиков этих событий. События инициируются, главным образом, теми или иными действиями пользователя. Например, щелчку мышью на некотором элементе страницы соответствует событие onClick. Если указатель мыши оказывается над какой-либо областью страницы, имеет место событие onMoitseOver. Таким образом, суть выполнения сценария заключается в воспроизведении реакции на события, происходящие при работе с HTML-документом. Так, в результате щелчка на кнопке может открываться новое окно броузера.

По сравнению с обработкой событий средствами Dynamic HTML (на основе изменения стиля элемента) сценарии обладают более мощными возможностями. Это объясняется тем, что в языках JavaScript и VBScript поддерживается механизм функций. Наряду со стандартными функциями и процедурами (например, вывода на экран диалогового окна) разработчик может создавать собственные функции и использовать их с различными параметрами.

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

В HomeSite поддерживается работа с обоими языками, однако большее внимание уделено все-таки JavaScript.

Объясняется это тем, что VBScript понятен только броузерам MSIE, в то время как JavaScript является фактически стандартным языком сценариев, который обязаны понимать все броузеры.

В HomeSite имеются следующие средства повышения эффективности разработки сценариев:

  • вкладка Script панели быстрой вставки, обеспечивающая удобный доступ к основным инструментам создания и редактирования сценариев (рис. 6.14);
  • специальное окно редактора тегов для установки атрибутов тега <SCRIPT>, позволяющее быстро установить значения его атрибутов;
  • цветовая подсветка синтаксических конструкций сценария, причем для каждого из двух языков — своя, учитывающая особенности языка (рис. 6.15);
  • средства автоматической генерации шаблонов сценариев, входящие в состав Tag Inspector,
  • возможность настройки утилиты Tag Tree для работы с файлом сценария;
  • утилита JavaScript Tree, предназначенная для работы с объектами и функциями языка JavaScript;
  • набор мастеров, обеспечивающих генерацию кода сценариев для некоторых типовых операций.
  • Создание сценариев на JavaScript и VBScript

    Рис. 6.14. Вкладка Script панели быстрой вставки

    Создание сценариев на JavaScript и VBScript

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

    Чтобы создать с помощью Tag Inspector шаблон сценария для «оживления» некоторого элемента страницы, необходимо:

  • В окне ресурсов перейти на вкладку Tag Inspector.
  • В окне документов щелкнуть на теге элемента, с которым должен быть связан сценарий; при этом на панели Tag Inspector будут представлены разрешенные для элемента атрибуты и события.
  • Щелкнуть на событии, инициирующем выполнение сценария, и в соседней ячейке в раскрывающемся списке выбрать язык сценария (рис. 6.16); независимо от выбранного языка на экране появится диалоговое окно, в котором следует ввести имя функции-обработчика события (по умолчанию имя функции совпадает с типом события), формальные параметры (если требуется) и щелкнуть на кнопке ОК.
  • В результате выполнения описанной процедуры в код документа будет вставлен шаблон для создания сценария и вызов функции-обработчика (рис. 6.17).

    Кроме того, имя функции-обработчика будет помещено в список сценариев (рис. 6.18). Это позволяет отслеживать использованные имена функций и при необходимости связать сценарий с каким-либо другим Событием или элементом. При наличии в списке хотя бы одной функции-обработчика в нем появляется пункт Clear Cashed Values... (Очистить буфер), выбор которого приводит к удалению из списка (после подтверждения) всех функций. Это удаление не влияет на код страницы.

    Создание сценариев на JavaScript и VBScript

    Рис. 6.16. Выбор языка сценария

    Создание сценариев на JavaScript и VBScript

    Рис. 6.17. Шаблон сценария, сгенерированный HomeSite

    Создание сценариев на JavaScript и VBScript

    Рис. 6.18. Просмотр списка сценариев

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

  • 1. В окне ресурсов перейти на вкладку Tag Inspector.
  • 2. В панели утилиты Tag Tree открыть список профилей тегов и в нем выбрать пункт Client and Server-side Scripts (Клиентские и серверные сценарии).
  • Если на странице имеются описания функций-обработчиков, то они будут представлены в дереве тегов специальными значками (рис. 6.19).

    Создание сценариев на JavaScript и VBScript

    Рис. 6.19. Представление дерева сценариев

    Для редактирования или создания нового сценария на JavaScript в «полуавтоматическом» режиме, можно воспользоваться утилитой JavaScript Tree. Ее вызов выполняется посредством одноименной кнопки, расположенной на вкладке Script панели быстрой вставки (см. рис. 6.14).

    Окно JavaScript Tree содержит дерево объектов и методов языка JavaScript, а также упорядоченный список библиотечных функций.

    В исходном состоянии дерево объектов содержит следующие категории (рис. 6.20):

  • Window — свойства, методы и подчиненные объекты объекта window (поддерживаемые как MSIE, так и Netscape);
  • Navigator — свойства, методы и подчиненные объекты объекта navigator;
  • Date — свойства и методы объекта Date;
  • Math — свойства и методы объекта Math;
  • Siring — параметры и функции для работы со строками;
  • Reserved Words — зарезервированные (ключевые) слова языка JavaScript.
  • Создание сценариев на JavaScript и VBScript

    Рис. 6.20. Представление классов объектов в окне JavaScript Tree

    Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript, а также к их свойствам и методам. Чтобы «добраться» до требуемого свойства или метода, достаточно просто последовательно раскрывать ветви дерева. Например, на рис. 6.21 приведен формат окна утилиты при работе с объектами формы.

    Создание сценариев на JavaScript и VBScript

    Рис. 6.21. Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript

    Чтобы вставить в код страницы обращение к некоторому свойству или вызов метода объекта, достаточно дважды щелкнуть на имени этою свойства или метода. Причем имя соответствующего объекта будет добавлено автоматически. Например, если требуется вставить в страницу вызов метода confirm для объекта window, следует дважды щелкнуть мышью в дереве на ветви confirm, и в страницу будет добавлена конструкция window.confirm(«»).

    Некоторые типовые сценарии на JavaScript и на VBScript могут быть сгенерированы полностью автоматически с помощью соответствующих мастеров. Например, кнопка JavaScript Wizard, вынесенная на вкладку Script панели быстрой вставки, обеспечивает доступ сразу к шести мастерам. Каждому из них отведена отдельная вкладка в окне редактора тегов (рис. 6.22).

    Создание сценариев на JavaScript и VBScript

    Рис. 6.22. Мастера для создания сценариев на JavaScript

    Они предназначены для создания следующих сценариев:

  • URL Selection (Выбор URL) — создает раскрывающийся список адресов (URL), выбор любого из которых обеспечивает переход по указанному адресу; чтобы сценарий выполнялся корректно, значения цветов в коде страницы должны быть представлены шестнадцатеричными значениями;
  • Background Fade (Изменяющийся фон) — создаст сценарий, с помощью которого начальный цвет фона страницы изменяется на заданный;
  • Frame Busier (Разрушитель фреймов) — создает сценарий, который запрещает открывать страницу внутри фрейма (она будет насильно развернута на все окно);
  • Last Modified Date (Дата последнего изменения) — обеспечивает вывод на странице даты и (дополнительно) времени се последнего редактирования;
  • Вrowser Type (Тип броузера) — обеспечивает распознавание и вывод на странице типа и версии используемого броузера;
  • Current URL (Текущий URL) — обеспечивает вывод на странице адреса файла-источника.


  • Содержание раздела