язык javascript как средство создания интерактивных ресурсов
Использование JavaScript для создания интерактивных Webстраниц
Обобщенно гипертекстовая информационная система состоит из множества
информационных узлов, множества гипертекстовых связей, определенных на этих
узлах, и инструмента манипулирования узлами и связями. Технология World Wide
Web это технология ведения гипертекстовых распределенных систем в Internet, и,
следовательно, она должна удовлетворять общему определению таких систем. Это
значит, что все вышеперечисленные компоненты гипертекстовой системы должны
быть и в Web
Internet как гипертекстовую систему можно рассматривать с двух точек зрения. Вопервых,
как совокупность отображаемых страниц, связанных гипертекстовыми переходами. Во
вторых, как множество элементарных информационных объектов, составляющих
отображаемые страницы (текст, графика, мобильный код и т.п.). В последнем случае
множество гипертекстовых переходов страницы это такой же информационный фрагмент,
как и встроенная в текст картинка.
При втором подходе гипертекстовая сеть определяется на множестве элементарных
информационных объектов самими HTMLстраницами, которые и выступают в роли
гипертекстовых связей. Этот подход более продуктивен с точки зрения построения
отображаемых страниц "на лету" из готовых компонентов. При генерации страниц в Web
возникает дилемма, связанная с архитектурой "клиентсервер". Страницы можно
генерировать как на стороне клиента, так и на стороне сервера. Последнее может быть
реализовано, в частности, через механизм подстановок на стороне сервера (Server Site
Includes). Компания Netscape распространила в 1995 году механизм управления
страницами и на стороне клиента, разработав язык программирования JavaScript.
Таким образом, JavaScript это язык управления сценариями просмотра гипертекстовых
страниц Web на стороне клиента. Если быть более точным, то JavaScript это не только
язык программирования на стороне клиента. Liveware, прародитель JavaScript, является
средством подстановок на стороне сервера Netscape. Однако наибольшую популярность
JavaScript обеспечило именно программирование на стороне клиента.
Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML
объектов и свойств среды отображения в процессе просмотра HTMLстраницы
пользователем. При этом не происходит перезагрузки страницы. На практике этовыражается в том, что можно, например, изменить цвет фона страницы или
интегрированное в документ изображение, открыть новое окно или выдать окно сообщения.
Для реализации этой идеи была предложена объектная модель документа. Суть модели в
том, что каждый HTMLконтейнер это объект, который характеризуется тройкой:
{свойства, методы, события}. Объекты с одинаковым набором свойств, методов и событий
объединяются в классы однотипных объектов. Классы это описания возможных объектов.
Сами объекты появляются только после загрузки документа браузером или как результат
работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту,
которого нет.
Многие HTMLконтейнеры имеют атрибуты. Например, контейнер якоря имеет атрибут
href, который превращает его в гипертекстовую ссылку:
someref
Если рассматривать контейнер якоря
... как объект, то атрибут href будет
задавать свойство объекта типа "якорь". Программист может изменить значение атрибута
и, следовательно, свойство объекта:
document.links[0].href="someref.html"
Для общности картины свойствами в JavaScript наделены объекты, которые не имеют
аналогов в HTMLразметке. Например, среда исполнения, которая называется объектом
navigator, или окно браузера, которое является вообще объектом самого высокого уровня
JavaScript.
В терминологии JavaScript методы объекта определяют функции изменения его свойств.
Например, с объектом документ связаны методы open(), write(), close(). Эти методы
позволяют сгенерировать или изменить содержание документа. Рассмотрим следующий
пример:
function helloAll() { id=window.open("","example","width=400, height=150"); id.focus();
id.document.open(); id.document.write("
Hello all from JavaScript!
");
id.document.write("
В URL можно помещать сложные программы и вызовы функций. Следует только помнить,
что схема JavaScript работает не во всех браузерах, а только в версиях Navigator'а и
Explorer'а, начиная с четвертой.
Таким образом, при программировании гипертекстового перехода интерпретатор получает
управление после того, как пользователь "кликнул" по гипертекстовой ссылке.
Обработчики событий
Код обработчика события указывается в атрибутах контейнеров, с которыми связано то
или иное событие. Например, при нажатии на кнопку происходит событие "Click":
В данном примере атрибут onClick определяет программу обработки события Click.
Аналогично можно обработать изменение данных в поле меню:
В этом примере при выборе одного из предлагаемых вариантов выбранное значение
отображается на экране в окне предупреждения:Обработчики событий можно указать внутри многих HTMLконтейнеров (BODY, IMG, A,
FORM и т.п.). При этом особое внимание следует обратить на события onLoad и onUnload
контейнера BODY, т.к. они позволяют определить действия после загрузки страницы или
при переходе на другую страницу. Таким образом, интерпретатор получает управление
после того, как происходит событие, вызванное действиями пользователя, и для которого
определен обработчик события.
ПодстановкиПодстановка (entity) довольно редко встречается на страницах Всемирной паутины. Тем не
менее, это достаточно мощный инструмент генерации HTMLстраницы на стороне
броузера. Подстановки используются в качестве значений атрибутов HTMLконтейнеров.
Например, как значение умолчания поля формы, определяющего домашнюю страницу
пользователя, будет указан URL текущей страницы:
Подстановки не поддерживаются в Internet Explorer, поэтому пользоваться ими следует
аккуратно. Прежде чем выдать броузеру страницу с подстановками, следует проверить тип
этого браузера. В случае подстановки интерпретатор получает управление в момент
разбора браузером (компонентом parser) HTMLдокумента. Как только parser натыкается
на конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору
JavaScript, который, в свою очередь, после исполнения кода это управление parser'у
возвращает. Таким образом, эта операции аналогична подкачке графики на HTML
страницу.
Вставка
Контейнер SCRIPT это развитие подстановок до возможности генерации текста
документа JavaScriptкодом. В этом смысле применение SCRIPT аналогично Server Site
Includes, т.е. генерации страниц документов на стороне сервера. При разборе документа
HTMLparser передает управление интерпретатору после того, как встретит тэг начала
контейнера SCRIPT. Интерпретатор получает на исполнение весь фрагмент кода внутри
контейнера SCRIPT и возвращает управление HTMLparser'у для обработки текста
страницы после тэга конца контейнера SCRIPT.
Контейнер SCRIPT выполняет две основные функции:
∙ размещение кода внутри HTMLдокумента;
∙ условная генерация HTMLразметки на стороне броузера.
Первая функция аналогична декларированию переменных и функций, которые потом
можно будет использовать в качестве программ переходов, обработчиков событий и
подстановок. Вторая это подстановка результатов исполнения JavaScriptкода в момент
загрузки или перезагрузки документа. Собственно, особенного разнообразия в размещении
кода нет. Его можно разместить либо в заголовке документа, внутри контейнера HEAD,
либо внутри BODY. Сейчас сосредоточимся на заголовке документа.Код в заголовке размещается внутри контейнера SCRIPT:
... Тело документа ...
HTMLкомментарии здесь вставлены для защиты от интерпретации данного фрагмента
страницы HTMLparser'ом в браузерах, не поддерживающих тэг
Часы в строке статуса