HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Внутренние Web-сценарии имеют одно неоспоримое преимущество. Поскольку они записаны прямо в коде Web-страницы, то являются ее неотъемлемой частью, и их невозможно "потерять". Однако внутренние Web-сценарии не соответствуют
концепции Web 2.0, требующей, чтобы содержимое, представление и поведение Web-страницы были разделены. Поэтому сейчас их применяют довольно редко, практически только при экспериментах (как и внутренние таблицы стилей; подробнее — в главе 7).
Мы можем поместить Web-сценарий и в отдельный файл — файл Web-сценария, — создав внешний Web-сценарий. (Наш
Для вставки в 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
Любая программа при своей работе оперирует некими данными: именем стилевого класса, размерами элемента Web-страницы, цветом шрифта, величиной атмосферного давления и пр. Конечно, не составляют исключения и Web-сценарии — уже первый созданный нами Web-сценарий обрабатывал какие-то данные.
JavaScript может манипулировать данными, относящимися к разным типам. Тип данных описывает их возможные значения и набор применимых к ним операций. Давайте перечислим все типы данных, с которыми мы можем столкнуться.