http://www.osp.ru/os/os_6_96/source/20.htm
Открытые системы
· #6(20)/96 · стр. 20-26
ira@quest.net.kiae.su
полей заголовка сообщения протокола HTTP
JavaScript
страницами
таблиц
Волна бурного развития технологий World Wide Web не обошла стороной
и средства управления сценариями просмотра гипертекстовых баз данных. Сегодня
авторы домашних страниц Web получили в свое распоряжение новые языки JavaScript
и VBScript. Новые возможности по формированию баз данных Всемирной Паутины
приобрел также уже зарекомендовавший себя язык HTML, что особенно видно
в его версии 3.2 [1-8]. Темой данной статьи станет рассмотрение новых возможностей
HTML и JavaScript, используемых для программирования сценариев просмотра
страниц Web.
Как известно, язык гипертекстовой разметки HTML (HyperText Markup Language)
был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов
технологии разработки распределенной гипертекстовой системы World Wide
Web. В основу гипертекстовой разметки была положена таговая модель описания
документа, позволяющая представить документ в виде совокупности элементов,
каждый из которых окружен тагами. По своему значению таги близки к понятию
скобок "begin/end" в универсальных языках программирования и
задают области действия имен локальных переменных, определяют область действия
правил интерпретации текстовых элементов документа и т.п.
Общая схема построения элемента текста в формате HTML может быть записана
в следующем виде:
"элемент":= <"имя элемента" "список атрибутов">
содержание элемента </"имя элемента">
Конструкция перед содержанием элемента называется тагом начала элемента,
а конструкция, расположенная после содержания элемента, - тагом конца элемента.
Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая
ссылка - это адрес другого HTML документа или информационного ресурса Internet,
который тематически, логически или каким-либо другим способом связан с
документом, в котором эта ссылка определена.
Для записи гипертекстовых ссылок в системе WWW была разработана специальная
форма - Universe Resource Locator. Типичным примером использования этой
записи можно считать следующую запись:
Этот текст содержит <A HREF = "http://polyn.net.kiae.su/ altai/index.html">
гипертекстовую ссылку </A>.
Здесь элемент "A", который в HTML называют якорем (anchor),
использует атрибут "HREF", обозначающий гипертекстовую ссылку
для записи этой ссылки в форме URL. Данная ссылка указывает на документ
с именем "index.html" в каталоге "altai" на сервере
"polyn.net.kiae.su", доступ к которому осуществляется по протоколу
"http".
Структура HTML-документа позволяет использовать вложенные друг в друга
контейнеры. Собственно, сам документ - это один большой контейнер с именем
"HTML":
<HTML> Содержание документа </HTML>
Сам элемент HTML или гипертекстовый документ состоит из заголовка документа
(HEAD) и тела (BODY):
<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
Приведенная форма записи определяет классический HTML-документ, например:
Пример 1.
<HTML>
<!-
Author: Irina Kuzina
Date: December 5, 1996
->
<HEAD>
<TITLE> This is a
Baner</TITLE>
</HEAD>
<BODY BACKGROUND=www_wall.jpg
VLINK=0000FF LINK=FF0000>
<CENTER>
<TABLE>
<TR><TD><IMG
SRC="interne0.jpg"></TD>
<TD CENTER>
<H3> Администрирование
Internet</H3>
<I> Справочное руководство.
</I>
</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Каждый документ в WWW имеет свое имя, которое указывается в его заголовке.
Его можно видеть в первой строке программы-интерфейса. Контейнер BODY открывает
тело документа. В качестве фона в этом элементе определена картинка www_wall.jpg,
которая в примере 1 задана частичной формой спецификации URL без указания
полного адреса ресурса в сети. Далее в документе определена таблица, состоящая
из двух ячеек: картинка и текстовый фрагмент. Текст определен как заголовок
третьего уровня, который должен отображаться стилем Italic.
В данном случае документ, указанный в атрибуте HREF, будет загружен
во фрейм left.
Если в программе просмотра нет окна с именем left, то будет открыто
новое окно с таким именем и в него будет загружен требуемый документ. Приведем
пример открытия дополнительного окна (пример 3).
Пример 3.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=#FFbcbc >
<H1> <A HREF = frame.html target = left> How to create
a multi-window interface
</A> </H1>
<h3>
In the document "frame.html"
there is no frame named
"left".<br>
That"s why the program will
open a new window </h3>
</BODY>
</HTML>
Открывшееся окно содержит разбиение рабочей области на поименованные
фреймы.
Если теперь пользователь выберет гипертекстовую ссылку из окна notleft,
то файл new.html будет загружен в окно фрейма right (примеры 4, 5).
Пример 4.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS = "100,*,100">
<FRAME SRC = t2.html NAME =
top>
<FRAMESET COLS = "%40, %60">
<FRAME SRC = t2.html NAME =
notleft>
<FRAME SRC = t2.html NAME =
right>
</FRAMESET>
<FRAME SRC = t2.html NAME =
bottom>
</FRAMESET>
</HTML>
Пример 5.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor = #AF0000>
<A HREF = new.html TARGET =
right> <b> This is an
example of loading into
the right window </b> </A>
<center>
You can do it using the
TARGET element
</BODY>
</HTML>
В качестве реального примера можно привести открытие окна подсказки
в базе данных проекта Radleg. http://www.polegn.kial.su/redleeg.
Окно подсказки появляется после выбора гипертекстовой ссылки "Help".
При этом в данное окно загружается страница с фреймами, где среднее окно
- это контекстный Help, верхнее - стандартная заставка базы данных, а нижнее
окно - переход к "домашней" странице Radleg и закрытие окна подсказки.
Данный прием оправдан и с точки зрения интерфейса навигатора. При использовании
такого сорта массивов ссылок не требуется их длительное перечисление и
листание страницы в рабочей области навигатора - можно просто выбрать ссылку
из падающего меню.
Другой способ для сокращения числа нажатий на клавиши - аппарат событий.
В том же объекте OPTION можно использовать событие onChange, что делает
необязательным нажатие кнопок типа submit. В этом случае достаточно будет
просто выбрать альтернативу и перейти к новой странице сразу после выбора.
Стеки гипертекстовых ссылок
В язык теперь введен новый тип объектов Area - это элемент контейнера
MAP, который определяет client-site imagemap. Собственно, главное достоинство
такого объекта состоит в том, что гипертекстовые ссылки, определенные в
AREA стали доступны для переопределения. Они появляются в массиве обычных
ссылок страницы и можно как получить значение URL, так и переопределить
его. К объекту AREA нельзя обратиться по имени, а можно использовать только
индекс массива гипертекстовых ссылок документа.
В контексте стека гипертекстовых ссылок интересно рассмотреть еще одну
возможность JavaScript, связанную с переходом по гипертекстовой ссылке
вообще. В обычном случае параметр HREF контейнера A должен иметь какое-нибудь
значение. Если, например, по событию onClick необходимо открыть новое окно
и в старом сохранить отображенный документ, то его URL следует указывать
в качестве значения HREF. В противном случае, в старое окно будет загружена
пустая страница, если HREF = " ".
В новой версии JavaScript введена функция void, точнее, тип void, который
означает отсутствие какого либо значения. Если необходимо выполнить некоторые
действия при выборе гипертекстовой ссылки, но при этом не перегружать текущие
страницы, то в параметре HREF можно указать конструкцию:
<A HREF = "javascript: void(0)">kuku</A>
Таким приемом часто пользуются при программировании событий, связанных
с проходом манипулятора мышь через поле гипертекстовой ссылки.
Фреймы и окна
При работе с фреймами и окнами в предыдущих версиях JavaScript постоянно
приходилось отслеживать последовательность открытия окон и фреймов для
того, чтобы аккуратно их потом закрывать. На некоторых неточностях работы
с окнами были основаны так называемые mail-bombs. Суть этих "подарков"
заключалась в том, что если пользователь по почте принимает документ, состоящий
только из одной команды:
window.close(),
то система, не спрашивая пользователя, закрывала текущее окно, а в этот
момент таким окном является окно электронной почты. Теперь, перед тем как
что-либо закрыть, система будет спрашивать разрешения. Правда, если в момент
получения команды на закрытие окна на экране имеется только одно окно навигатора,
то система его закроет без каких-либо комментариев.
Работа с окнами и фреймами на этом не исчерпывается. В систему введено
новое свойство opener, которое определено для текущего окна или фрейма,
а методы blur и focus распространены на работу с окнами. Свойство opener
определяет окно документа, вызвавшего открытие окна текущего документа.
Свойство определено для любого окна и фрейма. Если необходимо выполнить
некоторые функции по отношению к окну, открывшему данное окно, то можно
использовать выражение типа:
window.opener.[method]
Например, если требуется закрыть окно - предшественник, то можно просто
выполнить close:
window.opener.close()
Точно таким же способом можно изменить содержание этого окна при помощи
методов write или writeln.
Можно менять и другие свойства объектов в окне - предшественнике. Следующий
пример взят из дополнений к спецификации JavaScript:
window.opener.document.bgColor = СcyanТ
В данном случае для окна - предшественника определен светло-голубой
цвет в качестве цвета фона.
Но самым замечательным является то, что предшественника можно менять.
Это значит, что автор получает возможность открывать и закрывать окна не
в строго иерархической последовательности, а в произвольном порядке. Управление
многооконным интерфейсом в этом случае становится более гибким:
window.opener = new_window
window.opener = null
Первый пример переназначает окно-предшественник, в то время как второй
вообще защищает предшественника от каких-либо действий.
Все что было сказано об окнах распространяется и на фреймы, которые
являются просто частным случаем окна. Фрейм часто может быть порожден путем
разбиения другого фрейма на части. Если при этом потребуется обратиться
к окну фрейма - предшественника, то свойство opener в этом случае незаменимо.
Кроме обращения к различным свойствам окон и фреймов было расширено
действие методов blur и focus с фреймов до окон. Теперь не только фрейм,
но и окно может быть сделано текущим с использованием метода focus или,
наоборот, переведено в фон при помощи метода blur. В ряде случаев, например,
при порождении нескольких страниц обращение к этим функциям бывает довольно
полезным.
Наследование кода скриптов различными страницами
У контейнера SCRIPT появился атрибут SRC. Это дает возможность авторам
страниц строить своеобразную библиотеку функций, к которым можно обращаться
из любой страницы, имеющей ссылку на такую библиотеку. При этом вовсе не
обязательно размещать саму библиотеку на том же сервере, где размещены
и гипертекстовые страницы Web. Можно использовать и чужие функции на языке
JavaScript.
В атрибуте SRC применяется обычный URL. Внутри файла скриптов не используются
таги SCRIPT - это обычный файл с определениями функций и переменных.
Другой возможностью работы с функциями стало введение нового объекта
Function, порождаемого конструктором Function: