Динамическое изменение внешнего вида страницы
Чтобы динамически изменять вид нашей веб-страницы, необходимо решить один вопрос: каким образом наш сценарий сможет обращаться к отдельным ее элементам? Существует два способа такого доступа: классический и по имени элемента. Чтобы быть последовательными, давайте сначала рассмотрим первый из них.
Доступ к элементам HTML по номеру
Возьмем такой пример. Предположим, что мы поместили на веб-страницу графический элемент (картинку), но хотим, чтобы она не сразу возникла в своем реальном размере, а постепенно выросло “из ничего”. Для примера можно взять изображение компьютера ATARI-800, которое уже использовалось нами в главе 3. Карту графических ссылок мы в этом примере на него ставить не будем, хотя это легко сделать, просто перенеся код из последнего примера раздела 3.1. Сначала просто поставим картинку на страницу:
<IMG SRC="Images/computer.gif" WIDTH="151" HEIGHT="10" BORDER="0" ALT="Компьютер">Физический размер этой картинки – 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>Картинка с изменяющимся размером</TITLE> <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 " ALT="Компьютер "> <SCRIPT LANGUAGE="JavaScript "> //<!-- sizer(); //--> </SCRIPT></BODY> </HTML>