Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных 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 в самом конце файла Web-сценария data.js, после объявлений всех трех массивов.

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

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

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

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

Что дальше?

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

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

Оглавление книги