1.htm

Содержание

ЭЛЕМЕНТЫ ЯЗЫКОВ HTML И JAVASCRIPT (Часть 2)

Стили

Позиционирование элементов
Статические фильтры
Динамические фильтры
Таблицы стилей в отдельных файлах

Вставка Flash-мультфильма в Web-страницу
Поле ввода данных
Переключатели
Флажки
Кнопки
Сценарии (скрипты)

Стили

Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на определении пользовательских стилей и задании таблицы стилей. Таблица стилей — это просто некоторая структура описания свойств элемента. Не ищите здесь какой-нибудь прямоугольной сетки. Если таблица стилей задана, то различные документы могут просто ссылаться на эту таблицу и не содержать большое количество атрибутов в тэгах форматирования типа <Н1>, <FACE> и т. п. Каскадные таблицы стилей (CSS, Cascading Style Sheets) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью как тэга <STYLE>, так и атрибута STYLE. Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц.
Далее способ изложения несколько изменится по сравнению с тем, который мы применяли ранее. Теперь мы будем больше рассказывать об идеях, иллюстрируя их примерами, и меньше уделять внимание строгости и полноте определений. При этом все примеры программ будут, как и прежде, работоспособными. Даже если вы не в полной мере разберетесь в теории вопроса, то все равно сможете использовать приведенные примеры в своих разработках. Для этого следует просто скопировать тексты или отдельные их фрагменты в ваш собственный HTML-документ и адаптировать к своей конкретной задаче путем коррекции отдельных параметров.
Тэги <STYLE> и </STYLE> используются внутри тэгов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE — в тэге заголовка раздела (<Н1>, <Н2>,..., <H6>), а также в тэге <BODY>, в тэге выделения фрагмента <DIV> и многих других.
Применение тэга <STYLE>:

<HEAD>
<STYLE>
Тэг {свойство 1:значение 1; свойство2: значение; ...;
свойство N: значение N}
</STYLE>
</HEAD>

Здесь в фигурных скобках через точку с запятой перечисляются свойства и их значения, причем между свойством и его значением ставится двоеточие. При этом тэг, указываемый перед описанием в фигурных скобках, пишется без угловых скобок.
В следующем примере определяются стили заголовков первого и второго уровней путем использования тэга <STYLE>.

<HTML>
<HEAD>
<STYLE>
HI {Font-size:48pt;Color:RED}
Н2 {Font-size:20pt;Color:BLUE}
</STYLE>
</HEAD>
<BODY>
<Н1>Это стиль H1. Цвет - красный</Н1>
<Н2>Это стиль Н2. Цвет - синий</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>

Мы изменили стили Н1 и Н2, принятые по умолчанию: назначили размеры (48 и 30 пунктов) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тэгов. Существуют и другие свойства. Например, свойство FONT-FAMILY: HELVETICA задает гарнитуру шрифта HELVETICA.
Обратите внимание на то, что внутри тэга <STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.

Рис. 664. Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE>

Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY> и </BODY>, будет автоматически отформатирован в соответствии с перечисленными свойствами.
Если мы хотим задать один и тот же стиль сразу для нескольких тэгов, то перед определением стиля (всего того, что заключено в фигурные скобки) можно указать перечень тэгов (без угловых скобок), разделенных запятыми. В следующем примере задается одинаковый стиль для заголовков первого и второго уровней.

<HTML>
<HEAD>
<STYLE>
HI, H2 (Font-size:48pt;Color:RED}
</STYLE>
</HEAD>
<BODY>
<Н1>Это стиль HI. Цвет - красный</Н1>
<Н2>Это стиль Н2, такой же, как и HI. Цвет - красный</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>

Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тэгах мы можем обращаться к этой таблице по ее имени, используя атрибут СLASS=имя_стиля, где имя стиля употребляется уже без точки.
Например, можно задать стиль так:

<STYLE>
mystyle (color:black;font-family:Aria1}
</STYLE>

А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:

<Н2 CLASS=mystyle>

Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тэг <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тэга BODY определяются другие стили с именами тень, основа, слой 1 и слой2. Это и есть то, что понимается под каскадной таблицей стилей.

<HTML>
<HEAD>
<TITLE>Пример CSS</TITLE>
<STILE> BODY {color: black; font-size:16px; font-family: Arial}
.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top: ЗОрх;
font-size:27Opx;1ine-height: 270px;
font-family: Times)
.основа (color: red; weight: 900; margin-top: —230px; font-size:220px;
line-height: 250px; font-family: Times)
. слой1(color: black; margin-top: ~130px; weight: medium; ont-size:65px;
line-height: 65px; font-family: Arial}
.слой2 {color: green; margin-top: ЗОрх; weight: medium; font-size: 35px;
line-height: 45px; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
Пример каскадного стиля <CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0> <TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS=Tень>Мы/DIV>
<DIV CLASS=ocHOBa>Мы/DIV>
<DIV CLASS=слой1>сделали это без всякой графики</DIV>
<DIV CLASS=слой2>используя только стили текста</DIV>
</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Рис. 665.

В приведенном примере использованы тэг <DIV> и атрибут CLASS. Тэг <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тэгами <DIV CLASS . . . > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него.
В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — слой! и слой2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тэгом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху).
В рассмотренном выше примере были использованы следующие свойства:

margin-top — отступ сверху;
color —цвет;
font-size — размер шрифта;
font-family — семейство шрифтов;
weight — степень «жирности» шрифта;
line-height — высота строки.

Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.
Кроме рассмотренных выше способов задания стилей, можно применять атрибут STYLE, вставляемый в тэги заголовков, абзаца <Р>, тела <BODY>, <DIV> и <IMG>. В этом случае стиль задается в следующем формате:

STILE ="описание_свойств_стиля"

Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тэга <STYLE>.
Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE для форматирования заголовка второго уровня.

<Н2 STYLE="font-size:48; font-family:Аг1а1">Некоторый текст</Н2>

Позиционирование элементов

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

left — для задания расстояния в пикселах от левого края окна (х-координата);
top — для задания расстояния в пикселах от верхнего края окна (у-координата);
z-index — для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition, которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

absolute — заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тэга внутри HTML-документа;
relative — элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative, а свойства координат left и top — нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
static — элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index. Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.

<HTML>
<НЕАD><TITLE>Позиционирование</TITLE> </НЕАD> <BODY BGCOLOR="AQUA">
<DIV STYLE="position:absolute;
top:0;left:70;width:50,-height:100;z-index:2">
<IMG SRC="logotip.gif">
</DIV>
<DIV STYLE="position:absolute; top:15;left:15;width:400,-height:100;
z-index: 1">
<H1 STYLE="color : red">nepBbiu позиционированный текст</Н1>
<DIV STYLE="position:absolute; top:60;left:300/width:50 ;
height: 100">
<H1 STYLE="color:Ыие">Второй позиционированный текст</Н1>
</DIV>
</BODY>
</HTML>

Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа

При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тэгом <DIV>). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:

nоnе (ничего) — если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
clip — выступающие за границы фрагмента части элемента будут обрезаны;
scroll — будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.

<HTML>
<НЕАD><ТIТLЕ>Позиционирование</ТIТLЕ></НЕАD>
<BODY BGCOLOR="AQUA">
<DIV STYLE="position:absolute; top:0;left:70;width:50;height:100">
<IMG SRC="logotip.gif">
<DIV STYLE="position:absolute; top:10;left:15;width:220;height:120;
overflow:scroll">
<H1 STYLE="color: red">riepBbiM позиционированный текст </Н1>
<DIV STYLE="position:absolute;
lop:60;left:300;width:50;height:100">
<H1 STYLE="color:Ыие">Второй позиционированный текст</Н1>
</BODY>
</HTML>

Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow

Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможности языка по позиционированию элементов. Вы сами решите, какие средства и для чего будете использовать на своей Web-странице.
С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает «трехмерную» надпись.

Рис. 668. Пример создания трехмерного текста с помощью CSS

<HTML>
<HEAD> <TITLE>3d эффект</ТITLE> <НЕАD>
<STYLE>
P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (color : silver }
P. shadow ( color : darkred}
</STYLE>
<BODY BGCOLOR="#509090">
<DIV STYLE= "position: absolute; top: 5; left: 5;
width: 600; height : 100; margin: top :10">
<P CLASS=Shadow>Объемный текст'</Р>
<DIV
STYLE="position: absolute; top: 0;left:0; width: 600;
height :100;margin: top: 10"> <P CLASS=highlight>Oбъeмный текст</Р>
<DIV STYLE="position: absolute; top: 2; left: 2; width : 600;
height :100;margin: top: 10">
<P> Объемный текст </Р>
</DIV>
</BODY>
</HTML>

Обратите внимание, что этот способ создания эффектных заголовков значительно экономнее, чем использование графических файлов с аналогичным содержанием.

Статические фильтры

Фильтры — это эффекты изменения внешнего вида графики и текста на странице. С помощью фильтров вы можете отражать тексты и графику, создавать эффект движения и другие, как это делается в графических редакторах. Другими словами, фильтр — это трансформация исходного изображения по определенным правилам (алгоритмам). Существуют статические и динамические фильтры. Статические фильтры просто изменяют внешний вид элемента, оставляя его неподвижным. Динамические фильтры позволяют изменять графический элемент со скоростью, задаваемой пользователем. Рассмотрим сначала статические фильтры.
Статический фильтр можно задать как свойство в таблице стилей, используя запись вида:

filter: название_фильтра

или, при наличии параметров, такую запись:

filter : название_фильтра (параметр 1 , параметр2 , . . . , параметры)

В языке HTML (версии 4) имеется 14 статических фильтров. Перечислим некоторые из них, используемые без параметров и чаще других:

blur — создает эффект размытости;
fliph — создает горизонтальное отражение картинки или текста;
flipv — создает вертикальное отражение картинки или текста;
Wave — создает «волнистое» искажение картинки или текста;
Хгау — показывает только контур объекта (как бы в Х-лучах, т. е. «рентгеновское изображение»).

Ниже приводится текст программы, которая выводит графический файл и текст сначала без фильтра, а затем с фильтрами flipv, fliph и blur. Результат работы этой программы показан на рисунке. Обратите внимание, что фильтр blur, примененный к тексту, создает эффект трехмерности, т. е. текст как бы отбрасывает тень.

<HTML>
<НЕАD><TITLE>Фильтры</TITLE> </НЕАD> <STYLE>
Р {position:absolute;top:0;left:190;font-size:80}
</STYLE>
<BODY>
<IMG STYLE="position:absolute;width:150;height:100" SRC="world.gif">
<IMG
STYLE="position:absolute;top:120;left:10;width:150;
height:100,-filter:flipv" SRC="world.gif">
<IMG
STYLE="position:absolute;top:2 30;left:10;width:150;
height:100;filter:fliph" SRC="world.gif">
<IMG
STYLE="position:absolute;top:340;left:10;width:150;
height:100;filter:blur" SRC="world.gif">
<Р>Фильтр</Р>
<P STYLE="top:130;filter:f11рv">Фильтр flip"</P>
<P STYLE="top:240;fliter:f11рh">Фильтр fliph</P>
<P STYLE="top: 360; filter:blur">Фильтр blur</P>
</BODY>
</HTML>

Рис. 669. Пример применения фильтров flipv, fliph u blur

Покажем работу еще двух фильтров: Хгау и Wave.

<HTML>
<НЕАD> <TITLE>Фильтры</TITLE> </НЕАD>
<STYLE>
Р (position:absolute;top:0;left:190;font-size:48}
</STYLE>
<BODY>
<IMG STYLE="position:absolute;width:150;height:100" SRC="world.gif">
<IMG
STYLE="position:absolute;top:120;left:10;width:150;height:100;filter:Xray" SRC = "world.gif ">
<IMG
STYLE="position:absolute;top.-230;left:10;width:150;height:100;filter:Wave" SRC="world.gif">
<Р>Фильтр</Р>
<P STYLE="top:130;filter:Хгау">Фильтр Xray</P>
<P STYLE="top:240;filter:Wave">OmibTp Wave</P>
</BODY>
</HTML>

Нетрудно заметить, что эти фильтры не воздействуют на тексты.

Рис. 670. Пример применения фильтров Хгау и Wave

Динамические фильтры

Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает Web-страницу. Есть несколько способов преобразования. Эти способы заранее определены, поэтому от вас лишь требуется указать номер выбранного способа. Ниже приведена таблица с названиями и номерами превращений.

Тип превращения	Номер фильтра
Стягивающийся прямоугольник	0
Расширяющийся прямоугольник	1
Стягивающийся круг	2
Расширяющийся круг	3
Стирание вверх	4
Стирание вниз	5
Стирание вправо	6
Стирание влево	7
Вертикальные жалюзи	8
Горизонтальные жалюзи	9
Сужающиеся клетки	10
Закрывающаяся шахматная доска	11
Случайный наплыв	12
Вертикальное деление внутрь	13
Вертикальное деление наружу	14
Горизонтальное деление внутрь	15
Горизонтальное деление наружу	16
Стирание влево вниз	17
Стирание влево вверх	18
Стирание вправо вниз	19
Стирание вправо вверх	20
Случайные горизонтальные полосы	21
Случайные вертикальные полосы	22
Случайный выбор номера (из диапазона 0-22)	23

В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В тэге <DIV> применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в тэге<ВОDУ>.

<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT >
function dyn fliter () {
Imagel . filters (0) . apply ()
I1 . style .visibility" visible" Imagel . filters (0) .Transition=8
Imagel .filters (0) .play(2)
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_filter () ">
<DIV ID=Imagel STYLE="position: absolute;
height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans">
<IMG ID=I1 STYLE="position:absolute; '
height : 200; width: 300; visibility : hidden" SRC=world. gif >
<H3 STYLE= "posit ion: absolute; top:210">
Динамическое преобразование картинки с помощью фильтра </НЗ>
</BODY>
</HTML>

Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»

Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тэгом <DIV>; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тэгом <IMG>; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0).
Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image 1. filters (0) .Transition=3, то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):

Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»

При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.
Тип преобразования 23 — случайный выбор и применение одного из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр сработает, когда пользователь загрузит вашу страницу.
Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр — продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.

<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT>
function dyn_filter(){
Imagel.filters(0).Apply()
II . style.visibility="visible"
Imagel.filters (0) .play (2)
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_f liter ()">
<DIV ID=Imagel STYLE="posi t ion : absolute;
height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans ">
<IMG ID=I1 STYLE="position:absolute;
height : 200; width: 300 ; visibility :
hidden" SRC=world. gif >
<H3 STYLE="position:absolute; top:210">
Динамическое преобразование картинки с помощью фильтра
</НЗ>
</BODY>
</HTML>

Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.
При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в тэге <IMG>. Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.

Таблицы стилей в отдельных файлах

При использовании тэга <STYLE> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и с точки зрения времени, необходимого для разработки страницы. Однако есть способ автоматического применения таблицы стилей, сохраненной в отдельном файле. Имя этого файла должно иметь расширение ess. Для применения стилей, описанных в этом файле, к данному документу используется специальная инструкция, которую следует вставить между тэгами <STYLE> и </STYLE>. Вот формат этой инструкции:

@ import URL ("адрес_файла_таблицы_стилей")

Например:

@ import URL ( "http: //abcd/xyz/style.css")

(здесь приведен вымышленный адрес файла описания стилей). Другой способ использования внешних таблиц стилей основан на применении тэга <LINK> внутри тэга <HEAD>. Например:

<HEAD> [<LINK REL=STYLESHEET TYPE="text/css"
НREF="адрес_файла__таблицы_стилей"
TITLE="Style"
</HEAD>

Вставка Flash-мультфильма в Web-страницу

Flash-мультфильм содержится в SFW-файле, т. е. в файле с расширением swf, созданном в программе Macromedia Flash. Чтобы вставить его в Web-страницу (в соответствующий ей HTML-документ), надо написать несколько строк HTML-кода. А именно: нужно вставить объект, который будет воспроизводить Flash-файл. Flash-файл может содержать мультимедийный документ (анимацию, векторную и растровую графику, звук, интерактивные элементы управления). В частности, вы можете создать статическую картинку, содержащую много элементов (например, большой чертеж). Для этого сохраните ее в векторном, экономном SWF-формате и втавьте в свой HTML-документ. Более того, Flash-мультфильм может почти полностью определять и представлять содержание вашей Web-страницы, оставляя HTML-документу лишь роль контейнера.
В Flash имеется специальная команда для создания HTML-документа со всеми необходимыми тэгами, обеспечивающими проигрывание SWF-файла, — File>Publish (Файл>Публикация). Этот вопрос мы рассматривали в главе 9. Однако нередко требуется вставить готовый мультфильм в уже имеющуюся Web-страницу. В таком случае удобнее скорректировать HTML-документ вручную, с помощью обыкновенного текстового редактора.
Итак, чтобы вставить Flash-мультфильм в HTML-документ, необходимо написать в этом документе несколько строк, задающих объект, который будет воспроизводить мультфильм. Это — тэг <OBJECT> с соответствующими параметрами. Тэг <OBJECT> является контейнером, т. е. тэгом, который содержит другие тэги, а именно — тэги, задающие параметры.
Главный параметр тэга <OBJECT> — classid. Он указывает на Flash-проигрыватель (элемент управления ActiveX). Параметр codebase указывает, где в сети взять Flash-проигрыватель, если он не установлен на вашем компьютере. Тэг <EMBED> вставлен ради Netscape-браузера. Другие параметры объекта записываются в тэге <PARAM>. Отметим лишь некоторые из них, которые в большинстве случаев оказываются достаточными.
Параметр <PARAM NAME=raovie VALUE="имя_swf_файла"> указывает на имя SWF-файла с Flash-мультфильмом. Параметры WIDTH и HEIGHT (ширина и высота) определяют размеры прямоугольника, в котором будет размещаться ваш Flash-мультфильм. Имейте в виду, что мультфильм может обрезан, а также ему может быть отведено слишком много места на странице. Параметр <РАRАМ NAME=wmode VALUE=transparent> определяет, каким будет фон вашего ролика. В частности, значение transparent задает прозрачность фона. Это значение наиболее часто используется при вставках мультфильмов в Web-страницы.
Возможные значения параметров лучше всего изучить по книгам или справкам к программе Flash. Для точного позиционирования Flash-ролика на странице можно воспользоваться контейнером с заданием координат в атрибуте STYLE. Например, в Internet Explorer для этого подходит контейнерный тэг <DIV>.
В качестве примера приведем вставку Flash-мультфильма, представляющего собой калькулятор. Файл этого мультфильма calculator.swf можно взять из коллекции примеров программы Flash 5.0. HTML-код имеет следующий вид:

Для полного изучения всех возможных параметров советуем обратиться к программе Flash и поэкспериментировать с командой Publish при различных вариантах параметров (см. главу 9). Выбирая различные значения параметров, смотрите, какой HTML-код получается при публикации.

Поле ввода данных

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

<INPUT TYPE="TEXT">

Если вы хотите, чтобы введенные символы появлялись на экране в виде звездочек (что обычно нужно при вводе пароля), то используйте такой формат:

<INPUT TYPE="PASSWORD">

Для ввода числовых значений используется соответствующий аргумент атрибута TYPE:

<INPUT TYPE="NUMERIC">

В тэг <INPUT> можно вставить и другие атрибуты:

NАМЕ="имя" — имя переменной, в которой сохраняется введенное значение;
VALUE="значение" — начальное значение;
SIZE="число" —длина текстового поля;
МАХLENGТН="число" — максимальное количество символов, которое можно ввести.

Например:

<INPUT TYPE="TEXT" NAME="USERTEXT" VALUE="" SIZE="20">

Рис. 673. Поле ввода данных

Существует и другое средство для предоставления пользователю возможности вводить данные — метод prompt () языка JavaScript, который принимает в качестве параметров пояснительный текст и начальное значение, а затем отображает на экране окно для ввода значения. В этом окне есть две кнопки — ОК и Отмена. Метод возвращает введенное пользователем значение, либо false, если пользователь нажал кнопку Отмена.
Например, в результате выполнения функции prompt ("Введите текст", "") появляется следующее окно:

Рис. 674. Стандартное окно ввода данных, вызываемое методом prompt ()

Сценарии, связанные с полем ввода, будут рассмотрены в следующих разделах данной главы. Идея их проста. В тэге <INPUT> следует использовать атрибут NAME, чтобы иметь возможность привязать к полю ввода сценарий. В сценарии обычно обрабатывается аргумент атрибута VALUE. Инициация обработки, как правило, происходит по событию ONCHANGE (при изменении содержимого поля).

Переключатели

Тэг <INPUT> позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут TYPE= "RADIO" , то можно создать набор переключателей (radio-button) — кружков, щелчок на одном из которых делает его отмеченным (выбранным), а все остальные — неотмеченными. Чтобы набор переключателей воспринимался как целое, его необходимо поместить внутри тэга списка <UL> и в каждом тэге <INPUT> использовать одно и то же имя (значение атрибута NAME). Чтобы выделить переключатель, применяется атрибут CHECKED. После тэга <INPUT> помещается текст, который мы хотим видеть рядом с переключателем. Атрибут VALUE используется для того, чтобы мы смогли узнать, какой переключатель выбрал пользователь, и обработать выбор в программе-сценарии. Радиокнопки называют еще селекторными переключателями в отличие от просто переключателей, под которыми имеют в виду флажки (см. ниже)
В следующем примере создается набор из трех переключателей:

<HTML>
<НЕАD><TITLE>Переключатели</TITLE></НЕАD>
<Н2> Kакой язык Вы используете ?
<UL>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
Русский" CHECKED> Русский<ВR>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
АнглиЙский"> Английский <BR>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
Немецкий" > Немецкий
</UL>
</H2>
</HTML>

Рис. 675. Набор переключателей, оформленный в виде списка. В наборе можно установить только один переключатель.

Элементы списка (в рассматриваемом примере — переключатели) располагаются по умолчанию в столбце, т. е. вертикально. А как расположить их горизонтально, т. е. в одну строку? Горизонтальное расположение элементов списка довольно часто встречается на страницах, поскольку это позволяет экономить место. Один из возможных и часто используемых способов заключается в применении тэга таблицы как метода позиционирования. Ниже приводится вариант соответствующей программы и результат ее работы:

<HTML>
<НЕАD><TITLE>Переключатели</Т1ТLЕ></НЕАD>
Какой язык Вы используете ?
<UL>
<TABLE>
<TR>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Русский" СНЕСКЕО>
Русский
</TD>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Английский">
Английский
</TD>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Немецкий" >
Немецкий
</TD>
</TR>
</TABLE>
</UL>
</HTML>

Рис. 676. Переключатели расположены горизонтально с помощью таблицы с невидимыми рамками.

Флажки

лажки (checkbox) аналогичны переключателям за исключением внешнего вида и того, что в одном наборе можно установить/снять любое количество флажков. Задаются флажки так же, как переключатели, однако аргументом атрибута TYPE должен быть аргумент CHECKBOX:

<HTML>
<HEAD> <TITLE> Флажки</TITLE> </НЕАD>
<Н2> Kакие экзамены Вы будете сдавать ?
<UL>
<INPUT TYPE="CHECKBOX" NAME="TEST"
VALUE="Физика" CHECKED> Физика<ВR>
<INPUT TYPE="CHECKBOX" NAME="TEST"
VALUE="Английский язык"> Английский язык<ВR>
<INPUT ТYPE="CHECKBOX" NAME="TEST"
VALUE="Математика"> Математика
</UL>
</H2>
</HTML>

Если понадобится горизонтальное расположение флажков, то вы можете использовать тэг <TABLE>, как в предыдущем примере.

Рис. 677. Флажки или переключатели. В отличие от радиокнопок (селекторных переключателей) можно установить более одного флажка

Кнопки

На странице можно разместить обычную кнопку, нажатие (щелчок кнопкой мыши) на которой обрабатывается программой-сценарием. Например, вы можете создать кнопку с надписью Поиск. Что произойдет, если пользователь нажмет эту кнопку, — зависит от вашего сценария. Кнопка создается с помощью тэга <BUTTON>. Можно поместить на кнопку текст и картинку, а также позиционировать ее в нужное место с помощью атрибута STYLE.
В следующем примере создается кнопка с картинкой из файла logotip.gif и надписью:

<HTML>
<BUTTON STYLE="position:absolute; width:150;height:60">
<IMG SRC="logotip.gif" WIDTH="50" HEIGHT="50">
Нажми меня
</BUTTON>
</HTML>

Рис. 678. С помощью тэга <BUTTON> можно создать кнопку, поставить на нее картинку и текст

Можно создать графическую кнопку, используя уже знакомый тэг <INPUT>, но с атрибутами TYPE="IMAGE" и SRC="имя_файла", а также NAME и VALUE:

<INPUT TYPE="IMAGE" SRC="имя файла"
NАМЕ="имя кнопки" VALUE=значение>

В качестве картинки можно подобрать изображение кнопки или любое другое изображение. Например, следующая строка кода выводит значок (icon) «стрелка» из файла arw10ne.ico:

Рис. 679. C помощью тэга <INPUT> можно создать графическую кнопку, например, в виде пиктограммы стрелки

Кнопку также можно создать с помощью тэга <INPUT TYPE="BUTTON">.
Кроме рассмотренных выше, можно задать специальные кнопки для отправки данных серверному приложению (CGI), очистки полей ввода (и восстановления значений, принятых по умолчанию). В документ HTML можно включить несколько полей ввода данных, переключателей и флажков. Если они входят в один смысловой блок, то эти элементы следует заключить в тэг формы < FORM>. В этот же тэг можно включить и специальные кнопки.
Если мы хотим отправлять данные серверному приложению, то тэг <FORM> должен содержать атрибут, указывающий способ передачи, и атрибут, содержащий адрес серверного приложения. Например:

<FORM METHOD="POST" ACTION="/bin/serv">

Внутри этого тэга можно определить кнопку отправки. Например:

<INPUT TYPE=SUBMIT VALUE ="Отправить">

Здесь аргументом атрибута VALUE является текст надписи на кнопке. Кнопка очистки задается так:

<INPUT TYPE=SUBMIT RESET="Очистить">

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

Сценарии (скрипты)

тобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать так называемые скрипты или, иначе говоря, сценарии. Сценарий (script, скрипт) — программа, написанная на специальном языке программирования, которая встраивается в HTML-документ.
Например, иы хотите, чтобы при щелчке кнопкой мыши на картинке последняя изменила слой вид или, скажем, произошел переход на другую страницу. Для этого необходим скрипт, который выполнит все, что нужно. То есть сценарии описывают поведение элементов HTML-документа и их взаимодействие с пользователем (например, реакцию на щелчок кнопки мыши, изменение содержания страницы в зависимости от действий пользователя).
Стандартным языком для скриптов является JavaScript. Однако разные браузеры воспринимают различные версии этого языка и, более того, даже отличающиеся его редакции. Редакция JavaScript от фирмы Microsoft, наиболее близкая к стандарту, называется JScript. Браузер Microsoft Internet Explorer поддерживает не только JScript, но и еще один язык скриптов — Visual Basic Script (VBScript). Другие браузеры VBScript не воспринимают. Так уж сложилось, что сейчас около 80% посетителей Web используют браузер Microsoft Internet Explorer. Однако остальных тоже миллионы. Ближайший конкурент браузера от Microsoft — Netscape Navigator. Будучи хорошим продуктом, последние годы он только отступал. Есть еще один популярный браузер — Opera. В полемике о том, какой браузер лучше, на наш взгляд, следует руководствоваться критерием близости к стандартам поддерживаемых скриптовых языков, а не удобствами использования браузера и его внешним видом. Netscape, можно так сказать, поддерживает некий диалект JavaScript. To, что ему не под силу, легко воспринимает Internet Explorer. А на каком диалекте «говорит» браузер Opera? Чтобы ответить на этот вопрос, "требуется провести особое исследование. Обсуждения в Интернете на тему, какой браузер лучше, пока затрагивают лишь вопросы удобства и скорости.
Чтобы эффективно использовать скриптовый язык для создания сценариев (скриптов), необходимо знать так называемую объектную модель HTML-документа. Действительно, прежде чем что-то делать, нужно понимать, к каким свойствам каких объектов наши действия будут приложены. Дело в том, что HTML-документ при загрузке в браузер транслируется в некоторое внутреннее представление в соответствии с объектной моделью. Каждый элемент HTML-документа (заголовок, картинка, кнопка и т. п.) представляется соответствующим объектом. Специфика объектов определяется их свойствами. С другой стороны, браузер, будучи программой, тоже имеет свою объектную модель. Если бы объектные модели HTML-документа и браузера были нам известны и, кроме того, имелись бы средства для манипулирования объектами, то тогда мы могли бы управлять как содержанием документа, так и браузером. С появлением HTML 4.0 и интерпретирующих его браузеров (например, Internet Explorer версии 4.0 и старше) появилась и такая возможность. Объектная модель была опубликована, т. е. были описаны объекты, их свойства и соответствие элементам HTML-документа. Средством манипулирования объектами стал язык JavaScript. Для браузера Internet Explorer, кроме JScript, можно использовать язык VBScript. Это — объектно-ориентированные языки программирования. На них можно писать программы, называемые сценариями (скриптами), и вставлять сценарии в HTML-код, обрамляя тэгами <SCRIPT> и </SCRIPT>.
Рассмотрим сначала в общих чертах объектную модель, представляющую собой частично упорядоченное по отношению включения множество объектов. Это означает, что некоторые объекты входят в состав других объектов, так что объекты
образуют иерархию. Объект — это программная единица, которую можно использовать в программах для выполнения различных задач. О текущем состоянии объекта мы можем судить только по значениям его свойств. Управлять состоянием объекта (если он допускает это) можно только посредством его свойств. Программный код объекта, конкретная реализация его функционирования нам неизвестны. Мы не знаем, как устроен объект, но знаем, как им пользоваться. Данная концепция называется еше концепцией черного ящика. Таким образом, способ работы с объектами аналогичен способу работы с обычными бытовыми приборами: только посредством кнопок, ручек, циферблатов и дисплеев.
Объекты имеют фиксированные названия. Например, окну браузера соответствует объект window, a HTML-документу, загруженному в браузер, — объект document. Это основные объекты, но есть и другие. Объекты характеризуются тремя типами свойств:

собственно свойства;
методы;
другие объекты.

Собственно свойства, называемые обычно просто свойствами, представляют собой переменные с фиксированными именами. Свойства имеют значения. Есть свойства, значения которых можно только читать (нельзя изменять). Такие свойства подобны измерительным приборам и датчикам. Значения других свойств можно изменять как обычные переменные. Эти свойства аналогичны элементам управления. Для доступа к свойству объекта используется синтаксис:

объект.свойство;

Например, значением свойства document.location является URL-адрес HTML-документа.
Методы— это внутренние функции объектов. Они имеют фиксированные имена, могут принимать параметры и возвращать значения. Вот синтаксис применения метода:

объект.метод(список_параметров);

Например, метод window, open ("www. admiral. ru/~dunaev") открывает новое окно браузера и загружает в него страницу, расположенную по указанному адресу. Заметим, что некоторые методы не имеют параметров. С точки зрения пользователя методы отличаются от собственно свойств только синтаксисом обращения. Такого понимания вполне достаточно, чтобы их использовать. Более глубокие различия понятны только программистам. Дело в том, что программы (объекты — это тоже программы) могут управляться как данными (т. е. значениями переменных), так и процедурами и функциями (т. е. методами).
Объект может иметь в качестве свойства другой объект. В этом случае говорят, что первый объект содержит (включает в себя) второй объект. При этом первый объект называют также родительским (parent), а второй — дочерним, потомком или подобъектом (child). Если мы хотим обратиться к свойству или методу объекта объект2, являющегося подобъектом объекта объект!, то пишем так:

объект1.объект2.свойство;
объект2.объект2.метод () ;

Например, объект document является подобъектом объекта window. Если мы хотим что-то записать в документ, загруженный в текущее окно, то можем воспользоваться для этого методом write(). Вот пример:

window.document.write("Привет!")

Кроме свойств и методов, для каждого объекта определен список событии, на которые он в принципе может реагировать. События имеют предопределенные названия. Например, событие «щелчок кнопкой мыши» обозначается onclick, «нажатие кнопки мыши» — onmousedown, а «загрузка документа в браузер» — onload.
Все элементы страницы, созданные с помощью тэгов HTML, а также информация о состоянии браузера имеют объектное представление. Доступ к объектам осуществляется с помощью сценариев (скриптов). Именно там мы и пишем все необходимые выражения, о которых говорилось выше.
Все перечисленные понятия лежат в основе так называемых объектно-ориентированных программ. В настоящее время к ним относится основная масса программных продуктов. И в первую очередь таковыми являются современные операционные системы, например Windows.
Операционная система Windows является многозадачной системой, обеспечивающей одновременное выполнение нескольких программ. В программе, написанной для работы под управлением ОС Windows (или для другой графической среды), пользователь может раскрывать окна, переходить из одного окна в другое, заполнять текстовые поля, нажимать кнопки практически в произвольном порядке. Например, пользователь может запустить процесс копирования файлов, включить проигрывание компакт-диска и проверить, не пришла ли электронная почта. Все это делается параллельно. Каждое такое действие пользователя формирует событие, т. е. некоторое сообщение о произошедшем. Операционная система фиксирует это сообщение и анализирует его, чтобы узнать, откуда оно взялось и что с ним делать. Операционная система может обработать событие самостоятельно или передать его другой программе, например браузеру.
Конечно, в действительности не все так просто, но хотелось обратить внимание на то, что программирование под Windows — программирование, управляемое событиями.
Можно связать HTML-код с происходящими событиями и использовать эту связь для организации взаимодействия пользователя со страницей. Например, один лишь щелчок порождает сразу несколько событий: onmousedown (нажата кнопка мыши), onmouseup (отпущена кнопка мыши) и onclick (щелчок кнопкой мыши, т. е. кратковременное нажатие и освобождение кнопки).
Если пользователь нажмет кнопку мыши во время нахождения указателя над окном браузера, то Windows пошлет браузеру сообщение, содержащее информацию о том, какая кнопка мыши нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Браузер решает, обрабатывать ли ему это событие. Если пользователь щелкнул на одной из кнопок панели инструментов, то браузер обработает это событие сам. Если во время щелчка указатель находился внутри собственно страницы, то браузер пропустит это событие к странице через свою объектную модель. В HTML-программе страницы может находиться сценарий, который обрабатывает это событие. Имеется и обратный путь. Если мы решаем ответить на событие, то инструкции идут от сценария к браузеру через ту же объектную модель. Браузер теперь решает, что делать со страницей, и сообщает об этом системе. В динамическом HTML мы можем указать, на какие события реагировать странице и что делать браузеру.

Объектная модель

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

Рис. 680. Объектная модель

Самым главным является объект window (окно), который находится вверху иерархии. Но в то же время основное в модели — объект document, т. к. большая часть страницы состоит из его частей. По существу, объект window — просто контейнер (объект, содержащий другой объект) для объекта document. Кроме объектов, в модель входят коллекции — структуры, аналогичные массивам. В таком массиве каждый элемент принадлежит структуре и связан с соседними элементами. Иначе говоря, коллекция — это способ держать объекты вместе для упрощения доступа к ним с помощью программного кода. Считайте, что коллекция — просто промежуточный (технологический) уровень в иерархии.
Например, объект document может содержать коллекцию images картинок (объектов frame). Мы можем обратиться к картинке либо по ее имени, либо по порядковому номеру:

document . images ( "my_picture" )
window .images (0)

В коллекциях объектной модели первый элемент имеет нулевой индекс (порядковый номер). Расположение (индекс) элемента в коллекции зависит от его места в исходном тексте HTML-документа.
Рассмотрим пример простого HTML-документа:

<HTML>
<НЕАD> <TITLE>Пример</ТITLE> </НЕАD> •
<BODY>
<CENTER>
< ! Рисунок 1 >
<IMG ЗНС="рис1 .gif " NAME="imagel ">
</CENTER>
<! Форма, содержащая три элемента > <FORM NAME="myForm">
Имя: <INPUT TYPE="TEXT" NAME="xName" VALUE=""XBR>
E-mail: <INPUT TYPE="TEXT" NAME="email" VALUE=" "><BR><BR>
<INPUT TYPE="BUTTON" NAME="raybutton" VALUE="Нажми меня">
</FORM>
<! Рисунок 2 >
<IMG SRC="pnc2 .gif" NAME="image2 " WIDTH=200>
< ! Ссылка >
<A HREF="www.admiral.ru/~dunaev">Mofl
домашняя страница</А>
</BODY>
</HTML>

На рисунке, изображающем описанную выше страницу в окне браузера, сделаны поясняющие надписи, чтобы было понятно, какие элементы страницы какими объектами представляются.

Рис. 681. Объекты, соответствующие элементам Web-страницы (HTML-документа)

На этой странице расположены два рисунка, одна ссылка и форма, содержащая два поля ввода текста и кнопку. Окно браузера — это объект window. Он также содержит элементы, такие как строка состояния. Внутри окна браузера размещен HTML-документ. Этот документ представлен объектом document — самый важный объект в объектной модели. Все элементы HTML-документа являются свойствами объекта document и одновременно объектами с точки зрения языка сценариев. Для удобства некоторые объекты объединены в группы, называемые коллекциями. Например, коллекция всех картинок в HTML-документе называется images, а коллекция всех ссылок — links. Чтобы обратиться к объекту из коллекции, нужно указать его номер в этой коллекции. На следующем рисунке приведена иерархическая схема объектного представления HTML-документа из рассматриваемого примера:

Рис. 682. Иерархическая схема объектного представления HTML-документа

Первый объект в этой структуре — document. Первый элемент HTML-документа — картинка с именем image 1. Она представляется в виде объекта images (0) (напомним, что нумерация элементов коллекции начинается с нуля, поэтому первый элемент коллекции имеет индекс 0). В примере первой картинкой является графическое изображение из файла рис 1.gif. Чтобы получить доступ к этому элементу страницы, требуется записать:

document.images (0)

Если нужна кнопка, то пишем:

document.forms(0).elements(2)

Для доступа к первому полю ввода используется запись:

document.forms(0).elements(0)

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

document.forms(0).elements(0).value

HTML-документе были предусмотрительно определены имена элементов с помощью атрибута NAME. Хотя задание имен не является обязательным, указывать имена все же очень полезно, поскольку появляется возможность обращаться к элементам по именам. Например, вместо записи

document.forms(0).elements(0).value

можно было бы записать

document.myForm.xName.value

Это удобно, особенно когда на странице расположено много элементов, и трудно отслеживать, какой индекс имеет тот или иной элемент. Еще раз обратите внимание на то, что регистр букв в имени элемента имеет важное значение. Так, myForm и myform — не одно и то же.
Таким образом, для получения доступа к информации об элементах страницы необходимо, во-первых, знать положение соответствующего объекта в иерархии объектов. Во-вторых, нужно знать, как называются собственно объекты, их свойства и методы. Термин «получение доступа», скорее всего, вам знаком.
Теперь рассмотрим основные объекты, их свойства и методы.

Объект window

Объект window имеет свойства, методы, события, а также дочерние объекты. Приведем их полные перечни и рассмотрим, с разной степенью подробности, только наиболее важные с практической точки зрения.

Свойства объекта window

parent — возвращает родительское для текущего окно;
self — возвращает ссылку на текущее окно;
top — возвращает ссылку на главное окно;
name — название окна;
opener — ссылка на исходное окно, в котором было создано данное окно; О dosed — сообщает, если окно закрыто;
status — текст, показываемый в строке состояния браузера;
def aultstatus — текст строки состояния браузера по умолчанию;
returnValue — позволяет определить возвращенную переменную для события или диалогового окна;
client — ссылка, которая возвращает объект навигатора браузеру;
document — ссылка «только для чтения» на объект окна document;
event — ссылка «только для чтения» на глобальный объект event;
history — ссылка «только для чтения» на объект окна history;
location — ссылка «только для чтения» на объект окна location;
navigator — ссылка «только для чтения» на объект окна navigator;
screen — ссылка «только для чтения» на глобальный объект screen.

«Только для чтения» означает, что данное свойство изменять нельзя.
Свойство parent позволяет обратиться к объекту, находящемуся в иерархии на одну ступень выше, например к окну, содержащему коллекцию фреймов, в которой находится наш фрейм. Для перемещения на две ступени вверх нужно писать parent.parent и т. д.:

parent.window.frames(0)
parent.parent.window.frames(0)

Чтобы обратиться к самому главному окну, т. е. к окну браузера, следует использовать свойство top. Однако top не может обращаться к главному фрейму вашей системы разбиения на фреймы.
Свойство name соответствует имени фрейма, которое мы задаем и тэге <FRAMESET>.
Свойство status полезно использовать для вывода сообщений во время работы сценария, например, при отладке:

window.status="Ceйчac работает сценарий"

Методы объекта window

open — открывает новое окно браузера;
dose — закрывает текущее окно браузера;
showHelp — показывает окно подсказки как диалоговое;
showModalDialog — показывает новое окно как диалоговое;
alert — показывает окно предупреждения с сообщением и кнопкой ОК;
prompt — показывает окно приглашения с сообщением и текстовым полем;
confirm — показывает окно подтверждения с сообщением и кнопками ОК и Cancel (Отмена);
navigate — загружает другую страницу с указанным адресом;
blur — убирает фокус с текущей страницы; соответствующее событие — onblur;
focus — устанавливает страницу в фокус; соответствующее событие - onf ocus;
scroll — разворачивает окно на заданные ширину и высоту;
setinterval — указывает процедуре выполняться периодически через заданное количество миллисекунд;
setTimeout — запускает программу через заданное количество миллисекунд
после загрузки страницы;
clear Interval — обнуляет таймер, заданный методом setinterval;
clearTimeout — обнуляет таймер, заданный методом setTimeout;
execScript — выполняет код сценария; по умолчанию JScript.

Методы объекта window предоставляют возможности управления окнами и выполнения в них различных задач. Например, чтобы создать новое окно браузера, можно использовать метод open, а чтобы его закрыть — close. Следующий фрагмент программы создает новое окно браузера и показывает в нем документ new.htm (в общем случае можно указать URL-адрес документа):

window. open ("new .htm")

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

<SCRIPT>
window . alert ( "Вы хотите перейти к другой странице!");
, Adress=window .prompt ("Введите адрес страницы",""); if (Adress!= null)
{
window . status = "HoBHft адрес: "i-Adress;
window. navigate (Adress) ;
}
</SCRIPT>

Метод scroll позволяет развернуть страницу в заданных пределах. Например, чтобы задать ширину в 300 и высоту в 200 пикселов, надо написать:

window.scroll(300,200)

В ряде случаев может понадобиться, чтобы какая-то процедура была выполнена с некоторой временной задержкой. С этой целью можно применить метод setTimeout (), создающий таймер. Например, следующая строка программы создает таймер, который будет работать 10 с (10 000 мс) и затем запустит некоторую функцию Myfunc ():

TimeID=window.setTimeout("Myfunc()",10000)

Если потребуется перезапустить таймер, чтобы повторить процесс, то можно применить метод setlnterval. Он работает так же, как и setTimeout, но с той разницей, что вызывается периодически через заданное количество миллисекунд. Например, функция Myfunc() будет периодически вызываться через каждые 5 с:

TimeID=window.setlnterval("Myfunс()",5000)

Метод setlnterval уже был использован в примере создания движущейся картинки.

События объекта window

onblur — выход окна из фокуса;
onfocus — окно становится активным;
onhelp — нажатие пользователем клавиш <F1>;
onresize — изменение пользователем размеров окна;
onscroli — прокрутка окна пользователем;
onerror — ошибка при передаче;
onbeforeunload — перед выгрузкой страницы, что позволяет сохранить данные;
onload — страница полностью загружена;
onunioad — непосредственно перед выгрузкой страницы.

Среди перечисленных выше событий три происходят в результате действий пользователя. Если открыто несколько окон браузера, пользователь может переключаться между ними, переводя фокус с одного окна на другое. Эти действия инициируют события onblur и onfocus. Заметим, что эти же события можно вызвать программным способом, используя методы blur и focus. Если происходит ошибка при загрузке страницы или ее элемента, то инициируется событие onerror. Мы можем использовать это событие в программе, чтобы, например, попытаться еще раз загрузить страницу или как-то изменить дальнейшие действия. Вот пример:

<SCRIPT>
function window.onerror ()
{
alert("Произошла ошибка! Попробуйте еще раз")
}
</SCRIPT>

Событие onload происходит, когда в окно загружается страница; событие onbeforunload — перед тем как страница покинетокно; событие onunloaci — когда страница выгружена или перед загрузкой новой страницы, или перед закрытием браузера. Например:

<SCRIPT>
function window.onunload ()
{
alert("Страница выгружается!")
}
</SCRIPT

Объект window имеет несколько дочерних объектов, которые доступны с его помощью: document, history, navigator, location, event и screen.

Объект document

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

Таблица. Свойства объекта document

Свойство	Атрибут	Назначение
activeElement		Идентифицирует активный элемент
alinkColor	ALINK	Задает цвет активных ссылок на странице
bgColor	BGCOLOR	Определяет цвет фона элемента
body		Ссылка только для чтения на неявный основной объект документа, определенный в тэге <BODY>
cookie		Строка пароля для элементов cookie браузера
domain		Устанавливает или возвращает домен документа для его защиты или идентификации
fgColor	TEXT	Устанавливает цвет текста переднего плана
lastModified		Дата последнего изменения страницы, доступна как строка
linkColor	LINK	Цвет еще не посещенных гиперссылок на странице
location		Полный URL-адрес документа
parentWindow		Возвращает родительское окно для документа
readyState		Определяет текущее состояние загружаемого объекта
referer		URL-адрес страницы, которая вызвала текущую
selection		Ссылка «только для чтения» на дочерний для document объект selection
itle	TITLE	Определяет справочную информацию для элемента, используемую при загрузке или во всплывающей подсказке
url	URL	URL-адрес документа клиента или в тэге <МЕТА>
vlinkColor	VLINK	Цвет посещенных ссылок на странице

Коллекции объекта document

аll — коллекция всех тэгов и элементов в основной части документа;
anchors — коллекция всех «якорей» (закладок) в документе;
applets — коллекция всех объектов в документе, включая встроенные элементы управления, графические элементы, апплеты, внедренные и другие объекты;
embeds — коллекция всех внедренных объектов в документе;
forms — коллекция всех форм на странице;
frames — коллекция всех фреймов, определенных в тэге <FRAMESET>;
images — коллекция всех графических элементов (картинок) на странице;
links — коллекция всех ссылок и блоков <AREA> на странице;
plugins — еще одно название для коллекции внедренных объектов документа;
scripts — коллекция всех разделов <SCRIPT> на странице;
stylesheets — коллекция всех конкретных свойств стиля, определенных в документе.

Методы объекта document

clear — очищает выделенный участок;
close — закрывает текущее окно браузера;
createEiement — создает экземпляр элемента для выделенного тэга;
elementFromPoint — возвращает элемент с заданными координатами;
execcommand — выполняет команду (операцию) над выделением или областью;
open — открывает документ как поток для обработки результатов применения методов write и writeln;
queryCommandEnabled — сообщает, доступна ли данная команда;
queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус;
queryCommandstate — возвращает текущее состояние команды;
querycommandsupported — сообщает, поддерживается ли данная команда;
queryCommandText — возвращает строку, с которой работает команда;
queryCommandValue — возвращает значение команды, определенное для документа или объекта TextRange;
write —записывает текст и код HTML в документ, находящийся в указанном окне;
writeln — записываеттекст и код HTML, заканчивающийся возвратом каретки.

События объекта document

onafterupdate — возникает при окончании передачи данных; onbef oreupdate — возникает перед выгрузкой страницы;
onclick — происходит, когда кнопка мыши щелкнула на документе;
ondbidick— происходит, когда пользователь делает двойной щелчок на
документе;
ondragstart — происходит, когда пользователь начинает перетаскивание;
onerror — ошибка при передаче;
onhelp — происходит при нажатии пользователем клавиши <F1>;
onkeydown — возникает при нажатии клавиши;
onkeypress — возникает, когда пользователь нажал клавишу и удерживает ее в нажатом состоянии
onkeyup — возникает, когда пользователь отпускает клавишу;
onload — возникает при полной загрузке элемента;
onmousedown — происходит, когда пользователь нажимает кнопку мыши;
omousemove — происходит, когда пользователь перемещает мышь;
onmouseout — происходит, когда указатель мыши выходит с элемента;
onmouseover — происходит, когда указатель мыши впервые входит на элемент;
onmouseup — происходит, когда пользователь отпускает кнопку мыши;
onreadystatechange — возникает при изменении свойства readystate;
onseiectstart — происходит, когда пользователь в первый раз запускает выделенную часть документа.

Объект history

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

Свойство объекта history

length — количество элементов в списке History браузера.

Методы объекта history

back — загружает предыдущую страницу из списка;
forward — загружает следующую страницу из списка;
go (n) — загружает страницу с номером n из списка.

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

window.history.до(1) ;
if (window.history.length>4 )
{window.history.go(5) };

Объект navigator

Объект navigator содержит информацию о производителе браузера, его версии и возможностях.

Свойства объекта navigator

appCodeName — название кода браузера;
appName — название браузера;
appVerston — версия браузера;
cookieEnabied — определяет возможность создания в браузере элементов cookies на стороне клиента;
userAcjent — название браузера, посылаемое с помощью HTTP-протокола.

Коллекции объекта navigator

mimeTypes — коллекция всехтипов документов и файлов, поддерживаемых браузером;
piugins — название коллекции всех внедряемых объектов на странице;

Методы объекта navigator

taintEnabled — возвращает значение False, включен для совместимости с Netscape Navigator;
javaEnabied — сообщает, возможен ли в данном браузере запуск сценария на языке JavaScript.

Объект location

Объект location содержит информацию об URL-адресе текущей страницы, а также методы, позволяющие обновлять страницы.

Свойства объекта location

href — URL-адрес в виде строки;
hash — строка, следующая в URL за символом #;
host — часть URL ("хост:порт");
hostname — часть URL «хост»;
pathname — путь к объекту или файлу, находящийся после третьего слэша;
port — номер порта URL;
protocol — начальная часть, определяющая протокол;
search — строка запроса или данные URL после знака ?.

Например, если вы загрузили страницу с адресом http://www.cityline.spb.ru, то значением location.href будет эта строка.
Мы можем изменять показываемую страницу, присваивая свойству href новое значение. Например:

window.location.href="http://www.rambler.ru"

Методы объекта location

assign — загружает другую страницу; этот метод эквивалентен изменению свойства window.location.href;
reload — обновляет текущую страницу;
replace — загружает страницу, заменяя URL-адрес текущей.

Объект event

Объект event позволяет получить информацию о каком-либо событии, происходящем в браузере.

Свойства объекта event

aitKey — возвращает состояние клавиши <Alt>, когда происходит событие;
button — кнопка мыши, вызывающая событие;
canceiBubble — устанавливается для запрета прохождения заданного события вверх по объектной иерархии;
clientx — возвращает горизонтальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;
clientY — возвращает вертикальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;
ctrlKey — возвращает состояние клавиши <Ctrl> при появлении события;
fromElement — возвращает элемент, с которого ушел указатель мыши, для событий onmouseover и onmouseout;
keyCode — код ASCII нажатой клавиши; позволяет изменить значение, передаваемое объекту;
offsetx — возвращает горизонтальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события;
offsetY — возвращает вертикальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события;
reason — указывает, что перемещение данных прошло успешно или из-за чего оно прекратилось;
returnvalue — определяет возвращаемое значение для события;
screenx — возвращает горизонтальную координату указателя мыши относительно экрана, когда происходит событие;
screen Y —возвращает вертикальную координату указателя мыши относительно экрана, когда происходит событие;
shiftKey — определяет состояние клавиши <Shift> при возникновении события;
srcEiement — возвращает элемент, с которого началось прохождение события;
srcFiiter — возвращает фильтр, создавший событие onfiiterchange;
toElement — возвращает элемент, на который «наезжает» курсор мыши, при появлении события omouseover или onmouseout;
type — возвращает название события как строку, без приставки on;
х — возвращает горизонтальную координату указателя мыши относительно либо к позиционированному родительскому элементу, либо к окну;
у — возвращает вертикальную координату указателя мыши относительно либо к позиционированному родительскому элементу, либо к окну.

Свойства объекта event устанавливаются в момент прохождения события и большинство из них доступны только для чтения (их значения нельзя изменить). Однако есть два изменяемых свойства: keyCode и return Value.

Объект screen

Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, при определении размеров создаваемых окон, а также разрешения, с которым нужно передавать графику (нет смысла загружать 32-битное изображение, если монитор и видеокарта пользователя поддерживают только 256 цветов).

Свойства объекта screen

width — возвращает разрешение по ширине экрана пользователя (в пикселах);
height — возвращает разрешение по высоте экрана пользователя (в пикселах);
bufferDepth — задает количество бит на пиксел браузера;
coiorDepth — возвращает информацию, позволяющую решить, как использовать цвета на экране;
updateinterval — возвращает или устанавливает интервал времени смены экрана пользователя.

Объект TextRange

Объект TextRang (текстовая область) отображает разделы потока текста, формирующего документ HTML. Может быть использован для управления текстом внутри страницы.

Свойства объекта TextRange

htmlText — возвращает содержимое TextRange как текст и код HTML;
text — простой текст, находящийся внутри элемента TextRange или тэга <OPTION>.

Методы объекта TextRange

collapse — стягивает текстовую область в точку в начале или конце текущей области;
compareEndPoints — сравнивает две текстовые области и возвращает значение, показывающее результат;
duplicate — возвращает копию области TextRange;
execCommand — выполняет команду (операцию) над выделением или областью;
expand — расширяет текстовую область, добавляя туда новый знак, слово, предложение, или указывает, какие неполные блоки полностью содержатся;
findText — определяет текстовую область, содержащую только искомый текст;
getBookmark — возвращает значение, позволяющее в дальнейшем идентифицировать данную позицию в документе;
inRange — определяет, находится ли заданная текстовая область внутри текущей;
isEqual — определяет, равны ли заданная и текущая текстовые области;
move —изменяет начальную и конечную точки текстовой области для включения в нее различного текста;
moveEnd — заставляет текстовую область сжаться или расшириться до заданной конечной точки;
movestart — заставляет текстовую область сжаться или расшириться до заданной начальной точки;
moveToBookmark — передвигает границы текстовой области для включения другой, определенной ранее с помощью getBookmark;
moveToElementText — передвигает границы текстовой области для включения текста в заданном элементе;
moveToPoint — передвигает границы текстовой области и сжимает ее вокруг выбранной точки;
parentElement — возвращает родительский элемент для всего, что входит в текстовую область;
pasteHTML — вставляет текст и/или код HTML в текущую текстовую область;
queryCommandEnabled — сообщает, доступна ли данная команда;
queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус;
queryCommandState — возвращает текущее состояние команды;
queryCommandSupported — сообщает, поддерживается ли данная команда;
queryCommandText — возвращает строку, с которой работает команда;
queryCommandVaiue — возвращает значение команды, определенное для документа или объекта TextRange;
scroiiintoview — переносит текущую текстовую область в видимую часть окна браузера;
select — делает активный подсвеченный участок выделения на странице равным текущей текстовой области;
setEndPoint — переносит начальную или конечную точку текущей текстовой области в начало или конец заданной области.

Как писать скрипты

Применяя скрипты (сценарии), мы обрабатываем различные события (например, щелчок кнопкой мыши), анализируем введенные пользователем данные, изменяем внешний вид некоторой части страницы или даже всей страницы.
Как уже неоднократно отмечалось, сценарий вставляется в HTML-код с помощью тэга <SCRIPT>, который обычно размещается внутри тэга заголовка <HEAD>. Это делается для того, чтобы код сценария загрузился прежде, чем страница будет выведена на экран. Сценарий можно разместить и в конце HTML-документа, чтобы элементы документа загрузились прежде, чем к ним будут применены операции сценария. Для указания языка сценария служит атрибут LANGUAGE (язык). Если сценарий пишется на JavaScript, то атрибут LANGUAGE можно не указывать, поскольку JavaScript считается стандартным языком (по умолчанию). В браузере Internet Explorer версий с 4.0 по 6.0 можно также применять сценарии, написанные на VBScript. Если вы пишете на VBScript, то в качестве аргумента атрибута LANGUAGE следует задавать либо VBScript, либо VBS.
Вставка сценария в HTML-код осуществляется обычно по следующей схеме:

<HTML>
<HEAD>
...

</HEAD>
...
<BODY>
...
</BODY>
</HTML>

Здесь использован типовой вариант, при котором сценарий вставляется внутрь тэга заголовка <HEAD>, хотя он может находиться влюбом месте HTML-кода. Иногда даже требуется, чтобы скрипт был загружен после загрузки некоторых элементов страницы,
Атрибут LANGUAGE тэга <SCRIPT> может принимать аргументы JavaScript, JScript, VBScript и VBS. Если атрибут не указан, то подразумевается JavaScript.
Символы < ! — и //--> образуют тэг комментария. Рекомендуется их использовать на тот случай, когда браузер пользователя не сможет интерпретировать сценарий. Например, браузеры Netscape не воспринимают скрипты на VBScript. Обратите внимание, что тэг комментария в данном случае отличается от обычного тэга комментария < ! >, используемого вне сценария для того, чтобы вставить поясняющие тексты, не отображаемые на экране.
Сценарий совсем необязательно размещать в том же HTML- документе, где он может понадобиться. Его можно разместить в отдельном обычном текстовом файле, но с расширением js, а в HTML-документе написать такую инструкцию:

Например:

Для определенности в тэг <SCRIPT> не помешает вставить атрибут LANGUAGE= ' JScript'.
Привязка сценариев к элементам страницы
Внутри тэга <SCRIPT> размещается собственно программа сценария. Эта программа может делать все, что угодно ее автору. Однако обычно она содержит описания функций, которые должны вызываться при возникновении таких событий, как щелчок кнопкой мыши, нажатие клавиши на клавиатуре, загрузка страницы и др. Такие функции называются обработчиками событий. Чтобы вызов функций сценария произошел при возникновении того или иного события, нужно сделать привязку события и соответствующей ему функции к элементу страницы.
Связь между событием и функцией осуществляется в формате:

событие =" функция"

Например, если мы хотим связать событие «щелчок кнопкой мыши» с определенной нами функцией MyfuncQ, то должны использовать запись вида:

onclick="Myfunc ()"

Если вызов этой функции должен произойти при загрузке страницы в браузер, то следует записать:

onload=IMyfunc ()I

Мы рассмотрели связь типа «событие-функция». Однако одно и то же событие может восприниматься различными элементами страницы. Например, на щелчок кнопкой мыши могут отреагировать и кнопка, и картинка, и заголовок. Чтобы образовать связь «событие-функция—элемент», следует вставить запись типа событие='функция' в тэг элемента страницы подобно вставке атрибута. Например, если мы хотим, чтобы функция Myfunc() вызывалась при щелчке на тексте, находящемся внутри тэга <Н2>, то надо написать:

<Н2 onclick='Myfunc()'> Некоторый текст </Н2>

Связь между событием и функцией может быть записана в большинстве тэгов, например в <BODY>, <IMG>, <DIV>, <INPUT> и др.
Возможен и другой, нестандартный способ связи «событие—функция-элемент». Он заключается в том, что в тэге элемента страницы указывается атрибут ID (идентификатор, выполняющий роль имени NAME этого элемента, предназначенный для доступа к нему из программы). Затем в сценарии определяется функция, имя которой формируется по правилу:

идентификатор_элемента.событие()

Например, если мы хотим, чтобы при щелчке мышью на тексте, заключенном внутри тэга <Н2>, выполнялась некоторая функция, то мы должны написать примерно следующее:

....
<Н2 ID=My> Некоторый текст <Н2>
....
<SCRIPT>
....
function My.onclick()
....
</SCRIPT>
....

Обратите внимание на связь между значением атрибута ID в тэге <Н2> элемента страницы и именем функции, определенной внутри тэга сценария <SCRIPT>: значение ID и название события указываются в имени функции. В JScript эти составляющие имени пишутся через точку, а в VBScript — через символ подчеркивания. Приведенный выше фрагмент на языке VBScript выглядит так:

....
<Н2 ID=Му>Некоторый текст<Н2>
....
<SCRIPT LANGUAGE="VBScript">
....
Sub My_onclick()
....
</SCRIPT>

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

Обработчики событий

Обработчики событий следует оформлять в виде функций или процедур. В JScript используются только функции, а в VBScript — в основном, процедуры. Функция от процедуры отличается только тем, что возвращает некоторое значение. Следует различать описание (определение) функции и ее вызов.
Описание функции в JScript имеет вид:

function имя_функции (список_параметров)
{
... // код (тело) функции
};

Ключевое слово function сообщает интерпретатору (браузеру), что далее идет описание функции. Список параметров, если он есть, представляет собой последовательность идентификаторов, разделенных запятыми. Идентификаторы — просто символьные обозначения параметров, начинающиеся с буквы или символа подчеркивания. Код (тело) функции выделяется фигурными скобками. Выражения в коде, если их несколько, разделяются точкой с запятой. Комментарии начинаются двойным слэшем //. Если требуется явно указать, что именно должна возвратить функция в качестве результата, используется команда

return возвращаемый_результат

Если команда return не указана, то возвращается значение последнего вычисленного выражения. Следующий пример дает описание функции для вычисления площади прямоугольника:

function S_rectangle (a,b)
{
S=a*b;
return S
};

Для вычисления значения функции используется вызов:

имя_функции (список_значений_параметров)

Например, для вычисления площади прямоугольника со сторонами 5 и 20 следует записать выражение:

S = S_rectangle(5,20)

Здесь значение, возвращаемое функцией S_rectangle, присваивается переменной S. В вызове функций вместо конкретных значений можно подставлять переменные, функции и выражения. Вот пример:

х = 5;
S = S_rectangle(x,4+16)

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

а = 5;
b = 20;
S_tr = 0.5*S_rectangle(a,b)

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

function S_tr(a,b)
{
return 0.5*S rectangle(a,b)

Переменные

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

<SCRIPT LANGUAGE 'JScript'>
// Вычисление площади прямоугольного треугольника с помощью
// функции для площади прямоугольника
а = 5;
b = 20;
S_tr = 0.5*S_rectangle (a,b) // Вычисление площади
// прямоугольного треугольника.
function S_rectangle (a,b) // Описание функции
// вычисления площади прямоугольника.
{
S=a*b;
return S
}
</SCRIPT>

Здесь все переменные доступны внутри функции S_rectangle () , но переменная S недоступна вне ее. Чтобы сделать переменную S доступной в любом месте скрипта, нужно просто создать ее вне функции. Например, можно записать выражение S = 0; в том месте скрипта, где определены переменные а и Ь.

Примеры скриптов

Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты.
Другие примеры с пояснениями можно найти на сайте автора по адресу www.admiral.ru/~dunaev.

Смена картинки

В данном примере наведение указателя мыши на картинку приводит к изменению изображения. Когда указатель покидает картинку, изображение приобретает первоначальный вид.
Картинка на странице определяется, как известно, тэгом <IMG>. Атрибут SRC задает файл с изображением. Нам необходимо изменить значение атрибута SRC при наступлении события, связанного с указателем мыши. Когда указатель мыши попадает в область, занятую каким-либо объектом, возникает событие onMouseOver, а когда он покидает эту область, наступает событие onMouseOut.
Пусть первоначально на странице находится картинка из файла pictl.gif, а заменять ее мы хотим картинкой из файла pict2.gif. Тогда соответствующий HTML-код будет иметь следующий вид:

В этом примере мы обращаемся к объекту через коллекцию all() всех элементов HTML-документа, указывая идентификатор id нужного элемента. Поскольку выражения, которые следует выполнить при наступлении событий, просты, мы не стали заводить для скрипта отдельный раздел, ограниченный тэгами <SCRIPT> и </SCRIPT>.
Теперь рассмотрим пример, в котором изображение изменяется при щелчке кнопкой мыши на картинке. Понятно, что картинка должна реагировать на событие onСlick. В отличие от предыдущего примера нам потребуется счетчик щелчков, а лучше сказать — триггер, который при щелчке принимает одно из двух значений (0 или I). Это необходимо, чтобы знать, какое именно изображение показывать. Если значение триггера равно 0, то при щелчке оно изменяется на I и показывается картинка pict2.gif. Если значение триггера равно I, то при щелчке оно изменяется на 0, и показывается картинка pictl.gif.

<HTML> <SCRIPT>
var img_click=0; // триггер
function changeimg ()
{
if (img_click)
{document.all('myimge').src='pictl.gif1; img_clickl=0}; else
{document.all ('myimge') .src='pict2.gif; img_clickl=l};
}
</SCRIPT>
<IMG id="myimage" SRC="pictl. gif" onClick="c'hangeimg () ">
</HTML>

данном примере скрипт должен быть загружен раньше тэга <IMG>, чтобы переменная img_click инициализировалась раньше, чем кто-нибудь щелкнет на картинке.
Если нам необходимо, чтобы при щелчке на кнопке с картинкой изменялся вид последней, то в приведенном выше коде следует вместо тэга <IMG> подставить следующие тэги:

<BUTTON onclick="changeimg()">
<image src="pict.gif" id="myimage">
Нажми меня</ВUTTON>

Подсветка кнопок

В следующем примере на странице располагаются три кнопки серого цвета. При наведении указателя мыши на кнопку ее цвет изменяется на желтый. Здесь мы использовали стиль, чтобы задать первоначальный цвет кнопок и «вес» шрифта. При возникновении события функция changecolor (color) изменяет один из параметров стиля, а именно цвет фона backgroundColor. Цвет, который следует установить, передается функции в качестве параметра.

<HTML>
<STYLE>
.mystyle (font-weight:bold;background-color:aOaOaO}
</STYLE>
<FORM onMouseOver="changecolor('yellow')"
onMouseOut="changecolor('aOaOaO')">
<INPUT TYPE="button" VALUE="Pora" CLASS="mystyle"
onClick="alert('Вы нажали Рога')">
<INPUT TYPE="button" VALUE="Kопыта" CLASS="mystyle"
onClick="alert('Вы нажали Копыта')">
<INPUT TYPE="button" УАЫ1Е = "Хвосты" CLASS="mystyle"
onClick="alert('Вы нажали Хвосты')">
</FORM>
<SCRIPT>
function changecolor (color) // изменение цвета кнопок
{
event.srcElement.style.backgroundedоr = color;
}
</SCRIPT>
</HTML>

В данном примере мы воспользовались объектом event, который содержит информацию о каком-либо событии (в нашем случае — о щелчке). Свойство srcElement этого объекта содержит информацию об элементе страницы, с которым связано событие (в нашем случае это какая-то кнопка). Мы хотим изменить параметр background, относящийся не непосредственно к кнопке, а к ее стилю (style). Именно поэтому мы изменяем значение свойства event.srcElement.style.backgroundColor.
Мы рассмотрели не единственный возможный способ организации подсветки кнопок. В примере мы хотели обратить ваше внимание на то, что можно изменять параметры, определенные ранее тэгом или атрибутом STYLE.

Мигание

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

<HTML>
<TABLE BORDER=1 WIDTH=180 ID="mytab" style="border:
7px solid:yellow">
<ТR> <ТD>Мигающий бордюр</ТD> </ТR>
</TABLE>
<SCRIPT>
function flash() // изменение цвета бордюра
{
if (.'document. all) // ничего в документе нет
return;
if (mytab.style.borderColor=='yellow')
mytab.style.borderColor='red'; else
mytab.style.borderColor='yellow';
}
setlnterval("flash()",500);
// мигание бордюра с периодом 500 мс
</SCRIPT>
</HTML>

В скрипте периодически с помощью метода setlnterval () вызывается функция flash (), которая назначает цветрамки таблицы; setlnterval () является методом объекта window. Он принимает два параметра: функцию, которую следует периодически запускать, и число, равное периоду запусков в миллисекундах. В нашем примере функция flash () задания цвета рамки запускается через каждые 500 мс.

Ссылки, переливающиеся цветами радуги

В этом примере мы помещаем на страницу три гиперссылки. Чтобы привлечь внимание посетителей, мы заставляем их периодически изменять спой цвет. Мы не настаиваем на широком использовании этого способа дизайна (частое мигание не только привлекает, но и раздражает), но пример сам по себе довольно поучительный.
В НТМ L-коде мы размешаем три гиперссылки на Web-странице нашего сайта, посвященного, главным образом, учебным примерам. Напомним его адрес: www.admiral.ru/~dunaev. Далее, в этом же HTML-документе мы размещаем скрипт (сценарий), который выполняет периодическую смену цветов гиперссылок.
В скрипте определяется массив, элементами которого являются коды или названия цветов. Напомним, что цвет можно задать двумя способами. В примере длина массива цветов (количество элементов) равна 8. Функция colorchange () , определение которой мы написали сами, изменяет цвет. Чтобы внести хаотичность в процесс выбора цвета, мы использовали оператор % для вычисления остатка от деления текущего индекса массива цветов на его длину. Таким способом мы вычисляем номер элемента массива цветов, который будем использовать при следующем назначении цвета ссылке. Разумеется, здесь можно придумать и что-нибудь более изысканное, но все и так достаточно хорошо работает.
Чтобы гиперссылки постоянно изменяли свой цвет, мы используем уже известный из предыдущих примеров метод set Interval ( ) . Здесь он применяется к функции изменения цветов colorchange () . Это означает, что первым параметром метода является строка (в кавычках), содержащая вызов функции colorchange ( ) . Частота смены цветов определяется вторым числовым параметром этого метода. Напомним, что он задает период запуска функции в миллисекундах, так что значение 500 соответствует 0,5 с. Обратите внимание, что способы выбора цветов для непосещенных и уже использованных ссылок различаются.

<HTML>
<! Ссылки>
<А HREF="i_is . htm">Начало</А>
<А HREF="examples.htm">Примеры HTML</A>
<А HREF="mybook.htm">Moи книги</А>
<SCRIPT>
color s=new Array (8); // массив цветов
сolors[l]='#008000';
Colors [2] = 'green ' ;
сolors [3]='#c6c6bc' ;
colors [4]='green ' ;
rolors [5] ='blue ' ;
сolors [6]='purple' ;
сolors[7]='black';
сolors [8]='red' ;
link=4;// начальные индексы массива цветов
"unction colorchange ()// изменение цвета
{
link=(link+l)%co]ors. length;
vlin k= (link+1) %colors. length ;
document.linkColor=colors [link] ;
document.viinkColor=colors[vlink];
}
setlnterval("colorchange()",500)
// изменение цвета через 500мс,
// т. е . через 0,5с.
</SCRIPT>
</HTML>

Обратим внимание на то, что в данном примере в гиперссылках использовались имена файлов, а не их полные URL-адреса. Это вполне допустимо, если указанные файлы находятся в той же папке (каталоге), что и HTML-документ, содержащий эти гиперссылки. Для надежности, а также в общем случае, вы можете использовать более точные указания и, в частности, универсальные адреса расположения ресурсов — URL.

Анимация

Анимационные эффекты на Web-странице можно создать и средствами HTML совместно со скриптами. Конечно, самым эффективным средством создания анимации для Web является программа Flash. Однако кое-что можно сделать с помощью динамического HTML, т. е. HTML совместно со скриптами и CSS (каскадными таблицами стилей).
Если вам необходимо, чтобы картинка изменяла свой вид, то используйте анимационные GIF-файлы. Если же вы хотите, чтобы картинка перемещалась в пространстве страницы, то используйте соответствующий скрипт. Интересный результат получается при перемещении анимационного GIF-файла с помощью скрипта. Вообще говоря, это — генеральная стратегия создания анимации средствами динамического HTML.
Ниже мы приводим код, который перемещает картинку из файла pict.gif на некоторе количество пикселов по вертикали и горизонтали, если вы сделали на ней щелчок кнопкой мыши.

<HTML>
<IMG id="myimage" SRC = "openl.gif" STYLE="position:
absolute;
lop:10;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("myimage").style.top=parselnt(document.all
("myimage").style.top)+10; document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}

</SCRIPT>
</HTML>

Здесь функция move () переопределяет координаты картинки. Мы использовали функцию parseInt () для преобразования строковых значений параметров стиля в числовые, чтобы корректно выполнить арифметические операции.
Теперь модифицируем рассмотренный выше пример так, чтобы картинка при щелчке кнопкой мыши на ней начинала двигаться без остановки. Для этого нам потребуется метод setInterval (). Напомним, что это — метод объекта window. Он принимает два параметра: функцию, которую следует периодически запускать и период в милисекундах, через который ее нужно запускать. В примере мы намерены запускать функцию move () через 0, I с. Вот код данного примера:

<HTML>
<IMG id="myimage" SRC="openl.gif" STYLE="position:
absolute; top:iO;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("rayimage").style.top=parselnt
(document.all("myimage").style.top)+10; document.all
("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
setlnterval ("move ()",100);
// периодический вызов функции move()
}
</SCRIPT>
</HTML>

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

<HTML>
<IMG id="myimage" SRC = "openl.gif " STYLE="position : absolute; top:10;left:50">
<SCRIPT>
function move()
{
document. all ("myimage").style.top=parselnt
(docurrent. all ("myimage").style.top)+10;
document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}
setlnterval("move()",100);
// периодический вызов функции move()
</SCRIPT>
</HTML>

В этом примере метод setlnterval () находится вне определения функции move () , поэтому он начнет выполняться сразу же после загрузки страницы в браузер.
Очевидно, в рассмотренных выше примерах картинка, начав движение, со временем исчезнет из поля зрения (уйдет за границы окна браузера). Чтобы это не произошло, следует использовать замкнутые траектории движения, которые мы рассмотрим в следующем примере.
В рассматриваемом ниже примере картинка перемещается по эллиптической траектории. Вместо картинки вы можете заставить двигаться любой другой видимый элемент страницы. Эллипс — это замкнутая кривая, овал. Частными случаями эллипса являются окружность и отрезок прямой линии. Особенность данного примера состоит в том, что функция, обеспечивающая движение элемента по эллипсу, универсальна, т. е. не зависит от того, что именно должно двигаться по эллиптической траектории. Кроме того, мы разместили описание этой функции в отдельном текстовом файле с расширением js. Предполагается, что текстовые файлы с таким расширением содержат скрипты, написанные на языке JavaScript. В нашем примере этот файл имеет имя ellipse.js. Поскольку этот скрипт достаточно универсален, вы можете использовать его в своих разработках.

Файл ellipse.js

//Движение по эллипсу
// Параметры:
// objnamel - id движущегося объекта, заданного тэгом; строка;
// alphal - угол поворота эллипса, градусы;
// al - большая полуось эллипса, пикселы;
// b1 - малая полуось эллипса, пикселы;
// omegal - угловая скорость, град/с;
знак задает направление вращения;
// х01 - х-координата центра эллипса, пикселы;
// у01 - у-координата центра эллипса, пикселы;
// ztimel - начальная фаза на эллипсе, градусы;
// dtl - временная задержка, секунды.
•function ellipse
(objnamel, alphal, al,bl, omegal, xOl , yOl, ztimel, dtl)
// проверка наличия параметров if
(alphal==null) alphal=0; if (al==null)
al = 0; if (bl==null)
bl = 0;
if (omegal==null)
A omegal=0;
if (x01==null)
x01=0; if (y01==null)
y01=0; if (ztimel==null)
ztimel=0; if (dtl==null)
dtl=0; t=-ztimel;
// чтобы начальное значение было О,
// поскольку в move() уже есть приращение
// Многократный вызов функции move()
с интервалом ztime в секундах: setlnterval
("move('"+objnamel+"',"+alphal + "," + al + "," + b1 + ",
+ omegal + "," + xOl + "," + yOl + ","
+ ztimel + "," + dtl ") ", ztimel*1000)
// Пересчет координат, вызывается из ellipse ()
function move
(objname2 ,alpha2,a2,b2, omega 2 ,x02,y02,ztime2,dt2)
t = t-H2time2;
// x,y - координаты в собственной системе координат
x=a2*Math. cos ( (ornega2* t + dt2) *Math. PI/180) ;
y=b2*Math.sin((omega2*t Kit2)*Math.PI/180) ;
as=Math.sin(alpha2*Math.PI/180) ;
ac=Math.cos(alpha2*Math.PI/180) ;
document.all(objname2) .style.top=-x*as+y*ac+y02
document.all(objname2).style.left=x*ac+y*as+x02

Параметр функции objname определяет идентификатор (значение id) элемента страницы, который должен двигаться по эллиптической траектории. Смысл остальных параметров можно понять из следующего рисунка:
Координаты top и left — вертикальная и горизонтальная экранные координаты. Если а = b (большая и малая полуоси эллипса равны), то эллипс превращается в окружность. Если а = 0 или b = 0, то эллипс вырождается в отрезок. Обратите внимание, как используются математические (тригонометрические) функции. Эти функции суть методы объекта Math.

Рис. 863. Параметры движения по эллиптической траектории

Собственно перемещение элемента обеспечивается периодическим вызовом вспомогательной функции move (), которая вычисляет новые координаты элемента. Чтобы вызывать эту функцию периодически (с заданной временной задержкой), мы использовали метод setlnterval () объекта window.
Вот HTML-код, в котором определяется перемещаемый элемент (картинка из файла pict.gif), загружается файл ellipse.js со скриптом, описывающим функцию ellipse (), и вызывается функция ellipse ():

<HTML>
<! Объект, который будет двигаться >
<IMG ID="pl" SRC = "pict.gif" STYLE =
"position:absolute;top:300;left:190">
<! Загружаем скрипт из файла с описанием функции ellipse (),
ss которая перемещает объект>
<SCRIPT SRC = "ellipse js"x/script>
<! Вызываем функцию ellipseO >
<SCRIPT>
ellipse("pi",60,100,30,10,170,300,0.2,0)
</SCRIPT>
</HTML>

Особенность данного примера состоит в том, что перемещаемый объект (в нашем случае — картинка) должен быть определен прежде загрузки скрипта и вызова функции, обеспечивающей движение.