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

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

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

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

Примеры Web-сценариев

Язык JavaScript лучше всего изучать, имея перед глазами пару хороших примеров. Поэтому давайте сразу создадим их.

Простейший Web-сценарий

Первый Web-сценарий, который мы напишем, будет совсем простым. Он выведет на Web-страницу текущую дату.

В самом начале этой книги, приступив к изучению HTML, мы создали небольшую Web-страничку 1.1.htm. Найдем ее и откроем в Блокноте. В самом конце ее HTML- кода, перед закрывающим тегом </BODY>, вставим код листинга 14.1.

Листинг 14.1

<SCRIPT>

var dNow = new Date();

var sNow = dNow.toString();

document.write(sNow);

</SCRIPT>

Это Web-сценарий. Мы поместили его прямо в HTML-код Web-страницы.

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

Наш первый Web-сценарий — поведение Web-страницы — работает!

Теперь немного исправим его так, чтобы он выводил дату в привычном для нас формате <число>.<месяц>.<год> (листинг 14.2).

Листинг 14.2

<SCRIPT>

var dNow = new Date();

var sNow = dNow.getDate() +'.' + dNow.getMonth() +'.' + dNow.getFullYear();

document.write(sNow);

</SCRIPT>

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

Более сложный Web-сценарий

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

Сначала откроем таблицу стилей и внесем в ее CSS-код некоторые изменения. Прежде всего, исправим комбинированные стили #navbar LI и #navbar LI UL LI так, как показано в листинге 14.3.

Листинг 14.3

#navbar LI { padding: 5px 10px; margin: 10px 0px; border: thin solid #B1BEC6; cursor: pointer }

.

#navbar LI UL LI { font-size: 12pt; padding: 2px; margin: 0px 0px; border: thin solid #F8F8F8; cursor: pointer }

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

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

Далее добавим в таблицу стилей вот такой стиль:

hovered { border-color: #3B4043!important }

Мы создали стилевой класс, задающий цвет рамки. Поскольку стилевой класс является менее конкретным, чем комбинированный стиль, мы сделали атрибут стиля, задающий цвет рамки, важным. (О важных атрибутах стиля см. главу 7.)

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

После этого отправимся по интернет-адресу http://www.extjs.com/products/core/download.php?dl=extcore31 и загрузим оттуда архивный файл с именем вида ext-core-<номер версии>.zip — библиотеку Ext Core, упрощающую написание даже очень сложных Web-сценариев. (Подробнее речь о ней пойдет в главе 15.) Распакуем этот файл, найдем в распакованном содержимом файл ext- core.js и скопируем в корневую папку нашего Web-сайта, где хранится Web-страница index.htm и таблица стилей main.css. Теперь библиотека Ext Core готова к использованию.

ВНИМАНИЕ!

Если по указанному интернет-адресу архивный файл библиотеки Ext Core загрузить не удается, следует открыть Web-страницу http://www.extjs.com/products/core/download.php, найти на ней гиперссылку загрузки этого файла (на данный момент она имеет текст 'Download') и щелкнуть на ней.

Теперь откроем в Блокноте Web-страницу index.htm и поместим в ее секцию заголовка (тег <HEAD>) такой тег:

<SCRIPT SRC='ext-core.js'></SCRIPT>

А в самом конце HTML-кода этой Web-страницы, перед закрывающим тегом

</BODY>, вставим такой тег:

<SCRIPT SRC='main.js'></SCRIPT>