Поиск

Примеры сценариев

Замена изображения

Один из самых модных сценариев — замена одного рисунка другим в тот момент когда над рисунком появляется указатель мыши. Таким способом можно изме нять вид надписи (текст или фон), вводить изображения нажатой и отпущенное кнопки, создавать всевозможные визуальные эффекты, «оживляющие» страницу Листинг 5.3 содержит код подобной страницы. На его примере мы разберем, как совершается замена изображений.

Листинг 5.3. Сценарий для замены изображения

<НТМ1_>
<HEAD>
<МЕТА httpequiv="ContentType" content="text/html; charset=windows1251">
<Т1ТLЕ>Замена изображений</TITLE>
<SCRIPT language="javascript">
AgentName = navigator.appName;
AgentVer = parselnt(navigator.appVersion):
if (AgentName == "Netscape" && AgentVer <= 2)
{
version = "n2";
1
else {
version = "x3";
}
if (version == "x3") {
// Первая кнопка
IMAGEIon = new Image;
IMAGEIon.src = "str~lon.jpg";
IMAGEIoff = new Image;
IMAGEIoff.src = "str1.jpg";
// Вторая кнопка
IMAGE2on = new Image;
IMAGE2on.src = "str2on.jpg";
IMAGE2off = new Image;
IMAGE2off.src = "str2.jpg";
}
// Указатель сверху
function mouse_on(objekt) {
if (version == "x3") {
imgOn = eval(objekt + "on.src");
document[objekt].src = imgOn;
}
}
// Указатель убран
function mouse_off (objekt) {
if (version == "хЗ") {
imgOff = eval(objekt + "off.src");
documentfobjekt]. src = imgOff;
}
}
</script>
</head>
<BOOY>
<TABLE align="left" border=0 cellspacing=3 cellpadding=8>
<TR>
<! Первая кнопка >
<TD><A href="URL" onMouseover="mouse_on( 'IMAGE1 ' )"
onMouseout="mouse_off ( 'IMAGE"! ' )">
<IMG src="str1 . jpg" name=" IMAGE"!"
alt="Page 1" border=0 height=36 width=151x/a></td>
<! Вторая кнопка >
<TD><A href="L)RL" onMouseover="mouse_on( 'IMAGE2' )"
onMouseout="mouse_off( 'IMAGE2' )">
<IMG src=" str2.jpg" name="IMAGE2"
alt="Page 2" border=0 height=36 width=151></a></td>
</table>
</body>
</html>

Весь сценарий находится внутри элемента SCRIPT. Первые строки кода не имеют прямого отношения к замене графики. Дело в том, что броузеры ранних версий не поддерживают некоторые конструкции JavaScript, поэтому, чтобы предотвратить возникновение ошибки, необходимо проверить тип и версию броузера. Чаще все го код сценария надо защищать от броузера Netscape Navigator 2.x. В нашей про грамме создаются две переменные AgentName и A g e n t V e r , которые позволяют определить название и версию броузера соответственно. Для этого указан объект navigator (представляющий используемый броузер). Кроме этого необходимы:

  • appName — свойство, возвращающее название броузера;
  • appVersion — свойство, возвращающее номер версии броузера;
  • parselnt —.функция округления до целого (т. к. номер версии может быть «дробным»).

Теперь, проведя проверку этих переменных, мы можем создать переменную version, которая будет хранить значение п2, если используется вторая или более ранняя версия Netscape Navigator. Значение хЗ обозначает все другие программы про смотра.

Теперь можно приступать к рисункам. Чтобы заменить один рисунок другим надо изменить свойство src графического объекта: ссылку на графический файл Поэтому вначале создаются две объектные переменные IMAGEIon и IMAGEIoff тиш Image. Для них определяются необходимые графические файлы:

  • strlon.jpg — рисунок, который должен появиться под указателем мыши;
  • strl.jpg — рисунок, который сразу помещается на страницу, и который появля ется, когда указатель убран.

Теперь мы имеем два изображения кнопки. Саму кнопку (с надписью «Страница 1»' можно увидеть в главе 8 на рис. 8.23, но в данном случае иллюстрация мало чтс объясняет, так как работу сценария нужно наблюдать в действии.

Удобство предварительного определения файлов очевидно: если на страниц* много кнопок, целесообразно сосредоточить все ссылки в одном месте. В нацт примере используются две кнопки, поэтому для второй тоже задаются два файл; формата JPG.

В нашем примере объектом, вид которого мы хотим динамически изменять, явля ется гиперссылка с содержимым в виде рисунка. Для элемента А задано событие «указатель мыши сверху»:

onMouseover="mouse_on( ' I M A G E 1 ' ) " .

Естественно, в сценарии должна находиться соответствующая функция. Разберем, как работает функция mouse_on(objekt). Ее аргументом является имя элемента IMG, которое задано с помощью атрибута

name="IMAGE1".

Таким образом, задается однозначное соответствие между объектами, которыми оперирует сценарий, и элементами расположенными на странице. Работа функции тоже начинается с проверки вер сии броузера, так как в теле функции присутствует метод eval, не поддерживав' мый ранними версиями Netscape Navigator.

Этот метод работает достаточно интересно. Его аргумент — текстовая строка которая должна представлять собой команду JavaScript. С помощью метода eval эта команда выполняется. Если в нашем примере такой командой окажется

"IMAGEIon. src", то переменная imgOn получит в качестве значения ссылку на графический файл.
Это будет не " s t r 1 o n . j p g " ,
как можно подумать, a URL, например
file:///С:/ПАПКА/s t r 1 o n . j p g

Осталось изменить свойство элемента рисунка. Это делается с помощью объектг document и имени соответствующего элемента IMG. Объект document можно считат! массивом, в качестве индекса которого выступают имена расположенных на странице элементов. Ну, а свойство src говорит само за себя. Вторая функции (mouse_of f ) отвечает за возврат рисунка к прежнему виду и работает аналогично Возможно, у вас возникнет подозрение: а не слишком ли сложно запрограммиро ван сценарий? Действительно, коечто в тексте программы можно упростить Например, в сценарии могла бы выполняться такая команда:

document["IMAGE1"J. src '= "str1on.jpg";

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

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

function mouse_on(objekt, risunok) {
if (version == "хЗ") document[objekt].src = risunok;
>
Тогда элемент А должен выглядеть так:
<А href =" URL" onMouseover="mouse_on( 'IMAGE1 ' , 'str1on.jpg1 )"
onMouseout="mouse_off( 'IMAGE"! ' , 'str1.jpg' )"><IMG src=" str1.jpg"
name="IMAGE1" alt="Page 1" border=0 height=36 width=151></a>

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

Изменение свойств текста

Webстраница, текст которой приведен в листинге 5.4, содержит элементы абзаца и заголовка. Для заголовка запрограммированы события мыши так, чтобы цвет и содержание текста изменялись в зависимости от положения указателя. Листинг 5.4. Сценарий для замены свойств текста

<HTML>
<HEAD>
<TITLE>Изменение цвета текста<TITLE>
<МЕТА httpequiv="ContentType" content="text/html; charset=windows1251">
<SCRIPT>
// Если указатель мыши установлен
function TextOnMouseOver( ){
Element"! = window. event. srcElement ;
Text"! = document. all("Par1") ;
if (Elementl.tagName == "H2") {
Element"! .style. color = "red" ;
Text"!. 1ПпегТех1="Надпись стала красной?"
Text"! . style. color="maroon"
// Если указатель мыши убран
function TextOnMouseOutO {
Element"! = window, event. srcElement ;
Textl = document. all("Par1") ;
if (Elementt.tagName == "Н2"){
Elementl .style. color = "green" ;
Text"! . innerText=' Установите указатель мыши на надпись "Заголовок"'
Text"! . style. color="blue"
}
}
</script>
</head>
<BOOY bgcolor="white" text="green">
<P id="Par1">ycTaHOBHTe указатель мыши на надпись "Заголовок"</р>
<TABLE border=0 cellspacing=0 cellpadding=0><TR>
<TD><H2 onmouseover=TextOnMouseOver( ) onmouseout=TextOnMouseOut( )>
Заголовок</И2><ДаЫе>
</body>
</html>

Легко заметить, что в элементе Н2 информация о сценарии минимальная: указань: только имена функций. Вся обработка событий сосредоточена в элементе SCRIPT Когда указатель мыши попадает в область заголовка, выполняется функция TextOnMouseOver( ). Поскольку эта функция не получает никаких параметров необходимо в первую очередь определить, с каким элементом связано событие Для этого создается объектная переменная Element! В тексте программы исполь зуются:

  • window — объект, определяющий окно броузера;
  • event — объект, содержащий информацию о событиях;
  • srcElement — свойство, определяющее элемент, в котором произошло событие Переменная Text"! связана с конкретным абзацем (элементом Р) при помощи ат рибута id, задающего имя элемента.

Теперь все готово для активных действий. С помощью свойства tagName проверя ется, действительно ли событие связано с элементом Н2. Таким образом, сценарий будет выполняться для всех заголовков второго уровня, расположенных на стра нице. С помощью конструкции style, color для заголовка задается красный цвет С помощью свойства innerText заменяется текст абзаца. Вторая функция, кото рая выполняется, когда указатель мыши покидает область заголовка, работает так же, но константы в ней использованы, естественно, другие.

Обратите внимание, что элемент Н2 расположен внутри элемента TABLE. Дело Е том, что элемент заголовка занимает всю строку, и слева от надписи остается пус тое пространство (рис. 5.2). Если пользователь поместит указатель мыши на пус тое место, сценарий тоже будет выполнен. Это может показаться неестественным,

так как все привыкли, что реакция возникает, когда выбран конкретный объект (в данном случае надпись). Таблица, которую не видно при просмотре, позволяет ограничить область действия элемента Н2 только его текстом.

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

Текст страницы приведен в листинге 5.5, а внешний вид — на рис. 5.3.

Листинг 5.5. Страница с часами

<HTML>
<HEAD>
<Т1Т1_Е>Страница с часами<TITLE>
</head>
<SCRIPT language="javascript">
function Timer1() {
var D1 = new Date();
var TIME1 = " ";
TIME1 = D1 . getHours( )+" : "+D1 . getMinutes( )+" : "+D1 . getSeconds( )
document . f ormaO.1 . dat . value=D1 , toLocaleSt ring( ) ;
document, formad . vremya. value=TIME1;
setTimeout( 'Timer1( ) '' , 2000)
}
</script>
<body onload=Timer1( ) bgcolor="white" text="blue">
<FORM name="forma01">
<P> Полный формат даты:<ВН>
<INPUT type="text" size=40 name="dat">
<P> Текущее время :<BR>
<INPUT type="text" size=8 narne="vremya">
</form>
</body>
</html>

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

<BODY onload=Функция()>

В функции Timer"! ( ) переменная D1 хранит объект Date( ) — текущую дату. Для пере^ меннои TIME1 использованы методы getHours( ), getMinutes( ) и getSeconds( ) дл{ того, чтобы вывести текущее время в заданном формате. Функция toLocaleString( ] позволяет преобразовать формат даты в строковый.

Если бы мы просто определили дату и текущее время, а затем вывели эти данньк на экран, изображение оказалось бы статичным. Оно могло бы измениться толькс в том случае, если бы пользователь перезагрузил страницу. Поэтому сценарий надо сделать постоянно работающим. Для этого используется метод setTimeout Он позволяет создать паузу в выполнении сценария. Величина этой паузы задает ся в миллисекундах в качестве второго аргумента функции. В качестве первого аргумента выступает функция, которая должна быть выполнена после истечения заданного времени. В нашем случае используется имя той же функции, в которой находится оператор. Это позволяет функции Timer1() бесконечно вызывать саму себя (рекурсивный вызов), и выполнение сценария не будет останавливаться. Поскольку изменение данных (времени) происходит один раз в секунду, величи на задержки должна быть меньше секунды. В нашем случае она равна 0,2 с. Метод setTimeout можно использовать для создания таких визуальных эффектов, как бегущая строка, побуквенный вывод надписи, меняющееся изображение и других.

Управление формами

Когда на странице размещают элементы форм, бывает удобно запрограммировать работу этих элементов. В листинге 5.6 приведен пример страницы с двумя кноп ками, которые управляют содержимым элемента TEXTAREA. На рис. 5.4 показан пример страницы после щелчка на кнопке Заменить текст.

Листинг 5.6. Страница с кнопками

<HTML>
<HEAD>
<ТIТLЕ>Страница с кнопками</TITLE>
</HEAD>
<SCRIPT language="javascript">
var Stroka = "Новый текст элемента"
function DoFirst(){
document.forma02.textOI .value = "Первоначальный текст элемента"
}
</script>
<BODY bgcolor="white" text="blue" onload=DoFirst()>
<FORM name="forma02">
<TABLE border=3 cellspacing=0 cellpadding=10>
<TR><TD>&nbsp; <TD rowspan=2>
<TEXTAREA name="text01" rows=5 cols=30x/textarea>
<TRXTD>
<INPUT type=button уа!ие="3аменить текст"
onClick="document.forma02.textOI.value=Stroka">
<P>
<INPUT type=button уа!ие="Стереть текст"
onClick="document.forma02.textOI.value=' ' ">
</table>
</form>
</body>
</html>

На этой странице создана форма с именем forma02 и с элементами, выровненны ми при помощи таблицы. Элемент TEXTAREA.имеет конечный тег для отделение текста, находящегося в области прокрутки. Однако, поскольку это элемент фор мы, для изменения его содержимого используется свойство value, а не свойстве innerText, необходимое для элементов, служащих контейнерами текста. При за грузке страницы выполняется функция DoFirst(), что позволяет ввести в тексто вую область исходную строку.

Для кнопок (элемент INPUT типа button) определены события «щелчок мышью» ondick. Первая кнопка записывает в текстовую область содержимое переменной Stroka, определенной в секции SCRIPT. Вторая кнопка удаляет весь текст из эле мента. Поскольку кнопки стандартные, нам не надо думать о том, как будет выгля деть нажатая и отжатая кнопка: все сделает программа. Но при желании можнс воспользоваться одним из предыдущих примеров и сделать кнопки на основе ри сунков. Но тогда пришлось бы запрограммировать для каждой кнопки несколькс событий.