|
ГЛАВА 13.
Использование
сценариев
В главе
12, когда говорилось об анимации на Web-страницах
и способах ее создания, очень часто упоминались Web-сценарии.
В этой главе мы их рассмотрим подробнее.
Как вы уже
знаете, Web-сценарии позволяют преодолеть ограничение
HTML, обусловленное его природой языка разметки страницы.
Это ограничение заключается в том, что с помощью HTML
можно описать только внешний вид данных, отображаемых
на Web-странице, но никак не их поведение при наступлении
того или иного события (о событиях и их обработке см.
в главе 12). Говорят, что HTML — язык представления
данных, но не описания способов их обработки.
А если вы хотите
анимировать какой-либо элемент страницы, вам придется
описать поведение этого элемента в виде алгоритма —
последовательности операций, выполняемых компьютером.
Этот алгоритм будет выполняться при наступлении особого
внутреннего события — "тика" системного таймера.
При каждом таком "тике" элемент будет сдвигаться
на небольшое расстояние, а поскольку такие "тики"
повторяются очень часто, человеческий глаз воспринимает
скачкообразное движение как непрерывное. Вот вкратце основной
принцип создания анимированных элементов.
Для описания
алгоритмов, по которым будет двигаться анимированный элемент,
используются Web-сценарии. Именно они реализуют вычисление
координат анимированного элемента и его перемещение.
Конечно, в
главе 12 для создания анимаций мы использовали
Dreamweaver, который позволяет делать это, просто рисуя
в окне документа траекторию движения нужного элемента.
Однако основные принципы все те же. Web-сценарии, написанные
особым образом, вызываются при каждом "тике"
таймера и заставляют анимированный элемент "скакнуть"
на очередную позицию.
Web-сценарии
практически всегда пишутся на языке программирования JavaScript.
Конечно, существуют и другие языки, по именно JavaScript
завоевал широкую популярность. Этот язык начал полноценно
поддерживаться Internet Explorer 4.0 и Navigator 3.0.
Также ограниченная поддержка JavaScript была реализована
в Internet Explorer 3.0. Ну, a Opera и Mozilla поддерживают
его с самого "рождения".
Для чего еще
могут быть использованы Web-сценарии? О-о-о, много для
чего. Давайте поговорим об этом, прежде чем приступим
к изучению языка JavaScript.
Подробнее
о Web-сценариях
Здесь будет
рассказано о задачах, успешно решаемых с использованием
Web-сценариев. Далее будет дан краткий урок основ JavaScript,
после чего мы с вами перейдем к рассмотрению стандартных
сценариев, поддерживаемых Dreamweaver. Автор не ставит
цели сделать из вас знатоков JavaScript -в конце концов,
эта книга совсем о другом. Если же вы хотите побольше
узнать об этом языке, найдите другие книги, благо сейчас
их издано очень много.
Итак, пора
дать ответ на вопрос...
Зачем
нужны Web-сценарии
Web-сценарии
могут быть применены везде, где не может быть использован
"чистый" HTML, т. е. там, где элементы страницы
должны вести себя так, как стандартом HTML не предусмотрено.
Возьмем ту
же самую анимацию. За очень небольшим исключением (например,
нестандартный тег <MARQUEE>, поддерживаемый Internet
Explorer), элементы страницы не могут по ней двигаться.
Если вам все же нужно, чтобы они двигались, не обойтись
без применения Web-сценариев. Зная язык JavaScript, вы
с легкостью реализуете нужное поведение элементов, заставите
их летать с требуемой скоростью и по желаемой траектории.
HTML такое не может.
Очень часто
Web-сценарии используются для изменения содержимого Web-страницы
или даже для создания нового содержимого в ответ на действия
пользователя. В частности, при наведении курсора мыши
на гиперссылку рядом с ней может появляться краткое описание,
либо изображение-гиперссылка может менять свой вид. (Кстати,
такие "горячие" изображения, меняющиеся при
наведении на них курсора мыши, мы уже создавали в главе
3 при помощи Dreamweaver. Такие "фокусы"
реализуются также с помощью Web-сценариев.) Иногда содержимое
Web-страницы корректируется сразу же в процессе ее загрузки
Web-обозревателем, что достигается помещением в HTML-код
сценариев, исполняющихся при загрузке.
Вообще, фантазия
Web-дизайнера, решившего создать интерактивную Web-страницу
с использованием Web-сценариев, почти ничем не ограничена.
(Ограничения, конечно, существуют, но их очень мало, и
касаются они, в основном, доступу к содержимому дисков
клиентского компьютера.) В настоящее время существуют
даже Web-страницы, содержимое которых может изменяться
самим пользователем прямо в окне Web-обозревателя. (Другой
вопрос: зачем это нужно?..) На страницах может отображаться,
например, текущее время, причем, "часики" действительно
будут "тикать". Также Web-сценарии часто используются
для правильного размещения на странице свободно позиционируемых
элементов. В частности, можно создать свободный элемент,
который при любых изменениях размеров окна Web-обозревателя
всегда будет находиться в его центре.
С помощью Web-сценариев
можно создать принципиально новый интерфейс пользователя
для своей страницы. На многих страницах применяется иерархический
список, в котором перечислены все разделы и подразделы
сайта. Такие страницы напоминают окно Проводника Windows.
Часто с помощью свободно позиционируемых элементов и сложных
Web-сценариев создают принципиально новые элементы управления
для ввода данных, не снившихся даже самой великой и ужасной
Windows. Но это уже — удел достаточно опытных программистов.
Ну и, конечно,
Web-сценарии применяются для написания настоящих программ,
использующих в качестве интерфейса Web-страницы. Известны,
например, игры "15", "Лото", различные
головоломки и викторины, созданные на основе Web-сценариев
и размещенные в Интернете. Часто таким же образом создаются
и более серьезные программы, например, утилиты подбора
цветов для Web-страниц или даже целые Web-редакторы, конечно,
не очень сложные.
Вообще, создание
таких вот Web-программ — достаточно новая область деятельности,
еще даже толком не развившаяся, но довольно перспективная.
В самом деле, такие программы очень просто распространять
и сопровождать. Они не требуют создания разработчиком
дистрибутивного пакета, иной раз весьма "увесистого",
и распространения его каким-либо образом, а потенциальным
пользователям не придется его подолгу загружать. Они не
требуют установки на компьютере пользователя, а становятся
доступны сразу после набора в окне Web-обозревателя нужного
адреса. А при создании новой версии такой программы разработчику
достаточно будет только обновить на своем сайте соответствующую
Web-страничку.
Web-программы
имеют только два недостатка. Во-первых, они доступны только
после подключения к Интернету. (Хотя, конечно, их можно
распространять на дискетах, CD, по электронной
почте и другими путями.) Во-вторых, из-за ограничений
интерпретатора JavaScript с помощью таких программ невозможно
сохранение документов на дисках клиентского компьютера.
Язык
JavaScript
Выше автор
предупреждал, что не будет давать вам полный курс JavaScript.
Эта книга не о JavaScript, а о Macromedia Dreamweaver
MX, а все остальное вторично. Если вы хотите побольше
узнать о JavaScript, принципах написания программ на этом
языке и, вообще, о "классическом" программировании,
найдите хорошие книги по этой теме. А мы вернемся к Dreamweaver.
Но, для того
чтобы вы поняли, что есть на самом деле Web-сценарии,
необходимо провести хотя бы краткий ликбез. И сейчас он
будет проведен.
Давайте вернемся
к уже знакомому нам HTML. Что он собой представляет? Набор
тегов, описывающих внешний вид и (отчасти) структуру представления
данных, которые будут отображаться в Web-обозревателе.
HTML, как вы помните, язык описания данных.
JavaScript
же — язык описания алгоритмов обработки этих самых данных.
Поэтому он содержит набор инструкций, предписывающих выполнение
тех или иных действий над данными. Чтобы облегчить работу
программиста, способ написания этих инструкций максимально
приближен к обычной математической нотации, слегка "разбавленной"
словами обычного английского языка. (Вот еще один повод
взяться за английский.)
Такие инструкции,
описывающие действия над данными, называются выражениями.
Выражения состоят из операторов и операндов;
операторы описывают сами действия, а операнды — данные,
над которыми будут производиться эти действия. Причем,
операндами могут быть как константы (числа, строки,
даты, одним словом, неизменяемые значения), так и переменные
(специально отведенные ячейки для хранения промежуточных
результатов вычислений).
Давайте рассмотрим
одно из таких выражений:
b = z / t;
Это выражение
делит значение переменной z на значение переменной t и
результат помещает в переменную ь. Как вы уже поняли,
знак "/" обозначает оператор деления, а знак
"=" — оператор присваивания значения
какой-либо переменной. Знак ";", помещенный
в конце выражения, обозначает, собственно, его конец;
встретив этот знак, интерпретатор JavaScript считает выражение
законченным.
Вот еще два
выражения:
sum = a1 +
а2 + а3 - 20; square = х * у;
Первое выражение
складывает друг с другом значения переменных a1, a2 и
аЗ, после чего вычитает из результата 20 и помещает его
в переменную sum.
Второе выражение
перемножает значения переменных к и у и помещает
результат в переменную square.
Чтобы управлять
порядком вычисления выражения, вы можете использовать
скобки:
s
= (а + b) / (с - d);
В этом выражении
сначала будет вычислена сумма а и ь, потом — разность
с и а, после чего сумма будет поделена на разность. Если
бы мы не использовали скобки, то выражение имело бы вид:
s = a+b/c —
d;
При этом сначала
было бы вычислено частное от деления ь на с, после чего
к нему была бы прибавлена а, а затем из этой суммы вычлось
бы d. Попробуйте подставить вместо а, ь, с и d реальные
числовые значения и вычислить результаты этих выражений.
Вы увидите, что они получатся разными.
В JavaScript
можно написать и так:
а = а + 1;
и это выражение
будет правильным. Оно предписывает интерпретатору извлечь
значение из переменной а, увеличить его на единицу и поместить
в ту же переменную. Это выражение можно записать и короче:
а += 1;
или совсем
сжато:
Кстати, любая
переменная перед тем, как будет использована, должна быть
объявлена. Объявление переменных выполняется с
помощью специального оператора объявления var:
var a1, a2,
а3, х, у
Объявляемые
переменные просто перечисляются после этого оператора,
после чего их можно использовать в сценарии. Такие переменные
называются глобальными, т. к. могут быть использованы
где угодно в программе.
Говорилось,
что переменные могут содержать какие угодно данные. В
самом деле, посмотрите сюда:
а = 10;
s = "Строка
символов";
Здесь первой
переменной присваивается числовое значение, а второй —
строка (строковое значение). (Вообще, Web-сценарии, как
правило, чаще обрабатывают текст, а не числа, так что
в этом нет ничего необычного.)
В общем, одна
переменная всегда содержит одно значение. Если переменной
присвоить новое значение, то старое значение пропадет.
Но существует другой вид переменных, которые могут содержать
несколько значений. Такие переменные называются массивами.
Отдельные значения, содержащиеся в массиве, называются
его элементами; доступ к элементам массива осуществляется
с помощью так называемого индекса.
var arr;
arr[0] = 1;
arr[1] = 2;
arr[5] = arr[0]
+ arr[1];
Как видите,
индекс элемента массива указывается после его имени в
квадратных скобках; этим массив и отличается от обычной
переменной (скаляра). Сам массив объявляется точно
так же, как обычная переменная, и со значениями его элементов
можно делать то же самое, что и со значениями обычных
переменных. Заметьте, что специально объявлять его как
массив не нужно — как только вы при обращении к переменной
укажете индекс элемента, интерпретатор JavaScript тут
же преобразует переменную в массив.
Для примера
был создан одномерный массив. Но бывают и массивы
двумерные:
var arr2;
агг2[0] [0]
= 0;
агг2[0][1]
= 1;
агг2[1] [0]
= 2;
агг2[1][1]
= 3;
Ключевыми
словами называются специально зарезервированные слова,
обозначающие некоторые операторы языка программирования.
Так, условный оператор if-else состоит из двух
ключевых слов. Он позволяет выполнить какое-либо выражение
только в том случае, если становится верным какое-либо
условие. Если условие верно, выполняется выражение,
стоящее после ключевого слова if, а если неверно, — стоящее
после ключевого слова else. Говорят, что оператор if-else
организует ветвление.
Ниже приведен
пример использования этого оператора.
if (x== 1)
f = 2 else
f =
12;
Здесь, если
значение переменной х равно единице, переменной f присваивается
2, в противном случае — 12.
Если в какой-либо
из частей оператора if-else нужно выполнить несколько
выражений, используется так называемое составное выражение.
if (х == 1)
{
f = 2;
h = 3; } else
{
f = 12;
h = 14; }
Как видите,
составное выражение состоит из нескольких простых выражений,
помещенных внутрь фигурных скобок. Интерпретатор JavaScript
считает их одним выражением.
Существует
также "урезанная" форма оператора if-eise, без
части else. В этом случае, если условие неверно, никакого
кода не выполняется.
if (х == 1)
( f = 2; h = 3; )
Существует
также оператор-переключатель switch-case. Этот
оператор заменяет множество операторов if-eise.
switch (а)
{ case 1 :
out = "Единица";
break; case
2 :
out = "Двойка";
break; case
3 :
out = "Тройка";
break; default
:
out = "Другое
число"; }
Если значение
переменной а равно 1, переменной out будет присвоено значение
Единица (часть case l). Если значение переменной а равно
2, то переменная out получит значение двойка (часть сазе
2), и т. д. Если же переменная а содержит значение, не
перечисленное в списке case, выполняется часть default,
и out принимает значение другое число.
Как видите,
оператор-переключатель просто выполняет разные фрагменты
кода в зависимости от значения переменной, находящейся
в скобках после ключевого слова switch. Поэтому он и называется
переключателем.
Оператор цикла
for позволит вам выполнить какое-либо выражение (простое
или составное) нужное количество раз, т. е. организовать
цикл со счетчиком. При этом на каждом проходе цикла
содержимое переменной-счетчика будет сравниваться
с конечным значением, и если оно его превышает,
цикл немедленно завершается. В противном случае содержимое
счетчика увеличивается или уменьшается на единицу, и выполняется
новый проход цикла.
Рассмотрим
применение оператора for на примере.
for (i = 1;
i < 101; i++) { a = a * i; b = b + i;
}
Первая строка
сообщает интерпретатору JavaScript следующее:
- переменная i будет использоваться
в качестве счетчика цикла, т. е. в ней будет находиться
значение количества уже выполненных проходов цикла;
- начальное значение
счетчика — 1 (i =1);
- конечное значение счетчика
— 100, т. е. повторять цикл нужно, пока содержимое счетчика
i остается меньше 101 (i < 101);
- при каждом проходе цикла
нужно будет увеличивать значение счетчика на единицу
(i++; оператор ++ указывает увеличить значение какой-либо
переменной на единицу, другими словами, инкрементировать,
и поместить его в ту же переменную). (Оператор ++
называется оператором инкремента.)
В результате
выполнения приведенного выше выражения в переменной а
будет находиться факториал от 100, а в переменной b —
сумма от 1 до 100.
Кроме цикла
со счетчиком, в JavaScript можно организовать и циклы
без счетчика, так называемые циклы с условием. Они
выполняются до тех пор, пока остается истинным какое-либо
условие. Это циклы do-while и while.
Сначала рассмотрим
цикл do-while.
do {
а = а * i +
2;
i = ++i; }
while (a < 100);
Этот цикл будет
выполняться, пока значение переменной а остается меньше
100. Заметьте, что условие проверяется после прохода цикла,
поэтому этот цикл выполнится хотя бы один раз, даже если
условие будет изначально ложно.
В цикле while
условие проверяется перед проходом цикла, поэтому, если
условие изначально ложно, цикл не выполнится ни разу.
while (a <
100) { a = a * i + 2; i = ++i; }
Оператор завершения
break немедленно завершает цикл, а оператор
продолжения continue — продолжает цикл,
т. е. прекращает выполнение текущего прохода и начинает
выполнение следующего (конечно, если условие завершения
цикла это допускает).
while (a <
100) { i = ++i;
if (i >
50) break; if (i < 5) continue; a = a * i + 2; }
Попробуйте
сами разобраться, как работает вышеприведенный пример.
Если вам нужно
выполнять в нескольких местах программы один и тот же
фрагмент кода с разными числовыми значениями, вы можете
создать на его основе функцию. Функция — это фрагмент
кода, оформленный особым образом, который может быть вызван
из различных мест программы и из других функций. Функция
может принимать любое количество параметров и возвращать
один результат, который может быть использован
в дальнейших вычислениях.
Давайте рассмотрим
небольшой пример функции, увеличивающей переданное ей
значение на два и возвращающей результат.
function valuePlus2
(v) {
var с;
с = v + 2;
return с; }
Автор назвал
нашу функцию valuePlus2 и передал ей единственный параметр
v (см. в скобках после имени функции). Код, находящийся
внутри функции, сначала объявляет локальную переменную
с, "видимую" только внутри этой функции (вызвавшая
функцию программа не сможет к ней обратиться). Далее этой
переменной присваивается сумма значения переданного параметра
v и 2. Последний оператор возвращает результат вызвавшей
функцию программе (return — оператор возврата значения).
Как можно использовать
полученную функцию? Например, так:
h = d + valuePlus2
(r) ;
Здесь мы передаем
функции vaiuePlus2 значение г и используем возвращенный
результат в выражении. В частности, мы складываем его
сам присваиваем результат п.
Кстати, нашу
функцию можно было написать значительно короче и оптимальнее.
(Да, и здесь оптимизация!)
function valuePlus2(v)
{ return v + 2; }
Опытные программисты
так и пишут. Во-первых, код становится проще и "прозрачнее".
Во-вторых, что еще важнее, код становится меньше и быстрее.
Функция может
и не принимать параметров:
function someFunc1()
{ return 2+2; }
Функции могут
вызывать друг друга:
function valuePlus3(v)
{ return valuePlus2(v) + 1; }
На этом краткий
курс основ языка JavaScript подошел к концу. Нам осталось
рассмотреть только объекты.
Объекты
Выше были рассмотрены
два вида переменных: обычные переменные, иначе говоря,
скаляры и массивы. Скаляры могут содержать только одно
значение, массивы же — множество пронумерованных значений,
доступ к которым можно получить по их номеру — индексу.
И скаляры, и массивы находят свое применение в программах
на JavaScript; нет смысла рассказывать, в каких случаях
что применять, — это и так очевидно. Давайте лучше поговорим
еще об одном виде переменных, которого мы до сих пор не
касались.
Это объекты.
Объектом
называется сложный тип данных, содержащий не какое-то
одно значение, а целую сущность. Эта сущность может иметь
набор свойств и методов, с помощью которых программа может
ей управлять; свойство -это своего рода переменная,
принадлежащая объекту, а метод — функция, также
принадлежащая объекту и выполняющая над ним какие-либо
действия. Объект (и сущность, содержащаяся в нем) представляет
собой "вещь в себе"; ее внутренняя структура
и принцип действия неизвестны использующему объект программисту.
В качестве
примера объекта можно рассмотреть прекрасно знакомый вам
Web-обозреватель. У него есть свойство "адрес"
и метод "открыть Web-страницу, которой принадлежит
этот адрес". Вы можете присвоить этом свойству нужный
адрес, а также можете его оттуда считать и присвоить какой-либо
переменной или использовать иным способом:
currentWebBrowser.address
= "http://www.w3c.org";
currAddr = currentWebBrowser.address + "/сss/";
Именно такой
синтаксис используется для доступа к свойствам: <имя
объеках <имя свойства> (не забудьте поставить знак
точки). В первом случае мы поместили в свойство address
объекта currentWebBrowser строку с интернет-адресом комитета
WWWC. Во втором случае мы извлекли из этого свойства находящийся
в нем адрес, прибавили к нему справа текст "/сss/"
и присвоили переменной currAddr. (Как видите, для слияния
(или конкатенации) строк использовался оператор
+.)
Для вызова
метода используется аналогичный синтаксис: <имя объекта>.
<имя метода> (). Сейчас мы вызовем метод до вышеупомянутого
объекта:
currentWebBrowser.gо
();
Метод до —
не что иное, как обычная функция. В данный момент возвращенное
ей значение игнорируется, но в других случаях оно может
использоваться. Также метод, как и любая функция, может
принимать параметры:
currentWebBrowser.goTo("http://www.w3c.org");
Таким образом
мы можем управлять Web-обозревателем. И — заметьте -ничего
не зная о его внутреннем устройстве. Более того, мы не
обязаны о нем знать. Использование объектов как раз и
направлено на то, чтобы позволить программистам пользоваться
различными инструментами и дополнительными компонентами,
не зная их внутреннего устройства, а также создавать такие
инструменты и компоненты для своих коллег.
Говорят, что
JavaScript — объектно-ориентированный язык программирования,
т. к. использует объекты. Этим он отличается от обычных,
процедурных языков, которые используют только функции.
Каждый объект
перед тем, как с ним можно будет работать, должен быть
создан. Выполняется это с помощью оператора создания
объекта new.
var currentWebBrowser;
currentWebBrowser = new WebBrowser();
Здесь объявляется
переменная currentWebBrowser и ей присваивается вновь
созданный с помощью оператора new объект. Этот объект
создан на основе класса WebBrowser, который является
как бы шаблоном для создаваемых объектов. A currentWebBrowser
также иногда называется экземпляром класса
WebBrowser.
Удалить ненужный
объект можно с помощью метода delete.
currentWebBrowser.delete();
Имейте в виду,
что ненужные объекты, созданные вами, всегда надо удалять,
чтобы освободить ресурсы системы. Исключение составляют
только истемные объекты, создаваемые самим интерпретатором
или предоставляемые интерпретатору Web-обозревателем.
Если вы попытаетесь удалить системный объект, интерпретатор
выдаст сообщение об ошибке. О системных объектах мы поговорим
ниже.
Но каким же
образом создаются классы объектов? Исключительно просто.
Более того, если бы остальные языки объектно-ориентированного
программирования увидели, как легко создаются классы в
JavaScript, они бы умерли от зависти. Взглянем еще раз
на выражение, с помощью которого создаются объекты:
currentWebBrowser
= new WebBrowser();
Согласитесь,
это сильно напоминает вызов функции. Но дело в том, что
WebBrowser — и есть функция, только специальным образом
написанная. Она называется конструктором класса.
Давайте напишем конструктор для класса WebBrowser.
function WebBrowser()
{
this.address
= "http://www.server.ru/my_home_page.htm";
}
Этот код создает
в классе WebBrowser одно-единственное свойство address.
Обратите внимание на синтаксис, с помощью которого это
делается. В качестве имени класса используется ключевое
слово this, обозначающее текущий класс. Интерпретатор
JavaScript создает свойства класса сразу же при первом
обращении к ним; вот и в нашем случае он создал свойство
address и дал ему значение, присвоенное нами. Конструктор
может принимать параметры:
function WebBrowser(homePage)
{ this.address = homePage;
}
Таким образом
мы можем передать конструктору класса адрес домашней страницы,
с которой начнется путешествие по Интернету.
var currentWebBrowser;
currentWebBrowser
= new WebBrowser("http://www.server.ru/home_page.htm");
"Но, позвольте!
— скажете вы. — А как же создаются методы класса?"
Тоже очень просто.
Прежде всего,
нам нужно написать функцию, реализующую этот метод.
function fGoTo(pageAddress)
{ this.address = pageAddress;
Мы назвали
эту функцию fGoTo. Это имя состоит из буквы f (от англ.
function — функция) и имени метода дото, который
она реализует.
Теперь перепишем
функцию-конструктор таким образом, чтобы создать новый
метод дото.
function WebBrowser(homePage)
{
this.address
= homePage;
this.goTo =
fGoTo; }
Как видите,
мы "присваиваем" написанную нами функцию fGoTo
свойству дото класса WebBrowser. После этого можно вызывать
метод дото этого класса.
var currentWebBrowser;
currentWebBrowser
= new WebBrowser("http://www.server.ru/home_jpage.htm");
currentWebBrowser.goTo("http://www.w3c.org");
Только что
вы научились создавать простейшие классы. Но на самом
деле вам в очень редких случаях придется делать это. Куда
чаще вы будете пользоваться уже готовыми системными
классами, предоставляемыми самим интерпретатором JavaScript
и другими программами, например Web-обозревателем. Поэтому
давайте поговорим о системных классах.
Системных классов,
предоставляемых программисту интерпретатором, довольно
много. Среди них есть, например, класс Date, предназначенный
для работы со значениями даты и времени.
var d;
d = new Date
() ;
Только что
мы создали объект класса Date. Так как мы не передали
параметр в функцию конструктора этого класса, интерпретатор
поместил в этот объект значение текущей даты. После этого
можно, например, узнать номер дня недели:
var dayNumber;
dayNumber = d.getDay(};
Или выяснить
год:
var year;
year = d.getFullYear();
Некоторые методы
класса Date перечислены в табл. 13.1.
Как видите,
класс Date предусматривает полный набор методов для работы
со значениями даты и времени. Другие системные классы
также имеют достаточно большие наборы свойств и методов,
которые мы не будем здесь рассматривать.
Таблица
13.1. Некоторые методы класса Da te
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает цифру,
обозначающую день недели (0 — воскресенье, 1
— понедельник, 2 — вторник и т. д.)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает цифру,
обозначающую месяц (от 0 до 11)
|
|
|
|
|
|
|
|
|
|
Возвращает время
в виде количества миллисекунд, прошедших с полуночи
1 января 1 970 года
|
|
|
|
|
|
|
Системный класс
Math — другого рода. Он включает набор свойств и методов,
реализующих различные математические и тригонометрические
функции. Единственный его объект создается самим интерпретатором
JavaScript при запуске и уничтожается при завершении работы.
Так что вам не нужно самим создавать объекты этого класса.
Это как раз типичный случай системного объекта.
var f;
f = Math.sin(Math.PI);
В результате
вычисления вышеприведенного выражения в переменной f окажется
значение sin (я).
Существуют
также системные классы Number и string, служащие для хранения
данных соответственно числового и строкового форматов,
и несколько других системных классов, используемых значительно
реже.
Язык JavaScript
имеет одну любопытную особенность. Дело в том, что любая
переменная обычного типа данных может быть представлена
как объект какого-либо класса. Давайте, например, рассмотрим
следующий код:
var s, 1;
s = "JavaScript";
1 = s.length;
Здесь мы сначала
помещаем в переменную s строку "JavaScript",
а потом вызываем свойство length этой переменной. В таком
случае интерпретатор
считает переменную
s объектом класса string и беспрепятственно "пускает"
нас к свойству length этого класса, возвращающему длину
строки текста, которую мы и помещаем в переменную 1.
Аналогичный
"финт" можно проделать и с числовой величиной:
var a, s;
а = 16765247;
s = a.toString();
Здесь вызываем
метод toString класса Number, возвращающий строковое представление
числа.
Раньше говорилось,
что, помимо интерпретатора JavaScript, системные классы
могут представляться также и другими программами. К числу
этих самых "других" программ относится Web-обозреватель.
Его классы и системные объекты — это что-то особенное...
Объектная
модель документа (DOM)
А теперь настало
время поговорить о классах и объектах Web-обозревателя
подробнее.
Давайте посмотрим
на какую-нибудь Web-страницу. Что она собой представляет?
Фактически, иерархию элементов. Мельчайшие элементы страницы,
например текстовые абзацы, являются потомками более крупных
и сложных элементов, например, свободно позиционируемых
элементов. Свободные элементы, в свою очередь, могут находиться
в других свободных элементах или непосредственно в самой
странице. Получается весьма сложная многоуровневая структура,
в которой одни элементы зависят от других.
Описать такую
структуру можно с помощью объектов. Точнее, сложной иерархии
объектов, вложенных друг в друга и зависящих друг от друга.
Такая структура называется объектной моделью документа
(Document Object Model, DOM). Все современные
программы Web-обозревателей представляют Web-страницу
как иерархический набор объектов.
Какое преимущество
дает пользователям такой подход? Никакого. Все это рассчитано
только на программистов, разрабатывающих Web-сценарии.
Каждый из объектов,
из которых состоит Web-страница, имеет набор свойств,
предоставляющих доступ к значениям различных атрибутов
соответствующего тега, методов, с помощью которых этим
объектом можно манипулировать, и событий, которые могут
в этом объекте происходить и которые можно обрабатывать.
Это позволяет управлять практически любым элементом страницы,
самой страницей и даже самим Web-обозревателем, используя
специально написанные Web-сценарии.
Например, именно
таким образом на Web-странице создаются анимирован-ные
элементы (см. главу 12). Также с помощью сценариев
можно изменять цвета, параметры шрифта и даже само содержимое
элементов страницы. Более того, так можно управлять и
самим Web-обозревателем: открывать и закрывать вспомогательные
окна, перемещаться взад-вперед по списку "истории"
и даже принудительно загружать нужные Web-страницы без
участия пользователя.
Неужели вы
думали, что Web-программисты пройдут мимо такой возможности!
Если вы думаете, что пройдут, — вы плохо их знаете. Вспомните,
например, что говорилось в предыдущей главе об анимации.
Едва появилась возможность немного подвигать по странице
тем или иным рисунком, как Web-программисты эту возможность
реализовали. А сейчас анимацию поддерживают даже Web-редакторы,
и Dreamweaver тому пример.
Но хватит говорить
на отвлеченные темы! Давайте все-таки займемся объектной
моделью документа.
Сначала выясним,
каким образом можно получить доступ к нужному элементу.
Для этого ему необходимо дать уникальное имя. Делается
это с помощью атрибута ID или NAME. Атрибут ID поддерживается
практически всеми тегами HTML, атрибут NAME — только некоторыми.
К тегам, поддерживающим этот атрибут, относятся формы,
элементы управления, фреймы, гиперссылки и некоторые другие.
Но почему же
нельзя пользоваться только атрибутом ID? Все дело в проклятой
несовместимости Navigator 4.x и интернет-стандартов.
Старые версии Navigator используют атрибут ID только для
присвоения элементам стилей, а для задания имен признают
только атрибут NAME. Видите, какая морока!..
Дав с помощью
атрибутов ID или NAME элементу страницы уникальное имя.
вы можете обращаться к нему из сценария, вызывая его методы
и свойства. Интерпретатор сам найдет нужный элемент по
его имени. Для доступа к элементу страницы в Internet
Explorer используется синтаксис:
<Имя элемента,
заданное в атрибутах ID или NAME>.<Свойство или
метод>
Если же вы
пишете сценарий для Navigator 4.x, делайте так:
document["<Имя
элемента, заданное в атрибуте NAME>"].<Свойство
или метод>
Давайте приведем
небольшой пример, поясняющий вышесказанное.
<Р ID="para"
STYLE="color: #0000FF">Некий текст.</Р>
Сначала мы
создали текстовый абзац, назвали его para (обратите внимание
на значение атрибута ID) и присвоили ему встроенный стиль,
задающий цвет текста. Сейчас мы этот цвет текста изменим,
воспользовавшись Web-сценарием.
para.style.color
= "#FF0000";
Здесь нужны
дополнительные пояснения. Дело в том, что каждый элемент
страницы в объектной модели документа имеет внутренний
объект style, дающий доступ к его встроенному стилю. Обратиться
к этому объекту можно через одноименное свойство, что
мы и сделали. А уж объект style предоставляет доступ ко
всем атрибутам встроенного стиля через одноименные свойства.
В данном примере для получения доступа к значению атрибута
стиля color использовалось свойство color.
Вы можете изменить
выравнивание текста этого абзаца, обратившись к свойству
align:
para. align
= "center";
Свойство align
предоставляет доступ к значению атрибута ALIGN тега <р>.
К несчастью,
вышеприведенный пример будет работать только в самых последних
программах Web-обозревателей. Пресловутый Navigator 4.x
не позволяет изменять внешний вид и содержимое элементов
страницы после ее загрузки. Исключение составляют только
графические изображения, фреймы и слои.
А вот этот
код будет работать везде:
<IMG NAME="
some Image" SRC="image1.gif ">
document ["someImage"]
.src = "image2.gif";
Он меняет файл,
содержимое которого отображается в элементе графического
изображения, на другой. Для этого он присваивает иное
значение свойству src объекта somelmage, предоставляющее
доступ к атрибуту SRC тега
<IMG>.
Чтобы получить
доступ к самой Web-странице, воспользуйтесь системным
объектом document. В частности, вы можете задать цвет
гиперссылок, воспользовавшись свойством linkColor, предоставляющим
доступ к значению атрибута LINK тега <BODY>:
document.linkColor
= "#FF0000";
Оба рассмотренных
нами объекта представляют собой соответственно видимый
элемент страницы и саму страницу. Оба этих объекта были
созданы с помощью тегов HTML. Теперь же мы начнем рассмотрение
объектов, не являющихся элементами страницы. Это объекты
Web-обозревателя, не видимые пользователю.
Объект document
имеет внутренний объект location, предоставляющий доступ
к интернет-адресу страницы и различным его частям. Доступен
он через одноименное свойство. Воспользовавшись этим объектом,
мы можем узнать, с какого интернет-адреса была загружена
данная страница:
address = document.location.href;
выяснить имя
файла этой страницы:
filename =
document.location.pathname;
либо загрузить
другую страницу:
document.location.href
= "http://www.othersite.ru/otherpage.htm";
Объект window
представляет текущее окно Web-обозревателя либо текущий
фрейм, если страница загружена во фрейме. С помощью этого
объекта вы можете, например, закрыть это окно:
window.close();
или заменить
текст, отображаемый в его строке статуса:
window.status
= "Сейчас работает Web-сценарий!";
Объект window
имеет внутренний объект navigator, предоставляющий доступ
к самой программе Web-обозревателя. Доступен он через
одноименное свойство. Воспользовавшись этим объектом,
мы можем выяснить, например, версию программы:
version = window.navigator.appVersion;
или название:
programName
= window.navigator.appName;
Объект window
имеет внутренний объект history, предоставляющий доступ
к списку "истории" Web-обозревателя. Он доступен
также через одноименное свойство. Воспользовавшись этим
объектом, мы можем "путешествовать" по списку
"истории" вперед:
window.history.forward();
и назад:
window.history.back();
В объектной
модели документа существует также еще несколько других
объектов, но рассматриваться они не будут. Эти объекты
применяются достаточно редко и в весьма специфических
случаях. Если же вы все-таки захотите узнать побольше
об объектной модели документа, обратитесь к соответствующей
литературе.
|
