HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

коллекции, как и элементы обычного массива, нумеруются, начиная с нуля, мы передали методу item значение, на единицу меньшее, чем число элементов в коллекции.

А в следующем примере мы последовательно извлекаем все элементы коллекции clContainers и выполняем над ними какие-то действия:

for(var k = 0; k < i; k++) {

var elDiv = clContainers.item(k);

// Что-то делаем

}

Метод indexOf возвращает индекс указанного элемента в данной коллекции в виде числа:

<экземпляр объекта CompositeElementLite>.indexOf (<элемент>)

Единственным параметром этому методу передается искомый элемент. Им может быть строка с именем элемента, экземпляр объекта Element или HTMLElement.

Если переданный элемент в коллекции отсутствует, метод indexOf возвращает –1.

Пример:

var ind = clContainers.indexOf('cnavbar');

В переменной ind окажется индекс контейнера cnavbar в коллекции clContainers — 1.

Метод each вызывает для каждого элемента данной коллекции указанную функцию:

<экземпляр объекта CompositeElementLite>.each (<функция>)

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

— элемент коллекции в виде экземпляра объекта Element;

— сама эта коллекция в виде экземпляра объекта CompositeElementLite;

— индекс элемента коллекции в виде числа.

Кроме того, элемент коллекции доступен в теле этой функции через переменную this.

В примере из листинга 15.8 мы привязываем к каждому контейнеру, входящему в коллекцию clContainers, стилевой класс hovered.

Листинг 15.8

clContainers.each(function(el, cl, ind)

{

el.addClass('hovered');

}

);

Листинг 15.9

Другой вариант того же Web-сценария иллюстрирует листинг 15.9.

clContainers.each(function(el, cl, ind)

{

this.addClass('hovered');

}

);

Еще проще написать так:

clContainers.addClass('hovered');

На этом мы пока закончим с библиотекой Ext Core. В следующих главах мы к ней еще вернемся и рассмотрим другие ее возможности.

Объекты Web-обозревателя

Как видим, библиотека Ext Core позволяет сделать очень многое, написав несколько строчек JavaScript-кода. Если бы мы пользовались для этого исключительно объектами Web-обозревателя, объем кода вырос бы на порядок — не меньше.

Но с помощью Ext Core мы можем сделать не все. Некоторые вещи доступны только через объекты Web-обозревателя.

Один из таких объектов — HTMLDocument, представляющий Web-страницу. Единственный его экземпляр, представляющий текущую Web-страницу, доступен через переменную document. Это мы уже знаем.

Из всех свойств объекта HTMLDocument интерес для нас представляют немногие. Его методы и события нам вряд ли пригодятся.

Свойство title хранит текст заголовка Web-страницы (содержимое тега <TITLE>) в виде строки. Заголовок, как мы помним из главы 1, выводится в строке заголовка окна Web- обозревателя, в котором открыта данная Web-страница.

Пример:

var sTitle = document.title;

В переменной sTitle окажется строка с текстом заголовка Web-страницы. А в следующем примере мы задаем для Web-страницы новый заголовок: document.title = 'Заголовок';

Свойство location хранит экземпляр объекта Location, представляющий интернет-адрес Web- страницы. Нам будет полезно только свойство href, хранящее интернет-адрес Web-страницы в виде строки:

var sHREF = document.location.href;

В переменной sHREF окажется строка с интернет-адресом Web-страницы. Пример:

document.location.href = 'http://www.w3.org';

Здесь мы переходим на Web-страницу http://www.w3.org. Да-да, с помощью свойства href объекта Location мы можем заставить Web-обозреватель открыть другую Web-страницу, присвоив этому свойству ее интернет-адрес!

Объект Window представляет окно Web-обозревателя. Единственный экземпляр этого объекта, представляющий текущее окно Web-обозревателя, хранится в переменной window. Это мы тоже знаем.

Рассмотрим полезные для нас методы и события объекта Window.

Метод alert выводит на экран окно-предупреждение с указанным текстом и кнопкой ОK. Такие окна-предупреждения выводят посетителю сообщение, которое он обязательно должен прочитать:

window.alert(<текст, выводимый в окне-предупреждении>)

Единственный передаваемый параметр — строка с текстом, который будет выведен в окне- предупреждении:

window.alert('Привет от объекта Window!');

Метод confirm выводит на экран окно-предупреждение с указанным текстом и кнопками ОK и Отмена. Такие окна-предупреждения обычно используются, чтобы запросить у посетителя подтверждение или отмену какого-либо действия:

window.confirm(<текст, выводимый в окне-предупреждении>)

Единственный передаваемый параметр — строка с текстом, который будет выведен в окне- предупреждении.

Метод confirm возвращает true, если посетитель нажал кнопку ОK, и false, если он нажал кнопку Отмена.

Событие resize возникает, когда посетитель изменяет размеры окна Web-обозревателя.