Компьютерная документация от А до Я - HTML / DHTML

Интернет технологии -> HTML / DHTML -> Язык HTML, JavaScript и WWW

Язык HTML, JavaScript и WWW

Волна бурного развития технологий 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>
<H2> Администрирование
        Internet</H2>
<I> Справочное руководство.
        </I>
</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Каждый документ в WWW имеет свое имя, которое указывается в его заголовке. Его можно видеть в первой строке программы-интерфейса. Контейнер BODY открывает тело документа. В качестве фона в этом элементе определена картинка www_wall.jpg, которая в примере 1 задана частичной формой спецификации URL без указания полного адреса ресурса в сети. Далее в документе определена таблица, состоящая из двух ячеек: картинка и текстовый фрагмент. Текст определен как заголовок третьего уровня, который должен отображаться стилем Italic.

Фреймы

Компания Netscape Communication расширила классическую форму документа возможностью организации фреймов, а в Microsoft были разработаны фреймы без визуальных границ, имеющие или нет механизм прокрутки - так называемые, плавающие фреймы. Организация фрейма - это возможность разделить рабочее окно программы просмотра на несколько независимых панелей (или фреймов). В каждый фрейм может быть загружена своя страница HTML. Плавающие фреймы позволяют вставить одну Web-страницу в другую. Тогда как обычные фреймы позволяют лишь разделить область просмотра на несколько частей, плавающий фрейм можно поместить где угодно на странице, указав его размер и отступ справа или слева.

Для описания плавающих фреймов используется таг <IFRAME>...</IFRAME>. В отличие от спецификации Netscape, не разрешающей пересечение фреймов, нотации Microsoft позволяет накладывать одни фреймы на другие с помощью отрицательного отступа.

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

В примере 2 представлен документ, состоящий из четырех окон внутри рабочего окна программы просмотра, в каждое из которых загружается обычный документ. Верхний и нижний фреймы имеют размер 100 пикселей, а оставшаяся область рабочего окна разбивается на две части: на левую отводится 30%, а на правую - 70% пространства. Если программа просмотра не поддерживает организацию фреймов: то отображается информация, заключенная между тагами <NOFRAMES> ... </NOFRAMES>, если же эта возможность реализована, то такая область на экране не отображается.

Пример 2.

<HTML>
<!-
Author: Irina Kuzina
Date:   December 5, 1996
->
<HEAD>
</HEAD>
<FRAMESET ROWS = "100, *,
        100">
<NOFRAMES>
<BODY>
Sorry, there is not a frame
        support in your browser.
</BODY>
</NOFRAMES>
<FRAME SRC = booter.html
        NAME = boot>
<FRAMESET COLS = "%30, %70">
<FRAME SRC = menli.html NAME
        = left>
<FRAME SRC = t2.html NAME =
        right>
</FRAMESET>
<FRAME SRC = footer.html
        NAME = foot>
</FRAMESET>
</HTML>

Создание многооконного интерфейса

С фреймами тесно связана возможность именования окон - любой фрейм может иметь свое собственное имя. Для того, чтобы документ загружался именно в то окно, которое определил автор страницы, в контейнер гипертекстовой ссылки вводится атрибут TARGET. При организации фреймов (пример 2) каждому из них было присвоено имя (атрибут NAME контейнера FRAME). Для загрузки документа в конкретный фрейм (left), автор должен использовать гипертекстовую ссылку вида:

<A HREF = frame.html TARGET = left>

В данном случае документ, указанный в атрибуте 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>
<H2>
In the document "frame.html"
        there is no frame named
        "left".<br>
That"s why the program will
        open a new window </H2>
</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 и закрытие окна подсказки.

Использование HTML для определения полей заголовка сообщения протокола HTTP

Важным свойством современных версий HTML является возможность записи полей заголовка сообщения протокола HTTP. Реализуется эта возможность через контейнер заголовка HTML - документа <META>. Используя атрибут HTTP-EQUIV, в заголовок HTTP - сообщения можно включить любое поле, которое определено стандартом протокола HTTP (текущая версия 1.0). Рассмотрим в качестве примера организацию рекламных роликов. Идея состоит в том, чтобы использовать время обновления HTML страниц для их автоматической подмены при просмотре. Время жизни определяется полем Refresh заголовка сообщения HTTP:

Refresh = время; URL = документ <LF>

Используя контейнер META с атрибутом HTTP-EQUIV, автор HTML - документа может определить следующий документ или кадр рекламного ролика:

<META HTTP-EQUIV = "Refresh", CONTENT = "0, URL=ref2.http">

В общем случае можно построить замкнутую или незамкнутую цепочку кадров, которая и будет из себя представлять рекламный ролик.

В примере 6 описан документ, который после своей загрузки будет немедленно заменен документом ref2.html. В реальной практике такая немедленная замена происходит не мгновенно и зависит от скорости коммуникаций и особенностей ПО и ОС.

Пример 6.

<HTML>
<HEAD>
<TITLE> type_Document_ Title_
        here </TITLE>
<META HTTP-EQUIV = "Refresh"
        CONTENT = "0; URL =
        ref2.htm">
</HEAD>
<BODY>
<H1>Document 1</H1>
</BODY>
</HTML>

Программирование сценариев просмотра. JavaScript

С задачей управления отображением во фреймы и окна тесно связано написание сценариев просмотра домашних страниц Web. Такие сценарии чаще всего пишутся на языке Java Script.

Java Script - это язык управления сценарием отображения документа. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектам - элементами рабочей области программы Netscape Navigator и контейнерами языка HTML. В Java Script не реализованы классы объектов, наследование, инкапсуляция и полиморфизм. Имеются объекты с набором свойств и набор функций над объектами, которые называются методами. Функция пользователя выполняется по наступлении некоторого события: onChange, onClick, onLoad и др., а внутренние функции языка используются непосредственно.

Не вдаваясь в подробности описания Java Script, сконцентрируем внимание на контейнерах Java Script и примерах использования Java Script кодов. Контейнер <SCRIPT LANGUAGE= "Java Script"> ... </SCRIPT> может использоваться как в заголовке, так и в теле документа. Не все программы просмотра способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария. Лучше всего описать применение Java Script на примерах.

Идущие часы и бегущая строка

Данный тип объектов наиболее часто используется на страницах WWW. В примере 7 приведен фрагмент программы, реализующей эти объекты:

Пример 7.

<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT LANGUAGE =
        "JavaScript">
<!- Hide script from user
adv_string = "Internet\"
status_string = adv_string +
        adv_string + adv_string +
        adv_string + adv_string +
        adv_string
i=0
function background()
        {
window.status = status_
        string.substring (i,i+180)
...
current_date = new Date()
        window.document.form1.
                clock.value = current_
                date.getHours() + ":" +
                current_date.getMinutes
                () + ":" + current_
                date.getSeconds()
id = setTimeout("back
                ground()", 500)
        window.document.form1.
                kuku.value = "number"+i
        }
//This is the end of code
        definition ->
</SCRIPT>
</HEAD>
<BODY onLoad = "background()"
        BACKGROUND=www_wal0.jpg>
<H1>JavaScript</H1>
<FORM NAME=form1 ACTION =
        "new_window()">
<INPUT NAME = clock TYPE =
        text SIZE = 8MAXLENGTH=8>
<HR>
<INPUT TYPE=button NAME =
        help Value = "HELP"
        onClick = "window.open
        ("clock.htm",
        "Clock_Window",
        "scrollbars = yes,width =
        450, height=350") ">.
<HR>
<INPUT NAME = kuku type =
        text>
<HR>
</FORM
<P>
</BODY>
</HTML>

Для создания скрипта в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц. Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий строкой:

<!- Hide script from user

И кончается строкой:

// This is the end of code definition->

Функция, реализующая бегущую строку, использует метод open - встроенную в JavaScript функцию, которая определена над объектом window. В результате открывается новое окно Netscape Navigator и в него загружается документ. Вызов функции осуществляется после нажатия на соответствующую кнопку. Таким образом, функция будет выполнена только в том случае если произойдет событие, описанное атрибутом onClick в контейнере INPUT.

Изначально предполагалось, что программа просмотра, которая поддерживает JavaScript будет исполняться в среде многопотоковых операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет порождать последовательно исполняемые потоки. Однако, из-за неаккуратной реализации JavaScript, команда setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются многопоточными и в них просто происходит переполнение стека при выполнении данного скрипта, а как быстро "упадет" система зависит от объема исполняемой по setTimeout функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.

JavaScript - это не единственный язык управления сценариями просмотра документов. Имеется другая версия аналогичного языка - VBScript на основе Visual Basic. Кроме того, управлять сценарием просмотра можно и из Java-апплетов, что, конечно, сложнее, но зато более надежно и безопасно. При этом программист получает возможность наследования и прочие атрибуты объектно-ориентированного программирования. В конце концов, для создания фреймов и окон можно использовать атрибуты соответствующих контейнеров HTML, которые позволяют делить рабочую область экрана на фрагменты, перекрывать объекты и восстанавливать первоначальный вид страницы. В Navigator 3.0 появились новые типы объектов и функции над ними.

Массивы

Первый тип новых объектов, которые появились в JavaScript 1.1 - это массивы. Тип "Array" введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами, отображаемыми навигатором. Это - список всех гипертекстовых ссылок данной страницы, список всех картинок на данной странице, список всех апплетов данной страницы, список всех элементов формы и т.п. Пользователь может создать и свой собственный массив, используя конструктор Array(). Делается это следующим образом:

new_array = new Array()

new_array5 = new Array(5)

colors = new Array

("red", "white", "blue")

Размерность массива может динамически изменяться, требуется лишь сначала определить массив, а потом присвоить одному из его элементов значение. Как только это значение будет присвоено, изменится и размерность массива:

colors = new Array()

colors[5] = "red"

В данном случае массив будет состоять из 6 элементов, первым элементом считается элемент с индексом 0.

Для массивов определены три метода: join, reverse, sort. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель:

colors = new Array

("red", "white", "blue")

string = acolors.join("+")

В результате выполнения операции присваивания значения строке символов string получим следующую строку:

string = "red"+"white"+"blue"

Метод reverse изменяет порядок элементов массива на обратный, а метод sort отсортировывает их в порядке возрастания.

У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа:

color = new Array

("red", "white", "blue")

n = 0

while(n != colors.length)

{... операторы тела цикла

...}

Свойство prototype позволяет добавить свойства к объектам массива. Однако наиболее часто в программах на JavaScript используются встроенные массивы, главным образом графические образы (Images) и гипертекстовые ссылки(Links).

Графика

До появления версии Navigator 3.0 в JavaScript использовались только встроенные объекты типа Image. В новой версии языка появился конструктор для этого типа объектов:

new_image = new Image()

new_image = new Image (width,height)

Часто для реализации мультипликации создают массив графических объектов, которые потом прокручивают один за другим:

img_array = new Array()

img_array[0] = new Image(50,100)

img_array[1] = new Image(50,100)

....

img_array[99] = new Image(50,100)

У объекта Image существует 10 свойств, из которых самым важным является src. Для присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей последовательностью команд:

img_array[0].src = "image1.gif"

img_array[1].src = "image2.gif"

...

img_array[99].src = "image100.gif"

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

В новой версии языка объект типа Image можно поименовать в HTML таге IMG, а затем обращаться к нему по имени. При этом следует учитывать, что если Image используется внутри формы, то он является свойством этой формы. Это значит, что для следующего графического объекта должны применяться разные составные имена:

<img name=car src=car.gif> <-

document.car.src = "car1.gif"

<form name=kuku>

<img name=car src=car.gif>

</form>

document.kuku.car.src = "car1.gif"

Однако наиболее часто в примерах использования скриптов можно встретить обращение к Image по индексу в массиве всех графических объектов данной страницы. Если наш объект, например, является вторым Image на странице, то будь он внутри формы или за ее пределами к нему всегда можно обратиться по индексу:

document.images[1].src = "car1.gif"

Расширяя пример с массивом Image, создадим документ, в который будет встроена мультипликация, определенная нашим массивом:

Пример 8.

<HTML>
<HEAD>
<SCRIPT>
function multi_pulti()
        {
                img_array = new Array()
                img_array[0] = new
                                Image(50, 100)
                ....
                img_array[99] = new
                                Image(50, 100)
                img_array[0].src =
                                "image1.gif"
                ...
                img_array[99].src =
                                "image100.gif"
                n=0
                while(n==0)
                        {
                                document.images[0].src =
                                                img_array[0].src
                                ...
                        }
        }
</SCRIPT>
</head>
<body onLoad="multi_pulti()">
<img src=image1.gif>
</body>
</html>

Довольно часто используют не мультипликацию, а выбор картинки через OPTION - еще один новый объект JavaScript. При этом можно через поле формы SELECT менять не только саму картинку, но и гипертекстовую ссылку, которая может быть связана с этой картинкой. На гипертекстовую ссылку также можно ссылаться по индексу:

document.links[index].href = kuku.html

Данный прием оправдан и с точки зрения интерфейса навигатора. При использовании такого сорта массивов ссылок не требуется их длительное перечисление и листание страницы в рабочей области навигатора - можно просто выбрать ссылку из падающего меню.

Другой способ для сокращения числа нажатий на клавиши - аппарат событий. В том же объекте 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:

new_Function = new Function

(arg1, arg2, .., argn, function_body)

Главное отличие от обычного декларирования функции заключается в том, что в данном случае порождена переменная new_Function, с которой можно работать, как с любым другим объектом. При обычном определении функции такой переменной не порождается.

Как любой объект, Function имеет свои свойства, но не имеет методов. В качестве свойств функции выступают аргументы и возможность назначения новых свойств через prototype.

При обращении к объектам страницы-родителя можно использовать свойство opener окон и фреймов, что позволяет компенсировать отсутствие наследования и аппарат глобальных переменных в JavaScript.

Java, JavaScript и модули расширения

В новой версии языка HTML есть возможность организовать взаимодействие между Java апплетами и JavaScript-скриптами. Достигается это за счет использования атрибута MAYSCRIPT в контейнере APPLET. Собственно, в JavaScript определен объект типа APPLET, к которому можно обращаться либо по имени, либо по индексу в массиве апплетов. У этого объекта имеется только одно свойство - имя. Какие-либо другие свойства или методы для данного типа объектов не определены.

Кроме апплетов JavaScript позволяет работать и с Plug-ins, представляющие собой массив соответствующего типа, для которого определен ряд свойств. Используя эти свойства, можно определить установленные plig-ins и их соответствия MIME-типам. Назначить plug-ins или манипулировать ими нельзя.

Расширение возможностей использования графических объектов

К расширению возможностей следует отнести:

обтекание графики текстом;

функция client-site imagemap.

Обтекание достигается за счет использования атрибута ALIGN элемента IMG. ALIGN может принимать значения: TOP, MIDDLE, BOTTOM, LEFT, RIGHT. Поскольку рисунок, встраиваемый по IMG, рассматривается программами просмотра как один большой символ, атрибут ALIGN определяет, где относительно других символов текста в строке будет располагаться этот рисунок. Если задано значение TOP, то картинка отображается как подстрочная - остальные символы строки выравниваются по верхнему краю рисунка, при значении MIDDLE картинка располагается как обычный символ и текст форматируется по центру. Если задано значение BOTTOM, рисунок отображается как надстрочная буква, текст выравнивается по его нижнему краю. Значения LEFT и RIGHT этого атрибута используются для размещения картинки в левой или правой части страницы, что приводит к обтеканию картинки текстом справа или слева соответственно.

Client-site imagemap - это способ избавиться от многообразия реализаций стека графических гипертекстовых ссылок, которые применяются различными HTTP - серверами. Способ организации client-site imagemap состоит из двух частей: определения image как client-site imagemap и определения фрагментов image как гипертекстовых ссылок. Приведем пример:

Пример 9.

<HTML>
<!-
Author: HTMLed User
Date:   April 1, 1997
->
<HEAD>
<TITLE>Graphics</title>
</HEAD>
<BODY BGCOLOR = #FFbcbc>
<center>
<h4><img src = html.gif>Язык ги-
        пертекстовой разметки HTML</h4>
<hr>
<h1>Графика в HTML</h1>
<hr>
<table border=2>
<tr><td><a href = graph1.htm>
        Обои</a>
<td><a href = #img>IMG</a>
<td><a href = move.htm> GIF89a</a>
<td><a href = #map>client-site
        maps</a>
</table>
<hr>
</center>
<a name = map>
<h2>Стеки графических ссылок</h2>
<MAP name = "mymap">
<AREA SHAPE = "RECT" COORDS =
        "6,0,43,34" HREF = #html1>
<AREA SHAPE = "RECT" COORDS =
        "305,0,342,34" HREF = #img>
<AREA SHAPE = "RECT" COORDS =
        "80,0,120,34" HREF = #html1>
<AREA SHAPE = "RECT" COORDS =
        "156,0,194,34" HREF = #img>
</MAP>
<p>
<img src = image.gif USEMAP = "#mymap"><br>
<hr>
<a name = img>
<h2>Обычный IMG</h2>
Обычно графика вставлялась в текст
        документа как символ.<br>
<img src=htpdicon.gif><br>
Поэтому приходилось вставлять ее
        между строк текста
<p>
<img src = htpdicon.gif align =
        left hspace = 10>В HTML 2.0
        Netscape Extensions появилась
        возможность обтекания графики
        текстом при применении атрибута
        align:<br>
<img src = htpdicon.gif align =
        left>
<hr>
<a name = html1>
Пример перехода по графической
        ссылке.
<hr>
</BODY>
</HTML>

В примере 9 графический образ, определенный в контейнере <IMG SRC =... USEMAP = ...>, является объектом, который разбит на прямоугольники. С каждым прямоугольником связана гипертекстовая ссылка. Эти ссылки определены в контейнере <MAP ...>... </MAP>, а связь между контейнерами IMG и MAP осуществляется через контейнер MAP.

Расширение возможностей создания таблиц

Для организации таблиц используется элемент TABLE, который является контейнером для других элементов описания таблицы. Атрибут BORDER определяет разделяющие линии между графами таблицы, обычно они бывают трехмерные или простые. Сама форма этих линий задается в файле конфигурации программы просмотра.

Элементы TH (Table Header) и TD (Table Data) используются в примере 10 не только для описания граф таблицы, но и для объединения граф при помощи атрибутов ROWSPAN -пропуск строки и COLSPAN - пропуск столбца. Цифра в этих атрибутах определяет количество последовательно расположенных граф таблицы, объединенных в одну.

Пример 10.

<HTML>
<HEAD>
<title>Versions</title>
</HEAD>
<BODY BGCOLOR = #FFbcbc>
<center>
<hr>
<h1>Версии HTML</h1>
<hr>
<table border = 2>
<tr><TD colspan = 3
        align=center>HTML 1.0
<tr><td colspan = 3 align =
        center> HTML 2.0
<tr><td>HTML+<TD>Netscape
        Extensions <td> Microsoft
        Extensions
<tr><td align = center>HTML
        3.0<BR> (Project) <br>Arena<td align = center>
        Navigator 2.0 <td align =
        center> Explorer
<tr><td colspan = 3 align =
        center>????? HTML3.0 ?????
</table>
</center>
</BODY>
</HTML>

Заключение

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

Литература

[1] Chuck Musciano and Bill Kennedy, "HTML: The Definitive Guide", O"Reily&Associates, Inc (1996).

[2] html.doc, "Время Microsoft", журнал Аурамедиа, спецвыпуск. "Решения Microsoft", выпуск 5 (1996).

[3] Michael J. Hannah, "HTML Reference Manual" (1996), http://www.sandia.gov/%20sci_compute/%20html_ref.html

[4] HTML 3.2. Features at a Glance, http://www.w3.org/pub/WWW/MarkUp/Wilbur/features.html

[5] Netscape extensions to HTML 3.0, http://home.netscape.com/assist/net_sites/html_extensions_3.html

[6] HTML 2.0 Standart, http://www.w3.org%20/pub%20/WWW/MarkUp/html-spec

[7] Using JavaScript in HTML, http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/index.html

[8] Stefan Koch, "Introduction to JavaScript" (1996), http://www.webcom.com/java/java-script/intro/index.htm

Интересное в сети

10 новых программ

CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full

Наши сервисы

Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.

Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.

Поставить

Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.

Прислать

Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.

Разместить

Это интересно

При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.