javascript Дронов 2011 |
1 | ГЛАВА 14 Введение в Web-программирование. Язык JavaScript Web-дизайн состоит из трех частей: содержимого, представления и поведения. Это мы узнали еще в главе 1. Содержимому была посвящена часть I, представлению — часть II. Теперь настала очередь обсудить поведение. Поведение — это набор правил, определяющих, как Web-страница будет реагиро- вать на действия посетителя. Так, мы можем указать, чтобы при наведении курсора мыши на гиперссылку в полосе навигации менялся цвет и стиль рамки, в которую она заключена. |
2 | Еще мы можем менять содержимое Web-страницы после ее загруз- ки или даже дополнять его, заставлять контейнер расширяться при щелчке мышью, открывая свое содержимое, анимировать элемент Web-страницы и делать множест- во других интересных вещей с самой Web-страницей и любым ее фрагментом. Поведение создается с помощью так называемых Web-сценариев — программ, ко- торые записывают прямо в HTML-коде Web-страниц или, что предпочтительнее, в отдельных файлах. |
3 | Эти программы пишут на языке JavaScript. Web-обозреватель считывает JavaScript-код и последовательно выполняет записанные в нем выраже- ния, проводя вычисления и выполняя на основе полученного результата заданные манипуляции над Web-страницей. Эта глава будет целиком посвящена принципам Web-программирования, языку JavaScript и средствам, предоставляемым Web-обозревателем для написания Web- сценариев. |
4 | Она будет очень большой, так что приготовимся к долгому чтению и обилию новых терминов. Примеры Web-сценариев Язык JavaScript лучше всего изучать, имея перед глазами пару хороших примеров. Поэтому давайте сразу создадим их. Простейший Web-сценарий Первый Web-сценарий, который мы напишем, будет совсем простым. Он выведет на Web-страницу текущую дату. В самом начале этой книги, приступив к изучению HTML, мы создали небольшую Web-страничку 1.1.htm. |
5 | Найдем ее и откроем в Блокноте. В самом конце ее HTML- кода, перед закрывающим тегом <BODY>, вставим код листинга 14.1. Листинг 14.1 <SCRIPT> var dNow = new Date(); var sNow = dNow.toString(); document.write(sNow); <SCRIPT> Это Web-сценарий. Мы поместили его прямо в HTML-код Web-страницы. Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. В самом низу мы увидим новый абзац, содержащий сегодняшнюю дату в "международном" формате. |
6 | Наш первый 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>. |
7 | Вот теперь дата отображается в привычном формате. Более сложный Web-сценарий Теперь сделаем что-нибудь посложнее — заставим пункты списков, формирующих полосу навигации на Web-странице index.htm, менять цвет рамки при наведении на них курсора мыши. Так мы дадим посетителю понять, что данные элементы Web- страницы могут реагировать на его действия. Сначала откроем таблицу стилей и внесем в ее CSS-код некоторые изменения. |
8 | Прежде всего, исправим комбинированные стили #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 } Во-первых, мы задали для пунктов "внешнего" и вложенного списков, формирую- щих полосу навигации, форму курсора в виде "указующего перста". |
9 | Так мы дадим посетителю понять, что эти пункты ведут себя как гиперссылки, и на них можно щелкать мышью. Во-вторых, мы создали у пунктов вложенного списка тонкую сплошную рамку того же цвета, что и фон Web-страницы. Такая рамка будет невидима. Далее добавим в таблицу стилей вот такой стиль: .hovered { border-color: #3B4043 !important } Мы создали стилевой класс, задающий цвет рамки. Поскольку стилевой класс явля- ется менее конкретным, чем комбинированный стиль, мы сделали атрибут стиля, задающий цвет рамки, важным. |
10 | (О важных атрибутах стиля см. главу 7.) Если мы привяжем этот стиль к пункту любого списка, формирующего полосу на- вигации, — "внешнего" или вложенного, — он задаст для пункта новый цвет рам- ки. В результате рамка пункта "внешнего" списка станет более темной, а невидимая рамка пункта списка вложенного — видимой. После этого отправимся по интернет-адресу http:www.extjs.comproducts coredownload.php?dl=extcore31 и загрузим оттуда архивный файл с именем вида ext-core-<номер версии>.zip — библиотеку Ext Core, упрощающую написание даже очень сложных Web-сценариев. |
… |
Комментарии
И то что она 2001г. не слишком ли старая?