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

Достоинство первое — сокращение размера HTML-кода Web-страниц. В самом деле, если какая-то часть содержимого Web-страницы создается программно, значит, нет нужды "забивать" этот фрагмент в HTML-код. Код станет компактнее, файл загрузится по сети быстрее, и посетитель будет доволен.

Достоинство второе — унификация данных. Здесь придется начать издалека…

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

Совсем другое дело — создание, скажем, списка материалов, использованных при написании статьи. Помимо самого Web-сценария, выполняющего генерацию этого списка, нам нужны данные, на основе которых он будет создаваться: названия источников, авторы, год выхода и пр. Откуда их взять?

Подготовить самим, разумеется. Никто, кроме нас, этого не сделает. Но в каком виде их создавать?

Давайте посмотрим на список использованных материалов с точки зрения программиста. Что он собой представляет? Правильно, набор однотипных позиций, каждая из которых описывает один материал: статью, книгу, Web-страницу и т. д. Таких позиций может быть сколько угодно.

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

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

Теперь переведем все это на терминологию JavaScript.

— Сам список материалов — это массив.

— Отдельная позиция списка материалов — это либо также массив, либо, что удобнее, экземпляр объекта Object, т. е. конфигуратор. (Хотя конфигуратором его называть некорректно — он хранит не набор параметров для метода, а данные, предназначенные для обработки.)

Значит, мы можем описать список использованных материалов в виде массива JavaScript, каждый элемент которого представляет собой конфигуратор, свойства которого описывают различные фрагменты данных. Сделать это довольно просто.

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

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

Подобные хранилища данных, предназначенные для генерирования содержимого Web-страниц и прочих целей и хранящиеся отдельно от самих Web-страниц, называются базами данных.

НА ЗАМЕТКУ

Конечно, это базы данных в широком смысле этого слова. С "настоящими" базами данных, управляемыми программами Microsoft Access, Microsoft SQL Server, Oracle, MySQL, Embarcadero Interbase и пр., они имеют не очень много сходства.

Но мы совсем забыли о втором достоинстве генерируемого содержимого. В чем же оно заключается?

А в том, что хранящиеся в базе данные можно задействовать по-разному.

— Мы можем сгенерировать на их основе "локальные" списки материалов для отдельных статей, которые поместим на Web-страницы с текстом этих статей.

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

— Мы можем выполнять в базе данных поиск использованного материала и выводить на Web-страницу его результаты.

Иначе говоря, мы можем на основе одной и той же информации, хранящейся в базе данных, генерировать разное содержимое Web-страницы. Вот она — унификация данных!

Реализация генерируемого содержимого 

Давайте реализуем генерируемое содержимое на нашем Web-сайте. Мы создадим базу данных, содержащую список всех Web-страниц (файлов с подгружаемым содержимым) с названиями и гиперссылками.

— На основе этой базы данных мы будем генерировать вложенные списки полосы навигации.

— В главе 19 мы осуществим вывод на каждой Web-странице раздела "См. также", в котором поместим гиперссылки на Web-страницы с "родственными" данными.

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

Для генерирования содержимого Web-страницы мы применим соответствующие методы объекта Element библиотеки Ext Core (см. главу 15). Этих методов довольно много, и не составит труда выбрать подходящий.

Создание базы данных

Чтобы генерировать содержимое Web-страницы на основе каких-то данных, нужно сначала подготовить сами данные. Поэтому начнем работу с создания базы данных.

Наша база данных будет представлять собой три массива, хранящие списки Web-страниц, которые описывают, соответственно, теги HTML, атрибуты стиля CSS и примеры. Элементы массивов будут хранить конфигураторы, описывающие эти Web-страницы и хранящие их названия и интернет-адреса в виде строк.

Что ж, цель поставлена. За работу!

Создадим текстовый файл с именем data.js и поместим его в папке Site 2. Откроем его и наберем код, приведенный в листинге 18.1.

Листинг 18.1

var aHTML = [];

aHTML[0] = { name: "!DOCTYPE", url: "tags/t_doctype.htm" };

aHTML[1] = { name: "AUDIO", url: "tags/t_audio.htm" };

aHTML[2] = { name: "BODY", url: "tags/t_body.htm" };

aHTML[3] = { name: "EM", url: "tags/t_em.htm" };

aHTML[4] = { name: "HEAD", url: "tags/t_head.htm" };

aHTML[5] = { name: "HTML", url: "tags/t_html.htm" };

aHTML[6] = { name: "IMG", url: "tags/t_img.htm" };

aHTML[7] = { name: "META", url: "tags/t_meta.htm" };

aHTML[8] = { name: "P", url: "tags/t_p.htm" };

aHTML[9] = { name: "STRONG", url: "tags/t_strong.htm" };

aHTML[10] = { name: "TITLE", url: "tags/t_title.htm" };

aHTML[11] = { name: "VIDEO", url: "tags/t_video.htm" };

var aCSS = [];

aCSS[0] = { name: "border", url: "attrs/a_border.htm" };

aCSS[1] = { name: "color", url: "attrs/a_color.htm" };

aCSS[2] = { name: "margin", url: "attrs/a_margin.htm" };

var aSamples = [];

aSamples[0] = { name: "Гиперссылки", url: "samples/a_hyperlinks.htm" };

aSamples[1] = { name: "Контейнеры", url: "samples/a_containers.htm" };

aSamples[2] = { name: "Таблицы", url: "samples/a_tables.htm" };

Здесь мы объявили массивы aHTML, aCSS и aSamples, которые будут хранить списки Web-страниц, описывающих, соответственно, теги HTML, атрибуты стиля CSS и примеры.

Элементы каждого из этих массивов хранят конфигураторы с двумя свойствами:

— name — название соответствующего пункта вложенного списка в виде строки;

— url — интернет-адрес файла с фрагментом содержимого также в виде строки.

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

Затем откроем в Блокноте Web-страницу index.htm и вставим в ее секцию заголовка такой код:

<SCRIPT SRC="data.js"></SCRIPT>

Он загрузит и выполнит только что созданный нами файл Web-сценария data.js. В результате в памяти компьютера будут созданы три массива — наша база данных.

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

Генерирование полосы навигации

Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.

Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент, создающий сами вложенные списки. Результат приведен в листинге 18.2.

Листинг 18.2

<UL ID="navbar">

<LI><A HREF="chapters/html.htm">HTML</A>

<UL>

</UL>

</LI>

<LI><A HREF="chapters/css.htm">CSS</A>

<UL>

</UL>

</LI>

<LI><A HREF="chapters/samples.htm">Примеры</A>

<UL>

</UL>

</LI>

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