Монолитные и блочные Web-страницы

Об этом уже упоминалось в главе 10, посвященной блочным контейнерам и контейнерному Web-дизайну. Настала пора рассмотреть вопрос подробнее.

Давайте откроем любую нашу Web-страницу, скажем, index.htm, в Web-обозревателе. Что мы увидим? Набор блочных контейнеров, содержащих заголовок Web-сайта, полосу навигации, основное содержимое и сведения об авторских правах. Все эти контейнеры составляют неотъемлемую часть содержимого Web- страницы и определяются в ее HTML-коде.

Теперь посмотрим на HTML-код этой Web-страницы, для чего откроем ее в Блокноте. Да, ее HTML-код велик... Немало места отведено коду, создающему основное содержимое Web-страницы: там и большая цитата, и список, и даже таблица.

Не меньше (если не больше) места занимает код, создающий полосу навигации, со всеми ее списками, вложенными друг в друга, пунктами этих списков и гиперссылками. Код заголовка Web-сайта, сведений об авторских правах и служебный код (создающий сами контейнеры, секции Web-страницы и пр.) хоть и относительно невелик по объему, но тоже там присутствует.

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

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

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

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

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

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

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

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

Исходя из этого, набросаем план действий.

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

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

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

-  При  щелчке  на  гиперссылке  загружаем  основное  содержимое  целевой  Web-страницы из соответствующего файла и также выводим его в контейнер.

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

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

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

 

Подгрузка содержимого Web-страниц

Для подгрузки фрагмента содержимого Web-страницы из стороннего файла и вывода его в указанный элемент Web-страницы библиотека Ext Core предлагает метод load объекта Element:

<экземпляр объекта Element>.load(<интернет-адрес>|<конфигуратор>)

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

Вот свойства этого конфигуратора и соответствующие им параметры:

-  url — интернет-адрес загружаемого файла в виде строки. Это единственный обязательный параметр.

-  success —  функция,  которая  будет  вызвана,  если  загрузка  файла  завершится успешно.

-  failure — функция, которая будет вызвана, если при загрузке файла возникнет ошибка.

-  callback — функция, которая будет вызвана после окончания загрузки файла, независимо от того, успешно загрузится файл или нет.

-  timeout —   промежуток   времени   (тайм-аут),   в   течение   которого   Web-обозреватель будет ожидать окончания загрузки файла. Если файл за этот промежуток времени не загрузится, библиотека Ext Core будет считать, что возникла ошибка загрузки. Тайм-аут задается в виде числа в миллисекундах; значение по умолчанию — 30 000 мс (30 с).

Функции, указанные в параметрах success и failure, не принимают параметров. Функция, указанная в параметре callback, должна принимать два параметра: конфигуратор, переданный методу load в качестве параметра, и логическое значение, равное true в случае удачной загрузки файла и false при возникновении ошибки.

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

А теперь важный момент! Метод load при вызове отправляет Web-серверу запрос на получение указанного файла и   сразу  же  завершает  свою  работу  (начинает  выполняться код, следующий за вызовом этого метода). Он не ждет, когда файл будет загружен и выведен на экран. Программисты называют подобные методы асинхронными.

Но что делать, если нам понадобится выполнять какие-либо манипуляции с содержимым загруженного файла? Посмотрим на список свойств конфигуратора, передаваемый методу load в качестве параметра. Там присутствует свойство success, которому присваивается функция, вызываемая после успешной загрузки файла. Мы можем поместить код, манипулирующий загруженным содержимым, в тело этой функции. (Еще можно использовать функцию, присваиваемую свойству callback конфигуратора, только в этом случае придется проверять, успешно ли завершилась загрузка.)

ВНИМАНИЕ !

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

Еще в главе 1 мы установили и опробовали в работе Web-сервер Microsoft Internet Information Services. Долгое время мы им не пользовались, но теперь настал момент, когда его "услуги" нам потребуются. Так что проверим его еще раз — потом будет не до того.

 

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

Теоретическая часть главы вышла очень короткой. Значит, больше времени останется на практику!

Давайте создадим новый Web-сайт, в котором и реализуем подгрузку содержимого. Его Web-страницы мы изготовим на основе соответствующих Web-страниц старого Web-сайта.

ВНИМАНИЕ !

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

Прежде всего, создадим папку, которая станет корневой для нового Web-сайта. На- зовем ее Site 2. Скопируем туда из корневой папки старого Web-сайта (Site 1) файлы main.css, main.js и ext-core.js. И сразу же создадим в ней папки chapters (для Web-страниц разделов), tags (для Web-страниц с описаниями тегов HTML), attrs (для Web-страниц, описывающих атрибуты стиля CSS) и samples (для Web-страниц с примерами).

Откроем в Блокноте Web-страницу index.htm старого Web-сайта и пересохраним под тем же именем в папке Site 2. Удалим из ее контейнера cmain все содержимое и сохраним.

Снова откроем Web-страницу index.htm старого Web-сайта и пересохраним ее в папке chapters, вложенной в папку Site 2, под именем html.htm. Удалим из нее все, кроме содержимого контейнера cmain, и сохраним снова.

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

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

Web-страницы готовы. Настала пора создавать соответствующее поведение. Откроем Web-страницу index.htm нового Web-сайта в Блокноте и удалим из секции ее заголовка код, объявляющий переменные outerIndex и innerText. Они нам больше не потребуются, так что незачем засорять память компьютера ненужными данными.

Потом откроем файл main.js нового Web-сайта, найдем в нем объявление функции selectItem и удалим его. Также удалим выражение, вызывающее эту функцию, из тела функции, которая передается методу onReady объекта Ext. Весь этот код нам больше не понадобится — скрытие и открытие вложенных списков и выделение пунктов полосы навигации мы реализуем по-другому, более "интеллектуально".

Но как?

Прежде всего, мы будем хранить ссылки на выделенный в данный момент пункт полосы навигации и открытый вложенный список. Для этого мы объявим две переменные.

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

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

- Если посетитель щелкнул на пункте "внешнего" списка, формирующего полосу навигации, который имеет вложенный список, эта функция:

удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен). Выделенный пункт полосы навигации будет храниться в особой переменной, которую мы собираемся объявить;

скроет открытый ранее вложенный список (если он был открыт и не вложен в пункт, на котором щелкнули мышью, — в этом случае нам нет нужды скрывать его, чтобы тотчас открыть). Открытый вложенный список также будет храниться в особой переменной, которую мы собираемся объявить;

развернет список, вложенный в пункт, на котором щелкнули мышью.

- Если посетитель щелкнул на пункте "внешнего" списка, не имеющего вложенного списка, эта функция:

скроет открытый ранее вложенный список (если он был открыт);

удалит выделение с выделенного ранее пункта полосы навигации (если он был  выделен  и  если  это  не  тот  же  самый  пункт,  на  котором  щелкнули мышью, — в этом случае незачем снимать с него выделение, чтобы сразу же выделить);

выделит пункт, на котором щелкнули мышью.

- Если посетитель щелкнул на пункте вложенного списка, эта функция:

удалит выделение с выделенного ранее пункта полосы навигации (если он был  выделен  и  если  это  не  тот  же  самый  пункт,  на  котором  щелкнули мышью);

выделит пункт, на котором щелкнули мышью.

Еще нам понадобятся две вспомогательные функции. Первая, совсем простая, будет вызвана после загрузки базовой Web-страницы index.htm и сделает все вложен- ные списки в полосе навигации скрытыми.

Вторая функция удалит все обработчики событий, привязанные к первым потомкам контейнеров со стилевым классом sample ("вместилища" для текста примеров). Перед тем как выводить в контейнере cmain новое содержимое, нужно удалить обработчики событий, привязанные к старому его содержимому. Так мы очистим память компьютера от не нужных более обработчиков событий и устраним потенциальную возможность появления ошибок. Данная функция будет вызываться в теле функции, которую мы описали чуть раньше, перед подгрузкой и выводом содержимого другого файла.

Что ж, задачи ясны. За работу!

В самом начале файла main.js поместим два выражения:

var elLastInnerList = null;

var elLastItem = null;

Они объявляют переменные elLastInnerList и elLastItem и присваивают им значение null. Первая переменная будет хранить открытый в данный момент вложенный список, вторая — выделенный в данный момент пункт полосы навигации.

Далее объявим функцию loadFragment, которая будет обрабатывать событие click пунктов полосы навигации (листинг 17.1). Она будет принимать два параметра: пункт, на котором щелкнули мышью, в виде экземпляра объекта Element и экземпляр объекта EventObject, хранящий сведения о событии. Второй параметр необязательный.

Листинг 17.1

function loadFragment(elLI, e) {

if (e)

e.stopEvent();

var elA = elLI.child("A");

if (elA) {

cleanupSamples();

var href = elA.getAttribute("HREF");

Ext.get("cmain").load({ url: href, success: prepareSamples });

if (elLI.parent("UL").id == "navbar") {

var elInnerList = elLI.child("UL");

if (elInnerList) {

if (elLastItem) { elLastItem.removeClass("selected"); elLastItem = null;

}

if ((elLastInnerList) && (elLastInnerList.dom !=

elInnerList.dom))

elLastInnerList.setDisplayed(false); elInnerList.setDisplayed(true); elLastInnerList = elInnerList;

} else {

if (elLastInnerList) { elLastInnerList.setDisplayed(false); elLastInnerList = null;

}

if ((elLastItem) && (elLastItem.dom != elLI.dom))

elLastItem.removeClass("selected");

elLI.addClass("selected");

elLastItem = elLI;

}

} else {

if ((elLastItem) && (elLastItem.dom != elLI.dom))

elLastItem.removeClass("selected");

elLI.addClass("selected");

elLastItem = elLI;

}

}

}

Рассмотрим листинг 17.1 построчно.

Если функции loadFragment был передан второй параметр — экземпляр объекта EventObject,  хранящий  сведения  о  событии, —  отменяем  действие  события  по умолчанию и останавливаем его всплытие:

if (e)

e.stopEvent();

Этот код перекочевал из функции-обработчика события click пунктов полосы навигации нашего предыдущего Web-сайта (подробности — в главе 16).

Получаем гиперссылку, вложенную в пункт полосы навигации, на котором щелк- нули мышью:

var elA = elLI.child("A");

Если эта гиперссылка существует, выполняем следующий код:

if (elA) {

Вызываем функцию cleanupSamples, которая удалит обработчики событий у первых потомков контейнеров с текстами примеров:

cleanupSamples();

Мы объявим эту функцию потом. Получаем интернет-адрес гиперссылки:

var href = elA.getAttribute("HREF");

Загружаем в контейнер cmain содержимое файла, на который указывает полученный интернет-адрес:

Ext.get("cmain").load({ url: href, success: prepareSamples });

После его загрузки вызываем функцию prepareSamples, которая добавит контейнерам с текстом примеров возможность скрытия и раскрытия в ответ на щелчки мышью. Эту функцию мы объявили в главе 16.

Получаем  список —  родитель  пункта  полосы  навигации,  на  котором  щелкнули мышью, и проверяем, navbar ли его имя:

if (elLI.parent("UL").id == "navbar") {

Если это так, значит, данный пункт является пунктом "внешнего" списка navbar, в противном случае — вложенного.

Если это пункт "внешнего" списка, получаем вложенный в него список, если, конечно, он там присутствует:

var elInnerList = elLI.child("UL");

Проверяем, присутствует ли в пункте вложенный список:

if (elInnerList) {

Если вложенный список присутствует, проверяем, выделен ли в данный момент какой-либо пункт полосы навигации, т. е. содержит ли переменная elLastItem ка- кое-либо значение, отличное от null:

if (elLastItem) { elLastItem.removeClass("selected"); elLastItem = null;

}

Если это так, удаляем из привязки к выделенному пункту стилевой класс selected, делая его невыделенным, и присваиваем переменной elLastItem значение null, указывая тем самым, что ни один пункт полосы навигации в данный момент не выделен.

Также проверяем, открыт ли в данный момент какой-либо вложенный список (содержит ли переменная elLastInnerList какое-либо значение, отличное от null), и не тот ли это список, что вложен в пункт, на котором щелкнули мышью:

if ((elLastInnerList) && (elLastInnerList.dom !=

elInnerList.dom))

elLastInnerList.setDisplayed(false);

Если это так, скрываем этот список.

Обратим внимание, как мы проверяем тождественность открытого в данный момент вложенного списка тому, что содержится в пункте, на котором щелкнули мышью. Мы сравниваем не экземпляры объекта Element, возвращенные методами библиотеки Ext Core, а экземпляры объекта HTMLElement Web-обозревателя. Дело в том, что методы библиотеки Ext Core в разные моменты времени могут вер- нуть совершенно разные экземпляры объекта Element, тем не менее, представляющие  один  и  тот  же  элемент  Web-страницы.  В  то  время  как  экземпляр  объекта  HTMLElement,  представляющий  данный  элемент  Web-страницы,  всегда один  и тот же.

Чтобы получить доступ к экземпляру объекта HTMLElement, мы используем свойство dom объекта Element. Оно было описано в главе 15.

Далее нам остается только открыть вложенный список, присутствующий в пункте, на котором щелкнули мышью:

elInnerList.setDisplayed(true);

...и сохранить его в переменной elLastInnerList:

elLastInnerList = elInnerList;

Если  вложенный  список  в  пункте  "внешнего"  списка,  на  котором  щелкнули

мышью, отсутствует, выполняется следующий код:

} else {

Проверяем, открыт ли в данный момент какой-либо вложенный список (содержит ли переменная elLastInnerList какое-либо значение, отличное от null):

if (elLastInnerList) { elLastInnerList.setDisplayed(false); elLastInnerList = null;

}

Если это так, скрываем открытый вложенный список и присваиваем переменной elLastInnerList значение null, указывая, что ни один вложенный список в данный момент не открыт.

Затем проверяем, выделен ли в данный момент какой-либо пункт полосы навигации (содержит ли переменная elLastItem какое-либо значение, отличное от null), и не тот ли это пункт, на котором щелкнули мышью:

if ((elLastItem) && (elLastItem.dom != elLI.dom))

elLastItem.removeClass("selected");

Здесь  мы  также  сравниваем  экземпляры  объекта HTMLElement Web-обозревателя. Если какой-то пункт выделен и это не тот же самый пункт, на котором щелкнули мышью, снимаем с него выделение, убрав стилевой класс selected из привязки к нему.

Выделяем пункт, на котором щелкнули мышью, привязав к нему стилевой класс selected:

elLI.addClass("selected");

И сохраняем этот пункт в переменной elLastItem:

elLastItem = elLI;

}

Если пункт, на котором щелкнули мышью, находится во вложенном списке, выполняется следующий код:

} else {

Далее все нам уже знакомо:

if ((elLastItem) && (elLastItem.dom != elLI.dom))

elLastItem.removeClass("selected");

elLI.addClass("selected");

elLastItem = elLI;

}

}

Проверяем, выделен ли в данный момент какой-либо пункт полосы навигации, и не тот ли это пункт, на котором щелкнули мышью. Если это так, снимаем с него выделение, убрав стилевой класс selected из привязки к нему. Далее выделяем пункт, на

котором щелкнули мышью, привязав к нему стилевой класс selected, и сохраняем этот пункт в переменной elLastItem. На этом выполнение функции loadFragment закончено.

Теперь объявим функцию hideInnerLists, которая скроет все вложенные списки в полосе навигации после загрузки базовой Web-страницы index.htm. Вот соответст- вующий код:

function hideInnerLists() {

var ceInnerLists = Ext.get("navbar").select("UL");

ceInnerLists.setDisplayed(false);

}

Комментировать  здесь  особо  нечего.  Мы  получаем  все  списки,  вложенные  во "внешний" список navbar, и скрываем их.

На очереди — функция cleanupSamples (листинг 17.2). Она удалит обработчики событий, привязанные к первым потомкам контейнеров с текстом примеров (тех, к которым привязан стилевой класс sample).

Листинг 17.2

function cleanupSamples() {

var ceSamples = Ext.select(".sample");

ceSamples.each(function(el, cl, ind){ var elH6 = el.child(":first"); elH6.removeAllListeners();

});

}

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

Осталось только внести исправления в код тела функции, которая передается методу onReady объекта Ext. Прежде всего, найдем выражение, привязывающее обработчик события click к пунктам всех списков в полосе навигации. Исправим его так, чтобы оно выглядело следующим образом:

ceLinks.on("click", function(e, t){ loadFragment(Ext.get(this), e) });

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

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

hideInnerLists();

loadFragment(Ext.get("navbar").child("> LI:first"));

Первое вызывает функцию hideInnerLists, которую мы объявили ранее. Эта функция скроет все вложенные списки в полосе навигации после загрузки базовой Web- страницы index.htm.

Второе выражение вызовет функцию loadFragment и передаст ей в качестве пара- метра первый пункт "внешнего" списка navbar полосы навигации ("HTML"). В результате изначально в контейнер cmain будет загружено описание языка HTML (содержимое файла html.htm, хранящегося в папке chapters).

Сохраним файл main.js. И проверим наш второй Web-сайт в действии. Как мы пом- ним,  для  этого  понадобится  Web-сервер,  который  у  нас  уже  есть —  Microsoft Internet Information Services. (Мы установили его еще в главе 1.)

С помощью любой программы управления файлами (того же Проводника) откроем корневую папку созданного при установке этого Web-сервера тестового Web-сайта (папка c:\Inetpub\wwwroot). Очистим корневую папку от имеющихся там файлов и скопируем в нее все содержимое папки Site 2 (если кто забыл — в ней мы храним все файлы нового Web-сайта).

ВНИМАНИЕ !

Описанную операцию мы будем выполнять всякий раз после любой правки файлов Web-сайта. Автор больше не будет об этом напоминать.

НА ЗАМЕТКУ

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

Откроем новый Web-сайт в Web-обозревателе, для чего запустим его и наберем в поле ввода интернет-адреса http://localhost. Этот интернет-адрес, как мы помним из главы 1, идентифицирует наш собственный компьютер — локальный хост.

Когда главная Web-страница нового Web-сайта откроется, проверим, присутствует ли в контейнере cmain изначально описание языка HTML и открыт ли первый вложенный список (находящийся в пункте "HTML" полосы навигации). Пощелкаем на пунктах полосы навигации и посмотрим, как меняется содержимое контейнера cmain. И отметим, насколько быстро оно меняется. Вот что значит современные технологии!

Что дальше?

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

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

 

Введение в генерируемое содержимое. Базы данных

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

Какие фрагменты содержимого Web-страницы можно генерировать программно? Да какие угодно! Программно можно создавать, скажем, текст сведений об авторских правах, добавив соответствующий код в файл Web-сценариев, выполняемый при загрузке каждой Web-страницы Web-сайта (у нас это файл main.js). Можно создавать гиперссылки, указывающие на Web-страницы с какими-либо дополнительными пояснениями или связанными сведениями (раздел "См. также"). Можно создавать оглавления, списки использованных при написании статьи материалов, предметные указатели. Да и вообще всю 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 и вставим в ее секцию заголовка такой код:

Он загрузит и выполнит только что созданный нами файл 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>

</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 = "

" + aDataBase[i].name + "

";

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

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

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 вообще многогранный язык...

 

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

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

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

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

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

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

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

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

Поскольку в нашей книге описываются исключительно клиентские технологии, мы не будем рассматривать языки семантической разметки данных и программы для их обработки, а сосредоточимся именно на "подручных" средствах: гиперссылках и механизмах языка JavaScript, таких как массивы.

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

 

Реализация семантической разметки средствами JavaScript

Давайте  еще  раз  перечислим,  что  попадет  в  раздел  "См. также"  каждой  Web-страницы.

-  Гиперссылки на Web-страницы, описывающие теги HTML и атрибуты стиля CSS со сходным назначением.

-  Гиперссылки на Web-страницы с примерами применения данного тега или атрибута стиля.

-  Гиперссылки на Web-страницы с описаниями тегов и атрибутов стиля, присутствующих в данном примере.

Раздел  "См. также"  будет  генерироваться  программно,  специальным  Web-сценарием. Генерироваться он будет на основе каких-то данных — это очевидно. Но каких?

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

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

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

А если (как в нашем случае) элементы "глобальной" базы данных хранят конфигураторы, или вообще экземпляры объектов, задача значительно упрощается. Вспомним, что говорилось в главе 14: переменная с экземпляром объекта фактически хранит ссылку на него, а при присваивании ее значения другой переменной выполняется присваивание именно ссылки — экземпляр объекта при этом не дублируется. Значит, мы можем присвоить элементам "локальной" базы данных экземпляры объектов, которые извлечем из соответствующих элементов "глобальной" базы данных.

Фактически мы реализуем семантическую связь между "локальными" и "глобальной" базами данных средствами JavaScript. Это будет связь типа "метка — собственно данные".

"Локальную" базу данных мы также оформим в виде Web-сценария, который объявляет соответствующий массив (или массивы), и сохраним его в том же файле, в котором хранится HTML-код Web-страницы (точнее, подгружаемого фрагмента содержимого). Так будет проще — на одну Web-страницу будет приходиться один файл, а не два.

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

Что же нам делать?

Поместить  связанные  данные,  на  основе  которых  будет  формироваться  раздел "См. также", прямо в "глобальную" базу данных. Для этого мы создадим в конфигураторах, описывающих отдельные Web-страницы, еще одно свойство — related. Оно будет хранить массив элементов массивов aHTML, aCSS и aSamples, описывающих связанные Web-страницы. Это свойство мы сделаем необязательным, т. е. в каких-то  случаях  его  можно  не  указывать,  и  Web-сценарий,  создающий  раздел "См. также", сработает правильно.

Так мы создадим семантические связи типа "главный — подчиненный". В качестве связи будет выступать механизм массивов JavaScript.

Сказано — сделано! Откроем файл Web-сценариев data.js, найдем в нем место, где заканчивается код, который объявляет массивы aHTML, aCSS и aSamples, и вставим туда такое выражение:

aHTML[0].related = [aHTML[4], aHTML[7], aHTML[10]];

Мы взяли первый элемент массива aHTML (с индексом 0), добавили к хранящемуся в нем конфигуратору свойство related и присвоили этому свойству массив из трех конфигураторов, хранящихся в пятом, восьмом и одиннадцатом элементах (индексы 4, 7 и 10) того же массива. Таким образом мы указали, что для Web-страницы с описанием тега связанными являются Web-страницы с описаниями тегов , и