Основы программирования на JavaScript | страница 27



. Этот тег TABLE имеет в качестве потомков два тега TR и т.д. По сути именно так мы перемещаемся в документе XML или HTMLDOM - двигаясь от потомка к предку или от предка к потомку.

Изображение может помочь лучше понять отношения предок-потомок в этом коде.

блок-схема документа

Блок-схема документа

Необходимо также отметить атрибуты в некоторых из этих тегов. Например, тег TABLE (

) имеет 3 заданых атрибута: border, cellspacing и cellpadding. При изменении DOM часто бывает необходимо изменить эти атрибуты. Можно, например, изменить атрибут SRC тега IMG, чтобы изменить выводимое изображение. Это часто делают, например, для создания эффекта изменения изображения, на которое направлен указатель (rollover).

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


onmouseover="this.src='button_over.gif';"

onmousedown="this.src='button_down.gif';"

onmouseout ="this.src='button_off.gif';"

onmouseup ="this.src='button_over.gif';">


В этом коде присутствуют 4 события изображения: onmouseover, onmousedown, onmouseout и onmouseup. Каждое из этих событий имеет присоединенный простой фрагмент кода JavaScript, который изменяет атрибут src изображения. Создавая три разных изображения, можно легко и быстро создать изображение с тремя сменяющими друг друга состояниями.

Одной из задач, которая становится все более распространенной в современных приложениях JavaScript, является возможность добавления или удаления элементов страницы. Предположим, что имеется форма, которая позволяет послать кому-нибудь ссылку. Обычно используется одно поле ввода для адреса e-mail и второе - для имени получателя. Если требуется послать ссылку нескольким адресатам, то либо придется посылать форму несколько раз, либо можно было бы разместить на странице более одного набора полей имя/e-mail. Но в этом случае мы все еще ограничены заданным числом контактов. Если имеется пространство для 5 контактов и необходимо послать ссылку 20 людям, то форму придется заполнять 4 раза.

JavaScript позволяет обойти эту проблему, делая возможным динамическое дополнение и удаление содержимого страницы:


1 var inputs = 0;

2 function addContact(){

3 var table = document.getElementById('contacts');

4

5 var tr = document.createElement('TR');

6 var td1 = document.createElement('TD');