HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
generateInnerList(aCSS, Ext.get("navbar"). child("> LI: nth(2)UL"));
generateInnerList(aSamples, Ext.get("navbar"). child("> LI: nth(3) UL"));
Мы трижды вызываем функцию generateInnerList, поочередно передавая ей три массива, составляющих базу данных, и три вложенных списка, формирующих полосу навигации.
Три приведенных выражения создадут пункты вложенных списков, формирующих полосу навигации. Следующие выражения привяжут к ним обработчики событий. В результате наша полоса навигации будет работать как прежде, будто она не создается Web-сценарием,
Откроем готовую 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).
— Если оба элемента "равны", функция сравнения
— Если первый элемент "больше" второго, функция сравнения должна вернуть положительное число (обычно 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. С нее-то мы и начнем.