Видеокурсы, как создать сайт...

К учебнику по Adobe GoLive 6

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


ДИНАМИЧЕСКИЙ HTML (Часть 1)

Итак, изучив первые главы книги, мы научились разрабатывать HTML-документы, предназначенные для отображения в браузерах, и управлять стилевым оформлением элементов содержимого этих документов: Для получения еще более интересных возможностей следует сделать еще один шаг вперед — изучить технологию динамического HTML, которую чаетв*обозна-чают как DHTML (Dynamic HTML). Но прежде чем мы узнаем, в чем же суть, следует сделать маленькое техническое отстуялейие.
Существует такое понятие, как языки сценариев, или, как их еще называют, скриптовые языки. Среди них есть такие языки, которые распознаются и обрабатываются непосредственно браузером. Это VBScript и JavaScript. Язык VBScript ведет свою родословную от языка Visual Basic, развиваемого и поддерживаемого корпорацией Microsoft. Язык JavaScript унаследовал свои конструкции от языка Java, который усиленно продвигает корпорация Sun. Как мы уже говорили, эти скриптовые языки распознаются и обрабатываются непосредственно браузерами то есть в тело HTML-документа мы внедряем код программы, написанной иа одном из этих языков, а браузер сам выполнит все действия, предписанные этой программой.
Эта простота использования и обусловила столь высокую популярность скриптовых языков. Однако создатели программ-браузеров являются конкурентами по отношению друг к другу. И получилось так, что компания Netscape, являющаяся изготовителями достаточно популярного браузера Netscape Navigator, не включила в состав своего браузера блок обработки языка VBScript. Это был серьезный удар по конкуренту. Результатом его явился тот факт, что подавляющее число разработчиков использует для своих нужд язык JavaScript. Несколько позже компания Microsoft нанесла "ответный удар", создав новую и очень интересную технологию, опирающуюся на язык VBScript, но эти и последующие события уже выходят за рамки нашей книги.
Также производители браузеров поддерживают так называемые "объектные модели",, которые позволяют программам-скриптам управлять некоторыми свойствами браузеров. Причем перечень управляемых объектов достаточно обширен и позволяет разработчикам виртуозно оперировать огромным количеством свойств браузеров и выполнять некоторые действия, которые нельзя сделать сдомощьюг HTML.
Сплав HTML, CSS, скриптовых языков, объектных моделей браузеров и получил наименование DHTML. Вся эта технология, которая выглядит гораздо «ложнее, чем есть на самом деле, предоставила разработчикам поистине огромные возможности. Если говорить максимально точно и правильно, то DHTML— это технология;динамического изменения содержимого Web-страниц при помощи скриптовых языков.
Как видно из приведенного определения, изменения содержимого Web-страниц мы можем производить только при помощи скриптовых языков. А значит, нам необходимо будет узнать, как ими пользоваться. Как видно, для того, чтобы получить возможность пользоваться самыми заманчивыми средствами создания Web-страниц все-таки придется немного программировать. Однако, в следующих главах мы увидим, как Adobe GoLive позволяет создавать сценарии практически без программирования. Но все-таки следует знать, как работают скриптовые языки, чтобы иметь возможность контролировать процесс создания сценариев Adobe GoLive. Для работы мы выберем JavaScript, так как сценарии, написанные на этом языке, будут гарантированно выполнены любым браузером. Итак, прежде чем переходить к технологии DHTML, следует рассмотреть язык JavaScript. Этому и будут посвящены несколько следующих разделов этой главы.

Структура JavaScript

У любого языка программирования есть свои правила работы. Есть свои типы для переменных и ключевые слова этого языка. То есть, все то, что отличает этот язык от остальных его собратьев. Но все современные языки программирования практически одинаковы в своей структуре.
Как, собственно, действует программа-сценарий, внедренная в Web-страницу? В этот сценарии мы задаем самые различные реакции Web-страницы на какие-либо действия пользователя. Например, на нажатия кнопок, перемещение курсора мыши, работу с клавиатурой и так далее. На самом деле обрабатываемых событий достаточно много.
Как только произошло одно из указанных нами событий, браузер должен будет выполнить некоторую последовательность действий. Эта последовательность описывается при помощи блока ключевых слов и выражений. Подобные блоки кода называют процедурами. Помимо процедур в качестве блоков кода оформляются также функции. Их отличие в том, что процедуры
просто проделывают некоторые действия, а функции возвращают некоторое значение. Например, установить какой-либо цвет шрифта для абзаца — это процедура, а вычислить синус числа, являющегося вертикальной координатой верхнего левого угла графического изображения, — это уже функция.
В языке JavaScript заранее определены некоторые простейшие процедуры. Предопределенные заранее процедуры называются операторами. Также введены наиболее распространенные функции, но они особого наименования не получили. Так и остались функциями.
Для того, чтобы нам оперировать какими-либо числами, строками и прочими объектами, используются переменные. Переменная — это просто контейнер для хранения какого-либо значения. При этом значение переменной мы в любой момент можем изменить. В JavaScript используется несколько различных типов переменных. Мы можем создавать переменные, содержащие числовые значения, строки и логические выражения. При этом явно обозначать эти типы не нужно. Интерпретатор программы сам правильно обработает их. Достаточно лишь присвоить переменной какое-либо значение.
Объявлять переменные мы можем в любом месте программы, но никто еще не отменял понятие "хорошего стиля программирования". Хороший стиль программирования предусматривает, что все переменные, используемые в процедуре или функции, будут объявлены в самом начале этой процедуры или функции. При этом следует использовать ключевое слово var. Строго говоря, оно не является обязательным. Но если у нас будут совпадать наименования переменных в различных процедурах, используемых совместно, то может возникнуть совпадение имен. Применение ключевого слова var позволяет браузеру правильно обрабатывать переменные в таких случаях.
Рассмотрим маленький пример.

var х=1;
var з="Строка";|
var t=True;

В каждой строке мы объявляем одну переменную. Так как мы сразу присваиваем им некоторые значения, то переменные обретают соответствующий тип. Переменная х содержит число, переменная s — строку, а переменная t предназначена для хранения логических значений.
Числовые значения мы можем записывать в программе в десятичном виде, как целые, так и дробные. Также мы можем записывать числа в восьмеричной и шестнадцатеричной системе исчисления. Числа в восьмеричной записи должны начинаться с нуля, а в шестнадцатеричной — с сочетания Ох. Если перечисленных способов записи чисел нам не хватает, мы можем воспользоваться экспоненциальным способом записи числа.
Если нам необходимо присвоить переменной строковое значение, то это значение мы должны поместить между кавычками, двойными или одинарными. В качестве строки может быть использован и один символ.
Переменные логического типа обычно используются в операторах выбора. Логических значений, естественно, существует всего два: True— истина, и False — ЛОЖЬ.
Если же мы объявляем переменную, но не хотим сразу присваивать ей какого-либо конкретного значения, можно присвоить ей неопределенное значение обозначаемое ключевым словом null. Таким образом, объявление переменной без присваивания значения и типа выполняется при помощи следующего фрагмента кода:

varr-x=null;

При работе с языком JavaScript всегда следует помнить, что он, в отличие от HTML, чувствителен к регистру символов. И если в написании ключевого слова допустить хотя бы одну ошибку, то интерпретатор языка, встроенный в браузер, не сможет выполнить всю программу.
Также следует обратить внимание на, то что каждое действие программы заканчивается символом точки с запятой. При помощи этого символа мы отделяем операторы и процедуры друг от друга, что позволяет браузеру правильно обрабатывать программу.
Язык JavaScript является языком со слабой типизацией. Это означает, что любая переменная в процессе работы программы может изменить свой тип. Так, например, при помощи следующего фрагмента кода мы превращаем переменную строкового типа в число:

var x="100";
х-х+1;

В первой строке этого фрагмента мы объявили переменную с наименованием х, которой присвоили текстовое значение, состоящее из трех символов. Во второй строке мы к этому строковому значению прибавили число. В результате этого действия в переменной х стало находиться числовое значение равное ста однрму.
Необходимо отметить, что в наименованиях переменных мы можем использовать только символы латинского алфавита, цифры и подчеркивания. Начинаться наименование должно только с буквенного символа. Пробелы в наименованиях переменных использовать нельзя.
Естественно, JavaScript, являясь достаточно развитым языком программирования, позволяет использовать в программах не только единичные переменные, но и массивы. По сути дела, массивы являются объектами, но это их свойство скрыто так глубоко, что нам не стоит о нем задумываться. Достаточно знать, как объявлять массив и обращаться к его элементам.
В языке JavaScript мы можем не только объявлять массив, но и динамически менять его размеры по мере выполнения программы. Следовательно, под массив должен выделяться некий фрагмент адресного пространства памяти. Подобное выделение всегда производится при помощи ключевого слова new.
А при помощи ключевого слова Array мы указываем интерпретатору программы, что выделяется пространство именно под массив. Поэтому типичное объявление массива выглядит следующим образом:

my_array= new Array!); my_array(9)=0;

Этой конструкцией мы объявляем массив с наименованием my_array. При этом мы во второй строке инициализируем один из элементов только что объявленного массива, присваивая ему нулевое значение. Интерпретатор будет считать этот элемент последним, и наш массив изначально будет содержать десять элементов, так как нумерация элементов массивов в JavaScript начинается с нуля. А для того, чтобы обратиться к какому-либо элементу, после наименования массива в скобках указать порядковый номер этого элемента, как это и показано в нашем примере.
Впрочем, если это необходимо, мы можем указать размер массива при его объявлении. Для этого надо после ключевого слова Array в скобках указать предполагаемое количество элементов массива. В этом случае объявление нашего массива из десяти элементов будет выглядеть следующим образом:

my_array= new Array(10);

Во всех наших примерах объявления переменных мы использовали знак равенства, который на самом деле является одним из основных операторов. Это оператор присваивания. С его помощью мы можем переменным присваивать некие значения. Всего в языке JavaScript^есть шесть операторов присваивания. Рассмотрим их.

  • Оператор = осуществляет стандартное присваивание. Пример его применения мы уже видели.
  • Оператор += осуществляет присваивание со сложением. Таким образом, выражение х+=у эквивалентно к*х+у.
  • Оператор -= осуществляет присваивание с вычитанием. Таким образом, выражение х-=у эквивалентно х=х-у.
  • Оператор *= позволяет производить присваивание с умножением. Выражение х*=у равносильно выражению х=х*у.
  • Оператор /= производит присваивание с делением. Выражение х/=у равносильно выражению х=х/у.
  • Оператор %= позволяет осуществлять присваивание остатка целочисленного деления. Таким образом, выражение х%=у эквивалентно х=х%у.

При рассмотрении операторов присваивания мы видели, что большинство из них является комбинацией обычного оператора присваивания с каким-либо арифметическим оператором. Естественно, язык JavaScript обладает достаточно обширным набором базовых операторов, выполняющих стандартные действия с переменными. Нам никак нельзя обойтись без их рассмотрения.

  • Оператор + осуществляет сложение! 2+3 равно 5.
  • Оператор — осуществляет вычитание. 3-2 равно 1.
  • Оператор * осуществляет умножение. 2*3 равно 6.
  • Оператор / осуществляет деление, 6/3 равно 2.
  • Оператор % выделяет остаток от целочисленного деления. 9%4 равно 1.
  • Унарный оператор ++ осуществляет операцию инкремента, т. е. увеличения на едонвду.13-и- равно 4.
  • Унарный оператор -- производит декремент, т. е. уменьшение на единицу, 3-- равно 2.
  • Оператор & эквивалентен оператору AND. Эти операторы производят операцию побитового "И". При этом числа, к которым применяется этот оператор, автоматически переводятся в двоичную систему, и к ним поразрядно применяется данная операция. 2&5 равно 0.
  • Оператор | эквивалентен оператору OR. Эти операторы производят поразрядную операцию двоичного "ИЛИ". 2|5 равно 7.
  • Оператор ^ эквивалентен оператору хок. Эти операторы производят операцию побитового сложения по модулю 2. 3^2 равно 1.
  • Оператор « осуществляет побитовый сдвиг двоичного представления числа влево на один разряд. 2« равно 4.
  • Оператор » осуществляет побитовый сдвиг двоичного представления числа вправо на один разряд. 2» равно 1.
  • Оператор &s осуществляет операцию "И" для логических значений. True && False равно False.
  • Оператор I I осуществляет операцию "ИЛИ" для логических значений.
  • True I I False равно True.
  • Оператор ! осуществляет операцию отрицания для логических значений.
  • False paвно True.

Вот такие операции мы можем использовать в своих программах на языке JavaScript. Список не маленький, но чаще всего для нужд DHTML мы будем обходиться арифметическими и логическими операторами.
Любая программа, и наши скрипты не. являются исключением, практически никогда не может действовать без неких управляющих конструкций, которые и позволяют реализовать логику программы. К таким управляющим конструкциям относятся циклы, условные операторы и операторы-переключатели. Все они достаточно просты, и применение их не вызовет каких-либо затруднений.
Условный оператор позволяет выполнять некие действия в том случае, если выполняется заданное разработчиком условие. Приведем маленький пример.

if (х—2) х*=7;

Данный фрагмент Кода проверяет значение переменной х. Если это значение равно двум, то оно увеличивается в семь раз. Но умножение это будет производиться тогда и только тогда, когда значение переменной равно двум. Проверка логических условий, как мы видим, производится при помощи ключевого слова if.
Интуитивно конструкция условного оператора ясна, но на самом деле его использование может быть и не таким простым, как в приведенном только что примере. В том случае, если нам надо проверить несколько логических условий сразу, каждое условие заключается в скобки, и к ним применяются логические операторы, которые мы рассмотрели несколько ранее. Так, если нам необходимо проверить выполнение сразу двух условий, то наш пример будет выглядеть следующим образом:

if <x«2) S5 (у<0) х*=7;

В этом случае умножение происходит только тогда, когда переменная х равна двум, а значение переменной у меньше нуля.
Условия проверки могут задаваться я»бо при помощи переменных логического типа, либо при помощи операторов сравнения, список которых приведен в табл. 7.1.

Таблица 7.1. Операторы сравнения

Оператор
Значение
==
Точное равенство
!=
Неравенство
>
Больше
>=
Больше или равно
<
Меньше
<=
Меньше или равно

Естественно, эти операторы могут использоваться для сравнения, как числовых значений, так и строковых. Если необходимо сравнить строковые значения по соотношениям "больше — меньше", то сравнение производится посимвольно, начиная с начала строки. Чем символ ближе к концу алфавита, тем он "больше".
При выполнении условия программа интерпретатор выполняет только одно действие. А что делать, если надо выполнить не один оператор, а несколько? В этом случае необходимо все эти операторы объединить в единый блок. Для этого достаточно заключить все операторы в фигурные скобки, Я как это показано в следующем примере:

if (х-=2) {х*-7; у-1};

Все рассмотренные нами примеры, применения условного оператора построены на допущении, что при выпонении некоторого условия необходимо лишь выполнить некий блок кода. Но может возникнуть ситуация, когда при выполнении условия мы должны выполнить один блок кода, а если условие не выполняется— другой. В этом случае наш оператор сравнения приобретет следующий вид:

if (х==2) {х*=7; у=1) . 1
else {у=х};

Естественно, каждый блок действий может при необходимости включать в себя и другие условные операторы. Подобным образом создаются процедуры обработки сразу нескольких условий.
Однако, если есть целый список условий, каждому из которых мы должны сопоставить некоторый программный блок, следует воспользоваться оператором-переключателем. Но в нем выполнение тех или иных команд увязываются со значением какой-либо переменной, и нельзя использовать логические условия и уж тем более их комбинации. Вот как выглядит типичный пример применения оператора-переключателя:

switch (х) { 1
case 1: {Блок, выполнявшей, если х=1) , т
case 2: (Блок/ выполняемый, если х=2) J
default: {Блок, выполняемый, во всех остальных случаях
}

Смысл действия данного оператора достаточно ясен, но есть один подводный камень. В том случае, если переменная, относительно который мы и выстраиваем весь блок, равна некоторому значению, которое мы указали в операторе, то будет выполнен весь код от начала выполнения до конца оператора switch, я То есть, в нашем примере, если значение переменной х равно единице, то сначала будет выполнен блок кода для этого значения, затем блок, выполнявмый, если значение переменной равно двум, а потом еще и блок, используемый для всех остальных значений. Чтобы избежать этого, следует в конец каждого Шока кода вставлять оператор break. Данный оператор принудительно выводит управления за пределы конструкции, в которой он использовался. С его использованием типичный пример использования оператора-переключателя выглядит приблизительно следующим образом:

switch (х) { I
case 1: (y=x*2+z; break} . I
case 2: {y=x*3+z; break} I
default: {y-0; z=0) .1
}

Как видно, в последнем блоке, который выполняется для случаев, не перечисленных в операторе явно, мы не использовали оператор break, так как это блок кода является последним, и после его выполнения управление все равно выйдет за пределы оператора-переключателя.
Достаточно часто при написании своих скриптов нам потребуется использовать циклические конструкции, когда один и тот же блок кода необходимо выполнить определенное количество раз или выполнят* его до тех пор, пока 'некоторое логическое условие истинно. Обычно при помощи подобных циклов производится обработка массивов однородных данных, О массивах мы узнаем немного позже, а сейчас рассмотрим вопросы применения циклов в качестве управляющих конструкций.
В JavaScript предусмотрено три вида циклов. Стандартный цикл, когда некоторый блок кода выполняется определенное количество раз, реализуется при помощи оператора for. Наиболее типичный пример его использования выглядит следующим образом:

suro=0;
for (i=0; i<10; i-н-)
if my_array(i)>0 then sum»=sum+my_array (i) ;

В этом примере мы при помощи цикла производим суммирование всех положительных элементов массива с наименованием my_array, содержащим десять элементов. Как видно, для оператора for мы указываем некоторую дополнительную информацию в скобках. В скобках мы обязательно должны использовать три оператора. Все они связаны с переменной, которая является счетчиком повторений цикла. В нашем случае мы использовали переменную с наименованием 1. Первый оператор предназначен для присваивания переменной-счетчику стартового значения. Второй оператор является логическим условием. Цикл будет выполняться до тех пор, пока это условие истинно. А третий оператор обычно устанавливает операцию, которая будет выполняться каждый раз при завершении очередного прохода тела цикла. Чаще всего это операция соответствующего изменения значения переменного счетчика. Так как в нашем случае отсчет идет от нуля до девяти включительно, то мы используем инкремент, т. е. за один проход тела цикла, значение нашей переменной-счетчика увеличивается на единицу.
В нашем примере тело цикла представляет собой всего один условный оператор. Но если необходимо будет использовать не один оператор, а несколько, то их придется объединить в единый блок, при помощи уже знакомых нам фигурных скобок.
Также следует отметить, что для экстренного выхода из цикла, когда он еще не должен был закончиться штатным образом, мы можем использовать оператор break, который, как мы помним, выводит управление за пределы текущей логической конструкции. А если нам необходимо при наступлении каких-либо условий пропустить один шаг цикла, но при этом все-таки продолжить его .выполнение, стоит воспользоваться оператором continue, который выводит управление за пределы текущего блока. Но при этом оно будет оставаться в действующей логической конструкции. Как мы уже говорили ранее, в JavaScript существует три вида циклов. Один из них мы уже рассмотрели. Теперь мы узнаем, как действует цикл с предусловием. Если мы попробуем при помощи этой управляющей конструкции воспроизвести пример действия предыдущего цикла, то получится следующий фрагмент кода:

sum=0; 1
i=0; I
while (i<10) 1
'{ if my^_array(i)>0 then sum»&um+«ty_array(i); I
i++;} I

Как видно, данный вариант цикла реализуется при помощи оператора while, в котором указывается логическое условие. До тех пор, пока это условие будет истинным, тело цикла будет повторяться. Видно, что стартовое
значение переменной-счетчика мы задаем самостоятельно. И позаботиться
об ее изменении тоже нужно самим.
Последняя вариация циклической управляющей конструкции — цикл с постусловием — реализуется также при помощи оператора while, но на этот < раз с ним вместе должен использоваться оператор do. И наш цикл приобретет следующий вид:

sum=0; !
i=0;
do { . '.
if my_array (i)>0 then suro5»sum-t;my_array{i) ;
i++;-} while (i<10);

Как и прежде, тело цикла будет выполняться раз за разом до тех пор, пока логическое условие, указанное в операторе while, будет оставаться истинным. Но в чем же тогда разница между циклами с предусловием и с постусловием? Дело в том, что в первом из этих циклов логическое условие проверяется перед прохождением тела, цикла, а во втором — после. Таким образом, даже если логическое условие еще до старта не является истинным, цикл с постусловием все равно будет выполнен как минимум один раз.
И на этом список управляющих логических конструкций заканчивается. Но нам их будет вполне достаточно для того, чтобы реализовать любые свои замыслы.
Для создания программ-скриптов нам необходимо уметь создавать свои функции. Мы уже говорили, что функции, по сути дела, это те же процедуры, толька возвращающие некое значение. Следует отметить, что в качестве своих блоков действий мы можем в JavaScript создавать только функции. Но так как функции являются просто более общим вариантом процедур, то это не будет ограничением.
Вся программа-скрипт составлена из различных функций. Каждая функция выполняется интерпретатором в тот момент, когда наступает некоторое активизирующее событие. О событиях мы поговорим позже, а сейчас посмотрим, как объявляются функция в языке JavaScript. Простейший пример объявления функции выглядит следующим образом:

function my_first_function (name)
{alert("Hello, world! My naffie is "+name); return("Your name is "+na»e);}

Итак, из приведенного примера видно, что функция объявляется при помощи ключевого слова function, затем указывается ее наименование, и в скобках перечисляются переменные, которые передаются этой функции для работы. После этого пишется сам код функции, обязательно заключенный в фигурные скобки. Наша функция выводит окно сообщения с указанным текстом при помощи оператора alert.
Мы уже говорили, что любая функция должна возвращать какое-либо значение, даже если мы в этом и не нуждаемся. Таково обязательное условие. Возврат некоего значения, осуществляется при помощи ключевого слова return, которое одновременно обозначает, что последовательность действий, заложенных в нашу функцию, закончилась.
Завершая ознакомление со структурой языка JavaScript следует рассмотреть возможность работы с переменными составных типов и объектами. Но для того, чтобы рассматривать их, следует все же узнать, что такое объекты, и в чем их отличие от составных переменных. На самом деле, что такое объект понять достаточно легко, но вот точно и просто объяснить, что это, собственно, такое, не в пример сложнее. Можно сказать, что объект — это некоторая сущность со своим набором свойств и списком действий, которые могут выполняться по отношению к ним. Подобные действия назыаются методами, и их набор и механизм действия специфичны для каждого объекта. Также для каждого объекта определен набор возможных событий. Иными словами, объект заключает в себе как переменные, так и возможные действия над ними, определяемые происходящими событиями.
В JavaScript отсутствует возможность создавать свои собственные объекты, мы можем лишь пользоваться уже готовыми- Все доступные нам объекты так или иначе работают с Web-страницей, в которую внедрена программа на языке JavaScript. Так, основным объектом является объект с наименованием window, который позволяет работать с окном просмотра Web-страницы в браузере. А уже в этот основной объект в качестве вложенных частей входят другие объекты, такие как screen, связывающий нас с экраном монитора пользователя, или document, открывающий доступ к содержимому самой Web-страницы. Полностыо эти объекты мы рассмотрим позднее.
Как уже было отмечено, мы не можем самостоятельно создавать свои объек ты. Но в этом и нет необходимости.
Мы можем объявлять переменные составного типа. Так, например, мы можем создать свой тип для комплексных чисел, которые содержат мнимую и действительную части. То есть, подобные комплексные числа описываются при помощи пары обыкновенных чисел. А создать переменную подобного комплексного типа достаточно просто. Для этого необходимо использовать специализированную функцию-конструктор. Выглядит этот процесс сле-дующим образом:

function complex(х, у)
{ this.x=x;
this.y«»y;
return this;
my_complex •» new complex (5,2);

В этом примере мы видим, как создается функция-конструктор для комплексного типа чисел. А после кода функции следует объявление и инициа-лизация переменной при помощи оператора new, который используется для выделения памяти под создаваемые экземпляры объектов и составных пере-менных. Доступ к отдельным компонентам составной переменной осуществляется указанием их имени через точку, как

my_compiex.x. 1

И на этом мы заканчиваем рассмотрение структуры языка JavaScript. В этой главе мы постоянно будем пользоваться им для создания эффектов DHTML, поэтому все неясности будут устранены по ходу работы.

Объектная модель

В предыдущем разделе, мы уже отмечали, что JavaScript потдерживает возможность работы с объектами, и что набор объектов фиксирован, т. е. разработчик не может добавлять в него свои объекты. Все доступные объекты JavaScript представлены в виде разветвленной иерархии. Так же необходимо отметить, что все эти объекты относятся именно к окну просмотра HTML- документа в браузере. Каждый объект является совокупностью его свойств, методов и событий. Методы, как мы уже говорили — это некие действия, которые можно произвести с данным объектом, а события — это различные ситуации, возникающие при работе с объектом и адекватно отображающие изменения его состояния. Для каждого объекта набор его свойств, методов и событий уникален, поэтому все объекты необходимо рассмотреть максимально детально.
Иерархия объектов для программ-скриптов является единственной возможностью динамически управлять отображением Web-страниц. Фактически, это интерфейс доступа к внутренним механизмам браузера. И для того, что бы наши скрипты, реализующие возможности DHTML, могли работать в любом браузере, очевидно необходимо, чтобы объектные модели для всех браузеров совпадали. К сожалению, полного соответствия не произошло, и каждый браузер пользуется своей объектной моделью. Но различаются эти модели только в незначительных деталях, основные характеристики одинаковы для всех браузеров. По сути дела, производители браузеров лишь попытались добавить нечто свое к общепринятой модели.
В этой книге мы не будем рассматривать эти дополнения и изменения, и на т. е. веская причина. Еще несколько лет назад достаточно часто можно было встретить в Сети Web-странице с надписями "Эта Web-страница лучше всего отображается в браузере", и указывалось наименование того браузера, которому благоволил разработчик Web-страницы. К счастью, в последнее время в среде разработчиков все-таки распространилось мнение о недопустимости подобного поведения, поэтому всегда необходимо стараться создать Web-страницу, которая бы максимально одинаково отображалась во всех основных браузерах. Исходя из этих же соображений, мы рассмотрим только стандартную объектную модель DHTML, которая одинаково функционирует в каждом браузере.
Прежде чем мы перейдем к непосредственному рассмотрению объектов, следует сделать некоторое уточнение. Дело в том, что некоторые объекты в Web-страницах могут существовать только в единственном экземпляре, как например, объект window, олицетворяющий окно просмотра, а некоторых объектов может быть много. Так например, графические изображения, внедренные в состав содержимого Web-страницы, создают такое множество однотипных объектов. Подобные множества называются коллекциями, и больше всего похожи на массивы однотипных объектов. Доступ к какому-либо конкретному элементу коллекции производится при помощи указания наименования коллекции и порядкового номера интересующего нас элемента.
А вот теперь настало время перейти к непосредственному рассмотрению всего множества объектов, которым мы можем пользоваться для добавления некоей динамики и интерактивности к статичному содержимому наших Web-страниц.
Как мы не раз уже говорили, основой всего является объект window, который позволяет нам оперировать с окном просмотра браузера. Естественно, данный объект обладает набором свойств, методов и событий, который мы и рассмотрим. Следует отметить, что в этой части главы мы устроим лишь "обзорную экскурсию" по объектной модели, а примеры использования объектов рассмотрим немного позже. А сейчас вернемся к объекту window. Как известно, пользователь может открывать несколько копий программы-браузера, а значит, мы будем иметь несколько объектов window. Если при этом в качестве еодежимого этих окон используются Web-страницы, взаимное вязанные между собой гиперссылками, то объекты window также связи-j ваются друг с другом при помощи некоторых свойств. Сейчас как раз при-j шло время рассмотреть все свойства объекта window.

  • Свойство client содержит информацию о браузере, используемом пользователем для просмотра данной Web-страницы. Свойство имеет статус "только для чтения", т. е. его значение не может быть изменено в процессе действия программы-скрипта.
  • Свойство status содержит текстовую строку,отображающуюся в строке; статуса в нижней части окна программы-браузера.
  • Свойство defauitstatus содержит текст, отображаемый в строке статус по умолчанию,
  • Свойство opener является ссылкой на окно просмотра, которое было открыто из текущего окна. То есть, в данном свойстве находится ссылка на дочернее окно;
  • Свойство parent является ссылкой на родительское окно,, из которого открыли текущее.
  • Свойство пате содержит наименование текущего окна.
  • Свойство self содержит ссылку на данное окно, в сущности, при помощи этого свойства объект ссылается сам на себя.
  • Свойство top содержит ссылку на самое первое окно в иерархии связанных друг с другом окон.
  • Свойство closed имеет логический тип и сообщает, закрыто или открыто данное окно.
  • diaiogArguments — переменная^параметр, или массив параметров, передаваемых диалоговому окну.
  • diaiogHeight — высота диалогового окна в пикселах.
  • diai.ogwidth — ширина диалогового окна в пикселах.
  • dialogic — вертикальная координата верхнего левого угла диалогового окна в пикселах.
  • diaio.gi.ef t — горизонтальная Координата верхнего левого угла диалогового окна в пикселах.
  • returnvalue — применяется в модальных окнах диалогов, содержит значение, возвращаемое родительскому окну:,

Помимо свойств, естественно, имеется и список методов. Они реализованы в виде функций.

  • Метод alert(messagestringy создает окно сообщения. Текст собщения передается к параметре.
  • Метод confirm(messagestring) отображает подтверждающее окно, текст которого передан в функцию в качестве параметра. Окно отличается от предыдущего наличием дополнительной кнопки Отмена.
  • Метод snowModalpialogturl* -(jeader, attributes) создает модальное диалоговое окно. В параметрах передается URL отображаемого файла, заголовок окна и атрибуты создаваемого окна.
  • Метод open(uri, header, attributes) открывает новое окно браузера. В параметрах передается URL HTML-документа, который будет отображаться в этом окне, заголовок нового окна просмотра и его параметры.
  • Метод close () закрывает данное окно.
  • Метод setTimeout (expression, time, language) создает таймер, который вычислит выражение или выполнит действие спустя определенное время. Выражение или код действия передается в параметре expression, язык, на котором оно записано — в параметре language, а время, по истечении которого произойдет вычисление выражения или выполнение инструкций,— в параметре time. Функция возвращает идентификатор, который предоставляет возможность управлять созданным таймером впоследствии. Одновременно можно создавать несколько таймеров с уникальными идентификаторами.
  • Метод setinterval (expression, time} по своему действию очень похож на предыдущий метод setTimeout, но в отличие от него производит заданное действие не единожды, а многократно, каждый раз перед выполнением делая паузу, длительность которой указана в параметре time.
  • Метод ciearTimeout(timerid) ликвидирует созданный таймер. В качестве параметра передается идентификатор ликвидируемого таймера, Который был получен как возвращаемое значение функции setTimeout.
  • Метод clear interval (timerid) ликвидирует повторяющийся таймер, созданный при помощи метода setinterval. В качестве параметра передается идентификатор ликвидируемого таймера.
  • Метод focus () устанавливает фокус ввода на данное окно. Одновременно инициализируется осбытне onfocus.
  • Метод blur () принудительно сбрасывает фокус ввода с окна. Инициализируется событие onbiur.
  • Метод pjrompt(message, defa«lt_value) создает ОКНО с полем ввода и текстом подсказки. Текст подсказки передается в параметре message, а значение, находящееся в поле ввода по умолчанию — в параметре

    default_value.

  • Метод execscript (script, language) выполняет блок кода, который передается в параметре script, а в параметре language — язык, на котором он написан.
  • Метод scroll (mode) позволяет принудительно показывать и скрывать) полосы прокрутки в окне просмотра браузера. Для отображения полос | необходимо передать в параметре значение yes, для выключения — по.

Необходимо более тщательно рассмотреть метод open, при помощи которой создается новое окно просмотра браузера. Параметры uri и header достаточно понятны, а параметр attributes'мы не упомянули. Он представляет собой текстовую строку, в которой через запятую записываются пари "свойство—значение". Подобным способом указывается внешний вид создаваемого окна. Перечислим атрибуты создаваемого окна просмотра.

  • fullscreen — открыть окно в полноэщшшом режиме или нет. Для полноэкранного режима необходимо значение i или yes, в ином случае — о или по. Эти значения используются и во всех других параметрах, которые указывают на наличие или отсутствие некоего свойства у вновь создаваемого окна просмотра.
  • status — регулирует наличие строки состояния* Значения параметра полностью совпадают со значениями предыдущего параметра.
  • menubar — указывает на использование строки меню в новом окне просмотра.
  • scrollbars — будут ли присутствовать полосы прокрутки.
  • resizable — будет ли пользователь иметь возможность изменять размеры нового окна просмотра.
  • toolbar — регулирует наличие инструментальной панели.
  • width — указывает ширину окна просмотра. В качестве значения указывается количество пикселов.
  • height — указывает высоту нового окна просмотра. Как и в предыдущем параметре, значение указывается в пикселах.
  • top — вертикальная координата верхнего левого .угла окна просмотра.
  • left — горизонтальная координата верхнего левого угла окна просмотра.

Приведем пример использования метода open. Следующая конструкция предназначена для создания нового окна просмотра браузера, в котором будет отображаться основная .страница поискового ресурса www.yahoo.com. В заголовке будет находиться строка "Поисковая система", а само окно будет иметь панель быстрых кнопок и строку меню. Верхний левый угол окна будет находиться в точке с координатами (100; 100), а его размеры — 400 пикселов по вертикали и горизонтали: Выглядеть вызов метода для создания такого окна будет следующим образом:

open("http://www.yahoo.com", "Поисковая система", "menubar=yes, toolbar-yes, top-100, left-lQO, height=400, width=400"!;

У метода showModaioiaiog в качестве третьего параметра тоже передается строка атрибутов создаваемого диалогового окна. Но они не совпадают с набором свойств окна просмотра браузера, поэтому их придется перечислить отдельно.

  • diaiogTop —вертикальная координата верхнего левого угла диалогового окна.
  • diaiogLeft — горизонтальная координата верхнего левого угла диалогового окна.
  • diaiogHeight — высота диалогового окна в пикселах.
  • diaiogwidth — Ширина диалогового окна в пикселах.
  • center — указывает на то, будет или нет диалоговое окно выводиться в центре экрана. Значения могут быть yes или по.
  • border — позволяет выбрать внешний вид границы окна. На выбор предоставляется две вариации: "толстая" и "тонкая" границы. Указание конкретного варианта производится при помощи одного из двух возможных параметров: thin или thick.
  • font — предназначендяя установки шрифта, .который будет использован в оформлении диалогового окна. В качестве значения параметра используется выражение CSS.
  • font-family —Устанавливает семейство применяемого шрифта.
  • font-style — позволяет указывать стиль применяемого шрифта, т. е. используемое начертание: полужирный, курсив, и т. д.
  • font-weight — указывает величину используемого шрифта.
  • font-variant — модификатор, указывающий, какие буквы будут использоваться в шрифте: строчные или прописные, чей размер не будет превышать размер строчных букв.
  • help — регулирует наличие кнопки помощи в верхнем правом углу окна, на строке заголовка. Могут быть использованы значения yes или по.
  • minimize — указывает на наличие или отсутствие кнопки минимизации окна в верхнем правом углу диалогового окна.
  • maximize — указывает на наличие или отсутствие кнопки распахивания окна на весь экран в верхнем правом углу диалогового окна.

Формат указания атрибутов для диалогового окна немного отличается от порядка указания атрабутов окна просмотра. В данном случае они записываются не через знак равенства, а черед двоеточие. Приведем пример:

ShowModalDialog("dial.html", "New dialog", "border:thin, minimize-yes, center:yes, font-family:Courier, font-style: Bold");

При помощи этого метода мы создаем диалоговое окно, в котором будет отбражатьея содержимое HTML-файла dialhtml, в заголовке будет находиться текстовая отрока New dialog, диалоговое окно будет установлено
в центре экрана, его можно будет свернуть* а использоваться в нем будет моноширинный шрифт Courier с полужирным начертанием.
А теперь перейдем к рассмотрению списка событий, которые возникают при работе с объектом window. В состав данного объекта входит девдаь событий.

  • Событие onblur возникает в тот момент, когда текущее окна просмотра теряет фокус ввода, т. е. становится неактивным.
  • Событие onfocus инициируется:в момент получения окном фокуса ввода. То есть, по своей сути данное событие противоположно предыдущему.
  • Событие onerror возникает, если происходит ошибка при загрузке какого-либо ресурса, входящего в состав отображаемой Web-страницы. Чаще всего событие применяется для обработки ошибок загрузки графики и видеовставок.
  • Событие onload инициируется сразу после того, как заканчивается загрузка Web-страницы в браузер.
  • Событие onhelp инициируется, если пользователь нажал клавишу <F1> или кнопку оперативной справки.
  • Событие onscroii возникает, когда пользователь использует прокрутку содержимого окна просмотра при помощи линеек прокрутки.
  • Событие onresize возникает, когда пользователь изменяет размеры окна просмотра.
  • Событие onbefpreunioad инициируется перед выгрузкой Web-страницы из браузера с маленькой временной задержкой, что позволяет провести некоторые операции, такие, как сохранение данных.
  • Событие onunioad инициируется уже непосредственно в момент выгрузки Web-страницы из браузера.

На этом список свойств объекта window заканчивается. Таким образом, мы полностью рассмотрели структуру этого основного объекта. Теперь самое время перейти к другим объектам, которые детально описывают иные механизмы браузера и содержимое Web-страницы.
Как мы говорили, объект window является основой всей объещной иерархии, и все остальные объекты входят в его состав. Эти дочерние объекты мы можем разделить на два типа. Одни из них открывают доступ к частям отображаемой Web-страницы, а другие позволяют нам оперировать отдельными элементами самого браузера. Вот с этих объектов мы и начнем.
Объект location предоставляет нам доступ к URL текущей Web-страницы. Прежде всего, мы рассмотрим описание его свойств.

  • Свойство href — содержит URL текущего документа. Если в процессе работы программы-скрипта этому свойству придается новое значение в виде URL, то браузер автоматически загружает в окно просмотра документ, находящийся по этому адресу.
  • Свойство hostname — имя Web-сервера, указанное в URL, не включающее в себя явно указанный номер порта, на котором функционирует этот Web-сервер.
  • Свойство host — имя Web-eepaepa» объединенное с номером порта, если тот указан явно.
  • Свойство port — номер порта, на котором функционирует Web-сервер, чье имя указано в URL данного документа.
  • Свойство pathname — путь к HTML-документу в файловой системе сервера.
  • Свойство hash — имя локальной гиперссылки, не включающее в себя знак #.

Как видно, при помощи этих свойств мы можем полностью разобрать URL документа на составляющие. Что делать с ними потом, каждый решает для себя сам.
У объекта location есть и методы. Их всего три

  • Метод reload позволяет осуществлять принудительню перезагрузку данного HTML-документа.
  • Метод replace (иг 1) загружает в окно просмотра браузера новый HTML-документ, URL которого передается в метод в качестве параметра. При этом изменяется и обвект history.
  • Метод assign (uri) переназначает URL для данного окна просмотра, но принудительного перехода по новому адресу, который передается в качестве параметра, не производится.

Каких-либо специфичных событий объект location не имеет.
Адреса всех посещенных Web-ресурсов записываются в один список, и перемещение между ними осуществляется при помощи кнопок Back (Назад) и Forward (Вперед) любого браузера. Этот список доступен при помощи объекта с наименованием history. Обычно применяется три метода этого объекта.

  • Метод forward () загружает следующий документ из списка загруженных ранее документов, фактически, аналог нажатия удаленным пользователем кнопки Forward (Вперед) в своем браузере.
  • Метод back о загружает предыдущий документ из общего списка. Дублирует кнопку браузера Back (Назад).
  • Метод go (offset) смешается по списку на величину, которая передается в параметре и загружает документ с данным URL. При положительном значении параметра смещение происходит вперед по списку, при отрицательном — назад.

Длина списка URL посещенных Web-страниц хранится в свойстве length.
Теперь рассмотрим объект navigator, предназначенный для получения данных об используемом, удаленным пользователем, браузере. Существование этого объекта обусловлено тем, что в результате "браузерных войн" основные браузеры Internet Explorer и Netscape Navigator по-разному интерпретируют некоторые тега HTML. У них не совпадают иерархии объектов, используемых в сценариях. Именно потому, если мы хотим создать HTML-документ, который будет максимально адекватно отображатся в обоих основных браузерах, мы должны получить информацию об используемом браузере, и на ее основании формировать страницу. Свойства объекта navigator перечислены в следующем списке.

  • Свойство appName содержит наименование браузера.
  • Свойство appveysion — номер версии браузера.
  • Свойство appCodeName — наименование технологии, на которой работает браузер, часто называемой "движком" (engine).
  • Свойство cookieEnabied указывает на то, разрешено ли сохранение cookie в данном браузере.
  • Свойство us Agent содержит наименование браузера в том виде, в котором оно передается при помощи HTTP-протокола.

В состав Объекта navigator ВХОДИТ еще Два Объекта; mimeTypes И plugins, которые на самом деле являются не просто объектами, а коллекциями. Коллекция mimeTypes содержит различные типы MIME (способы кодирования передававемой информации), которые используются данным браузером. А при помощи коллекции plugins мы можем получить доступ к любому расширению браузера, установленному в качестве дополнения к стандартной поставке.
Помимо знания используемого браузера необходимо иметь информацию об установленном разрешении монитора удаленного пользователя. Для этого мы можем использовать свойства объекта screen.

  • width — разрешение экрана по горизонтали.
  • height — разрешение экрана по вертикали.
  • coiorDepth — количество битов, используемых для указания цвета каждого пиксела. То есть, по сути это, глубина цвета.
  • update interval—частота обновления экрана.

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

  • Свойство aitKey указывает, нажата или нет клавиша <Alt> в данный момент.
  • Свойство button показывает состояние кнопки мыши в момент запроса.
  • Свойство canceiBubbie запрещает событиям проходить вверх по объектной иерархии. Дело в том, что у многих объектов существуют одинаковые события, и в момент возникновения подобного события, оно сначала обрабатывается у активного объекта, а затем это же событие могут обрабатывать все родительские объекты. Если же значение свойства canceiBubbie установить в True, то это событие будет обработано лишь один раз и не будет передано по объектной иерархии вверх.
  • Свойство ciientx содержит координату текущего объекта по горизонтали.
  • Свойство clientY содержит координату текущего объекта по вертикали.
  • Свойство fctrlKey указывает, нажата или нет клавиша <Ctrl> в данный момент.
  • Свойство fromEiement указывает на элемент, с которого пользователь увел курсор мыши. Данное свойство обычно применяется при обработке событий onmpuseout И onmouseover.
  • Свойство keyCode содержит код ASCII клавиши, нажатой пользователем.
  • Свойство of fsetx содержит смещение по горизонтали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.
  • Свойство offsetY содержит смещение по вертикали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.
  • Свойство reason является индикатором успешной передачи данных. Если передача не удалась, в данном свойстве указывается причина.
  • Свойство returnvalue содержит значение, которое будет возвращаться данным событием.
  • Свойство screenx содержит абсолютную горизонтальную координату курсора мыши в пикселах относительно самого экрана.
  • Свойство зсгеевУ содержит абсолютную вертикальную координату курсора мыши в пикселах относительно экрана.
  • Свойство shi ftкеу указывает, нажата или нет клавиша < Shift> в данный момент.
  • Свойство srcEiement ссылается на исходный, самый нижний объект в иерархии, при работе с которым было инициировано данное событие.
  • Свойство srcjFiiter используется только вместе с событием onf iiterexchange и содержит указатель на графический фильтр, который и породил это событие.
  • Свойство toEieraent указывает на элемент, на территории которого находится в данный момент курсор мыши.
  • Свойство type содержит тип иницииррванного события. На самом деле, в качестве значения данного свойства используется наименование события без первьк двух символов "on".
  • Свойство х содержит горизонтальную координату курсора мыши.
  • Свойство у содержит вертикальную координату курсора мыши.

Объект event является именно информационным объектом, поэтому большинство его свойств имеют статус "только для чтения". Мы можем изменять значения только двух свойств: keycode и returnvaiue.
Теперь мы перейдем к рассмотрению объектов, которые описывают саму отображаемую Web-страницу. Основой этой ветви объектной иерархии является объект с наименованием document, который открывает нам доступ к операциям с Web-страницей, отображаемой в окне просмотра браузера. Естественно, в силу того, что данный объект является основой всей соответствующей ветви объектной иерархии, он обладает достаточно обширным списком свойств, .методов и событий. Начнем рассмотрение объекта document С его свойств.

  • Свойство activeEiement содержит ссылку; на тот элемент управления Web-страницы, который в данный момент обладает фокусом ввода.
  • Свойство alinkcoior содержит обозначение цвета, которым отображаются активные гиперссылки.
  • Свойство bgcolor позволяет определять цвет фона загруженной Web-страяйаы.
  • Свойство body в качестве значения содержит все наполнение Web-страницы, находящееся между тегами <body> и </body>. Естественно, свойство имеет статус "только для чтения".
  • Свойство cookie содержит строку cookie, т. е. некоей информации» которая при зафузке Web-страницы записывается на локальном компьютере удаленного пользователя. Цри помощи технологии "cookie" разработчики Web-страниц могут сохранять некоторую информацию о посетителе страницы на его же компьютере и, таким образом, персонализиро-вать работу Web-сайта с пользователями.
  • Свойство domain содержит доменное имя сайта, с которого была подучена загруженная Web-страница.
  • Свойство fgcoior содержит определение цвета, применяемого для отображения текста по умолчанию.
  • Свойство lastModified содержит, строку с рсазанием даты последнего изменения данной Web-страницы.
  • Свойство linkdoior содержит обозначение цвета, которым отображаются ссылки, еще не активированные пользователем.
  • Свойство location задает полный URL загруженной в браузер Web-страницы.
  • Свойство parentwindow указывает на родительское окно, из которою было открыто текущее окно.
  • Свойство readystate показывает текущий статус загрузки данного HTML-документа. В качестве значения данного свойства применяется число от единицы до четырех. Значение "1" указывает, что документ еще не инициализирован и загрузка его в браузер не началась. Значение "2" обозначает, что загрузка началась, но еще не закончилась. Значение "з" указывает, что загрузка закончена, но документ еще не отображен в окне просмотра. Значение "4" обозначает, что Web-страница полностью загружена, отображена в браузере и полностью готова к работе.
  • Свойство referrer содержит URL страницы, которая ссылается на текущую Web-страницу^ загруженную в браузер. То на ту, с которой пользователь и перешел на текущую страничку,
  • Свойство title содержит заголовок данной Web-страницы, заключенный между тегам» <title> и </titj«>.:. »
  • Свойство URL содержит полный URt'Web-страницы, загруженной в браузер. Фактически дублирует свойство location, но у иных объектов может отличаться от него.
  • Свойство viinkcoior определяет цвет, которым отображаются ссылки, уже посещенные пользователем.

На этом список свойств объекта document заканчивается, и мы переходим к рассмотрению его Методов.

  • Метод createEiement (teg) срздает HTML-объект, наименование тега которого задано в качестве параметра данного метода. Так, если мы хотим создать на нашей Web-странице дополнительное графическое изображение, следует ВЫПОЛНИТЬ Метод document. createEiement {*IMG").
  • Метод clear о очищает содержимое Web-страниц.
  • Метод close () закрывает документ» ас ним и текущее окно просмотра.
  • Метод eiententrrcmiPoint(x,y) возвращает HTML-объект,который находится в точке с координатами, переданными методу в качестве параметров.
  • Метод execcommand(command) выполняет некую операцию, код которой, передан в качестве параметра, над выделенной областью Web-страницы.
  • Метод open (type) создает новый документ, mime-тип которого передается в качестве параметра и открывает новое окно просмотра для отбраже-ния создаваемого документа. Метод обычно применяется для создания Web-страниц с динамически создаваемым содержимым, поэтому в качестве параметра передается строка "text/html".
  • Метод queryCommandEnabled(command) ПОЗВОЛЯеТ определять, МОЖНО ЛИ выполнять данную команду над выделенной областью Web-страницы.
  • Метод queryCcOTnandindetermfcommand) сообщает, какой статус имеет данная команда.
  • Метод queryCoramandstate (command) возвращает в качестве своего значе-ния.текущее состояние данной команды. Может использоваться для контроля над выполнением переданных исполняемых инструкций.
  • Метод queryeoramandsupported (command) указывает, поддерживается ли данная команда браузером пользователя.
  • Метод queryCoraaandText (command) возвращает текстовое выделение, к которому применяется команда, переданная методу в качестве параметра.
  • Метод write (text) записывает в тело документа новый HTML-код, который передается в качестве параметра. Таким образом можно динамически формировать содержимое Web^cfpammsi без использования CGI-приложений.
  • Метод writein (text) позволяет записывать в тело документа HTML-код, но при этом дописывает в конце добавляемого блока символ перевода каретки.

Как видно, практически все методы объекта document предназначены для динамического формирования его содержимого. Немного позже мы увидим, как это делается, а пока перейдем к рассмотрению списка событий, которые могут возникнуть при работе с данным объектом.

  • Событие onftf terupdate возникает, когда пользователь при работе с формой, размещенной на Web-странице, отослал свои данные на сервер, и тот успешно принял и обработал их.
  • Событие onBeforeUpdate инициируется в том случае, если пользователь ввел данные в форму, но вместо их отправки попытался выгрузить страницу из браузера.
  • Событие onclick происходит в момент, когда пользователь производит на документе одиночный щелчок мышью.
  • Событие onDbiciick возникает в момент двойного щелчка мышью на одном из элементов загруженной Web-страницы.
  • Событие onDragstart инициируется в тот момент, когда пользователь начинает перетаскивать при потйющи мыши какой-либо элемент загруженной Web-страницы.
  • Событие onError инициируется щда наличии ошибки в сценарии или в случае возникновения ошибки.,при передаче каких-либо данных, например, графических изображений.
  • Событие onHeip возникает в тот момент, когда пользователь нажимает клавишу <F1>.
  • Событие onKeyDown возникает, когда пользователь нажимает какую-либо клавишу. Какая именно клавиша была нажата, мы можем узнать при помощи объекта event.
  • Событие onKeyPress постоянно генерируется в то время, когда пользователь нажал какую-либо клавишу и еше не отпустил ее.
  • Событие опкеуир возникает, когда пользователь отпускает ранее нажатую клавишу.
  • Событие onLoact инициируется в тот момент, когда загрузка HTML-документа в браузер полностью заканчивается.
  • Событие onMouseoown возникает в тот момент, когда пользователь нажимает какую-либо кнопку мыши.
  • Событие onMouseMove постоянно генерируется при перемещении пользователем мыши.
  • Событие onMbuseOut возникает, когда пользователь уводит курсор мыши с данного объекта.
  • Событие onMouseOver возникает при попадании курсора мыши на объект.
  • :Событие onMouseup инициируется в тот момент, когда пользователь отпускает заранее нажатую кнопку мыши.
  • Событие oaReadystateChange инициируется каждый раз, когда по каким-либо причинам изменяется значение свойства readystate.
  • Событие onseiectstart инициируется в тот момент, когда пользователь начинает выделять мышью некую часть Web-страницы.

На этом заканчивается список событий, которые могут возникать при работе с объектом; document. Мы рдсемотреяи полностью структуру этого объекта. Но мы уже говорили j что он является "родителем" для многих других объектов, которые более детально описывают элементы Web-страниц. Необходимо рассмотреть и их.
Мы уже видели, что у -объекта document существует свойство body, которое содержит все тело Web-страницы. Но страницы с фреймовой структурой вообще не содержат тег <body>. И здесь мы можем работать с коллекцией фреймов, которая носит наименование frames. Мы уже говорили, что коллекции, по сути, являются массивами, состоящими из объектов. Так, если нам надо получить доступ к какому-либо фрейму, мы можем сделать это либо при Помощи его порядкового номера, дибо при помощи его наименования. Так, например, если самый верхний фрейм нашей Web-страницы носит наименование "topframe", то обратиться к нему мы можем при помощи двух эквивалентых конструкций:

window.frames(0)
window,frames{"topframe")

Как мы помним, нумерация в массивах, а, следовательно, и в коллекциях, начинается с нуля. Но для циклической обработки коллекции нам необходимо будет знать не только стартовый номер, но и общее количество элементов, входящих в состав данной,коллекции. Поэтому следует знать, что для каждой коллекции существует служебное свойство length, которое содержит количество элементов в коллекции. Следует помнить, что количество элементов и порядковый номер последнего элемента — разные вещи, так как нумерация открывается нулем.
Из приведенного примера видно, что для доступа к элементу коллекции стоит сначала указать родительский объект. Наименования объектов разделяются точками.
Каждый элемент коллекции frames функционально эквивалентен объекту window, поэтому обладает всеми его свойствами, методами, событиями и встроенными объектами, исключая объекты, обеспечивающие доступ к внутренним механизмам браузера, такие как history и navigator. Следовательно, каждый элемент коллекции frames имеет встроенный объект document со всем его содержимым.
Объект document, как мы знаем, полностью описывает Web-страницу, отображаемую в окне просмотра браузера или фрейма. Следовательно, в состав этого объекта должны входить другие объекты и коллекции, которые смогут предоставить нам доступ к любому HTML-блоку, к любому тегу. Рассмотрим список этих объектов и коллекций с кратким описанием каждого из них.

  • Коллекция links содержит все гиперссылки и области, сформированные тегами <агеа> на данной Web-странице.
  • Коллекция forms обеспечивает яеступ ко всем формам данного HTML-документа. Соответственно, каждый элемент этой коллекции содержит в качестве своих составных частей объекты, позволяющие обращаться к различным органам ввода данных, из которых и состоит форма.
  • Коллекция anchors содержит все закладки на странице, доступ к которым осуществляется при помощи гаперссылок.
  • Коллекция linages предназначена для хранения объектов графических изображений, внедренных в состав содержимбго Web-страницы.
  • Коллекция scripts обеспечивает доступ ко всем программам-сценариям, которые были вставлены в код HTML-документа при помощи тега <script>.
  • Коллекция applets содержит все внедренные объекты, такие как аппле-ты, элементы ActiveX, графические изображения, видеоклипы и любые объекты, обрабатываемые и отображаемые при помощи расширений браузера.
  • Коллекция piugins содержит объекты, связанные со всеми внедренными элементами, обрабатываемыми расширениями браузера.
  • Коллекция stylesheets предоставляет нам доступ ко всем стилдевым таблицам, внедренным в данный HTML-документ.
  • Коллекция filters содержит все графические фильтры, Примененные к содержимому данной Web-етраницы. Графические фильтры не уиаследо-ванны из HTML, они являются исключительной прерогативой DHTML.
  • Колекция all содержит ссылки на все теги и объекты, внедренные в состав содержимого данной Web-страницы.
  • Объект selection позволяет работать с выделенной частью содержимого Web-страницы- Обычно это выделение производит пользователь.
  • Объект textRange представляет собой блок текста, при помощи которого обычно разработчик динамически формирует текстовое содержимое HTML-документа.

Мы перечислили основные составные гчасги объекта document. Конечно, одного их перечисления не достаточно для того, чтобы начать с ними работать. Но несколько позже, в следующих разделах данной главы мы будем разбирать примеры задач, решаемых с ломощью этих объектов, а следовательно, нам придется тщательно рассмотреть их структуру.
А сейчас пора перейти к рассмотрению; событийной модели DHTML и оза-накомиться с примерами применения программ-скриптов.

Обработка событий

В предыдущем разделе этой главы мы изучили список событий, присущий объектам document и window. Уже, исходя из их наименования и кратких описаний было ясно, что они инициируются при некоторых действиях пользователя или возникновении некоторых заранее определенных ситуаций. Любое действие, производимое при помощи программ-скриптов DHTML, может произойти только в ответ на некоторое событие, благо их перечень охватывает все мыслимые ситуации, возникающие при работе с Web-страницей. Рассмотрим простейший пример создания программы-скрипта, реагирующей на какой-либо событие. Например, при щелчке пользователя мышью на содержимом текстового абзаца, программа изменит цвет символов, которыми этот текст отображен. Для этого мы должны создать HTML-документ, код которого указан в следующем листинге.

Листинг 7. 1

<!bOCTYPE HTML PUBLIC "-//W3C7/DTD HTML 4. 01У/ЕЫМ "http://www.w3.org/TR/html4/strict.cltcl">
<h.tjai> • ....
<head>
<^1?1е>Иэменяемый «BeT</title> . <scrif>t language»" javascript"> <i' — •. • • • :; • • •.
fuftotion changecolor ( ) ?
{pi. style. color-"blue";
.}. . , • . . ; - -,. V ;
" //"> ' ' . . ^ ' . ..'•;'•.,
</sc?ipt> </liead> .
<body>
<p id«»"pl" onClick-"ch,angecolor () "xfont з1ге«5>Стррка TeKCTa</fontx/p>
</body> </html>

Этот маленький пример позволяет очень наглядно продемонстрировать основные принципы работы DHTML (рис. 7.1). Начнем мы с правил внедрения скриптов в HTML-документ.
Мы уже знаем, что скрипт должен размещаться в заголовке HTML-документа между тегами <head> и </head>. Сам код оформляется при помощи тегов ocript> и </script>. Пропуск закрывающего тега явяшся достаточно распространенной ошибкой начинающих разработчиков, поэтому всегда следует осуществлять контроль присутствия закрывающих парных тегов. В данном случае, если пропустить закрывающий тег, браузер будет считать весь код, размещенный после тега <script>, программой и соответственно, не будет отображать его,

Рис. 7.1. Внешний вид HTML-документа после работы программы-скрипта

Между дарой.тегов <script> размещен код самой программы. Для того чтобы устаревшие версий браузеров, не поддерживающие технологию программ-сценариев, не видели этот код, он обязательно оформляется как комментарии.
Теперь ненадолго отвлечемся от кода программы и перейдем к рассмотрению тела HTML-документа. Основным его элементом является один текстовый абзац, объявленный при помощи тега <р>. В коде листинга видно, что помимо самого тега мы использовали и дополнительные параметры. Одним из них является идентифицирующий параметр id, при помощи значения которого мы задаем уникальный идентификатор данного элемента содержимого Web-страницы. Только при помощи этого уникального идентификатора мы и смогли избирательно применить динамическое оформление текста.
Также в состав открывающего тега <р> входит дополнительный параметр, который мы не рассматривали в первой главе. Дело в том, что официально в HTML не существует подобного параметра. В качестве параметра мы записали наименование события, при возникновении которого управление перейдет к программе-скрипту..Подобные способы записи событий как параметров присущи именно технологии DHTML В качестве значения этого параметра мы записали выполняемый код. В нашем случае это был всего лишьлызов функции, которая была заранее определена в заголовке HTML-документа. Сама функция в данном случае также была чрезвычайно проста. Мы использовали всего лишь один оператор:

р1. style. со1ог="bluе" ;

Понятно, что левая часть оператора является .обращением к некоему объекту, но при рассмотрении объектной иерархии нам не встречался объект с наименованием "pi". Более того, очевидно, чтон связан с текстовым абзацем, который имеет точно такой же идентификатор.
Дело в том, что в Состав объекта document входит неявный объект с общим наименованием element. Объект мы называем "неявным", -потому что в качестве него может использоваться любой, я подчеркиваю, любой элемент Web-страницы, который создается при помощи какого-либо тега. При этом наименование объекта будет совпадать с идентификатором искомого элемента, т. е. соответствовать значению параметра id.
Для того, чтобы изменить свойства отображения даняого элемента, мы использовали объект style, являющийся дочерним по отношению к объекту element. Этот объект позволяет использовать всю мощь стилевых таблиц без прямого их создания. В коде Web-страницы мы не указали явно цвет шрифта, которым отображается текст абзаца. Но в программе-скрипте мы применили свойство color, которое позволяет регулировать цвет символов текста, и при выполнении функции цвет шрифта был переопределен.
Следует обратить внимание, что действие скрипта было выполнено в ответ на некое событие, порожденное действиями пользователя. Еще раз повторюсь, что технология DHTML полностью ориентирована именно на события. Подобный ставь, программирования обычно называют "событийно-ориентированным". Именно поэтому для овладения технологией DHTML в, полной мере необходимо досконально разбираться в принципах возникновения событий и их обработки.
Так же достойна внимания концепция "конвейера событий" в DHTML. Суть этой концепции достаточно проста. Мы знаем, что в HTML одни элементы могут находиться внутри других. Например, абзац, порождаемый тегами <р> и </р>, может находиться .внутри ячейки таблицы. Сами ячейки находятся внутри отдельных строк таблицы, а те, в свою очередь, сами содержатся в таблице, порожденной тегами <tabie> и </tabie>. Теперь посмотрим, что произойдет, если пользователь произведет одиночный щелчок мышью по этому абзацу. Абзац, естстественно, инициирует событие onclick. Но ведь абзац находиться в ячейке, следовательно, пользователь щелкнул и по ячейке. И сама ячейка тоже инициирует событие onclick, а за ней точно также поступит элемент строки таблицы и вся таблица. И так очередь дойдет до основного элемента body.
При этом, если для всех или некоторых элементов, через которые прошло это событие, были определены функции, выполняемые в ответ на щелчок мыши, то они все будут выполнены. Если же разработчику необходимо обрабатывать событие только в рамках того_ элемента, где оно произошло, не отправляя вверх по объектной иерархий, следует воспользоваться одним из свойств элемента event. Мы уже рассматривали этот объект и упоминали его свойство canceisubbie, которое отменяет перемещение события вверх по объектной иерархий. Поэтому, если бы мы в нашем скрипте захотели установить обработку события только для одного элемента, прерывая передвижение события вверх по объектной иерархии, наш скрипт выглядел бы следующим образом:

<script laguage="javascript">
<!—
function changecolor { )
(pi. style. color="blue";
window. event , cance!Bubble**Txue;
</script>

Как видно, в этом случае мы лишь присвоили логическое значение "Истина" данному свойству. Этого достаточно для того, чтобы отменить обработку данного события всеми вышестоящими элементами. В предыдущем разделе мы уже рассматривали струкутру объекта event «знаем, что даный объект при помощи своих свойств предоставляет детальную информацию обо всех событиях, которые входят в состав технологии DHTML.
Следует также упомянуть, что различные элемента! Web-страниц могут реагировать на разные события. Возможный список событий определяется функциональностью каждого конкретного элемента Web-страницы. Чтобы однозначно определить, какой тег какими событиями обладает, приведем таблицу соответствий.

Таблица 7.2 Теги и события

Тег
Описание
Список поддерживаемых событий
<а>
Гиперссылка
onblur, onclick, ondblclick, ondragstart, onerrorupdate, onf interchange, onfocus, onhelp, onkeydown, onkeyptess, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<address>
Специализированное форматирование текста
Onclick, ondblclick, ondragstart, onhelp, bnkeydoWn, onkeypress, onkeyup, onmoaaedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<applet>
Внедряет в состав Web-страницы Java-апплет
Onafterupdate, onbef oreupdate, onblur, onclick, ondataavailable, ondatasetelianged, ondatasetcomplete, ondblclick, ondragstart, onerrorupdate, onfocus, onhelp, orikeydowri, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onresize, onrdwenter, onrowexit, onselectstart
<area>
Создает активную область-гиперссылку в сегментированной графике
onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
<b>
Выделяет текст полужирным шрифтом
onclick, ondblclick, ondragstart, onfilterchange, onhelp, orikeydown, onkeypress t onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<big>
Увеличивает размер шрифта на единицу
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, .onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
<blockquote>
Специализированное форматирование текста
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<body>
Определяет содержательную часть Web-страницы
onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstarti onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit» onscroll, onselectstart
<button>
Создает кнопку
onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypieess, onkeyup, onmousedown, onmousemove, onmbuseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
<caption>
i
Создает
заголовок
таблицы
i onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
<center>; •
Центрирует блок содержимого
«ftelick, onecibiclick, ondragstart, ®af ilterchange, ©iihelp, onkeydown, Qnkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, 'onselectstart
<cite>
Специализированное форматирование текста
onclick, ondl&cllck, ondragstart, onfilterchange, оп&Цр, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<code>
t
Специализированное форматирование текста
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<dd>
Элемент списка
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, omaousedown, . onmousemove, onmouseout, onmouseover, onmotiseup, onselectststtr й ' •
<dfn>
Специализированное форматирование текста
onclick, ondblclick, ondragstart, ©lifilter change, onhelp, onkeydown, oakeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
i <div>
Группировка эле- ментов содержимо- го Web-страницы
onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, cuifojGus, onhelp, onkeydown, onk®ypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart . •
<dl>
Создание списка
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, .onmouseover, onmouseup, onselectstart
<dt>
Создание элемента списка
onclick, ondblolick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, oninousedown, onmousemove, onmouseout, omnouseover, onmouseup, onselect start
<em>
&№рализдрованное форматирование текста
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<embed>
Внедрение в состав содержимого Web-страницы объектов различных типов
onblur, onf ocus
<font>
Определение шрифта для отображения текста
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<form>\
Определяет форму в HTML-документе
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress,, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselectstart, onsubmit
<hl> — <h6>
Создают заголовки
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<hr>
Отображает горизонтальную линию
onbeforeupdatte, onblur, onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onraouseup, onresize, onrowenter, on-rowexit, onselectstart
<i>
Выделяет текст курсивом
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<img>
Вставляет графическое изображение
onabort, onaf terupdate, onbef oreupdate, onblur, onclick, ondblclick, ondragstart, onerror, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
<input>
Создает орган ввода информации
onaf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onselect, onselectstart
<kbd>
Специализированное форматирование текста
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<label>
Создает текстовую метку для некоторых органов ввода информации
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<li>
Создает элемент списка
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<link>
Объявляет связь между различными HTML-документами
onerror, onload, onreadystatechange
<listing>
Специализированное форматирование текста
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<map>
Создает карту сегментированной графики
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<object>
Внедряет какой-либо объект в HTML- доку мент
onafterupdate, onbeforeupdate, onblur, onclick, ondataavailable, ondataset changed, ondatasetcomplete, ondblclick, ondragstart, oneror, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onreset, onresize, onrowenter, onrowexit, onselectstart
<ol>
Создает нумерованный список
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<P>
Задает текстовый абзац
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<plaintext>
Устанавливает специализированное форматирование текста
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<pre>
Устанавливает специализированное форматирование текста
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<s>
Отображает зачеркнутый текст
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<sup>
Устанавливает специализированное форматирование текста
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, ons elect start
<table>
Создание таблицы
onaf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
<tbody>
Обозначает основной раздел таблицы
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<td>
Объявляет ячейку таблицы
onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onselectstart
<textarea>
Создает многострочное поле текстового ввода
onafterupdate, onbeforeupdate, onblur, onchange, onclick, ondblclick, ondragstart, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselect, onselectstart
<tfoot>
Создает нижнюю часть таблицы
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<th>
Объявляет строку заголовка таблицы
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<thead>
Создает область заголовка таблицы
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<tr>
Объявляет строку таблицы
onuf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onselectstart
<tt>
Устанавливает специализированное шрифтовое оформление
onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<u>
Отображает подчеркнутый текст
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<ul>
Создает маркированный список
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
<var>
Устанавливает специализированное форматирование текста
onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart

Но иногда нам необходимо получить более детальную информацию о теку щей ситуации. При этом стандартных событий может быть мало. И здеа разработчик может воспользоваться объектом event. Его структуру мы уж( обсуждали в предыдущем разделе этой главы. Теперь мы можем на пример наглядно увидеть механизм использования этого элемента. Мы уже говори ли, что подавляющее большинство свойств этого объекта носят сугубо ин формативный характер, и потому доступны в режиме "только для чтения" Возможный способ работы с ними показан в листинге 7.2.

Листинг 7.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>06pa6oTKa co6biTMu</title> <script language^"javascript"> <!--
function info() {
s="'Координаты курсора мыши " + window.event.screenX + "," + window.event.screenY;
alert(s); }
window.document.ondblclick=info; //--> </script> </head> <body>
<p><font з!ге=5>0бычная Web-CTpaHMua</fontx/p> </body> </html>

Разберем структуру приведенного скрипта. В самом начале программы мы объявляем функцию с наименованием info. После кода этой функции мы вставили строку следующего вида:
window.document.ondblclick=infо;
При помощи этой конструкции мы указываем, что функция info будет выполняться в том случае, если пользователь произведет двойной щелчок мышью в окне просмотра браузера. Так как мы не можем использовать для этих целей какой-либо тег содержимого Web-страницы, нам приходится использовать событие Объекта document.

Рис. 7.2. Окно браузера с результатом отображения файла, приведенного в листинге 7.2

Теперь рассмотрим механизм действия функции info. Функция состоит из двух операторов. Первый из них присваивает переменной некую строку, формируя ее из заданного текста и двух значений объекта event, которые указывают координату курсора мыши в момент совершения пользвателем двойного щелчка (рис. 7.2). Второй оператор при помощи ключевого слова alert отображает модальное окно с текстом, который является значением переменной из первого оператора.
Мы увидели в действии основные механизмы обработки событий в DHTML. Теперь мы можем создавать свои программы-скрипты, ориентированные на работу с событиями, возникающими при работе пользователя с нашими HTML-документами. Однако мы знаем, какие события соответствуют тому или иному объекту, но мы указали смысл далеко не для всех возможных событий. Пришло время это сделать. В табл. 7.3 перечислены все события, используемые в технологии DHTML, и ситуации, в которых они инициируются.

Таблица 7.3. События в DHTML

Событие
Описание
onabort
Инициируется, когда пользователь принудительно прерывает загрузку данных
onaf terupdate
Возникает при окончании передачи данных
onbeforeunload
Инициируется перед выгрузкой страницы
onblur
Утеря фокуса ввода объектом
onchange
Инициируется при изменении содержимого объекта
onclick
Происходит при одиночном щелчке мыши на объекте
ondataa vail able
Инициируется при получении данных из источника
ondataset changed
Возникает при изменении набора данных, на основе которого функционирует элемент
ondataset complete
Инициируется в тот момент, когда исходый набор данных становится полностью доступным для документа
ondblclick
Возникает при выполнении пользователем двойного щелчка мыши на элементе
ondragstart
Возникает в тот момент, когда пользователь начинает перетаскивать объект при помощи мыши
onerror
Инициируется в случае возникновения ошибки при передаче данных
one rr or update
Возникает при отмене изменения данных
onf ilterchange
Возникает при изменении состояния графического фильтра
onf ilterevent
Инициируется при окончании этапа действия графического фильтра
onfocus
Возникает при получении объектом фокуса ввода
onhelp
Возникает в тот момент, когда пользователь нажимает клавишу <F1>
onkeydown
Инициируется при нажатии пользователем какой-либо клавиши на клавиатуре
onkeypress
Инициируется при нажатии клавиши и ее удержании в на- жатом положении
onkeyup
Возникает, когда пользователь отпускает нажатую клавишу
onload
Инициируется, когда загрузка объекта полностью завершается
onmousedown
Возникает, когда пользователь нажимает кнопку мыши
onmousemove
Возникает, когла пользователь перемещает мышь
onmouseout
Инициируется в тот момент, когда пользователь уводит курсор мыши с пространства, занимаемого объектом
onmouseover
Инициируется в тот момент, когда пользователь перемещает курсор мыши в пространство, занимаемое объектом
onmouseup
Возникает, когда пользователь отпускает ранее нажатую кнопку мыши
onreadystatechange
Возникает при изменении свойства readystate
onreset
Возникает при нажатии пользователем на кнопку Reset, расположенную на форме
onresize
Инициируется в тот момент, когда пользователь изменяет размеры окна просмотра
onrowenter
Инициируется при изменении данных в строке, связанной с внешним источником данных
onrowexit
Инициируется перед тем, как данные в строке будут изменены источником данных
onscroll
Возникает, когда пользователь прокручивает содержимое Web-страницы в окне просмотра браузера
onselect
Возникает при изменении текущей выделенной области
onselectstart
Инициируется, когда пользователь начинает выделять область содержимого
onsubmit
Инициируется, когда пользователь нажимает на кнопку Submit, расположенную на форме, и отсылает данные из формы на сервер
onunload
Инициируется непосредственно перед выгрузкой страницы из окна просмотра браузера

Теперь, когда мы знаем, какие события соответствуют различным элементам Web-страницы, и в каких ситуациях эти события возникают, единственное, чего нам не хватает для того, чтобы создавать действительно разветвленные и гибкие программы-сценарии, — это то, какие свойства и методы присущи различным элементам Web-страниц. Об этом мы узнаем в следующем разделе.


Реклама: