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

</UL>

</LI>

<LI><A HREF="chapters/about.htm">О разработчиках</A></LI>

</UL>

После этого откроем файл Web-сценария main.js и поместим перед вызовом метода onReady объекта Ext код из листинга 18.3.

Листинг 18.3

function generateInnerList(aDataBase, elInnerList) {

for (var i = 0; i < aDataBase.length; i++) {

var s = "<LI><CODE><A HREF="" + aDataBase[i].url + "">" + aDataBase[i].name + "</A></CODE></LI>"; elInnerList.insertHtml("beforeEnd", s);

}

}

Он объявляет функцию generateInnerList, которая будет создавать пункты одного вложенного списка. Эта функция принимает два обязательных параметра:

— один из формирующих нашу базу данных массивов; на основе этого массива будут созданы пункты указанного вложенного списка;

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

Ее код очень прост. Рассмотрим его построчно.

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

for (var i = 0; i < aDataBase.length; i++) {

Счетчик цикла — переменная i, начальное значение счетчика — 0, конечное значение — размер массива, переданного первым параметром (он берется из свойства length объекта Array; подробнее — в главе 14), приращение — инкремент счетчика. В результате цикл выполнится столько раз, сколько элементов содержит массив, переданный первым параметром.

Формируем строку с HTML-кодом, создающим пункт списка:

var s = "<LI><CODE><A HREF="" + aDataBase[i].url + "">" + aDataBase[i].name + "</A></CODE></LI>";

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

Создаем пункт списка на основе строки, сформированной в предыдущем выражении:

elInnerList.insertHtml("beforeEnd", s);

}

В качестве места, куда будет помещен новый пункт, мы указываем "beforeEnd" — перед закрывающим тегом. В результате новые пункты будут добавляться в конец списка.

На этом выполнение тела цикла завершается. А после того, как цикл закончит работу, завершится выполнение самой функции generateInnerList.

Теперь вставим в самое начало тела функции, передаваемой методу onReady объекта Ext, три выражения:

generateInnerList(aHTML, Ext.get("navbar"). child("> LI: nth(1) UL"));

generateInnerList(aCSS, Ext.get("navbar"). child("> LI: nth(2)UL"));

generateInnerList(aSamples, Ext.get("navbar"). child("> LI: nth(3) UL"));

Мы трижды вызываем функцию generateInnerList, поочередно передавая ей три массива, составляющих базу данных, и три вложенных списка, формирующих полосу навигации.

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

Откроем готовую Web-страницу index.htm, набрав интернет-адрес http://localhost в Web-обозревателе, и убедимся в этом. в

Сортировка базы данных

Итак, Web-сценарий, генерирующий полосу навигации, работает. Самое время дополнить полосу навигации еще парой пунктов.

Откроем файл Web-сценария data.js и добавим в массив aCSS два элемента:

aCSS[3] = { name: "font-family", url: "attrs/a_font-family.htm" };

aCSS[4] = { name: "font-size", url: "attrs/a_font-size.htm" };

Откроем Web-страницу index.htm в Web-обозревателе. И обнаружим, что во втором вложенном списке (перечисляющем атрибуты стиля CSS) появятся два новых пункта. Причем они окажутся в самом его конце, нарушив принятый нами алфавитный порядок.

Дело в том, что эти два новых элемента мы добавили в самый конец массива aCSS.

Функция generateInnerList "пройдет" по этому массиву и создаст новые пункты в том порядке, в котором соответствующие элементы в нем присутствуют.

Но мы-то хотим, чтобы они выводились в алфавитном порядке! Значит, нужно как-то отсортировать массив aCSS.

Специально для таких случаев объект JavaScript Array поддерживает метод sort. Он как раз и выполняет сортировку массива, у которого вызван:

<массив>.sort([<функция сравнения>])

Если этот метод был вызван без параметров, он отсортирует массив по строковому представлению его элементов. Каждый элемент массива он преобразует в строку и отсортирует элементы по алфавитному порядку этих строк (а если точнее, то по кодам символов, составляющих эти строки).

Такая сортировка подойдет, если элементы массива хранят строки. Но если там окажутся числа или экземпляры объектов, результаты сортировки могут оказаться совсем не теми, что мы ожидаем. В самом деле, как будут отсортированы в этом случае экземпляры объектов — непонятно.

Но метод sort поддерживает необязательный параметр — функцию сравнения, которая поможет нам отсортировать элементы массива как нам нужно.

Функция сравнения должна принимать два параметра — сравниваемые элементы массива — и возвращать число, указывающее, какой из этих элементов с точки зрения программиста "меньше".

— Если первый элемент "меньше" второго, функция сравнения должна вернуть отрицательное число (обычно –1).

— Если оба элемента "равны", функция сравнения должна вернуть 0.

— Если первый элемент "больше" второго, функция сравнения должна вернуть положительное число (обычно 1).

Давайте напишем функцию (листинг 18.4), которая будет сравнивать элементы массивов aHTML, aCSS и aSamples по значению свойства name конфигуратора. Сравнивать строки мы будем с помощью знакомых нам по главе 14 операторов сравнения — они прекрасно работают и со строками.

Листинг 18.4

function sortArray(c1, c2) {

if (c1.name < c2.name)

return -1 else

if (c1.name > c2.name)

return 1 else

return 0;

}

Поместим код листинга 18.4 в самом конце файла Web-сценария data.js, после объявлений всех трех массивов.

Осталось только, собственно, выполнить сортировку массивов. Это сделают три следующих выражения, которые мы поместим после объявления функции сравнения:

aHTML.sort(sortArray); aCSS.sort(sortArray); aSamples.sort(sortArray);

Вот и все. Проверим Web-страницу index.htm в действии и убедимся, что пункты во вложенных списках расположены в алфавитном порядке.

На этом пока закончим с генерируемым содержимым.

Что дальше?

В этой главе мы научились генерировать содержимое Web-страницы программно, с помощью особых Web-сценариев. Кроме того, мы познакомились с базами данных, научились создавать их средствами JavaScript и даже сортировать. Теперь вложенные списки в нашей полосе навигации создаются программно, на основе информации, хранящейся в базе данных.

В следующей главе мы продолжим заниматься генерируемым содержимым и рассмотрим более сложные случаи. А еще мы узнаем, что такое семантическая разметка данных и рассмотрим способы организации ее все теми же средствами JavaScript. JavaScript вообще многогранный язык…

ГЛАВА 19. Семантическая разметка данных 

В предыдущей главе мы имели дело с генерируемым содержимым Web-страницы — содержимым, создаваемым с помощью Web-сценариев. Мы также узнали, что такое базы данных и как они могут нам помочь. В качестве практики мы создали базу данных, описывающую пункты вложенных списков нашей полосы навигации, и Web-сценарий, генерирующий эти пункты на основе хранящихся в базе данных сведений.

В этой главе мы продолжим заниматься генерируемым содержимым и создадим раздел "См. также" для каждой Web-страницы нашего Web-сайта. В новый раздел мы поместим гиперссылки на Web-страницы со связанными материалами: описаниями тегов HTML и атрибутов стиля CSS, имеющих сходное назначение, и примерами использования того или иного тега или атрибута стиля. Раздел "См. также" будет генерироваться программно.

А еще мы познакомимся с принципом семантической разметки данных и научимся создавать ее средствами JavaScript. С нее-то мы и начнем.

Введение в семантическую разметку данных

Мы собираемся создать на всех Web-страницах раздел "См. также". Этот раздел будет включать гиперссылки на Web-страницы, хранящие описания тегов HTML и атрибутов стиля CSS, имеющих аналогичное назначение, и тексты примеров использования данного тега или атрибута стиля, т. е. гиперссылки на Web-страницы со сведениями, которые так или иначе связаны с текущей Web-страницей.

Такие данные, связанные друг с другом, в Web-дизайне и Web-программировании встречаются очень часто. Это не обязательно Web-страницы — связанными могут быть и данные, обрабатываемые Web-сценариями.

В таком случае говорят, что между данными установлены семантические связи. Такие связи указывают, что эти данные имеют отношение "главный — подчиненный", "метка — собственно данные", являются составными частями большой структуры данных или цепочки связанных данных. А процесс установки семантических связей между данными называется семантической разметкой.