HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Добавленные нами выражения находят вложенный список, в котором присутствует данный пункт, проверяют, открыт ли он в текущий момент, и, если не открыт, открывают, скрывая при этом ранее открытый список.
Вот решена и четвертая задача… Уф-ф-ф!
Сохраним все исправленные файлы и проверим готовую Web-страницу index.htm в действии. Откроем Web-обозреватель, наберем в поле ввода интернет-адрес http://localhost, пощелкаем на пунктах полосы навигации и гиперссылках раздела "См. также" и посмотрим на сменяющие друг друга Web-страницы и скрывающиеся и открывающиеся вложенные списки. Красота!
Здесь мы реализовали
Что дальше?
В этой главе мы познакомились с принципом семантической разметки данных и применили ее к нашей базе данных средствами JavaScript. В результате мы смогли создать на Web-страницах нашего Web-сайта раздел "См. также", содержащий гиперссылки на Web-страницы со связанными данными.
Помнится, мы планировали реализовать на Web-сайте еще и поиск материалов по введенному посетителем слову или фрагменту слова. Далее мы им займемся. И начнем с элементов управления, с помощью которых реализуется ввод данных посетителем.
ЧАСТЬ 5. Последние штрихи
ГЛАВА 20. Web-формы и элементы управления
В предыдущих главах мы проделали большую работу. Во-первых, реализовали подгрузку фрагментов содержимого Web-страницы вместо загрузки целых Web-страниц. Во-вторых, сделали часть содержимого Web-страниц, а именно полосу навигации, генерируемой Web-сценарием. В-третьих, создали у всех Web-страниц, описывающих теги HTML, атрибуты стиля CSS и примеры, раздел "См. также", содержащий гиперссылки на Web-страницы со связанными материалами. Попутно мы узнали о базах данных и семантической разметке, без которых создать все это было бы крайне проблематично.
Но многое еще предстоит выполнить. В частности, реализовать поиск по Web-сайту. Идея была такой: посетитель вводит искомое слово — название тега или атрибута стиля или часть его названия, особый Web-сценарий ищет это слово в базе данных и выводит на Web-страницу гиперссылки на найденные Web-страницы.
Чтобы реализовать поиск, нам понадобятся:
— какие-либо средства, которые примут у посетителя искомое слово;
— Web-сценарий, который будет, собственно, выполнять поиск и формировать его результаты;
— элемент Web-страницы, куда будут выводиться результаты поиска.
С последним пунктом все просто. Мы создадим либо абзац, либо список, либо контейнер, где будет формироваться набор гиперссылок на искомые Web-страницы. С Web-сценарием, который будет выполнять поиск, тоже не должно возникнуть сложностей — достаточно просмотреть массивы, формирующие базу данных, и отобрать из них те элементы, что описывают подходящие Web-страницы.
Но как нам принять от посетителя искомое слово? Ясно, что для этого понадобится создать на Web-странице набор элементов управления как в Windows- приложениях: полей ввода, списков, флажков, переключателей и кнопок. Но как это сделать?
Web-формы и элементы управления HTML
Очень просто. Язык HTML предоставляет набор тегов для создания разнообразных элементов управления. Эти элементы
Набор элементов управления, поддерживаемый HTML, невелик. Он включает поля ввода различного назначения, область редактирования, обычный и раскрывающийся список, флажок, переключатель, обычную и графическую кнопку. Более сложные элементы управления (таблицы, "блокноты" с вкладками, панели инструментов и пр.) так просто создать не получится. Хотя, как правило, для создания простых Web-приложений перечисленного ограниченного набора вполне достаточно.
НА ЗАМЕТКУ
Существуют JavaScript-библиотеки для создания сложных элементов управления: индикаторов прогресса, регуляторов, "блокнотов", таблиц, панелей инструментов, меню и даже "лент" в стиле Microsoft Office 2007 и "окон". К таким библиотекам можно отнести, в частности, Ext, основанную на знакомой нам Ext Core.
Стандарт HTML требует, чтобы все элементы управления находились внутри Web-формы. Web-форма — это особый элемент Web-страницы, служащий "вместилищем" для элементов управления. На Web-странице она никак не отображается (если, конечно, мы не зададим для нее какого-либо представления); в этом Web-форма схожа с блочным контейнером. Для создания Web-формы HTML предусматривает особый тег.
Стандарт HTML требует, чтобы каждый элемент управления имел уникальное в пределах Web-формы имя. Это нужно для успешного формирования пар данных перед отправкой их серверному приложению.
Назначение Web-форм и элементов управления. Серверные приложения
Стандарт HTML поддерживал Web-формы и элементы управления еще до появления Web-сценариев и языка JavaScript. Но зачем?
Существует множество Web-сайтов, которые позволяют посетителю ввести какие- либо данные и получить результат их обработки: поисковые машины, почтовые Web-сервисы, интернет-магазины, интернет-опросники, социальные сети и пр.
Функциональность таких Web-сайтов реализуется с помощью особых программ, которые работают на серверном компьютере совместно с Web-сервером, — серверных приложений. Именно они обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы. Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение.
Вот основная схема работы серверного приложения.
— Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.
— Введя данные, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.
— Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.
— Web-сервер перехватывает отправленные данные, запускает серверное приложение и передает данные ему.