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

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

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

Объекты браузера упорядочены в иерархическом порядке, создавая структуру родительских и дочерних объектов. При определении объекта вы сначала вводите имя родительского объекта, после него ставите разделитель (точку), а затем имя дочернего объекта. Например, объекты, соответствующие рисункам вэб-страницы, соответствуют дочерним объектам родительского объекта document. В следующем примере определен объект image7, который является дочерним по отношению к объекту document, который, в свою очередь, тоже дочерний - только уже по отношению к объекту window:

window.document.image7

Объект window находится на самой верхушке иерархической структуры.

История DOM

Начиная с версии 1.1 (реализованной в Netscape Navigator 2.0), в JavaScript включены объекты браузера, позволяющие управлять частью документа HTML и элементами браузера. Но на то время объекты браузера еще не стали стандартом. Хотя NN и IE уже использовали эту модель, не существовало гарантий, что новый объект будет в них поддерживаться стопроцентно. К тому же одни и те же объекты выполнялись в этих двух браузерах по-разному.

В настоящее время также существует разница в объектных моделях браузеров Netscape и Microsoft. Но, с момента выпуска NN 3.0 и IE 4.0 все основные объекты поддерживаются обоими браузерами и выполняются одинаково.

Совсем недавно консорциум W3C (World Wide Web Consortium - Консорциум по стандартизации Web) разработал стандарт DOM. В этот стандарт включены не только базовые объекты, но и объекты управления частями документа HTML, а также объекты, поддерживаемые в XML.

Стандарт DOM частично поддерживается как в NN, так и в IE. Максимально усовершенствованы для поддержки нового стандарта - NN 6.0 и IE 5.0 и выше.

Объекты Window

Иерархическая структура объектов браузера начинается с объекта window. Он представляет окно браузера. Вы уже знакомы с этим объектом.

Свойство window.status используется для изменения вида строки состояния.

Методы window.alert, window.confirm и window.prompt позволяют отображать диалоговые окна с разными запросами.

Одновременно можно использовать несколько объектов window, каждый для открытого окна браузера. Фреймы также представляются объектами window. Детально об окнах и фреймах позже.

Управление web-документами

Объект document представляет объект web-документа или web-страницы. Документы или страницы отображаются в окне обраузера, поэтому не удивительно, что объект document дочерний по отношению к объекту window. Изменения, проведенные с помощью объекта document, будут отображаться в окне браузера, а поэтому сказываются на объекте window.

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

Получение информации о браузере

Некоторые свойства объекта document используются для получения сведений о браузере и текущем документе.

Свойство URL используется для определения адреса текущей web-страницы. Адрес вводится одним словом. Изменить это свойство нельзя. Если необходимо открыть в окне браузера другую страницу, используйте объект window.location.

Свойство title содержит заголовок текущей страницы, определенный после дескриптора <TITLE>.

Свойство referrer определяет адрес вэб-страницы, просматриваемой до отображения текущего вэб-документа. Как правило, на ней есть ссылка на текущую страницу.

Свойство lastModified содержит дату последнего изменения вэб-страницы. Эта дата сохраняется на сервере и присылается при отображении вэб-страницы в браузере.

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

Листинг 18.1. Отображение даты последнего изменения документа

1:    <HTML><HEAD><TITLE>Тестирование документа</TITLE></HEAD>
2:    <BODY>
3:    Эта страница последний раз была изменена:
4:    <SCRIPT LANGUAGE="JavaScript">
5:    document.write(document.lastModified);
6:    </SCRIPT>
7:    </BODY>
8:    </HTML>
                   

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

Добавление в документ текста

Простейший метод объекта document - это тот, который используется чаще других. Фактически вы его уже многократно использовали. Метод document.write отображает текст в окне браузера. Этот оператор используется тогда, когда необходимо добавить результат выполнения операций на вэб-страницу.

Подобный ему метод document.writeln также позволяет отобразить в окне браузера текст и содержит в конце строки оператор /n. Этот оператор указывает на то, что в этой строке больше ничего отображаться не будет. Поэтому метод document.writeln используется в тех случаях, когда необходимо в одной строке вывести только результат.

Эти методы используются только в теле вэб-страницы и выполняются при ее загрузке. Вы не можете добавить результат в уже загруженную страницу без ее перезагрузки. О том, как вставить в документ новые данные, дальше.

Метод document.write используется только в в сценарии, размещенном в теле документа. Его можно исопользовать и в функции, вызов которой обязательно осуществляется в теле документа HTML.

Очистка и обновление содержимого Web-страницы

Для объекта document определены методы open и close. Несмотря на существование подобных методов в объекте window, объект document использует их для выполнения других операций. Эти методы используются не для открытия или закрытия документов или окон браузера, как может показаться вначале. Метод open открывает новый поток, очищающий содержимое документа и подготавливающий его для добавления данных с помощью методов write и writeln.

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

Данные, добавляемые в документ после метода document.open, не отображаются до тех пор, пока не использован метод document.close, закрывающий поток. После нахождения этого оператора JavaScript приступает к выполнению блока операторов write, введенных между указанными методами.

Если применять метод document.open к текущему окну, то сценарий, как часть программы будет прерван и очищен. Именно поэтому данный метод хорошо использовать при управлении несколькими окнами и фреймами.

В команде document.open можно дополнительно определить тип данных MIME. Это позволит создавать документ любого типа, включая рисунки и документы, используемые приложениями.

MIME - это аббревиатура от Multipurpose Internet Mail Extensions (Многоцелевые расширения электронной почты в Internet). Это стандарт Internet для используемых типов документов. Web-сервер посылает в браузер сведения о типе MIME документа, чтобы тот мог правильно отобразить Web-документ. Типичный документ имеет тип HTML (соответствует типу text/html).

Использование ссылок и анкеров

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

Анкер (или якорь) - это именованный элемент документа HTML. Он определяется следующим дескриптором: <A NAME="part2">. Ссылка на него задается так: <A HREF="#part2">.

Объект link управляется с помощью массива links. Каждый элемент массива представляет собой объект link текущей страницы. Свойство массива document.links.length определяет количество ссылок на странице.

Каждый объект link (или элемент массива links) имеет целый набор свойств, определяющих адрес страницы, на которую добавлена ссылка. Эти же свойства имеет и объект location. В свойствах объекта link указывается также номер ссылки и ее название. В приведенном ниже примере адрес URL первой ссылки определяется переменной link1:

link1 = links[0].href;

Объекты анкеров также выступают в роли дочерних по отношению к объекту document. Каждый объект анкера соответствует анкеру документа HTML - именованному элементу документа HTML.

Подобно ссылкам, анкеры управляются с помощью массива anchors. Каждый элемент этого массива - это отдельный объект anchor. Свойство document.anchors.length определяет количество анкеров документа HTML.

Получение сведений о работе браузера

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

Объект history обладает четырьмя свойствами.

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

history.current - содержит одно значение - адрес URL текущей страницы, открытой в браузере.

history.next - тоже содержит одно значение - адрес URL страницы, к которой перейдет пользователь, если щелкнет на панели инструментов браузера на кнопке Forward (Вперед). Поскольку эта кнопка не активна до тех пор, пока хотя бы один раз не воспользоваться кнопкой Back (Назад), это свойство до определенного момента использовать нельзя.

history.previous - тоже содержит одно значение - адрес URL страницы, к которой перейдет пользователь, если щелкнет на панели инструментов браузера на кнопке Back (Назад).

Объект history можно также обрабатывать и как массив. Каждый элемент массива содержит адрес URL из списка посещаемых страниц. Текущая страница представлена элементом history[0].

Кроме свойств объект history имеет три метода.

history.go - открывает страницу по указанному адресу в списке адресов посещаемых страниц. Положительные и отрицательные числа соответствуют расположению адресов в массиве history. Например, элемент history.go(-2) соответствует двойному нажатию на кнопке Back (Назад).

history.back - загружает страницу, которая отображалась в окне браузера перед текущей. Этот метод аналогичен нажатию кнопки Back (Назад).

history.forward - загружает страницу, которая отображается в списке адресов посещаемых страниц после текущей (если она указана). Этот метод аналогичен нажатию на кнопке Forward (Вперед).

Методы history.back и history.forward в некоторых версиях Netscape Navigator выполняются неправильно. По этой причине лучше всегда использовать метод history.go (history.go(-1) и history.go(1)).

Объект location

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

Wind0ws.Location.Href="http://www.yahoo.com";

Свойство href, используется в операторе, содержит полный адрес URL страницы, загруженной в окне. Вы можете при необходимости указывать только часть адреса URL, например location.protocol определяет протокольную часть адреса (чаще всего http:).

Хотя свойство location.href содержит тот же адрес URL, что и свойство document.URL, последнее изменить вы не можете. Для загрузки новой страницы всегда используйте свойство location.href.

Объект location имеет два метода.

location.reload - перезагружает текущий документ. Аналогичен по функции кнопке Reload (Обновить).

location.replace - замещает текущую страницу указанной. Действует аналогично указанию свойств объекта location вручную. Разница состоит в том, что этот метод не изменяет историю браузера. Другими словами, кнопку Back (Назад) нельзя будет использовать для перехода к исходной странице.

Получение сведений о браузере

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

Объект navigator назван в честь браузера Netscape Navigator, который изначально был единственным, поддерживающим JavaScript. Несмотря на свое название, этот объект поддерживается и в Internet Explorer.

Программный код, воспринимаемый только определенным типом браузеров, добавлять в сценарий не рекомендуется. Детально об объекте navigator мы поговорим позже.