Иллюстрированный самоучитель по Web-графике

Сценарии (скрипты)

Чтобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать так называемые скрипты или, иначе говоря, сценарии. Сценарий (script, скрипт) – программа, написанная на специальном языке программирования, которая встраивается в HTML-документ.

Например, иы хотите, чтобы при щелчке кнопкой мыши на картинке последняя изменила слой вид или, скажем, произошел переход на другую страницу. Для этого необходим скрипт, который выполнит все, что нужно. То есть сценарии описывают поведение элементов HTML-документа и их взаимодействие с пользователем (например, реакцию на щелчок кнопки мыши, изменение содержания страницы в зависимости от действий пользователя).

Стандартным языком для скриптов является JavaScript. Однако разные браузеры воспринимают различные версии этого языка и, более того, даже отличающиеся его редакции. Редакция JavaScript от фирмы Microsoft, наиболее близкая к стандарту, называется JScript. Браузер Microsoft Internet Explorer поддерживает не только JScript, но и еще один язык скриптов – Visual Basic Script (VBScript). Другие браузеры VBScript не воспринимают. Так уж сложилось, что сейчас около 80% посетителей Web используют браузер Microsoft Internet Explorer. Однако остальных тоже миллионы. Ближайший конкурент браузера от Microsoft – Netscape Navigator. Будучи хорошим продуктом, последние годы он только отступал. Есть еще один популярный браузер – Opera. В полемике о том, какой браузер лучше, на наш взгляд, следует руководствоваться критерием близости к стандартам поддерживаемых скриптовых языков, а не удобствами использования браузера и его внешним видом. Netscape, можно так сказать, поддерживает некий диалект JavaScript. To, что ему не под силу, легко воспринимает Internet Explorer. А на каком диалекте "говорит" браузер Opera? Чтобы ответить на этот вопрос, "требуется провести особое исследование. Обсуждения в Интернете на тему, какой браузер лучше, пока затрагивают лишь вопросы удобства и скорости.

Чтобы эффективно использовать скриптовый язык для создания сценариев (скриптов), необходимо знать так называемую объектную модель HTML-документа. Действительно, прежде чем что-то делать, нужно понимать, к каким свойствам каких объектов наши действия будут приложены. Дело в том, что HTML-документ при загрузке в браузер транслируется в некоторое внутреннее представление в соответствии с объектной моделью. Каждый элемент HTML-документа (заголовок, картинка, кнопка и т. п.) представляется соответствующим объектом. Специфика объектов определяется их свойствами. С другой стороны, браузер, будучи программой, тоже имеет свою объектную модель. Если бы объектные модели HTML-документа и браузера были нам известны и, кроме того, имелись бы средства для манипулирования объектами, то тогда мы могли бы управлять как содержанием документа, так и браузером. С появлением HTML 4.0 и интерпретирующих его браузеров (например, Internet Explorer версии 4.0 и старше) появилась и такая возможность. Объектная модель была опубликована, т. е. были описаны объекты, их свойства и соответствие элементам HTML-документа. Средством манипулирования объектами стал язык JavaScript. Для браузера Internet Explorer, кроме JScript, можно использовать язык VBScript. Это – объектно-ориентированные языки программирования. На них можно писать программы, называемые сценариями (скриптами), и вставлять сценарии в HTML-код, обрамляя тэгами <SCRIPT> и </SCRIPT>.

Рассмотрим сначала в общих чертах объектную модель, представляющую собой частично упорядоченное по отношению включения множество объектов. Это означает, что некоторые объекты входят в состав других объектов, так что объекты образуют иерархию. Объект – это программная единица, которую можно использовать в программах для выполнения различных задач. О текущем состоянии объекта мы можем судить только по значениям его свойств. Управлять состоянием объекта (если он допускает это) можно только посредством его свойств. Программный код объекта, конкретная реализация его функционирования нам неизвестны. Мы не знаем, как устроен объект, но знаем, как им пользоваться. Данная концепция называется еше концепцией черного ящика. Таким образом, способ работы с объектами аналогичен способу работы с обычными бытовыми приборами: только посредством кнопок, ручек, циферблатов и дисплеев.

Объекты имеют фиксированные названия. Например, окну браузера соответствует объект window, a HTML-документу, загруженному в браузер, – объект document. Это основные объекты, но есть и другие. Объекты характеризуются тремя типами свойств:

• собственно свойства;
• методы;
• другие объекты.

Собственно свойства, называемые обычно просто свойствами, представляют собой переменные с фиксированными именами. Свойства имеют значения. Есть свойства, значения которых можно только читать (нельзя изменять). Такие свойства подобны измерительным приборам и датчикам. Значения других свойств можно изменять как обычные переменные. Эти свойства аналогичны элементам управления. Для доступа к свойству объекта используется синтаксис:

Например, значением свойства document.location является URL-адрес HTML-документа.

Методы – это внутренние функции объектов. Они имеют фиксированные имена, могут принимать параметры и возвращать значения. Вот синтаксис применения метода:

Например, метод window, open ("www .admiral .ru/~dunaev") открывает новое окно браузера и загружает в него страницу, расположенную по указанному адресу. Заметим, что некоторые методы не имеют параметров. С точки зрения пользователя методы отличаются от собственно свойств только синтаксисом обращения. Такого понимания вполне достаточно, чтобы их использовать. Более глубокие различия понятны только программистам. Дело в том, что программы (объекты – это тоже программы) могут управляться как данными (т. е. значениями переменных), так и процедурами и функциями (т. е. методами).

Объект может иметь в качестве свойства другой объект. В этом случае говорят, что первый объект содержит (включает в себя) второй объект. При этом первый объект называют также родительским (parent), а второй – дочерним, потомком или подобъектом (child). Если мы хотим обратиться к свойству или методу объекта объект2, являющегося подобъектом объекта объект!, то пишем так:

Например, объект document является подобъектом объекта window. Если мы хотим что-то записать в документ, загруженный в текущее окно, то можем воспользоваться для этого методом write(). Вот пример:

Кроме свойств и методов, для каждого объекта определен список событии, на которые он в принципе может реагировать. События имеют предопределенные названия. Например, событие "щелчок кнопкой мыши" обозначается onclick, "нажатие кнопки мыши" – onmousedown, а "загрузка документа в браузер" – onload.

Все элементы страницы, созданные с помощью тэгов HTML, а также информация о состоянии браузера имеют объектное представление. Доступ к объектам осуществляется с помощью сценариев (скриптов). Именно там мы и пишем все необходимые выражения, о которых говорилось выше.

Все перечисленные понятия лежат в основе так называемых объектно-ориентированных программ. В настоящее время к ним относится основная масса программных продуктов. И в первую очередь таковыми являются современные операционные системы, например Windows.

Операционная система Windows является многозадачной системой, обеспечивающей одновременное выполнение нескольких программ. В программе, написанной для работы под управлением ОС Windows (или для другой графической среды), пользователь может раскрывать окна, переходить из одного окна в другое, заполнять текстовые поля, нажимать кнопки практически в произвольном порядке. Например, пользователь может запустить процесс копирования файлов, включить проигрывание компакт-диска и проверить, не пришла ли электронная почта. Все это делается параллельно. Каждое такое действие пользователя формирует событие, т. е. некоторое сообщение о произошедшем. Операционная система фиксирует это сообщение и анализирует его, чтобы узнать, откуда оно взялось и что с ним делать. Операционная система может обработать событие самостоятельно или передать его другой программе, например браузеру.

Конечно, в действительности не все так просто, но хотелось обратить внимание на то, что программирование под Windows – программирование, управляемое событиями.

Можно связать HTML-код с происходящими событиями и использовать эту связь для организации взаимодействия пользователя со страницей. Например, один лишь щелчок порождает сразу несколько событий: onmousedown (нажата кнопка мыши), onmouseup (отпущена кнопка мыши) и onclick (щелчок кнопкой мыши, т. е. кратковременное нажатие и освобождение кнопки).

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