[{{mminutes}}:{{sseconds}}] X
Пользователь приглашает вас присоединиться к открытой игре игре с друзьями .
javascript Дронов 2011
(1)       Используют 10 человек

Комментарии

NodeJS 10 июля 2015
Для начинающих не будет ли эта книга сложной?
И то что она 2001г. не слишком ли старая?
Написать тут
Описание:
web
Автор:
Geralt94
Создан:
4 мая 2015 в 16:14
Публичный:
Да
Тип словаря:
Книга
Последовательные отрывки из загруженного файла.
Содержание:
813 отрывков, 414233 символа
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-сценариев.
 

Связаться
Выделить
Выделите фрагменты страницы, относящиеся к вашему сообщению
Скрыть сведения
Скрыть всю личную информацию
Отмена