Доступ к элементам HTML по номеру

Возьмем такой пример. Предположим, что мы поместили на веб-страницу графический элемент (картинку), но хотим, чтобы она не сразу возникла в своем реальном размере, а постепенно выросло “из ничего”. Для примера можно взять изображение компьютера ATARI-800, которое уже исполь- зовалось нами в главе 3. Карту графических ссылок мы в этом примере на него ставить не будем, хотя это легко сделать, просто перенеся код из последнего примера раздела 3.1'. Сначала просто поставим картинку на сграницу:

Физический размер этой картинки — 451х310, но мы, как видите, специально уменьшили ее ширину и высоту на 300 пикселов. Теперь давайте попытаемся обратиться к ней из сценария JavaScript.

Оказывается, доступ ко всем картинкам на странице можно получить, просто написав метод document.images и указав в квадратных скобках номер картинки на странице. Вообще говоря, такой синтаксис в JavaScript употребляется по отношению к массивам элементов. То есть, если у нас есть массив из пяти элементов под названием MoyMassiv, то к его элементам следует обращаться так: MoyMassiv[0], MoyMassiv[1],..., MoyMassiv[4]-. Мас сив document.images называется коллекцией.

Нумерация картинок начинается с нуля. Наша картинка, как первая на странице, будет иметь номер 0. Следовательно, для обращения к ней из сценария следует использовать метод document.images[0]. Если бы мы поместили на страницу еще одну картинку, после первой, то к этой второй кар тинке мы могли бы обратиться так: document.images[1].

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

if (document.images[0].width<451)

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

document.images[0].width+=2;

В данном случае мы увеличили ширину картинки на 2 пиксела. Точно так же можно поступить и с ее высотой:

document.images[0].height+=2 ;

Теперь, чтобы “зациклить” нашу функцию, можно просто в конце выз вать ее же после некоторой задержки. Например, если наша функция будет называться sizer(), то последней ее строкой может быть:

setTimeout("sizer()", 20);

Такой вызов функции из самой себя называется рекурсивным вызовом и довольно часто употребляется в JavaScript. (Учтите, что так можно поступать далеко не во всех языках программирования — в некоторых языках из-за рекурсивных вызовов может случиться, например, ошибка переполнения стека, или еще какая-нибудь гадость... Но пока мы пишем код на JavaScript, об этом можно не беспокоиться.) Теперь достаточно один раз вызвать эту функцию, и далее она будет все время вызывать себя сама. Конечно, можно было сделать и как-нибудь по-другому, например оста вить в “теле” функции только само увеличение размера, а проверку и повторный вызов вынести в “тело” документа, написав там что-нибудь вроде:

while (document.images[0].width<451) setTimeout("sizer()", 20);

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Картинка с изменяющимся размером</ТIТLЕ>

<SCRIPT LANGUAGE""JavaScript">

function sizer () { if (document.images[0].width<451)

{ document.images[0].width+=2; document.images[0].height+=2; setTimeout("sizer()", 20); } } //--> </SCRIPT>

</HEAD>

<BODY>

<IMG SRC="Images/computer.gif" WIDTH="151" HEIGHT”"10" BORDER="0" АLТ="Компьютер">

<SCRIPT LANGUAGE="JavaScript">

sizer(); //-->

</SCRIPT>

</BODY>

</HTML>

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

document.images[0] width+=10;

document.images[0].height+=10;

setTimeout("sizer()", 100);

При этом, разумеется, увеличение будет происходить не так плавно, зато мы можем быть уверены, что на большинстве компьютеров такая “анимация” будет воспроизведена корректно.

Кстати, нашу функцию sizer() легко переделать так, чтобы картинка, достигнув нормальных размеров, снова начала уменьшаться, затем опять увеличилась и так далее. Для этого надо прибавлять к размерам не просто число, а переменную:

document.images[0].width+=a; document.images[0],height+=a;

Тогда мы сможем присваивать этой переменной то положительное, то отрицательное значение, например, +2 и -2. Пусть изначально значение будет положительным:

var а=2 ;

причем это определение переменной не должно происходить внутри “тела” функции. Теперь, если картинка достигла нормальных размеров, изменим значение а на -2:

if (document.images[0].width>=451) a=-2;

Картинка начнет уменьшаться. Осталось при слишком маленьком ее раз-мере снова изменить значение а:

if (document.images[0].width<=151) a=2;

Посмотрим, как теперь будет выглядеть функция целиком (все остальное на этой странице остается таким же, как в предыдущем примере, поэтому мы не будем повторять текст всей страницы):

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

Итак, мы рассмотрели, каким образом можно получить доступ из сценария к любой картинке на веб-странице. Таким же способом можно управлять еще некоторыми элементами: ссылками и элементами тега <AREA> через метод document.links, формами через метод document.forms и document.forms[номep_формы].elements, якорями через метод document.anchors и т.д.

Содержание раздела