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

Осталось только внести исправления в код тела функции, которая передается методу 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-сценарии, на основе сведений, хранящихся в базе данных. Ну и попутно узнаем, что такое база данных.

ГЛАВА 18. Генерируемое содержимое

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

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

Генерируемое содержимое 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, каждый элемент которого представляет собой конфигуратор, свойства которого описывают различные фрагменты данных. Сделать это довольно просто.