Свойства контейнеров, управляемые описателями стилей

Первую группу свойств составляют свойства шрифтов:

font-size, font-family, font-weight, font-style.

Вторую группу свойств составляют свойства текста:

line-height, text-decoration, text-transform, text-align, text-indent.

Третью группу свойств составляют свойства блоков текста:

margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

Четвертую группу составляют описатели цвета фона и цвета текста:

color, background-image, background-color.

Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.

 

 

Управление просмотром страниц Web-узла. JavaScript

Современные гипертекстовые информационные системы условно можно представить в виде совокупности нескольких компонентов: системы хранения гипертекстовых объектов, системы отображения гипертекстовых объектов, системы подготовки гипертекстовых объектов и системы программирования просмотра совокупности гипертекстовых объектов. С этой точки зрения технология World Wide Web только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны системы хранения и просмотра (1989-1991 г.г.), которые продолжают развиваться и в настоящее время. После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были предложены первые языки управления сценариями просмотра.

Программирование процедуры просмотра гипертекстовой базы данных не является изобретением Netscape, Microsoft или Sun. Практически все локальные гипертекстовые системы в той или иной степени имеют программные средства манипулирования гипертекстовыми объектами. В ряде случаев вся гипертекстовая база данных может быть представлена как одна большая программа, в которой гипертекстовые узлы - это программные модули, а связи между ними - это передача управления от одного модуля другому.

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

Программы просмотра гипертекстовых страниц традиционно называют скриптами (scripts) по аналогии с исполняемыми файлами, написанными для командных интерпретаторов типа sh. Собственно как это было и раньше в локальных системах, в программировании просмотра гипертекстовых документов World Wide Web существуют два подхода: создание интерпретируемых программой просмотра скриптов или компиляция байт-кода. Первый подход следует традиции World Wide Web, согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор и сам гипертекстовый документ должен легко читаться человеком-оператором. Второй подход позволяет повысить эффективность исполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй способ опираются на объектно-ориентированный подход к программированию. По поводу байт-кодов или мобильных кодов, как их еще называют, написано в контексте технологии программирования Java достаточно много, поэтому сосредоточим свое внимание на скриптах, а точнее на скриптах, написанных на языке JavaScript.

Модель объектов JavaScript - объекты Navigator'а

Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор функций над объектами. Последние называются методами. Кроме методов существуют и другие функции, которые больше похожи на функции из традиционных языков программирования и позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным интерфейсом.

Описание иерархии классов

Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно представить в виде следующей иерархии:

Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых.

Методы объектов и свойства объектов. Управление потоком вычислений

Каждый из этих классов имеет функции управления объектами класса - методы. Самыми главными их этих методов являются те, которые позволяют переназначать значения объектов. Делается это обычно по операции присваивания. Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+,-,*, /, %, >>,<<, +=, -=,...). При этом оператор сложения "+" при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку:

s = "string1"+"string2"

Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений:

• break - принудительный выход из цикла;

while(i &lt 6) { if(i==3) break; }

• continue - переход в конец цикла;

while(i &lt 6) { if(i==3) continue; }

• for - цикл;

for(i=0;i<9;i++) {... }

• for - цикл свойств объекта (переменных определенных в классе);

for(i in obj) { str = obj[i] }

• if..else - условный оператор;

if(i>0) {... } else {... }

• wile - условный цикл;

wile(j==k) { j++; k--; }

• var - оператор объявления переменной.

var kuku = "kuku"

Тип переменной определяется по присвоенному ей значению.

Перечисленные здесь операторы не представляют полного перечня операторов JavaScript, но их вполне достаточно для выполнения практических занятий.

События

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

Не будем перечислять все события, но упомянем о наиболее часто используемых:

• onLoad - выполнение скрипта или функции при загрузке;
• onChange - порождается при изменении значения элемента формы;
• onClick - порождается при выборе объекта (button, checkbox и т.п.);
• onSelect - порождается при выборе текстового объекта (text, textarea);
• onSubmit - при нажатии на кнопку Submit;
• onUnload - при переходе к другой странице.

Появление Netscape Navigator 3.0 и новой версии JavaScript 1.1 заставляет продолжить обзор возможностей управления сценариями просмотра Website, который был опубликован в предыдущем выпуске "Открытых Систем Сегодня" (CW N 46, 1996). В новой версии языка были введены: возможность взаимодействия JavaScript и Java, определение установленных plug-ins, определены новые типы объектов (Area, Function, Image) и ряд других особенностей, которые по мнению разработчиков должны повысить мощь программирования на JavaScript.

Массивы

Первый тип новых объектов, которые мы рассмотрим, являются массивы. Тип "Array" введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами, которые отображаются Navigator'ом. Это - список всех гипертекстовых ссылок данной страницы Website, список всех картинок на данной странице, список всех applet'ов данной страницы, список всех элементов формы и т.п. Пользователь может создать и свой собственный массив, используя конструктор 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 построим теперь документ, в котором будет встроена мультипликация, определенная нашим массивом:

Пример 2.1

<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. В этом случае достаточно будет просто выбрать альтернативу и перейти к новой странице сразу после выбора.

Стеки гипертекстовых ссылок

Не обошли своим внимание авторы JavaScript и стеки гипертекстовых ссылок. В язык теперь введен новый тип объектов типа Area. 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()

то система не спрашивая пользователя закрывала текущее окно, а в этот момент таким окном является окно электронной почты. Теперь, перед тем как что-либо закрыть, система будет спрашивать разрешения. Правда, опять не всегда. Если в момент получения команды на закрытие окна на экране только одно окно Navgator, то система его закроет без каких-либо комментариев.

Однако, работа с окнами и фреймами на этом не исчерпывается. Во-первых, в систему введено новое свойство 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 в этом случае незаменимо. Разработчики языка следуют за пожеланиями авторов Websit'ов и практикой применения JavaScrip, которая на начальной стадии разработки языка не была столь очевидной. Кроме обращения к различным свойствам окон и фреймов разработчики расширили действие методов blur и focus с фреймов до окон. Теперь не только фрейм, но и окно может быть сделано текущем с использованием метода focus или, наоборот, переведено в фон при помощи метода blur. В ряде случаев, при порождении нескольких страниц, например, обращение к этим функциям бывает довольно полезным.