Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках

В.В.ЗАХАРКИНА

JavaScript. Основы клиентского программирования

Санкт-Петербург 2007

1

Рекомендовано к изданию Кафедрой информационных систем в искусстве и гуманитарных науках Факультета филологии и искусств Санкт-Петербургского государственного университета

Захаркина В. В. JavaScript. Основы клиентского программирования: Учебное пособие. — СПб.: Ф-т филологии и искусств СПбГУ, 2007. — 73 с. Учебное пособие соответствует третьей части курса «Введение в специальность» в рамках учебной программы специальности «Прикладная информатика в искусстве и гуманитарных науках». Курс рассчитан на четыре семестра и призван сформировать представление о базовых клиентских и серверных веб-технологиях и дать навык их использования. Учебное пособие посвящено основам применения алгоритмического языка JavaScript при создании интерактивных веб-документов. Обсуждаются основные конструкции языка и методы использования объектной модели документа (DOM) в клиентских сценариях. Изложение сопровождается примерами, приводятся фрагменты программного кода, реализующие актуальные задачи клиентского программирования.

Подготовка и издание учебного пособия осуществлено в рамках проекта СПбГУ «Инновационная образовательная среда в классическом университете» (Приоритетный национальный проект «Образование»).

© В. В. Захаркина, 2007 © Факультет филологии и искусств СанктПетербургского государственного университета, 2007 Отпечатано с готового оригинал-макета в секторе цифровой печати Института искусств Факультета филологии и искусств СПбГУ 199178 Санкт-Петербург, 10 линия В.О., д. 49. Подписано в печать 10.11.2007. Заказ № 44. Формат 60х84/16. Усл. печ. л. 4,75. Тираж 100 экз. 2

Разработка любой информационной системы предполагает рассмотрение целого ряда аспектов, так или иначе взаимосвязанных. Естественно, веб-ресурсы не являются исключением. Ограничим обсуждение тремя базовыми аспектами, оставив временно за бортом иные, крайне важные и интересные (разработка концепции дизайна, выбор технологий и инструментальных средств, удобство использования интерфейсов, эффективность сопровождения ресурса, проблемы продвижения ресурса и т.д.). Понимая, что все аспекты разработки веб-ресурса в идеале должны быть взаимосвязаны, сделаем акцент на трех основополагающих, без реализации которых нет предмета для обсуждения остальных: • Задание структуры. • Определение параметров внешнего дизайнерской концепции. • Обеспечение функциональности.

отображения

в

рамках

Такое выделение трех основных аспектов актуально именно в контексте разговора об основах клиентского веб-программирования. Очевидно, иные акценты расставили бы менеджер веб-проектов, аналитик, вебдизайнер, профессиональный программист и специалист по usability. И, естественно, все были бы правы. Но сейчас у нас своя предметная область.

Итак, технологии, обеспечивающие первые два сформулированных аспекта, ясны: • Структура веб-документа определяются средствами HTML. • Параметры внешнего отображения задаются при помощи CSS. А вот вопросы обеспечения функциональности явно могут быть разделены на две категории: • Функциональность на стороне клиента. • Обработка данных и динамическое серверными средствами.

формирование

ответа

Язык JavaScript обеспечивает программирование клиентских сценариев. С его помощью можно создавать разнообразные варианты меню и навигационных панелей, открывать дополнительные окна с заданными параметрами, реализовывать интерактивные тесты для 3

самопроверки, и т.д. Интересной сферой применения является и программирование различных декоративных эффектов. Будучи вполне полноценным алгоритмическим языком, JavaScript лишен возможностей работы с файловой системой. Это совершенно естественное ограничение продиктовано соображениями безопасности клиентского компьютера. JavaScript является интерпретируемым языком (для алгоритмических языков подобного типа часто употребляют еще и термин «язык сценариев»). Заданные в текстовом формате операторы JavaScript анализируются встроенным в браузер и либо выполняются либо по мере интерпретации, либо в ответ на наступление некоторых событий. Сценарии JavaScript могут быть сохранены во внешних файлах, присоединяя которые к документам веб-ресурса можно использовать общие библиотеки, описывающие глобальные переменные, объекты и функции Строго говоря, JavaScript не является истинно объектноориентированным языком, однако объектный тип данных в нем определен. Более того, основную мощь этому языку придает объектная модель, описывающая специфическое множество объектов, сопоставленных элементам HTML-документа.

Основные конструкции JavaScript Примечания к синтаксису •

JavaScript - регистрозависимый язык. Чувствительны к регистру идентификаторы переменных, имена функций, меток, ключевые слова. Все ключевые слова используют нижний регистр.

•

Идентификаторы могут содержать символы ASCII, цифры, символы подчеркивания "_" и символ доллара "$". Первый символ не должен быть цифрой. В качестве идентификаторов нельзя использовать ключевые и зарезервированные слова.

•

Операторы разделяются точкой с запятой, которую можно опустить, если оператор заканчивается символом новой строки.

•

Комментарии: // однострочный комментарий /* ... многострочный комментарий */ Комментарии удобно использовать и не «по прямому назначению», а для того, чтобы визуально отделить друг от друга фрагменты кода. Например, так: //----------------------------------------//получился удобный горизонтальный разделитель

•

Переменные не имеют строгой типизации. Объявляются с помощью оператора var, который можно опускать, за исключением объявления локальных переменных в теле функции. Возможно объявление c одновременной инициализацией, например: var s = 123

4

5

Типы данных

\t

символ табуляции (tab)

\'

'

\"

"

Числа

\\

\

Числа представляются в формате с плавающей точкой длиной 64 разряда (и целые тоже). Например,

\aaa

символ в кодировке Latin-1, заданный тремя восьмеричными символами aaa

\xaa

символ в кодировке Latin-1, шестнадцатеричными символами aa

\символ

для всех символов, отличных от вышеперечисленных, трактуется как указанный символ

В JavaScript поддерживаются следующие типы данных.

123 3.14169256 1e-12 015 // восьмеричное число начинается с 0 0xFC // шестнадцатеричное число начинается с 0x

Булевы величины Как и в других языках программирования, булевы величины представляются ключевыми словами true и false.

заданный

двумя

Для чего может понадобиться последняя конструкция? Например, какие-то (точно уже не помню) старые браузеры некорректно воспринимали в строках некоторые буквы кириллицы, выдавая при этом сообщения об ошибках сценария. И для того, чтобы, скажем, в строке s содержалось слово "филология", приходилось выполнять присваивание s = '\филология', после чего символ "ф" трактовался интерпретатором правильно. JavaScript предоставляет ряд функций для работы со строками.

Строки Строки заключаются в апострофы либо в двойные кавычки. Внутри строки ряд символов, непосредственно перед которыми стоит символ "\" , имеют специальное значение. Таким образом, пары символов, первым из которых является "\" , трактуются как один спецсимвол. код

значение

\b

удаление последнего предшествующего символа (backspace)

\f

подача страницы (feed)

\n

символ новой строки (new)

\r

возврат каретки (return)

6

Массивы Массив JavaScript представляет собой объект, доступ к значениям которого осуществляется с помощью индексов - целых чисел, начиная с нуля. Объявляется с помощью конструктора new, создающего новый экземпляр объекта Array. teachers = new Array(); инициализации teachers[0] = 'Pankratov'; элемента teachers[1] = 'Zakharkina'; элемента

// объявление без // инициализация 1-го // инициализация 2-го

7

days = new Array( 'Monday' , 'Tuesday' , 'Wednesday' ); // объявление с инициализацией JavaScript предоставляет ряд функций для работы с массивами.

Объекты В JavaScript определен ряд внутренних объектов для работы со строками, числами, датами и т.д., но особый интерес для вебпрограммиста представляет объектная модель DOM (Document Object Model), описывающая специфическое множество объектов, сопоставленных элементам HTML-документа. С каждым объектом связаны свойства, методы (функции, определенные для объекта) и события. При обращении к свойствам и методам объектов используется т.н. точечная нотация, то есть имя переменной объектного типа отделяется от имени свойства и метода точкой. Приведем интуитивно понятный пример. Главным в иерархии объектов DOM является окно браузера – объект window. С этим объектом связан ряд методов и большое количество свойств. Например, у объекта window есть метод open(), открывающий новое окно с указанными параметрами. Вызвать его можно следующим образом: window.open('qq.htm','new','width=300,height=200,t oolbar=1') // откроется окно 300х200, в котором из стандартных // интерфейсных элементов будет только панель инструментов. Еще один интуитивно понятный пример. Объект screen дает доступ к параметрам экрана монитора клиентского компьютера (разумеется, эти параметры можно лишь узнать, но не изменить). Методы для этого объекта не определены, но определен ряд свойств. Наиболее полезные – width, height (ширина и высота в пикселах), availWidth и

8

availHeight (доступная ширина и высота в пикселах). Пример обращения к свойствам: w = screen.width; h = screen.height;

null Это ключевое слово указывает на отсутствие значения.

Операторы Основные операторы (англ. operator) в порядке убывания приоритета. оператор

выполняемая операция

.

доступ к свойству или методу объекта

[ ]

доступ к элементу массива

( )

вызов функции

++

приращение (инкремент)

--

уменьшение (декремент)

-

унарный минус

!

отрицание (логическое NOT)

delete

удаление свойств объекта

new

создание экземпляра объекта

typeOf

возвращает тип операнда

void

возвращает неопределенное значение

* , / , %

арифметические умножение, деление, взятие по модулю

+ , -

арифметические сложение и вычитание

9

+

сцепление (конкатенация) строк

< , <= , > >=

меньше, меньше или равно, больше, больше или равно

== , !=

проверка равенства и неравенства

=== , !==

проверка идентичности (т.е. равенства и неравенства без преобразования типа операндов)

&&

логическое AND (второй операнд вычисляется, если первый равен true)

||

логическое OR (второй операнд вычисляется, если первый равен false)

=

присваивание

+= , -= , *= присваивание с операцией и т.д.

Цикл while с предусловием while ( условие ) инструкция, выполняемая в случае истинности условия; Под «условием» здесь понимается выражение, имеющее значение булевского типа, например X > 112.345 или ( a != 0 ) && ( b > 1)

Цикл while с постусловием do

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

инструкция, выполняемая в случае истинности условия while ( условие );

Цикл for for ( инициализация счетчика цикла; проверка условия продолжения цикла; изменение счетчика цикла ) инструкция; Например, после выполнения следующего цикла переменные x и y получат значения, равные соответственно сумме и произведению чисел от 1 до 10.

Инструкции могут быть вложены одна в другую с любой степенью вложенности.

10

11

x = 0; y = 1; for ( i=1; i<=10; i++ ) { x = x + i; y = y*i; };

Условная инструкция if if ( условие ) инструкция, выполняемая в случае истинности условия else инструкция, выполняемая в случае ложности условия; Например, в результате выполнения следующего фрагмента кода переменная result получит строковое значение 'отлично'. ball = 5; if ( ball == 5 ) result = 'отлично' else result = 'до отличной оценки вы не дотянули'; Если надо последовательно рассмотреть выполнение нескольких условий, можно использовать вложенные условные инструкции. В ряде случаев при наличии нескольких взаимоисключающих условий удобна инструкция switch, описанная ниже.

Инструкция switch Если вариантов значения условия много, и конструкция if получается слишком громоздкой, удобна инструкция switch следующего формата: switch ( выражение ) { case значение1 : инструкция; break; case значение2 : инструкция; break; ... case значениеN : инструкция; break; default : инструкция по умолчанию; } Оператор break прекращает выполнение инструкции switch в случае найденного соответствия; если его не поставить, будут выполняться все последующие проверки case. Вариант по умолчанию (default) указывать необязательно. Например, следующий цикл прервется на второй проверке и установит значение monthName = 'хорошо': ball = 2; switch (ball) { case 5 : result = 'отлично'; break; case 4 : result = 'хорошо'; break; case 3 : result = 'удовлетворительно'; break; case 2 : result = 'плохо'; break; }; Приведенный пример успешно иллюстрирует смысл инструкции switch, но выглядит очень искусственным. Разумеется, в данном случае рациональнее было бы использовать массивы.

12

13

Инструкции break и continue Инструкция break приводит к выходу из цикла или инструкции switch. В случае вложенных циклов выход происходит из самого внутреннего. Формат применения:

Итак, синтаксис объявления функций следующий: function имя_функции([арг1,[ арг2, [арг3,…]]] ) { инструкции_тела_функции };

break; Инструкция continue прерывает выполнение текущей итерации цикла и запускает новую. Формат применения:

Строго говоря, определение функции с помощью инструкции function – не единственный способ, хотя в подавляющем большинстве случаев применяется именно он.

continue;

Инструкция var Инструкция var служит для явного объявления глобальных и локальных переменных. При объявлении глобальной переменной с одновременной инициализацией эту инструкцию можно опустить. При объявлении локальной переменной инструкция var обязательна (см. «Области видимости переменных»).

Функции Функция определяется с помощью инструкции function. Объявление начинается ключевым словом function, за которым (не менее чем через один пробел) следуют •

Имя функции.

•

Необязательный список аргументов, заключенный в круглые скобки и перечисляемый через запятую. Если у функции аргументов нет, круглые скобки все равно обязательны.

•

14

Набор инструкций, составляющий тело функции, заключенный в фигурные скобки. Фигурные скобки обязательны, даже если тело функции представлено одной инструкцией. Инструкции выполняются при вызове функции.

Функции JavaScript могут быть вложенными, то есть одна функция может быть определена в теле другой. В теле функции может присутствовать инструкция return в формате return выражение; Выполнение инструкции return прекращает выполнение функции и возвращает указанное выражение. Приведем максимально простые (даже глуповатые) примеры функций, первая из которых не возвращает выражения, а вторая – возвращает. Эти функции, как видно, вызываются в разных контекстах. function showMessage(msg) //выводит окно предупреждения с заданным //сообщением { alert(msg); }; //----------------------function square(a) //возвращает квадрат заданного числа { return(a*a); }; //----------- эти функции могут быть вызваны так: 15

showMessage('Hello world!'); //будет выведено маленькое окошко с сообщением x = 5; y = square(x); //переменная y получит значение 25 Функции могут быть заданы рекурсивно, те есть в теле функции она может вызывать саму себя. Следующая функция представляет собой традиционный пример вычисления факториала. function factorial(n) //вычисляет и возвращает факториал своего //аргумента { if ( n =< 1 ) return 1; return x * factorial(x); };

Области видимости переменных Иногда английский термин score переводят как «область действия» или «область определения» переменной.

Область видимости переменной – это блок программы, в котором переменная определена. Глобальная переменная, объявленная вне какой бы то ни было функции, определена для всего сценария. При объявлении глобальной переменной с одновременной инициализацией инструкцию var (см. инструкции) можно опустить. Переменная, объявленная при помощи инструкции var в теле функции, является локальной, то есть определена только в теле функции. Ее значение доступно лишь при вызове функции.

16

Возможное совпадение идентификаторов глобальных и локальных переменных – синтаксически допустимая, но крайне неудобная при отладке ситуация. Приведем пример. //так могут быть объявлены глобальные //переменные: //явное объявление без инициализации var x; //неявное объявление с инициализацией a = 123; //явное объявление с инициализацией var q = 'hello';

//----------------------------------function test() { var a = 555; //это локальная переменная, не имеющая //никакого отношения к объявленной выше //глобальной a q = q + ' world'; //изменилось значение глобальной //переменной q alert('внутри функции a = ' + a); //выведет окошко с сообщением: //'внутри функции a = 555' }; //----------------------------------//проверим значения глобальных переменных до и после вызова //функции: alert('до вызова функции a = ' + a); //выведет окошко с сообщением: 'до вызова 17

и тем самым ограничить выполенение сценария лишь браузерами, поддерживающими указанную версию. Например, при задании language="JavaScript1.5" сценарий будет выполняться лишь в браузерах, в которых реализована поддержка JavaScript1.5.

//функции a = 123' test();

//вызов функции

alert('после вызова функции a = ' + a); //выведет окошко с сообщением: 'после вызова //функции a = 123'

Элементы script могут содержаться как в разделе head, так и в body. При интерпретации документа они выполняются последовательно. В head, как правило, объявляются и инициализируются глобальные переменные и размещаются описания функций. В body фрагменты сценария обычно реализуют вставку динамически формируемого содержимого, например, вывод случайного изображения или даты последнего изменения документа.

alert(' после вызова функции q = ' + q); //выведет окошко с сообщением: //'после вызова функции q = Hello world' Несмотря на примитивность, этот пример в полной демонстрирует понятие области видимости переменных.

мере

Встраивание кода JavaScript в документ HTML Код JavaScript может быть встроен в документ HTML следующими основными способами.

Включение фрагментов сценария внутри элемента script <script type="text/JavaScript"> ... инструкции ... На практике наряду с атрибутом type часто используют и атрибут language="JavaScript", несмотря на то, в спецификации HTML он объявлен нежелательным. Наличие атрибута language гарантирует выполнение сценария любым браузером, поддерживающим JavaScript. Атрибут language позволяет также задать версию языка, возможности которой задействованы в сценарии, 18

Включение файлов со сценариями JavaScript Включаемые внешние файлы, содержащие код JavaScript, определяются в разделе head с помощью того же элемента script, путь к файлу задается значением атрибута src. <script type="text/JavaScript" src="myFunc.js"> Включение файлов актуально, если одни и те же функции, объекты, глобальные переменные используются не в одном, а в ряде документов сайта. В таком случае эти файлы (обычно имеющих расширение .js) размещают в разделе head соответствующих документов. Это упрощает поддержку сценариев и позволяет ускорить загрузку за счет кэширования браузером файла с кодом JavaScript.

Определение обработчика события Обработчики событий, связанных с элементами документа HTML, указываются как атрибуты этих элементов. Список этих атрибутов приведен в разделе "События JavaScript". Значение этих атрибутов может представлять собой любое количество операторов JavaScript, однако обычно обработчики определяются как функции, описанные в элементе script. Ниже приведены два условных примера. 19

<span onClick="this.style.color='red'"> Click me! - в ответ на щелчок мыши текст "Click me!" станет красным
URL типа JavaScript В гиперсылке можно указать значение атрибута href как псеводпротокол javascript: , после которого идет список инструкций. В этом случае при выборе гиперссылки браузер исполняет код JavaScript. Например выбор гиперссылки откроем новое окно

Определенным недостатком URL типа JavaScript является отображение в статусной не адреса целевого документа, а последовательности инструкций JavaScript, невразумительной для большинства пользователей.

События JavaScript В JavaScript определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например, •

<span onmouseOver="this.style.bgColor='#CCCCCC'" onmouseOut="this.style.bgColor='#EEEEEE' "> Наведите курсор мыши •

приведет к открытию нового окна 300х200px и загрузке в него документа next.htm. При использовании URL типа JavaScript следует помнить, что если последняя инструкция возвращает какое-то значение, его строковый эквивалент будет выведен в текущий документ, заменив его содержимое. Попробуйте, например, в приведенном выше коде убрать инструкцию void(0). Новое окно, конечно, откроется, но поскольку метод window.open() возвращает значение объектного типа, в исходном документе появится строка [object] или [object Window] (в зависимости от браузера). Чтобы избежать этого, применяют инструкцию void(0), указывающую на неопределенное возвращаемое значение. 20

Наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.

При попытке пользователя закрыть окно и выгрузить документ выводится сообщение

•

При щелчке мышью по изображению выполняется некая функция showPict()

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

стандарта и в плане применимости обработчика к тем или иным элементам Обработчик события

Поддержива ющие HTMLэлементы и объекты

Описание

onAbort

img

Прерывание загрузки изображения

onBlur

a, area, button, input, label, select, textarea

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

input, select, textarea

Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur

onChange

Метод имитации

blur()

textarea onKeyDown

Практи-чески Нажата клавиша на клавиатуре все

onKeyPress

Практи-чески Нажата и отпущена клавиша на все клавиатуре

onKeyUp

Практи-чески Отпущена клавиша на все клавиатуре

onLoad

body, frameset

onMouseDown

Практи-чески Нажата кнопка мыши в все пределах текущего элемента

onMouseMove

Практи-чески Перемещение курсора мыши в все пределах текущего элемента

onMouseOut

Практи-чески Курсор мыши выведен за все пределы текущего элемента

onMouseOver

Практи-чески Курсор мыши наведен на все текущий элемент

Закончена загрузка документа

onClick

Практи-чески Одинарный щелчок (нажата и отпущена кнопка мыши) все 1

onMouseUp

Практи-чески Отпущена кнопка мыши в все пределах текущего элемента

onDblClick

Практически все

Двойной щелчок

onMove

window

Перемещение окна

onReset

form

onError

img, window

Возникновение ошибки выполнения сценария

Сброс данных формы (щелчок по кнопке )

onFocus

a, area, button, input, label, select,

Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)

onResize

window

Изменение размеров окна

onSelect

input, textarea

Выделение текста в текущем элементе

select()

onSubmit

form

Отправка данных формы (щелчок по кнопке )

submit()

onUnload

body, frameset

Попытка закрытия окна браузера и выгрузки документа

focus()

Практически все HTML-элементы: все, за исключением applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title

reset()

1

22

23

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

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

Объектная модель документа Объектная модель документа не является частью языка JavaScript. Строго говоря, DOM (Document Object Model) – это интерфейс прикладного программирования для представления документа (например, документа HTML, а также иных) и обеспечения доступа к его элементам и интерактивного изменения их свойств. Более того, DOM предоставляет механизмы для изменения самой структуры документа (добавление и удаление элементов, изменение их содержимого). Но это отдельный стандарт, в настоящее время развиваемый под эгидой W3C. Однако все версии языка JavaScript в той или иной степени поддерживают объектную модель документа. Ранние версии JavaScript поддерживали только модель DOM0, предоставляющую базовые возможности. Интерпретаторы JavaScript в современных браузерах пусть не в полной мере, но ориентированы на стандарт W3C DOM2. По крайней мере, MS Internet Explorer и Mozilla вполне адекватно поддерживают DOM2 (но, увы, в несколько различной интерпретации). Базовый уровень функциональности документа обеспечивается объектами, поддерживаемыми даже самыми древними браузерами (естественно, и современными тоже). Эта иерархия объектов представляет объектную модель документов уровня 0 (Document Object Model level0 - DOM0).

24

25

В клиентской части JavaScript основным объектом является window, ссылающийся на текущее окно браузера. Остальные объекты, иерархия которых здесь представлена, являются свойствами корневого объекта window. Почти все эти объекты имеют много полезных свойств, с ними связаны события и методы, использование которых позволяет создавать сценарии, обеспечивающие необходимую функциональность. Кратко, практически не называя конкретных свойств и методов, в этом разделе упомяну лишь ряд возможностей, которые получает разработчик при использовании объектов высшего уровня иерархии. •

Объект Screen позволяет узнать (но, разумеется, не изменить) разрешение клиентского экрана и глубину цвета. Определив разрешение экрана, можно предусмотреть разные варианты компоновки страницы, устанавливать размеры и положение новых окон, открывающихся из сценария. Методы для этого объекта не определены, но определен ряд свойств. Наиболее полезные: width height availWidth availHeight

•

•

26

reload() перезагружает указанный в качестве аргумента документ; replace() загружает указанный документ, замещает текущий в списке истории просмотра. •

Объект Location дает доступ к URL документа, отображаемого в окне браузера. Позволяет определить полный URL, а также его части: протокол, доменное имя и т.д. В отличие от двух предыдущих объектов, его свойства доступны не только для чтения, но и для изменения. То есть, в зависимости от выполнения условий, определенных в сценарии, мы можем загрузить нужный документ как в текущее окно или его фрейм, так и в любое из окон, открытых из сценария. Этот объект имеет и два метода:

Объект History имеет единственное свойство length (количество просмотренных в данном сеансе документов), и три метода, позволяющих перемещаться по истории просмотра: back()

- на один шаг назад по истории просмотра;

forward()

- на один шаг вперед по истории просмотра;

go(n)

- на n шагов по истории просмотра (если n>0, то вперед, если n<0, то назад).

•

Объект Document, его свойства и методы предоставляют наиболее богатые возможности для разработчика. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера. Основные свойства и методы объекта document обсуждаются в отдельном разделе.

•

Массив frames[] дает доступ к документам, загруженным в фреймы.

- ширина экрана в пикселах; - высота экрана в пикселах; - доступная ширина экрана в пикселах; - доступная высота экрана в пикселах.

Объект Navigator дает информацию о версии браузера. В принципе, это можно использовать при создании «браузеронезависимого» сценария. Однако, зачастую более удобен другой подход, описанный в разделе «Определение возможностей клиентского JavaScript».

который

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

Объектная модель документа DOM2 Принятая в настоящее время объектная модель документа DOM2 (Object Document Model level2 - DOM2) определена организацией World Wide Web Consorcium (W3C). Она не развивает (хотя, 27

естественно, поддерживает) объекты модели DOM0, но предлагает определенную концепцию представления элементов HTMLдокумента. Акцент модели DOM2 - иерархическая структура документа, в которой каждый элемент является объектом (с точки зрения алгоритмического языка) со своими свойствами, методами и событиями. Модель DOM2 отображает реальную иерархическую структуру документа. Действительно, в документе HTML есть разделы head и body, в каждом из которых своя иерархия элементов. В разделе head особой иерархии нет, там последовательно указывается набор элементов, непосредственно не отображаемых в окне браузера. Они могут влиять на общее отображение и функциональность документа (определение внешних таблиц CSS, коды JavaScript), на идентификацию документа (многие meta-элементы), задавать HTTPзаголовки. Зато раздел body имеет явную иерархическую структуру. Рассмотрим, например, очень простое описание HTML-документа:

Пример простого документа

Начало абзаца <strong>выделенный текст продолжение абзаца

Этот документ может быть представлен деревом, состоящим из следующих узлов:

Примерно такую иерархическую модель документа и предлагает стандарт DOM2. Отдельного рассмотрения этого интерфейса прикладного программирования в данном разделе нет. Однако отметим, что именно обращение к ряду свойств и методов, представленных в DOM API, позволяет сценариям JavaScript обеспечивать необходимую функциональность в типичных актуальных задачах (тем более, в нетривиальных).

Определение возможностей клиентского JavaScript Очевидно, что браузеры разных версий и разных производителей отличаются степенью поддержки базовой версии JavaScript и возможностей DOM. Свойство window.navigator.userAgent позволяет определить параметры браузера и организовать адекватную настройку сценария. Однако, в большинстве случаев нас интересует более узкий и конкретный вопрос: реализована ли в данном браузере нужная нам возможность. Приведу два примера: из недавнего прошлого и актуальный сегодня.

28

29

П ри м е р из н еда в него пр ошлого

Сейчас смена изображений при наведении курсора мыши кажется тривиальным декоративным приемом. Но не так уж давно такой фокус можно было реализовать лишь в браузере Netscape Navigator 3+. В MS IE 3 эта возможность отсутствовала, хуже того – сценарий выдавал ошибку и сообщал об этом во всплывающем модальном окне. Причина в том, что интерпретатор JavaScript Netscape Navigator 3+ поддерживал объект images стандарта DOM0, а MS IE 3 – не поддерживал. Пожалуй, наиболее элегантный метод выяснения, поддерживается ли объект images, может быть реализован следующим образом: if ( document.images ) { описание инструкций, обеспечивающих смену изображений } else { альтернативный вариант }; Почему работает такой сценарий, не выдавая сообщения об ошибке? Дело в том, что обращение к некоему объекту как к условию инструкции if возвращает булево значение: true, если объект определен, и false в противном случае. Таким образом, срабатывает нужный блок условной инструкции. П ри м е р , ак туа л ь ный с ег о дн я

Наиболее универсальный и удобный способ обращения к элементам документа из сценария – использование их уникальных идентификаторов id. Для идентификации элементов применяется метод getElementById(), не определенный в ряде устаревших браузеров. Не будем сейчас рассматривать вопрос о том, что же именно предпринять, если этот метод не определен. Все зависит от решаемой задачи. Но подход к определению, какие варианты идентификации выбрать, тот же, что и в предыдущем примере. 30

if ( document.getElementById ) { описание инструкций, использующих метод getElementById() } else { альтернативный вариант }; Отметим также, что именно факт поддержки тех или иных свойств и методов, связанных с моделями DOM0 и DOM2, может служить удобным методом определения типа браузера и его версии. Посмотрите на следующий пример, в котором глобальным переменным isMozilla, isIE5 и isOpera присваиваются булевы значения, которые потом удобно будет использовать в сценарии в контексте условных инструкций. var isMozilla = (document.getElementById && !document.all); var isIE5 = (document.getElementById && document.all); var w = navigator.userAgent.toLowerCase(); var opera=( w.indexOf('opera')!=-1 );

Идентификация элементов документа Модели документа DOM0 и DOM2 предоставляют свои возможности идентификации элементов документа. Для чего нужна эта идентификация? Например, для того, чтобы при реализации определенного события (click, mouseOver, mouseOut, ...) •

указанному элементу присвоить иные свойства стиля: цвет, фон, видимость и т.д. (скажем, при реализации меню);

31

•

организовать смену изображений (то, что называется rollover image);

•

обработать данные форм на стороне клиента;

•

и т.д.

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

Идентификация элементов документа в модели DOM0 Ссылка на текущий элемент Во всех моделях документа при вызове обработчика для текущего элемента используется ключевое слово this. Например: <span onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'" onClick="this.style.color='springgreen'"> тест

смысл перебрать все элементы данной группы. Например, перебрать все элементы формы с целью выяснить, какие из них являются checkbox-ами и включены ли они. Ссылки на имя (name) HTML-элемента Лишь несколько HTML-элементов согласно спецификации имеют атрибут name. Это изображения img , а также формы и их элементы. К этим элементам можно обращаться, используя значение атрибута name, причем по крайней мере в двух вариантах. Ниже приведен пример обращения к изображению. Пусть изображение в HTML описано так: Тогда в сценарии JavaScript это изображение идентифицируется как document.images['pict_view'] или document.images.pict_view Первый вариант явно что-то напоминает тем, кому знакомо понятие ассоциативного массива. И правильно: все объекты JavaScript по сути являются ассоциативными массивами, ключи которых совпадают с именами свойств. Это и объясняет возможность применения двух вариантов, приведенных выше.

Здесь заданы обработчики трех событий для текущего элемента. Ссылки на объек ты модели DOM0, вложенные в объект document Все эти объекты представляют собой массивы: массив гиперссылок links[], массив изображений images[], массив форм forms[] и т.д. Индексация массивов начинается с 0, поэтому, например, к i-му изображению документа можно обратиться images[i-1]. Очевидно, что такая возможность актуальна лишь в случаях, когда нам имеет 32

Идентификация элементов документа в модели DOM2 Помимо вышеназванных вариантов (явно ограниченных), модель DOM2 предлагает еще три варианта идентификации элементов документа, основным из которых является следующий:

33

Идентификация по ID Если у HTML-элемента указан атрибут id, то к нему можно обращаться, используя значение этого атрибута. При этом применяется метод getElementById(). Обратите внимание на то, что это - метод объекта document. Ниже приведен пример. <span id="q">тест <span onClick= "document.getElementById('q').style.color = 'red'"> щелкни мышкой, и предыдущий текст станет красным Щелчок мышью по элементу, в котором задан обработчик onClick, приведет к изменению цвета элемента с id="q".

Обращение ко всем элементам указанного типа Метод getElementsByTagName() объекта document возвращает массив элементов с указанным именем тега. Например, getElementsByTagName('h2') возвратит массив всех заголовков 2го уровня.

Свойства HTML-элементов в DOM2 Интерфейс DOM2 определяет ряд общих свойств элементов, а также наборы свойств, специфичных для элемента документа конкретного типа. Не заглядывая в справочник, мы можем быть, по крайней мере, уверены в том, что каждый HTML-элемент имеет свойства, соответствующие его атрибутам, определенным в стандарте HTML. При этом имена атрибутов HTML транслируются в имена свойств следующим образом: 34

•

Имя атрибута HTML, представляющего одно слово, транслируется в имя свойства без изменений. Все буквы в имени свойства строчные. Исключение: атрибут class транслируется в свойство className.

•

Имя атрибута HTML, представляющего несколько слов, транслируется в имя свойства, в котором все слова идут слитно (без дефисов и прочих разделителей). Первые буквы второго и последующих свойств являются прописными. Например, maxLength, borderColor и т.д.

Таким образом, все элементы имеют свойства id, style, title, lang, dir и className. В дополнение к этим общим свойствам, элемент каждого типа обладает специфическими. Например, для элемента img это свойства src, width и height. Доступ к свойствам элементов документа позволяет желаемым образом организовать их интерактивное изменение.

Окна и фреймы. Объект Window Работа с окнами (текущими и открываемыми из сценария) и фреймами в JavaScript организуется по одной схеме. И это естественно, ведь и в полное окно, и во фрейм (в частности, встроенный) загружается отдельный документ HTML. К объектам теку щего окна обращаются, используя синонимы window или self, причем в этом случае указание окна можно даже опускать. Приведем пример обращения к свойству bgcolor (фоновый цвет) объекта Window. Это свойство приводится исключительно для примера. Использование его в реальных сценариях абсолютно неактуально, зато смысл понятен, что позволит сосредоточиться на формате обращения к окну. Для текущего окна следующие три обращения равносильны: 35

• • •

window.bgcolor self.bgcolor bgcolor

С фреймами, очевидно, ситуация чуть посложнее: их несколько, значит к каждому нужно особое обращение. Уверена, что все уже догадались: к фреймам обращаются по их именам (то есть, по заданным в HTML-описании значениям атрибута name). Если определен набор вложенных фреймов, то могут быть использованы обращения к родительскому фрейму как к объекту parent. Объект top ссылается на верхний уровень набора фреймов – текущее окно.

Свойства объекта Window Для объекта Window определен ряд свойств, наиболее полезные и употребительные из которых сами являются объектами. Обратившись к схеме, приведенной в разделе «Объектная модель документа DOM0», можно увидеть высшие уровни иерархии свойств объектного типа. Заметим, что объект Document, являясь свойством объекта Window, сам обладает свойствами объектного типа. В свою очередь, ряд его свойств также представляют собой объекты и т.д. Есть у объекта Window и скалярные свойства, наиболее полезные из которых приведем: •

Методы объекта Window Объект Window имеет ряд методов, основные из которых: •

open() – открывает новое окно (см. в отдельном разделе).

•

close() – закрывает окно.

•

resizeTo(w,h) – изменяет размеры окна до ширины w и высоты h.

•

resizeTo(x,y) – изменяет размеры окна на x пикселов по ширине и y пикселов по высоте.

•

moveTo(x0,y0) – перемещает окно таким образом, чтобы координаты его левого верхнего угла приняли значения x0 и y0.

•

moveBy(x,y) – перемещает окно на горизонтали и y пикселов по вертикали.

•

focus() – передает окну фокус; при этом окно перемещается на передний план поверх других окон приложений.

x

пикселов

по

Метод open() Метод

window.open() вызывается с такими аргументами:

window.open( адрес файла, имя окна, параметры )

closed – имеет значение true, если открытое сценарием окно было закрыто, и false в противном случае.

где

•

status – текст строки статуса.

•

•

defaultStatus - текст строки статуса по умолчанию.

адрес файла - адрес файла, первоначально загружаемого в новое окно;

•

name – строка, содержащая имя окна.

•

имя окна – условное имя, смысл которого будет пояснен ниже.

•

opener – ссылка на объект window, из сценария которого было открыто текущее окно.

•

•

parent – ссылка на объект window, содержащий текущее окно или фрейм.

параметры - набор элементов нового окна браузера - строка, в которой через запятую в любом порядке перечисляются пары параметр=значение . Если какой-то параметр не указан, будет применено значение по умолчанию.

36

37

параметр

значение

описание

width

размер в пикселах

ширина нового окна

height

размер в пикселах

высота нового окна

left

размер в пикселах

абсцисса левого верхнего угла нового окна

top

размер в пикселах

ордината левого верхнего угла нового окна

toolbar

1 / 0 / yes / no

вывод панели инструментов

location

1 / 0 / yes / no

вывод адресной строки

directories

1 / 0 / yes / no

вывод панели ссылок

menubar

1 / 0 / yes / no

вывод строки меню

scrollbars

1 / 0 / yes / no

вывод полос прокрутки

resizable

1 / 0 / yes / no

возможность изменения размеров окна

status

1 / 0 / yes / no

вывод строки статуса

fullscreen

1 / 0 / yes / no

вывод на полный экран

Например, при выполнении инструкции window.open('test.htm','new', 'width=300,height=200,toolbar=1') откроется окно 300х200, в котором из стандартных интерфейсных элементов будет только панель инструментов. Поскольку не указаны координаты верхнего левого угла, расположение окна будет зависеть от умолчаний браузера. Смысл 2-го аргумента (условное имя окна) метода open() нуждается в пояснении. При последовательном применении метода open() с одинаковым значением 2-го аргумента новые окна не открываются, а очередной целевой документ загружается в ранее открытое окно с тем же именем. Если же указывается условное имя 38

окна, ранее не задававшееся, открывается новое окно с указанными параметрами. NB! Если вызов метода open()загружает новый документ в уже открытое окно, это окно не становится активным. То есть, если оно закрыто окнами других приложений, то не «всплывет» поверх других. Следовательно, пользователь и не заметит, что в это окно загрузился новый документ. Для того, чтобы активизировать окно с вновь загруженным документом, следует, например, применить метод focus(), описанный в следующем разделе.

Прочие методы В предыдущем разделе мы применили вызов метода open()в процедурном формате: window.open(список аргументов) С точки зрения пользователя при этом открывается новое окно с указанными параметрами, и в него загружается целевой документ. Для программиста же важно, что вызов этого метода создает новый объект Window. Однако, пока непонятно, каким образом можно реализовать доступ к этому новому объекту из сценария. Проблема решается следующим образом. Метод open() возвращает значение объектного типа. Таким образом, для того, чтобы иметь возможность дальнейшей работы с окном, открытым сценарием, следует сохранить возвращаемое методом window.open() значение в некоторой переменной. Обращение к этой переменной и реализует доступ к методам и свойствам нового окна. Именно к ней можно применять перечисленные выше методы: • • • • • •

close() resizeTo(w,h) resizeTo(x,y) moveTo(x0,y0) moveBy(x,y) focus() 39

Итак, присвоим возвращаемое методом window.open() значение некоторой переменной newWin.

{ alert('Окно newWin еще не открывалось') } else if (newWin.closed) { alert('Окно newWin уже закрыто') } else { newWin.status = 'Свойства окна изменены'; newWin.document.bgColor = '#CCCCCC'; };

newWin = window.open('test.htm','new','width=300,height=200 '); Теперь это окно можно закрыть, переместить, изменить его размеры из сценария, используя соответствующие методы. Приведем примеры обращения к переменной newWin в ряде ситуаций. Примеры

П ол ез н а я фун к ц и я . О тк ры ти е нов ого окна в цен тре экрана .

Эк спе ри м е н т. З ак ры ти е ок на.

Новое окно, открытое из сценария, можно закрыть, применив к объекту newWin метод close(). Перед выполнением этого метода надо убедиться в том, что окно открыто, например так: if (!newWin) { alert('Окно newWin еще не открывалось') } else if (newWin.closed) { alert('Окно newWin уже закрыто') } else { newWin.close() };

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

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

•

Изображения разного размера и разных пропорций. Но миниатюры представляют собой вырезанные и масштабированные фрагменты одинакового размера.

•

Изображения разного размера и разных пропорций. Миниатюры также имеют разные пропорции, но масштабированы таким образом, чтобы вписаться в квадрат заданных размеров. Кстати, именно такой вариант реализован в большинстве программ просмотра графических объектов. Так организован и вывод

Эк спе ри м е н т. И з м ен ен и е па рам е тр о в окн а .

Обращаясь к переменной newWin, можно получать и изменять свойства нового окна. При этом надо убедиться в том, что окно открыто. Например, изменим текст строки статуса и цвет фона документа с помощью операторов: if (!newWin) 40

41

миниатюр в MS Windows «проводнике» в режиме «эскизы страниц». Не рассматривая здесь вопросы подготовки миниатюр и задания параметров их отображения с помощью CSS, приведем лишь один из вариантов функции, открывающей окно заданных размеров по центру экрана монитора и загружающей в это окно документ с указанного адреса. При этом предположим, что в новом окне будут открываться изображения разного размера. Планируя последовательные открытия изображений, согласимся, что новые окна не должны множиться. Значит, все они (см. раздел «Метод open()») должны иметь одно условное имя, задаваемое в качестве 2-го аргумента метода open(). Как отмечалось выше, в таком случае необходимо после загрузки нового содержимого активизировать окно, чтобы оно переместилось на передний план поверх других окон приложений. Здесь можно применить по крайней мере два подхода: •

Передать фокус ранее открытому окну и изменить его размеры и положение, чтобы при новых размерах окно снова расположилось по центру экрана.

•

Закрыть окно с изображением, если оно уже было ранее открыто, а потом открыть новое окно нужного размера.

Мне более рациональным представляется второй вариант. Впрочем, заинтересованному читателю предлагаю написать функцию, реализующую альтернативный подход. Отладив сценарий, сравните результаты и сделайте соответствующий вывод. Итак, предлагаемый вариант фрагмента сценария и объявления функции. //Объявляем глобальную переменную newWin без инициализации. //При вызове функции openWin() ей будет присвоено значение //объектного типа, ссылающееся на новое окно. var newWin;

42

function openWin(addr,w,h) //Открывает окно с условным именем 'new' шириной w //и высотой h и загружает в него документ с адресом addr. //Окно располагается по центру свободной части экрана. { //Закрываем окно, если оно ранее было открыто: if (newWin) newWin.close(); //Определяем координаты левого верхнего угла окна, используя //свойства объекта Screen: var x = (screen.availWidth-w)*0.5; var y = (screen.availHeight-h)*0.5; //Открываем новое окно с указанным документом: newWin = window.open(addr,'new','width=' + w + ',height=' + h + ',left=' + x + ',top=' + y); };

Объект Document Объект Document особенно важен при разработке сценариев. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера. Более поздние стандарты DOM1 и DOM2 представляют документ HTML в виде дерева и дают доступ ко всем элементам, несравненно расширяя возможности разработчика. Однако, в этом разделе рассмотрим лишь базовые возможности.

43

•

referrer (только для чтения) - URL документа, ссылка в котором привела к загрузке текущего документа;

•

URL (и устаревшее location) - URL документа.

Более интересны и полезны для разработчика свойства-объекты (свойства-массивы) объекта Document. Все они, естественно, имеют свойство length (количество элементов в массиве). Большинство свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с атрибутами соответствующих элементов HTML. Вот лишь некоторые из них, понятные без объяснений любому, кто знает HTML: •

объект Form имеет свойства name, action, method;

•

объект Anchor имеет единственное свойство name;

•

объект Link имеет свойства href, target;

•

объект Image имеет свойства src, width, height.

К объектам документа, хранящимся в массивах images, forms и applets, а также к элементам форм можно обращаться и по имени, если в начальном теге соответствующего элемента HTML задан атрибут name. Пусть, например, в документе описано изображение

Свойства объекта Document Начнем со скалярных свойств, общих для всех браузеров. Большинство их доступны как для чтения, так и для изменения. Отметим, что значения свойств, связанных с цветами текста, фона и гиперссылок, можно изменять динамически лишь в тех случаях, когда не заданы соответствующие описания CSS, которые имеют больший приоритет. Все значения свойств - строковые. •

title - текст заголовка документа (содержимое элемента title);

•

fgColor и bgColor - цвет текста и цвет фона документа;

•

linkColor, vLinkColor, aLinkColor - цвета непосещенных, посещенных и активных гиперссылок;

• 44

lastModified (только для чтения) - дата изменения документа;


src="images/cat.jpg" id="cat_id" name="cat_name">

и оно является n-ым изображением, встречающимся в документе. К этому элементу img можно обратиться по крайней мере следующими способами (см. раздел «Идентификация элементов документа»): •

Как к элементу массива images , используя его индекс (индексация начинается с 0): window.document.images[n-1]

•

Как к элементу массива images , используя значение атрибута name как ключ массива: window.document.images['cat_name']

•

Используя значение атрибута name как свойство объекта : 45

window.document.cat_name •

Используя значение атрибута id и свойство getElementById: window.document.getElementById('cat_id')

атрибутам элемента img). Таким образом, решение задачи смены изображения сводится к изменению значения свойства src определенного элемента массива Images . Получить доступ к свойствам изображений можно несколькими способами. Пусть, например, в документе описано изображение

Методы объекта Document •

open() - открывает новый документ; при этом все его содержимое удаляется.

•

close() - закрывает ранее открытый документ.

•

write() - записывает в документ заданную в качестве аргумента строку.

•

writeln() - аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.

Методы write() и writeln() весьма полезны и часто используются для динамического формирования содержимого документа. Вот как, например, можно включить в документ дату его последнего изменения: <script type="text/JavaScript"> indow.document.write(document.lastModified);

и оно является n-ым изображением, встречающимся в документе. Тогда следующие конструкции, ссылающиеся на свойство src изображения равносильны: •

Обращаемся к элементу массива images , используя его индекс (индексация начинается с 0): window.document.images[n-1].src Этот вариант может быть удобен, когда надо работать с несколькими последовательно расположенными в документе изображениями.

•

Используем значение атрибута id: window.document.cat_id.src

•

Используем значение атрибута name: window.document.cat_name.src

Объект Images Свойства объекта Images Для смены изображений используется объект Images, вложенный в объект Document. Каждому HTML-элементу img, встречающемуся в документе, сопоставляется элемент массива Images со свойствами src, width, height и так далее (названия свойств соответствуют 46

Смена изображений Итак, смена изображения сводится к изменению значения свойства src определенного элемента массива images. Обращаться к этому свойству можно любым из описанных ранее способов. Например, используем атрибут name элемента img. Сценарий может работать в связи с любым из доступных в языке событий мыши. Атрибуты onMouseOver, onMouseOut, onClick и т.д. в HTML 4.0 и выше могут применяться с большинством 47

элементов. Так что для современных браузеров при желании выполнить скрипт, например, при наведении курсора мыши на изображение, применима конструкция вида

Как и раньше, опишем функцию changeImg1()



function changeImg1(source) { document.pict1.src = source + '.jpg'; };

Чаще всего встречается два варианта смены изображений.

1. Изображение меняется при наведении на него курсора мыши. Пусть в документе есть изображение и при наведении курсора мыши хочется его сменять изображением butterfly1.jpg. Для удобства опишем функцию changeImg(): function changeImg(source) { document.pict.src = source + '.jpg'; }; и применим ее onMouseOut:

при

наступлении

событий

onMouseOver



2. Изображение меняется при наведении курсора мыши на другие элементы документа. Пусть в документе есть изображение:

48

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

В элементе a каждой гиперссылки наряду с адресом целевого документа указываем атрибуты onMouseOver и onMouseOut. Получится описание примерно следующего вида:

Предварительная подгрузка изображений

и

Для того, чтобы эффект смены изображений проявился сразу после загрузки страницы, надо подгрузить изображения, которые будут сменять исходные в ответ на события мыши, написав в начале документа соответствующий инструкции. Для предыдущего примера с бабочками можно сделать это так: but1 = new but1.src = but2 = new but2.src = but3 = new but3.src =

Image(); 'butterfly1.jpg'; Image(); 'butterfly2.jpg'; Image(); 'butterfly31.jpg';

В этом случае изображения будут подгружены заранее и в нужный момент будут взяты из кэша.

49

Еще немного о смене изображений

Вызов функции (например, для 1-ой миниатюры): 2 вариант Пользуемся тем, что имена файлов изображений представляют последовательность 1.jpg , 2.jpg ... и находятся в каталоге imageDir. Функция слегка изменилась:

В любом сценарии, в частности и при организации смены изображений, надо стараться сделать код рациональным. Вот очень простой, но вполне эффектный пример: при наведении курсора мыши на миниатюры меняется увеличенное изображение. Файлы изображений находятся в каталоге Images и называются 1.jpg, 2.jpg и 3.jpg. Файлы миниатюр называются так же и находятся в подкаталоге Images/Thumbs. Понятно, что надо выполнить предварительную подгрузку и написать функцию, реализующую смену изображений. В начале сценария определим переменную imageDir = 'Images/' и рассмотрим три варианта. 1 вариант Функция:

function changeImg(imgAddr) { document.bigImg.src = imageDir + imgAddr + '.jpg' } Вызов функции получился короче и прозрачнее: 3 вариант А если к тому же динамически сформировать последовательности миниатюр (ведь их могло бы быть много), получится совсем компактно. Пользуясь тем, что имена файлов изображений представляют последовательность 1.jpg , 2.jpg, выведем изображения в цикле, используя метод write() объекта document. for (i=1; i<=3; i++) document.write( '');

function changeImg(imgAddr) { document.bigImg.src = imgAddr } 50

51

Формы и элементы форм Задание форм и их элементов в HTML Элементы форм знакомы всем пользователям современной глобальной сети. Это поля ввода текста и пароля, стандартные кнопки, радиокнопки-переключатели, «флажки», выпадающие списки и т.д. Наиболее очевидные варианты применения: ввод ключевых слов в поисковых системах, работа с электронной почтой через вебинтерфейс, регистрация на сайте, веб-анкеты, online-тесты. Сразу заметим, что использование форм предполагает интерактивность и, следовательно, обеспечение функциональности неизбежно связано с программированием (клиентским или серверным). В большинстве случаев формы используются для передачи данных на сервер, однако и на стороне клиента есть задачи, в которых удобно применение форм (например, календарь или калькулятор). Роль HTML состоит в описании необходимых элементов и компоновке их на странице. Все атрибуты форм и их элементов, описанных с помощью HTML, транслируются в соответствующие свойства объектов DOM и используются при создании сценариев JavaScript.

name

Имя формы; используется в клиентских и серверных сценариях для идентификации вложенных управляющих элементов

action

Адрес файла серверного сценария, который будет обрабатывать заполненную и переданную форму

method

Метод передачи данных серверу (по умолчанию get)

enctype

Тип содержимого, используемый для отправки формы на сервер (по умолчанию application/x-www-form-urlencoded)

acceptcharset

Список кодировок символов ввода данных, которые будут обрабатываться сервером

target

Имя окна или фрейма для загрузки документа, сгенерированного сценарием на основании принятых из формы данных (по умолчанию _self, т.е. результат обработки формы загружается в то же окно или фрейм)

onSubmit

Сценарий JavaScript, выполняемый перед отправкой данных формы на сервер

onReset

Сценарий JavaScript, выполняемый при сбросе значений элементов формы в значения по умолчанию

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

Формы

•

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

при работе на стороне клиента необходимо задавать имя формы name, чтобы иметь возможность обращаться к элементам формы из сценария JavaScript;

•

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

Элемент form

Смысл, по крайней мере, двух атрибутов необходимо пояснить более подробно.

Основные атрибуты элемента form:

52

53

Атрибут method Атрибут method имеет два основных возможных значения: get (по умолчанию) и post. Смысл этих значений следующий. При передаче данных методом get данные формы отправляются на сервер в заголовке запроса, а при использовании метода post – в теле запроса. Передача текстовых данных может осуществляться любым из этих методов. А вот бинарные данные могут быть отправлены только методом post. Это происходит в случае загрузки файла не сервер (всем понятный пример – приложение к электронному письму). Кстати, в этом случае необходимо указать enctype=”multipart/form-data” (см. далее примечения к атрибуту enctype). Итак, за исключением случая передачи бинарных данных (только методом post) равным образом можно применять оба возможных метода. На сложность разработки серверного сценария, принимающего данные из формы, это никоим образом не влияет. Какой же метод предпочтителен? Предлагаю два подхода для решения этого вопроса. Во-первых, имеет смысл внимательно рассмотреть имеющиеся в сети ресурсы, убедиться, что в подавляющем большинстве случаев применяется метод get, и считать это негласным эмпирическим правилом. С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса. При передаче методом get пользователь имеет удовольствие видеть данные формы в адресной строке. Символы, отличные от стандартной латиницы кодируются. Например, пробелу соответствует код %20 . Каждый из нас постоянно наблюдает такую ситуацию, работая с поисковыми системами. Зададим, например в Яndex ключевое словосочетание «язык HTML» и увидим в адресной строке:

Слово «язык» закодировано последовательностью %FF%E7%FB%EA, а «HTML» передается как есть. Получив такой запрос, соответствующая серверная программа обратится к базе данных и, в 54

конечном счете, сгенерирует и отправит браузеру список результатов поиска. При передаче методом post данные формы отправляются на сервер. При этом пользователь не видит в адресной строке ничего «лишнего». Зато появляются другие проблемы: попытка обновить страницу вызывает маловразумительное сообщение: «… обновление страницы невозможно без повторной отправки данных…». Резюме. По-видимому, следует выбирать заданный по умолчанию метод get во всех случаях, кроме передачи на сервер бинарных данных. Атрибут enctype Этот атрибут имеет два возможных значения: • •

application/x-www-form-urlencoded (по умолчанию) multipart/form-data

Первое значение используется в абсолютном большинстве случаев. Нет смысла указывать его явно – оно и так предполагается по умолчанию. Второй же тип кодировки (multipart/form-data) указывается в единственном случае: при загрузке на сервер бинарного файла. При этом обязательно задание атрибута method=”post”.

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

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

Все элементы input не имеют содержимого и, соответственно, при их задании не указывается конечный тег.

•

Остальные элементы форм (textarea, select, option) являются контейнерами и имеют конечный тег. Для элемента option конечный тег может быть опущен.

Элемен ты input Элементы input, в зависимости от значения атрибута type, не только выглядят, но и функционируют принципиально по-разному. Большинство из них могут быть равным образом использованы как в клиентских, так и в серверных сценариях. Представим их в виде следующих групп.

можно и достичь использованием обработчика onClick для любого элемента HTML-документа). Как и кнопка типа submit, отправляет данные из формы на сервер, но выглядит нестандартным образом. Внешний вид этого элемента задается изображением, адрес которого должен быть указан как значение атрибута src. Текстовые поля Однострочное поле ввода текста. Поле ввода пароля. Переключатели

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

56

Флажок (независимый переключатель). Флажки могут быть отмечены независимо друг от друга. Радиокнопка (переключатель с зависимой фиксацией). Исходя из функциональности этого элемента, имеет смысл говорить не об одной, а о группе радиокнопок. Групп в форме может быть несколько, но в каждой группе в текущий момент только одна из радиокнопок может быть помечена. Поле выбора файла Позволяет выбрать файл для загрузки на сервер.

57

Скрытое текстовое поле Позволяет передавать данные, не введенные пользователем, а полученные в результате работы сценария. Многострочное текстовое поле textarea ... текст по умолчанию ...

Перечислим прочие атрибуты, начиная с тех, которые применимы со всеми элементами форм, и заканчивая специфическими для отдельных элементов. Со всеми элементами форм можно указывать атрибуты name, disabled, tabindex, accesskey. •

name – условное имя элемента формы. Используется клиентскими и серверными сценариями для обращения к элементу.

•

disabled – задание этого атрибута делает элемент временно недоступным. При необходимости это значение можно изменить из сценария.

•

tabindex – порядок в последовательности перехода по элементам с помощью клавиши табуляции.

•

accesskey – клавиша доступа к элементу.

Выпадающий список select и его элемен ты option <select> Москва Санкт-Петербург Новгород Южно-Сахалинск <select>

Примечание Атрибут name служит для идентификации элементов форм при обращении к ним из сценария. Следовательно, значение этого атрибута должно быть уникальным для каждого элемента. В отношении элемента input типа radio есть нюанс: уникальным должно быть имя группы зависимых радиокнопок. Собственно, единое имя группы и позволяет браузеру трактовать радиокнопки как зависимые. Далее приведены дополнительные атрибуты, специфичные для отдельных элементов форм.

Атрибуты элементов форм Как и подавляющее большинство элементов HTML, все элементы форм имеют общие атрибуты id, style, class, title. Атрибут type элемента input обсуждался в предыдущем разделе.

58

Атрибуты элементов input разных типов •

value – начальное значение. Атрибут обязателен для радиокнопок и флажков. Смысл его для разных элементов форм различен.

59

°

Для текстовых элементов это текст по умолчанию (если атрибут не указан, текстовое поле пусто).

•

size – количество одновременно видимых элементов при нераскрытом состоянии списка (по умолчанию 1).

°

Для кнопок значение value задает надпись на кнопке.

•

°

Заданное для поля выбора файла значение value игнорируется современными браузерами из соображений безопасности. Так что, фактически, можно считать, что элемент не имеет атрибута value.

multiple – указание этого атрибута разрешает множественный выбор (по умолчанию выбирается единственный элемент).

Атрибуты элемента option

•

size – для однострочного текстового поля и поля ввода пароля задает ширину в символах.

Элемент option оформляет элемент списка. Естественно наличие атрибута, указывающего, если надо, какой элемент списка выбран по умолчанию:

•

maxLength – для однострочного текстового поля и поля ввода пароля задает максимальное количество вводимых символов.

•

•

readonly – указание этого атрибута для однострочного текстового поля и поля ввода пароля делает текст временно недоступным для изменения. При необходимости это значение можно изменить из сценария.

Работа с формами в JavaScript

•

checked – указание этого атрибута для флажка или радиокнопки делает соответствующий элемент выбранным по умолчанию.

Атрибуты элемента textarea Помимо вышеперечисленных общих атрибутов, элемент textarea имеет еще два, задающих его размеры: •

rows – ширина текстового поля в символах.

•

cols – высота текстового поля в символах.

Атрибуты элемента select Элемент select служит контейнером для элементов списка option. Помимо вышеперечисленных общих атрибутов, у этого элемента есть следующие атрибуты:

60

selected - указание этого атрибута делает соответствующий элемент списка выбранным по умолчанию.

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

Идентификации элементов форм Существенным моментов программирования форм является идентификация их элементов. Рассмотрите еще раз иерархическую схему объектов раздела «Объектная модель документа DOM0». Массив форм forms[] вложен в объект document; элементы форм являются вложенными объектами самой формы; элементы списка являются вложенными объектами объекта select.

61

Вспомним о том, что объекты JavaScript по сути представляют собой ассоциативные массивы со строковыми ключами – именами свойств. Рассмотрим пример обращения к элементам формы из сценария. Разумеется, пример условный, в нем представлены три характерных элемента, обращение к которым из сценария принципиально различно. Точнее, по типу идентификации элементы форм можно разделить на три группы: • • •

радиокнопки; элементы списка; прочие элементы форм.

Нетрудно догадаться о причинах именно такого разделения. В отличие от прочих элементов форм, группы радиокнопок и элементы списка представляют собой массивы. А массив элементов списка к тому же является вложенным по отношению к объекту select. Пусть в документе HTML задана следующая форма (это мог бы быть фрагмент online-анкеты). Из группы «прочих элементов форм» в ней представлено однострочное текстовое поле ввода. Указаны минимально необходимые атрибуты.

Ваше имя:
Ваш пол:
мужской
женский

Город:
<select name="town"> Москва Санкт-Петербург другой

62

Во всех случаях при идентификации элементов форм используются имена (значения атрибута name) заданных элементов HTML. По имени идентифицируется и сама форма; для нашей формы это обращение document.f И де н ти фи к а ц и я боль шинс тв а элемен то в фо рмы

Группу «прочих элементов форм» в нашей форме представляет текстовое поле yourName. Варианты идентификации: • •

document.f.yourName document.f['yourName'] И де н ти фи к а ц и я г р уп п ра дио к н оп ок

В нашей форме есть группа их двух радиокнопок с именем sex. Группа радиокнопок представляет собой массив, в котором к отдельной кнопке с индексом i (индексация начинается с нуля) можно обращаться следующим образом: • •

document.f.sex[i] document.f['sex'][i] И де н ти фи к а ц и я э ле м е н то в спис ка

В нашей форме представлен список с именем town. Его элементы представляет собой массив options[]. К элементу этого массива с индексом i (индексация начинается с нуля) можно обращаться следующим образом: • •

document.f.options[i] document.f['options'][i]

63

Универсальная и ден ти фи к аци я

Свойства элементов форм

Есть и альтернативная возможность идентификации. Все элементы формы представлены массивом elements[], в котором содержатся в порядке их объфвления в документе HTML.

Для элементов форм в JavaScript определен ряд свойств, часть из которых представляет собой трансляцию атрибутов соответствующих HTML элементов.

Свойства и методы формы

Общие свойства

Для форм в JavaScript определены следующие свойства, часть из которых представляет собой трансляцию атрибутов HTML элемента form. свойство

атрибут HTML

Описание

name

name

Имя формы

action

action

Адрес файла серверного сценария, который будет обрабатывать заполненную и переданную форму

method

method

Метод передачи данных серверу

encoding

enctype

Тип содержимого, используемый отправки формы на сервер

target

target

Имя окна или фрейма для загрузки документа, сгенерированного сценарием на основании принятых из формы данных

length

-

Количество элементов формы

elements[]

-

Массив элементов формы

64

свойство

атрибут HTML

Описание

name

name

Имя элемента формы

value

value

Строка, определяющее значение, отображаемое элементом и / или используемая серверным сценарием, обрабатывающим полученные их формы данные. Это свойство задано для всех элементов форм, кроме select

disabled

disabled

Булево значение, определяющее доступность элемента в текущем контексте

form

-

Имя формы

для

Для формы определены два метода, эмулирующие нажатие на кнопки типа submit и reset: • •

Для всех типов элементов форм определены следующие свойства.

Элемен ты input Для элементов input в дополнение к свойствам, общим для всех элементов форм, определены свойства:

submit() reset()

65

свойство свойство

атрибут HTML

тип элемента input

Описание length

Количество элементов списка

options[]

Массив элементов списка

selectedIndex

Номер выбранного в текущий момент элемента списка

type

type

все

Тип input

defaultValue

-

text, password

Текст, первоначально отображающийся в элементе формы

Элемен т option

Булево значение, определяющее отмечен ли в данный момент элемент формы

свойство

checked

defaultChecked

-

checked

radio, checkbox

radio, checkbox

элемента

Описание

Булево значение, определяющее отмечен ли элемент формы по умолчанию

Элемен т textarea Помимо свойств, общих для всех элементов форм, для элемента textarea определено свойство defaultValue – текст, первоначально отображающийся в многострочном текстовом поле.

Помимо свойств, общих для всех элементов форм, для элемента option определены свойства Описание

text

Строка, задающая текст элемента списка

selected

Булево значение, определяющее выбран ли в данный момент элемент списка

defaultSelected

Булево значение, определяющее элемент списка по умолчанию

выбран

Обработчики событий и методы элементов форм Для разных элементов форм определен ряд специфических событий. С этими событиями связаны методы – имитаторы событий.

Элемен т select Помимо свойств, общих для всех элементов форм, для элемента select определены свойства

66

67

Обработчик события onBlur

onChange

Поддерживающие элементы форм практически все 2

практически все

onKeyPress

текстовые элементы: input типа text и password, textarea

Нажата и отпущена клавиша на клавиатуре

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

onKeyUp

текстовые элементы: input типа text и password, textarea

Отпущена клавиша на клавиатуре

onMouseDown

практически все

Нажата кнопка мыши в пределах текущего элемента

Изменение значений элементов формы. Возникает после потери элементом фокуса, т.е. после события blur

onMouseMove

практически все

Перемещение курсора мыши в пределах текущего элемента

onMouseOut

практически все

Курсор мыши выведен за пределы текущего элемента

onMouseOver

практически все

Курсор мыши наведен на текущий элемент

onMouseUp

практически все

Отпущена кнопка мыши в пределах текущего элемента

onReset

form

Сброс данных формы (щелчок по кнопке типа reset

reset()

onSelect

input, textarea

Выделение текста в текущем элементе

select()

onSubmit

form

Отправка данных формы (щелчок по кнопке типа submit

submit()

Описание

onClick

практически все

Одинарный щелчок (нажата и отпущена кнопка мыши)

onDblClick

практически все

Двойной щелчок

onFocus

практически все

Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)

onKeyDown

2

текстовые элементы: input типа text и password, textarea

Метод имитации

focus()

Нажата клавиша на клавиатуре

То есть, элементы input всех типов, а также элементы select и

textarea 68

69

Литература

•

JavaScript Developer Central http://developer.netscape.com/tech/javascript/index.html Документация по JavaScript от Netscape (на английском языке).

•

Флэнеган Д. JavaScript. Санкт-Петербург: O'Reilly, 2004, 955 c.

•

•

Мак-Федрис П. Использование JavaScript. М.-СПб-Киев, 2002, 895 с.

•

Спейнаур С., Экштейн Р. Справочник вебмастера. СанктПетербург: O'Reilly, 2001, 604 c.

JavaScript Guide http://developer.netscape.com/docs/manuals/communicator/jsguide4/in dex.htm Документация по ядру и расширениям JavaScript (на английском языке).

•

Раздел JavaScript на citforum.ru http://www.citforum.ru/internet/javascript/ Техническая документация, статьи, учебники, переводы.

•

Раздел JavaScript на eManual.ru http://www.emanual.ru/cgi-bin/show.pl?51 Техническая документация, статьи, учебники, переводы.

•

JavaScript без границ http://javascripts.boom.ru/ Справочники, статьи, коллекции скриптов.

•

Javascripts.ru http://www.javascripts.ru Справочники, статьи, коллекции скриптов.

•

Библиотека кодов Javascript http://www.txm.ru/js2/ Коллекции скриптов.

•

JavaScript Documentation http://developer.netscape.com/docs/manuals/index.html?content=javasc ript.html Документация по Client-Side JavaScript (на английском языке). JavaScript 1.2, 1.3, 1.4, 1.5. Справочники. DOWNLOAD. Инструменты, статьи, Plug-ins.

•

JavaScript-1.5 Reference http://www.mozilla.org/js/spidermonkey/apidoc/completeframeset.html Документация по Client-Side JavaScript 1.5 (на английском языке).

70

71

Содержание Основные конструкции JavaScript ............................................................. 5 Примечания к синтаксису ........................................................................... 5 Типы данных ................................................................................................ 6 Числа ................................................................................................6 Булевы величины..............................................................................6 Строки ..............................................................................................6 Массивы ...........................................................................................7 Объекты ...........................................................................................8 null....................................................................................................9 Операторы .................................................................................................... 9 Инструкции................................................................................................. 10 Простые и составные инструкции ...................................................10 Цикл while с предусловием .............................................................11 Цикл while с постусловием .............................................................11 Цикл for ..........................................................................................11 Условная инструкция if ..................................................................12 Инструкция switch ..........................................................................13 Инструкции break и continue ...........................................................14 Инструкция var ...............................................................................14 Функции...................................................................................................... 14 Области видимости переменных .....................................................16 Встраивание кода JavaScript в документ HTML.................................... 18 Включение фрагментов сценария внутри элемента script ................18 Включение файлов со сценариями JavaScript ..................................19 Определение обработчика события .................................................19 URL типа JavaScript ........................................................................20 События JavaScript ...................................................................................... 21

Идентификация элементов документа в модели DOM2......................... 33 Идентификация по ID .....................................................................34 Обращение ко всем элементам указанного типа .............................34 Свойства HTML-элементов в DOM2 ....................................................... 34 Окна и фреймы. Объект Window .............................................................. 35 Свойства объекта Window......................................................................... 36 Методы объекта Window........................................................................... 37 Метод open() ...................................................................................37 Прочие методы ...............................................................................39 Объект Document.......................................................................................... 43 Свойства объекта Document...................................................................... 44 Методы объекта Document........................................................................ 46 Объект Images ............................................................................................... 46 Свойства объекта Images........................................................................... 46 Смена изображений ................................................................................... 47 1. Изображение меняется при наведении на него курсора мыши. ....48 2. Изображение меняется при наведении курсора мыши на другие элементы документа. ......................................................48 Предварительная подгрузка изображений .......................................49 Еще немного о смене изображений .................................................50 Формы и элементы форм............................................................................ 52 Задание форм и их элементов в HTML .................................................... 52 Формы ............................................................................................52 Элемент form ..................................................................................52 Элементы форм. Общее представление ..........................................55 Атрибуты элементов форм..............................................................58 Работа с формами в JavaScript .................................................................. 61 Идентификации элементов форм ....................................................61 Свойства и методы формы ..............................................................64 Свойства элементов форм ...............................................................65 Обработчики событий и методы элементов форм ...........................67 Литература .................................................................................................... 70

Объектная модель документа .................................................................... 24 Объектная модель документа DOM0 ....................................................... 25 Объектная модель документа DOM2 ....................................................... 27 Определение возможностей клиентского JavaScript .............................. 29 Идентификация элементов документа ..................................................... 31 Идентификация элементов документа в модели DOM0 ..................32 72

73