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

Напоследок в корневой папке нашего Web-сайта создадим текстовый файл main.js и запишем в него содержимое листинга 14.4.

Листинг 14.4

Ext.onReady(function()

{var ceLinks = Ext.select('UL[id=navbar] LI');

ceLinks.on('mouseover', function(e, t) { Ext.get(this). addClass('hovered');});

ceLinks.on('mouseout', function(e, t) { Ext.get(this). removeClass('hovered');});

});

Это тоже Web-сценарий. Но поместили его мы уже в отдельный файл main.js.

Сохраним его, выбрав кодировку UTF-8 (как это сделать, было описано в главе 1).

Все, поведение создано. Откроем Web-страницу index.htm в Web-обозревателе. Наведем курсор мыши на любой пункт полосы навигации и увидим, как вокруг него появится темная рамка.

Как Web-сценарии помещаются в Web-страницу

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

Для вставки Web-сценария в HTML-код в любом случае применяется парный тег <SCRIPT>. Встретив его, Web-обозреватель поймет, что здесь присутствует Web-сценарий, который следует выполнить, а не выводить на экран.

Мы можем поместить код Web-сценария прямо в тег <SCRIPT>, создав внутренний Web-сценарий (листинг 14.5). Собственно, мы уже сделали это, когда создавали наш первый Web-сценарий.

Листинг 14.5

<SCRIPT>

var dNow = new Date();

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

dNow.getFullYear();

document.write(sNow);

</SCRIPT>

Внутренние Web-сценарии имеют одно неоспоримое преимущество. Поскольку они записаны прямо в коде Web-страницы, то являются ее неотъемлемой частью, и их невозможно 'потерять'. Однако внутренние Web-сценарии не соответствуют

концепции Web 2.0, требующей, чтобы содержимое, представление и поведение Web-страницы были разделены. Поэтому сейчас их применяют довольно редко, практически только при экспериментах (как и внутренние таблицы стилей; подробнее — в главе 7).

Мы можем поместить Web-сценарий и в отдельный файл — файл Web- сценария, — создав внешний Web-сценарий. (Наш второй Web- сценарий именно таков.) Файлы Web-сценария представляют собой обычные текстовые файлы, содержат только код Web-сценария без всяких тегов HTML и имеют расширение js.

Для вставки в Web-страницу Web-сценария, хранящегося в отдельном файле, применяется тег <SCRIPT> такого вида:

<SCRIPT SRC='<интернет-адрес файла Web- сценария>'></SCRIPT>

Тег <SCRIPT> оставляют пустым, и в него помещают обязательный в данном случае атрибут SRC, в качестве значения которого указывают интернет-адрес нужного файла Web-сценария:

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

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

В нашем втором Web-сценарии мы использовали библиотеку Ext Core, значительно облегчающую труд Web-программиста. Во всех языках программирования библиотекой называется набор готовых языковых конструкций (функций и объектов, о которых речь пойдет потом), написанных сторонними программистами, чтобы облегчить труд их коллег. Так вот, все библиотеки для языка JavaScript, в том числе и Ext Core, реализованы в виде внешних Web-сценариев.

И еще. Web-сценарий всегда выполняется в том месте HTML-кода Web-страницы, где присутствует. При этом не имеет значения, помещен он прямо в HTML-код или находится в отдельном файле.

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

Язык программирования JavaScript

Настала пора рассмотреть язык программирования JavaScript. Ведь в Web-программировании без него никуда.

Основные понятия JavaScript

Давайте рассмотрим пример еще одного Web-сценария, совсем небольшого:

x = 4;

y = 5;

z = x * y;

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

Разберем приведенный Web-сценарий по выражениям. Вот первое из них:

x = 4;

Здесь мы видим число 4. В JavaScript такие числа, а также строки и прочие величины, значения которых никогда не изменяются, называются константами. В самом деле, значение числа 4 всегда равно четырем!

Еще мы видим здесь латинскую букву x. А она что означает?

О, это весьма примечательная вещь! Это переменная, которую можно описать как участок памяти компьютера, имеющий уникальное имя и предназначенный для хранения какой-либо величины — константы или результата вычисления. Наша переменная имеет имя x.

Осталось выяснить, что делает символ равенства (=), поставленный между переменной и