Библиотека Интернет Индустрии I2R.ru

• Предыдущий материал - Основы JavaScript. Дизайн или программирование? Реализация Roll-over.

Не спорю, название звучит жутко. Особенно для человека, «компьютерный» стаж которого не превышает нескольких месяцев или даже недель. Тем не менее, сегодня речь пойдёт о том, без чего дальшейшее обсуждение тегов HTML и операторов JavaScript превратилось бы в пустой звук: мы поговорим об объектной модели HTML-документа, то есть нашей с вами веб-странички.

Что же такое объектная модель?

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

Представьте себе, что такую же задачу надо решить с помощью скрипта, работающего на веб-странице. Сразу же возникает вопрос: ОТКУДА скрипту предстоит считать исходные данные? И КУДА он потом выведёт результат? Командная строка, как вы понимаете, отсутствует.

Немного подумав, мы всё-таки приходим к ответу: программа может считать данные из текстовых полей, а результат будет выведен в такое же поле или какой-нибудь другой элемент формы. Напоминаю:

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

А эта строчка запишет в текстовое поле с именем txtRoot1 значение корня r1, полученное в результате вычислений.

Текстовые поля txtCoef1 и txtRoot1 -- объекты, встроенные нами в веб-страницу. Мы ссылаемся на них, используя их имена, и нам этого пока достаточно. Но рано или поздно наступит момент, когда нам будет необходимо понять, как устроен ВЕСЬ документ HTML, какова иерархия входящих в него объектов, добавленных разработчиком или существующих изначально, по умолчанию.

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

Отправляя письмо, мы пишем на конверте адрес, постепенно сужая круг поиска: страна, город, индекс, улица, дом, квартира, кому предназначено письмо. В этой иерархии объектом верхнего уровня является страна (если вы пишете письмо, находясь на Марсе, придётся указать ещё и планету назначения, которая займёт более высокий уровень), содержащая объект «город», и так далее до адресата.

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

Каждый объект характеризуется набором свойств и методов. Со свойствами всё просто, а вот методы... давайте договоримся считать их названиями функций, которые каждый объект может выполнить. Определение очень сомнительное, но пока сойдёт. ;-)

top

Свойства объекта document

Перечислим важнейшие свойства объекта document, доступные сценариям JavaScript.

Понятно, что любое из свойств, относящееся, скажем, к цветовому оформлению документа, можно изменить в любой момент:

Очень важно понять принцип использования массивов forms и images. Предположим, в документе присутствует следующий код:

Как нам сослаться на каждый из упомянутых объектов из сценария JavaScript?

Начнём с формы. Во-первых, для ссылки на неё можно использовать имя, работая с формой как с объектом document.forms.frmFeedback. Но не стоит забывать, что forms -- массив: синтаксис document.forms[0] будет означать то же самое. Указанный в скобках индекс соответствует номеру формы в потоке вывода документа.

Для обращения к элементам формы используется её свойство elements. Соответственно, для поля datafield возможны следующие формы записи:

где i -- номер элемента внутри формы.

Точно так же на картинку с именем bullet1 можно сослаться двумя способами:

или

Как видите, всё достаточно просто.

Разработчику часто приходится пользоваться объектом document.location, а точнее -- одним из его свойств, document.location.href. Например, запись

переадресует пользователя на сервер Microsoft.

Очень интересен массив links, элементы которого также имеют множество полезных свойств:

Как вы понимаете, с помощью этого набора можно «разобрать» любую ссылку в документе, с которым приходится работать.

Сам по себе очень полезен объект history, три метода которого часто используются при навигации с помощью сценариев JavaScript.

Первый метод отправляет браузер к предыдущему объекту последовательности history, второй, соответственно, к следующему. Третий метод использует параметр, показывающий расположение объекта, к которому нужно перейти, относительно текущего документа. В приведённом примере выполнение метода будет равносильно команде history.back().

Фу-у. Об этом пока всё. Через пару уроков нарисую диаграммку, иллюстрирующую всё это более наглядно.

top

Методы объекта document

Перечислю наиболее распространённые методы объекта document:

Тут всё ещё проще. Пишем в скрипте:

и в том месте документа, где вызывается этот скрипт, появляется то, что заключено в кавычки. Чаще используется метод write, но тогда, если мы хотим получить нормальное завершение строки, пишем так:

Символ «\n» как раз и означает перевод строки.

Метод clear мне пока использовать не приходилось (не было нужды), но можете поэкспериментировать: работает. ;-)

top

Заключение

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

Ни для кого не секрет, что в результате войны браузеров, которая продолжалась годами и теперь потихоньку затухает, образовалось очень много различий между HTML, который понимает Internet Explorer, и HTML, понятным Netscape Navigator'у; это касается и сценариев, и CSS, и иерархии объектов, входящих в веб-страницы. С использованием диалекта языка JavaScript от Microsoft -- JScript -- и объектной модели Internet Explorera можно менять контент страницы в людой его точке без перезагрузки самой страницы. Эта гибкость, к сожалеию, недоступна в тех случаях, когда разработчику приходится учитывать существование Netscape. Разговор о разнице в интерпретации кода этими двумя браузерами у нас с вами ещё впереди.

top

• Предыдущий материал - Основы JavaScript. Дизайн или программирование? Реализация Roll-over.