Язык JavaScript-поведение web-страниц


Язык Javascript - язык web-программирования, необходимый для создания поведения web-страниц.

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


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

 

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

Пропишем в нашем html-коде, внутри тега <BODY>, такой скрипт (это и есть web-сценарий):

Проверим результат нашей работы в браузере. На странице увидим абзац, с датой, написанной в "международном" формате.

Немного подправим наш script-код, для вывода даты в привычном нам формате <число>. <месяц>.<год>. Скрипт примет такой вид:

Теперь мы видим дату в понятном нам формате.


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

 

Попробуем создать что-то более сложное: пропишем пунктам полосы навигации нашей web-страницы, после наведения мышки, изменять цвет рамки. Изменение цвета подскажет пользователю, что этот элемент страницы может как-то реагировать на его манипуляции.

Вначале внесем исправления в нашей таблице стилей как показано ниже:

Для пунктов полосы навигации мы прописали изменение курсора, при наведении, на вид "указательного пальца", что подсказывает о реакции элемента на клик.

— Сделали для пунктов вложенного списка сплошную рамку цвета фона страницы (невидимая для пользователя).

Впишем в таблицу стилей такой стиль:

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

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

При привязывании этого стиля к пунктам любых списков, формирующих полосы навигации, он указывает новый цвет рамки. Рамка пункта "внешнего" списка становится темнее, а рамка пункта списка вложенного, которая была невидима, становится видимой.

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

Откроем наш файл index.htm и впишем в тег <head> следующий тег:

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

А перед закрывающим тегом </BODY> пропишем этот тег:

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

В завершение в корневой папке создадим файл main.js и пропишем в нем следующее:

Это наш новый web-сценарий, но размещенный в отдельном файле main.js. Осталось протестировать результат нашей работы в браузере.


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

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

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

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

Внутренние 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


Давайте рассмотрим пример еще одного 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-сценариях довольно часто.