Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках
В.В.ЗАХАРКИНА
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 ... инструкции ... На практике наряду с атрибутом 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!" станет красным Наведите курсор мыши •
приведет к открытию нового окна 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выделенный текст продолжение абзаца Этот документ может быть представлен деревом, состоящим из следующих узлов:
Примерно такую иерархическую модель документа и предлагает стандарт 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 (только для чтения) - дата изменения документа;
и оно является 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 Москва Санкт-Петербург Новгород Южно-Сахалинск <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