После этого отправимся по интернет-адресу 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>
Напоследок в корневой папке нашего 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.
Осталось выяснить, что делает символ равенства (=), поставленный между переменной и константой. А он здесь стоит не просто так! (Вообще, в коде любой программы, в том числе и Web-сценария, каждый символ что-то да значит.) Это оператор — команда, выполняющая определенные действия над данными Web- сценария. А если точнее, то символом = обозначается оператор присваивания. Он помещает значение, расположенное справа (операнд), в переменную, расположенную слева, в нашем случае — значение 4 в переменную x. Если же такой переменной еще нет, она будет создана.
Каждое выражение JavaScript должно оканчиваться символом точки с запятой (;), обозначающим конец выражения; его отсутствие вызывает ошибку обработки Web- сценария.
Рассмотрим следующее выражение:
y = 5;
Оно аналогично первому и присваивает переменной y константу 5. Подобные выражения часто называют математическими.
Третье выражение стоит несколько особняком:
z = x * y;
Здесь мы видим все тот же оператор присваивания, присваивающий что-то переменной z. Но что? Результат вычисления произведения значений, хранящихся в переменных x и y. Вычисление произведения выполняет оператор умножения, который в JavaScript (и во многих других языках программирования) обозначается символом звездочки (*). Это арифметический оператор.
В результате выполнения приведенного ранее Web-сценария в переменной z окажется произведение значений 4 и 5 — 20.
Вот еще один пример математического выражения, на этот раз более сложного:
y = y1 * y2 + x1 * x2;
Оно вычисляется в следующем порядке:
1. Значение переменной y1 умножается на значение переменной y2.
2. Перемножаются значения переменных x1 и x2.
3. Полученные на шагах 1 и 2 произведения складываются (оператор сложения обозначается привычным нам знаком +).
4. Полученная сумма присваивается переменной y.
Но почему на шаге 2 выполняется умножение x1 на x2, а не сложение произведения
y1 и y2 с x1. Дело в том, что каждый оператор имеет приоритет — своего рода номер в очереди их выполнения. Так вот, оператор умножения имеет более высокий приоритет, чем оператор сложения, поэтому умножение всегда выполняется перед сложением.
А вот еще одно выражение:
x = x + 3;
Оно абсолютно правильно с точки зрения JavaScript, хоть и выглядит нелепым. В нем сначала выполняется сложение значения переменной x и числа 3, после чего результат сложения снова присваивается переменной x. Такие выражения встречаются в Web-сценариях довольно часто.
Типы данных JavaScript
