Файл: Программирование клиентской части Интернет приложений с использованием JavaScript.pdf

Привет!

Пример 2.4: Раскрывающийся список

107

ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
TITLE="Щелкни и раскрой"
> Один

NAME="idListOneA"
>

• A
  
• Б
  


Два

Три

Графический файл item.jpg в свойстве каскадных таблицей стилей item- style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand).
Раскрывшийся список закроется при щелчке на нем или на элементе LI, в который он вложен, так как в этом случае сработает эффект "всплытие" события.
Если требуется, чтобы список закрывался только при щелчке на элементе LI, следует добавить в открывающий тег
списка idListOneA обработчик события ONCLICK с кодом, прекращающим "всплытие" события:
ONCLICK="window.event.cancelBubble=true"
Движущийся элемент
Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. В следующем примере реализовано движение раздела (элемент DIV) по окружности.
Движущийся раздел текста




Движущийся элемент


Динамический HTML позволяет программно менять положение элемента!

width: 200; background-color: lightsteelblue;">
Добро пожаловать на страницу динамического HTML!



109 window с интервалом в 100 миллисекунд вызывается функция move(), которая и реализует перемещение во времени раздела.
Каждый раз при вызове функции move() изменяется значение параметра уравнений движения и в соответствии с ним определяется новое положение раздела — значения его свойств top и left. Уравнения движения — параметрическое уравнение окружности с центром в точке с координатами (x,y) и радиусом r.
Метод parseInt() используется в сценариях для выделения целого числа из значения свойств объектов, которые задаются вместе с размерностью. К ним относятся все размерные свойства, соответствующие атрибутам элементов HTML, и свойства каскадных таблиц стилей, задающие размеры и положение.
Динамическое изменение таблиц
Пусть в каком-либо документе задана таблица из трех рядов:











Ячейка 1 первого ряда	Ячейка 2 первого ряда
Ячейка 1 второго ряда	Ячейка 2 второго ряда
Этот ряд перемещаем	Этот ряд перемещаем

Необходимо переместить ее последний ряд на место предшествующего. Для решения этой задачи используются семейства rows объекта table, в котором хранятся ссылки на строки таблицы. У объекта, представляющего строку таблицы, есть семейство cells, хранящее ссылки на все ячейки таблицы.
Используя свойство innerHTML можно получить или изменить значение любой ячейки таблицы.
Приведем краткую сводку свойств, семейств и методов объектов, соответствующих элементам HTML, формирующим таблицу.
Объект table:
Семейства: all, children, cells, rows
Методы: deleteRow([rowIndex]) insertRow([rowIndex]) moveRow(rowIndex, targetRowIndex),
Объект tr:


110
Свойство: rowIndex
Семейства: all, children, cells
Методы: deleteCell([cellIndex]) insertCell([cellIndex])
Объект td:
Свойство: cellIndex
Семейства: all, children
Функция, перемещающая последний и предпоследний ряды таблицы, имеет следующий код:
Перемещение рядов таблицы
function fncInterchange(row){ var rowMove=row.rowIndex; var rowMove_Cell1=Table.rows[rowMove].cells[0].innerHTML; var rowMove_Cell2=Table.rows[rowMove].cells[1].innerHTML;
Table.deleteRow(rowMove); rowMove --;
Table.insertRow(rowMove);
Table.rows(rowMove).insertCell(0);
Table.rows(rowMove).insertCell(1);
Table.rows(rowMove).cells[0].innerHTML+= rowMove_Cell1;
Table.rows(rowMove).cells[1].innerHTML+= rowMove_Cell2;
}
В переменной rowMove сохраняется индекс перемещаемого ряда, передаваемого в качестве параметра. Переменные rowMove_Cell1 и rowMove_Cell1 хранят содержимое двух ячеек перемещаемого ряда. После этих подготовительных действий ряд удаляется методом rowDelete() объекта Table, и в таблицу вставляется новый ряд перед рядом, предшествующим удаленному. Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.
Родственные отношения
Объектная модель DHTML раскрывает все родственные отношения, но для некоторых отношений требуется небольшое программирование.
Определить родителя объекта в объектной модели DHTML можно с помощью свойства parentElement.
Для нахождения ближайшего предыдущего родственника для элемента, непосредственно порождаемого другим элементом, следует выполнить действия,


111 определяемые в функции getPreviousSibling(), единственным параметром которой является объект, для которого ищется ближайший предыдущий родственник (в семействе children объекта-родителя): function getPreviousSibling(Obj){
// Определение родителя var Parent=Obj.parentElement;
// Определение ближайшего предыдущего родственника var iLength=Parent.children.length; for(var i=0;i < iLength;i++){
// родственник найден if(Parent.children[i]== Obj){ return Parent.children[i-1]; break;
}
}
}
Здесь приходится организовывать цикл по набору children объекта-родителя, пока не встретится исходный объект, для которого ищется ближайший родственник.
Упражнения
1. На странице отображается графическое изображение. Создать для нее сценарии: а) при расположении указателя мыши над графическим изображением оно заменяется другим, при последующих аналогичных действиях появляется новое изображение (предусмотреть до 5 новых изображений); б) на странице предусмотреть надпись, например, AUTOMATE, при щелчке на которой изображения начинают сменяться с интервалом в 5 секунд.
Предусмотреть возможность останова этого режима; в) предусмотреть две кнопки: щелчок на первой отображает предыдущее изображение, на второй — следующее. Картинки должны отображаться циклически: после последней первая и далее при щелчке на второй кнопке, а после первой последняя, предпоследняя и далее при щелчке на первой кнопке.
2. На странице присутствует графическое изображение. При наведении указателя мыши на изображение оно автоматически начинает смещаться вправо. При достижении границы окна начинает двигаться по его периметру по часовой стрелке.
3. Создать галерею изображений следующим образом. На странице представлен только список картин. При наведении указателя мыши на любой из элементов


112 списка справа от него отображается соответствующая выбранному пункту картина, когда указатель перемещается на другой пункт списка, то отображается другая картина, а когда указатель покидает область списка, то последняя отображаемая картина исчезает.
4. Создать сценарий, который при щелчке на рисунке сделает его невидимым не сразу, а постепенно "отрезая" от него все увеличивающиеся внешние части.
5. Разработать страницу HTML такую, что при щелчке на некотором заранее определенном элементе за текстом страницы начинает "падать" снег; при последующем щелчке на этом элементе — снег перестает "падать".
Урок 15. Объектная модель документа DOM
Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума WWW. В ней, как и в модели DHTML, документ представляется в виде логической древовидной структуры, но она предоставляет программисту большие удобства при работе с иерархической структурой объектов документа, чем объектная модель DHTML, позволяя:

Перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново

Создавать новые элементы и присоединять их к структуре документа в любом ее месте

Организовывать и манипулировать новыми или существующими ветвями структуры фрагмента документа до помещения объектов в структурное дерево документа
Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной.
Основное – это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.
Другой важный аспект модели DOM — она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.
Объектная модель документов, таким образом, как объектная модель, определяет:

интерфейсы и объекты, используемые для представления документа и манипулирования с ним;


113

семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;

"родственные" связи и взаимодействие между этими интерфейсами и объектами.
Узлы объектной модели DOM
Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML,
SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.
Узлы в модели DOM документа HTML могут быть следующих типов:
Тип
Что представляет
1
Элемент HTML
3
Текстовое содержимое тега HTML
8
Комментарий HTML
9
Корневой элемент иерархической структуры
11
Фрагмент документа
Простейший документ HTML, состоящий из пустых элементов HEAD и BODY в объектной модели DOM будет представлен деревом, показанном на рисунке:
#document
9
HTML
1
HEAD
1
BODY
1
Во главе иерархии находится элемент типа 9 с именем #document, который порождает узел HTML, от которого уже и происходят узлы HEAD и BODY (все типа 1).
Текстовое содержимое элемента HTML хранится в специальном текстовом узле
(тип 3) с именем #text, порождаемом узлом элемента. Причем текстовых узлов может быть несколько, если содержимое элемента представлено размеченным текстом HTML. Эти-то вложенные элементы HTML и разбивают текстовое содержимое элемента на ряд текстовых узлов.


114
Например, рассмотрим следующий фрагмент документа HTML:
Это содержимое абзаца документа HTML
В объектной модели DOM он будет представлен следующим иерархическим деревом:
#text тип 3
Это
#text тип 3 абзаца
#text тип 3 содержимое
I тип 1
#text тип 3
HTML
#text тип 3 документа
P тип 1
B тип 1
На рисунке в текстовых узлах также представлено их содержимое. В DOM HTML содержимое, получаемое с помощью свойства nodeValue узла может быть только у текстовых узлов и узлов комментария (свойство nodeName равно
#comment), являющихся листьями иерархического дерева объектов документа.
Перемещение по объектной модели
К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML.
На примере структуры, создаваемой вложенными списками, продемонстрируем, с помощью каких свойств объектов в модели DOM можно перемещаться по ее узлам:



• Узел 1
  
• Узел 2
  
  
  
  • Потомок 1
    
  • Потомок 2
    
  • Потомок 3
    
  
  
• Узел 3
  

В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рисунке:


115
UL
1 id=parent
LI
1 id=Node1
LI
1 id=Node2
LI
1 id=Node3
#text
3
Узел1
#text
3
Узел2
UL
1 id=inside
#text
3
Узел3
LI
1 id=Child1
LI
1 id= Child2
LI
1 id= Child3
#text
3
Потомок1
#text
3
Потомок2
#text
3
Потомок3
Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем parent. В семействе childNodes объекта parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и
Node3). Для получения ссылок на первого и последнего потомка узла в объектной модели предусмотрены соответственно свойства firstChild и lastChild.
Свойство parentNode объектов-потомков возвращает ссылку родителя объектов, поэтому значением этих свойств объектов Node1, Node2 и Node3 будет ссылка на узел parent.
Объекты Node1, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью своих свойств previousSibling (предыдущий ближайший родственник) и nextSibling
(следующий ближайший родственник).
Если у элемента-узла нет соответствующих ближайших родственников, то эти свойства возвращают значение null.
Конечно, если все элементы HTML документа заданы с уникальными атрибутами
ID
, то разработчику документа достаточно просто в сценариях получать ссылки на такие объекты-узлы (значение атрибута ID элемента является именем соответствующего ему объекта в языках сценариев с использованием модели
DHTML и DOM). Но идентифицировать все элементы страницы дело утомительное, поэтому для перемещения по объектной модели можно использовать указанные выше свойства узлов.
Для изменения, установки или получения содержимого текстового узла (узлы остальных типов не имеют текстового содержимого ) в DOM используется


116 свойство nodeValue, тогда как в модели DHTML следует применять свойства innerHTML и innerText для любого элемента HTML:
// Объектная модель DOM
Node.childNodes[0].nodeValue = "Новое содержимое";
// Модель DHTML
Node.innerHTML = "Новое содержимое";
Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В DOM текстовое содержимое элемента HTML может храниться в одном или нескольких узлах-потомках типа 3, непосредственно порождаемых элементом HTML. Тогда как в объектной модели DHTML достаточно использовать одно из свойств innerHTML или innerText объекта, соответствующего элементу HTML.
Для доступа к объектной модели DOM загруженной в браузер страницы HTML прежде всего необходимо иметь ссылку на корневой элемент #document. Она создается автоматически и хранится в объекте window.document. Получить в
DOM ссылку на корневой объект документа, соответствующий элементу, задаваемому тегом
1   2   3   4   5   6   7   8   9   10   11