HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 10

Введение в динамический HTML

 

 

10.1. Браузер и HTML-документ

10.2. Родительские и дочерние объекты

10.3. Объекты браузера

10.4. Объектная модель документа (DOM)

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

JavaScript – это объектно-ориентированный язык программирования. Это означает, что каждый элемент на веб-странице и в окне вашего браузера предстает в виде некоего объекта, доступного для управления из программного кода. Кнопки и поля формы, гиперссылки, изображения, цвет фона веб-страницы и даже само окно браузера с точки зрения программирования на JavaScript являются объектами.

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

 

10.1. Браузер и HTML-документ

При программировании сценариев на JavaScript вы всегда будете использовать объекты в качестве основных инструментальных средств. Объекты – это элементы рабочей области браузера и HTML-документа. Окно браузера, веб-страница, ее фоновый цвет, изображения, текст и все, что находится на странице, – это объекты. В языке JavaScript принято различать объекты браузера и объекты HTML-документа. Рассмотрим их подробнее.

Объекты браузера создаются автоматически при загрузке веб-страницы. К ним относятся Window, Navigator, Screen, History, Location. Приведу их краткую характеристику.

• Window – дает доступ к окну браузера.

• History – дает доступ к истории посещенных ссылок.

• Navigator – дает доступ к характеристикам браузера.

• Location – содержит текущий URL страницы.

• Screen – дает доступ к характеристикам экрана монитора.

С точки зрения языка JavaScript окно вашего браузера – это объект Window. Данный объект, в свою очередь, также содержит некоторые объекты – элементы оформления, например строку состояния и полосу прокрутки.

Внутри окна браузера размещается веб-страница – HTML-документ. Он является ни чем иным, как объектом Document. В свою очередь, объект Document содержит другие объекты – объекты HTML. Это ссылки, изображения, формы, цвет фона, то есть все, что находится на веб-странице.

Итак, в языке JavaScript есть объекты. Их можно сравнить с существительными или предметами. У каждого объекта есть свои свойства, или характеристики. Свойства описывают объекты, как прилагательные описывают существительные. В синтаксисе языка JavaScript свойство любого объекта описывается так: oбъект. свойство. Например, установить желтый цвет фона веб-страницы с помощью языка JavaScript можно следующим образом: document.bgColor = «yellow». В этой конструкции document – объект (веб-страница, HTML-документ), bgColor – свойство объекта Document (фоновый цвет веб-страницы), yellow – значение свойства bgColor.

Кроме того, над каждым объектом можно совершать определенные действия. Эти действия принято называть методами. Согласно синтаксису языка JavaScript после метода всегда ставятся скобки по схеме oбъект. мeтoд(). Например, чтобы с помощью языка JavaScript отобразить на веб-странице текст «Hello world!», нужно использовать следующую конструкцию: document. write ("Hello world! "). Здесь document – объект, write() – метод, присущий объекту Document, а выражение в скобках – текст, который должен отобразиться на странице в результате использования метода write(). На языке программирования это называется «метод возвращает результат».

В листинге 10.1 представлен пример сценария, демонстрирующий рассмотренные ранее правила записи свойства и метода объекта Document.

Листинг 10.1. Свойство и метод объекта Document

Hello!

Обратите внимание, что строки внутри сценария отделяются друг от друга точкой с запятой. Данный сценарий меняет фоновый цвет веб-страницы и выводит текст Hello world! (рис. 10.1).

Рис. 10.1. Вывод текста и изменение фонового цвета страницы

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

 

10.2. Родительские и дочерние объекты

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

Иерархия объектов JavaScript показана на схеме, представленной на рис. 10.2.

Рис. 10.2. Иерархия объектов в языке JavaScript

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

Прямыми потомками объекта Window являются объекты Document, History, Location, Frame. Свойства объекта History представляют адреса ранее загруженных веб-страниц. Свойства объекта Location связаны с URL-адресом документа, отображаемого в окне браузера в данный момент, объекта Frame – со специальным способом представления данных в HTML-документе через фреймы.

Для каждой веб-страницы создается один объект Document. Он содержит другие объекты – объекты HTML. Это различные элементы веб-страницы: формы, ссылки на другие HTML-документы или локальные ссылки внутри одного документа, объекты, определяющие URL-адрес, и т. д. Все эти объекты являются дочерними для объекта Document.

Если в HTML-документе имеются формы, то они также предстают в виде иерархического набора объектов. Сама форма соответствует объекту Form, выступающему дочерним по отношению к объекту Document. Объект Fo rm может включать в себя такие объекты, как кнопки, переключатели, поля для ввода текстовой информации. Все элементы формы являются ее дочерними объектами.

Иерархия объектов внутри веб-страницы задается вложенностью HTML-элементов друг в друга и текста внутрь элементов. Объекты, имеющие открывающий и закрывающий теги (элементы-контейнеры), могут иметь дочерние объекты. Текст, атрибуты и элементы типа img, не имеющие закрывающего тега, не могут иметь дочерних объектов.

Чтобы лучше понять иерархию объектов в HTML-документе, рассмотрим простейший пример (листинг 10.2).

Листинг 10.2. Иерархия объектов в HTML-документе

javascript objects

Объекты JavaScript

Все элементы этой страницы являются объектами

Разберем этот документ с точки зрения иерархии объектов в языке JavaScript. Самому HTML-документу соответствует объект Document. Он является родителем для всех элементов, расположенных на веб-странице. Эти элементы принято называть узлами, а их иерархию – деревом HTML-документа.

Узел HTML является родительским по отношению ко всем остальным элементам веб-страницы. Узел HEAD имеет один дочерний узел TITLE. В свою очередь, узел TITLE имеет свой дочерний узел – текст Объекты JavaScript. BODY имеет два дочерних узла: H1 и P. Текст Все элементы этой страницы являются объектами выступает дочерним по отношению к P. Соответственно, текст Объекты JavaScript является дочерним объектом по отношению к H1.

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

 

10.3. Объекты браузера

 

Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и HTML-документом, загруженным в окно браузера, а также с самим браузером. Рассмотрим подробнее каждый из объектов браузера.

 

Объект Window

Объект Window представляет собой окно браузера и является родительским по отношению ко всем остальным объектам в языке JavaScript. Он имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна и содержимое строки состояния окна браузера.

• defaultStatus – сообщение, отображаемое в строке состояния браузера по умолчанию.

• status – текущее сообщение, отображаемое в строке состояния браузера.

• frames – массив всех фреймов данного окна.

• length – количество фреймов в родительском окне.

• name – имя окна, указанное при его открытии методом open(), а также в атрибуте target элемента A или в атрибуте name элемента FORM.

• parent – синоним имени окна, относится к окну, содержащему набор фреймов.

• self – синоним имени окна, относится к текущему окну.

• top – синоним имени окна, относится к окну верхнего уровня.

• window – синоним имени окна, относится к текущему окну.

• Свойства window и self – синонимы. Вы можете применять любое из них по своему усмотрению, результат будет одинаков.

• Свойства frames, length, parent и top применяются, когда в окно загружен HTML-документ с фреймами. Анализируя свойство length, вы можете определить количество фреймов в окне, а с помощью свойства frames (которое является массивом) получить доступ к окнам этих фреймов. Об использовании фреймов в JavaScript было подробно рассказано в гл. 5.

• Рассмотрим использование свойств объекта Window на примере сценария из листинга 10.3.

Листинг 10.3. Свойство status объекта Window

Свойство status объекта Window

Обратите внимание на текст в строке состояния вашего браузера!

Сценарий позволяет изменить текст в строке состояния браузера (рис. 10.3).

Рис. 10.3. Изменение текста в строке состояния браузера

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

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

• alert() – отображение диалоговой панели Alert (Предупреждение) с сообщением и кнопкой OK.

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

• confirm() – отображение диалоговой панели Confirm (Подтверждение) с кнопками OK и Отмена.

• prompt() – отображение диалоговой панели Prompt (Запрос) с полем ввода.

• open() – открытие окна.

• setTimeout() – установка таймера.

• clearTimeout() – сброс таймера.

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

Метод alert() применяется для вывода на экран простейшей диалоговой панели, отображающей какое-либо сообщение. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку OK в окне с сообщением.

Пример сценария, в котором используется метод alert(), приведен в листинге 10.4.

Листинг 10.4. Использование метода alert

Метод alert

Приведенный в примере сценарий выдает пользователю окно с сообщением Добро пожаловать! (рис. 10.4).

Рис. 10.4. Окно с сообщением

Внимание!

При вызове метода alert() не нужно указывать объект, для которого вызывается метод, – объект Window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту Window. Тем не менее вы можете явно указывать объект window: window. alert(). Результат будет тем же самым.

С помощью метода confi rm() также можно отобразить на экране диалоговую панель с вашим сообщением, однако эта панель содержит две кнопки – OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false. Поэтому данный метод часто применяется в сценариях с условиями if…else.

Рассмотрим использование метода confirm() на примере сценария из листинга 10.5.

Листинг 10.5. Использование метода confirm

Метод confirm()

Помимо метода confirm(), в сценарии использованы методы alert() и close(). В области заголовка документа определена функция okno(). Она содержит условие и обращается к методу confirm(), который выводит на экран диалоговую панель с запросом на закрытие окна (рис. 10.5).

Рис. 10.5. Окно с запросом, выводимое методом confirm()

Если пользователь нажмет кнопку OK, метод возвратит значение true, а если кнопку Отмена – значение false.

В случае положительного ответа функция okno() вызывает методы alert() и close() для текущего объекта Window. В данном случае таким объектом является окно браузера. Метод close() позволяет закрыть текущее окно браузера, а метод alert() выдаст пользователю сообщение До свидания!. Если же пользователь нажмет кнопку Отмена, то получит окно с сообщением Тогда оставайтесь.

Примечание

Вместо объекта Window в сценарии можно указывать объект Self, так как это синоним текущего окна. Например, self.close().

Если вам необходимо получить от пользователя одну текстовую строку, то можете применить другой метод объекта Window – метод prompt(). Он отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt() возвращает введенную строку.

Рассмотрим пример сценария, вызывающего метод prompt() (листинг 10.6).

Листинг 10.6. Использование метода prompt()

Метод prompt()

Сценарий выдает пользователю запрос на ввод его имени (рис. 10.6).

Рис. 10.6. Окно запроса

Имя, которое ввел пользователь в окне запроса, отображается на веб-странице благодаря команде document.write.

Совет

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

Ранее мы рассматривали пример закрытия окна браузера с использованием метода close(). С помощью метода open() в сценарии JavaScript можно открыть новое окно браузера и загрузить в него HTML-документ или изображение для просмотра.

Синтаксис команды с использованием метода open() следующий: ореп('адрес URL', 'имя окна', сопйд='параметр 1, параметр 2, параметр 3…., параметр n').

Первый параметр метода open() задает URL-адрес HTML-документа, предназначенный для загрузки в новое окно. Например, data.html. Если загружаемая HTML-страница располагается на другом сервере, то добавьте http:// и полный адрес страницы в Интернете. Например, .

Второй параметр в синтаксисе метода open() определяет имя окна для использования в атрибуте target элемента A или FORM. Вы также можете указать его как пустую строку вида "". Если вам нужно, чтобы страница загружалась в маленьком окне, то данный параметр должен иметь значение joe. Необходимо будет указать joe и после атрибута target.

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

• width – ширина окна в пикселах.

• height – высота окна в пикселах.

• toolbar – если параметр имеет значение yes или 1, окно снабжается стандартной панелью инструментов. Если же значение этого параметра равно no, то панель инструментов в новом окне не отображается.

• location – параметр определяет, будет ли отображаться поле ввода адреса HTML-документа (адресная строка).

• status – отображение строки состояния.

• menubar – отображение строки меню.

• scrollbars – отображение полос прокрутки.

• resizable – если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна.

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

Примечание

Помните, что пробел для браузера означает конец команды.

Теперь рассмотрим примеры сценариев, использующих метод open() (листинги 10.7 и 10.8).

Листинг 10.7. Файл okno.html

Метод open()

Листинг 10.8. Файл okno2.html

Метод open()

Yandex

Щелкните, чтобы закрыть

Сценарий в файле okno.html открывает документ okno2. html в новом маленьком окне браузера (рис. 10.7).

Рис. 10.7. Новое окно браузера

Это окно имеет размеры 300 х 250 пикселов, в нем не отображаются меню, панель инструментов, адресная строка и полоса прокрутки. За это отвечают значения атрибутов параметра config, равные no. В новом окне отображается только строка состояния, что определяется атрибутом status=yes. Кроме того, пользователь может изменять размеры нового окна. За это отвечает атрибут resizable=yes.

Обратите внимание на строку window.name="main window". Здесь использовано свойство name объекта Window, а main window – это имя главного (большого) окна. Вместо window.name можно написать self.name. Результат будет тот же самый, поскольку window и self – синонимы.

В новое окно загружается документ okno2.html, содержащий две ссылки. Одна ссылка загружает главную страницу сайта поисковой системы «Яндекс» в большом окне браузера, имя которому main window. Этого результата мы добились благодаря команде target="main window". Если необходимо, чтобы страница загружалась в маленьком окне, просто напишите j oe вместо main window. Другая ссылка позволяет закрыть маленькое окно благодаря обработчику события onCli ck и методу close(): onClick="window.close".

Совет

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

Рассмотрим следующий метод объекта Window – setTimeout(). С его помощью вы можете запрограммировать компьютер на выполнение определенных команд по истечении некоторого времени.

При использовании описываемого метода применяется следующий синтаксис: setTimeout ("cmd", timeout). Когда пройдет время, заданное параметром timeout (в миллисекундах), запускается команда JavaScript, определенная параметром cmd.

Пример сценария, содержащего метод setTimeout(), приведен в листинге 10.9.

Листинг 10.9. Использование метода setTimeout

Метод setTimeout

//форма

Данный HTML-документ содержит сценарий и форму с кнопкой Timer. При нажатии кнопки открывается окно Alert с задержкой в три секунды (рис. 10.8).

Рис. 10.8. Окно Alert с сообщением

Здесь setTimeout() – это метод объекта Window. Он определяет интервал времени в 3000 миллисекунд (3 секунды) и команду, которая должна быть выполнена по истечении этого времени. В данном случае это вызов окна с сообщением с помощью метода alert: «alert(Время истекло!)». Обратите внимание, что код на JavaScript должен быть обязательно заключен в кавычки, а время указывается в миллисекундах и без кавычек.

С помощью метода clearTimeout() можно остановить таймер, запущенный только что рассмотренным методом setTimeout(). В качестве параметра методу clearTimeout() необходимо передать идентификатор таймера, полученный от метода setTimeout():

clearTimeout(idTimer)

Методы setTimeout() и clearTimeout() применяются для периодического вызова функции сдвига сообщения в строке состояния браузера («бегущая» строка) и для ограничения времени ввода пользователем пароля в формах. Еще одно применение данного метода – создание анимационных эффектов с использованием сценариев JavaScript.

Помимо свойств и методов, с объектом Window связаны два обработчика событий – onLoad и onUnload. Первый из них срабатывает, когда браузер заканчивает загрузку окна, а второй – когда пользователь завершает работу с HTML-документом.

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

Внимание!

Как правило, вызов обработчиков событий onLoad и onUnload располагается в строке элемента BODY.

В качестве примера рассмотрим HTML-документ, который приведен в листинге 10.10.

Листинг 10.10. Использование обработчиков событий onLoad и onUnload

Обработчики событий onLoad и onUnload

Здесь в элементе BODY определены обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция hello, при возникновении второго – функция bye.

Поскольку HTML-документ интерпретируется в направлении сверху вниз, функции hello и bye необходимо определить до появления элемента BODY. Лучшее место для определения этих функций – заголовок HTML-документа.

Итак, вы познакомились с методами, свойствами и событиями объекта Window, позволяющими выполнять различные действия с окном браузера. Теперь рассмотрим другой объект JavaScript, с помощью которого вы можете получить некоторые данные о самом браузере, – объект Navigator.

 

Объект Navigator

Объект Navigator автоматически создается при открытии веб-страницы браузером и содержит общую информацию о браузере пользователя.

Примечание

Объект Navigator служит для доступа к самой программе обозревателя. Не путайте его с объектом Window, представляющим текущее окно браузера, и названием программы Netscape Navigator.

Благодаря объекту Navigator можно узнать некоторые данные о браузере и компьютере пользователя. Эта информация может пригодиться при формировании

разного стиля веб-страниц для различных браузеров.

Как и другие объекты JavaScript, Navigator имеет свои свойства. Это конкретные

строковые значения о браузере пользователя.

• appCodeName – определяет кодовое имя (платформу, «движок») браузера.

• appName – указывает имя (название) браузера, например Netscape или Internet Explorer.

• appVersion – определяет версию браузера, включая платформу, выпуск браузера и операционную систему пользователя.

• userAgent – возвращает строку, идентифицирующую браузер пользователя, то есть заголовок протокола, используемого браузером во время работы с сервером. Проще говоря, это название браузера, посылаемое серверу с помощью HTTP-протокола. Оно является комбинацией значений свойств appCodeName и appVersion.

• cookieEnabled – указывает, разрешено или нет использование cookies, позволяющих сохранять небольшие фрагменты информации на компьютере пользователя. Возвращает true, если пользователь разрешил браузеру прием cookies. Поддерживается только Internet Explorer, начиная с версии 4.0.

• browserLanguage – определяет текущий язык браузера. Поддерживается только Internet Explorer, начиная с версии 4.0.

• systemLanguage – указывает язык операционной системы по умолчанию, например ru, если используется русская версия Windows. Поддерживается только Internet Explorer, начиная с версии 4.0.

• userLanguage – определяет пользовательские настройки языка операционной системы. Поддерживается только Internet Explorer, начиная с версии 4.0.

• platform – указывает платформу операционной системы пользователя, например Win32.

• cpuClass – определяет класс (тип) центрального процессора компьютера пользователя. Например, x8 6 или Alpha. Поддерживается только Internet Explorer, начиная с версии 4.0.

Рассмотрим пример сценария, в котором определяются различные характеристики браузера (листинг 10.11).

Листинг 10.11. Определение характеристик браузера

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

В данном примере каждому свойству объекта Navigator назначена отдельная переменная. Благодаря команде document. write() информация о характеристиках браузера отображается на веб-странице (рис. 10.9).

Рис. 10.9. Характеристики браузера

Если какие-либо свойства объекта Navigator не определяются, значит, ваш браузер их не поддерживает.

Рассмотрим еще один пример использования свойств объекта Navigator (листинг 10.12).

Листинг 10.12. Определение имени браузера

Test of Browser name

Проверка имени браузера


Приведенный в листинге сценарий содержит условие if…else и проверяет имя браузера пользователя (рис. 10.10).

Рис. 10.10. Проверка имени браузера

Если страница открыта в Internet Explorer, то пользователь получит сообщение У вас хороший браузер (рис. 10.11).

Рис. 10.11. Окно с сообщением

Если для открытия страницы используется другой браузер, сообщение будет следующим: А чем вам не понравился Microsoft Internet Explorer?.

Этот простейший пример показывает, как можно применять свойства объекта Navigator при решении задач программирования типа «Если браузер клиента такой-то, то…, иначе…».

Помимо свойств, для объекта Navigator в языке JavaScript определены свои методы.

• taintEnabled() – проверяет браузер на несовместимость с Netscape Navigator.

• javaEnabled() – проверяет, разрешено ли в браузере выполнение сценариев JavaScript.

Оба метода возвращают логические значения (true или false). Их можно использовать для принятия каких-либо решений в других сценариях.

 

Объект Screen

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

Как и другие объекты, Screen имеет свои свойства.

• width – определяет полную ширину экрана монитора в пикселах.

• height – задает полную высоту экрана монитора пользователя в пикселах.

• availHeight – определяет высоту полезной области экрана монитора без Панели задач и подобных ей элементов графического интерфейса операционной системы.

• availWidth – возвращает ширину полезной области экрана монитора без Панели задач и подобных ей элементов графического интерфейса операционной системы.

• colorDepth – возвращает глубину цвета. Для 16 цветов возвращается 2, для 256 – 8, для 16,7 миллионов цветов (режим High Color) – 32.

• updateInterval – возвращает интервал времени (в миллисекундах) между обновлениями экрана. Значение 0 позволяет браузеру выбирать среднее число, что обычно работает лучше всего.

Примечание

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

В следующем примере приведен сценарий, который позволит вам определить параметры экрана монитора (листинг 10.13).

Листинг 10.13. Свойства объекта Screen

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

Результат работы сценария показан на рис. 10.12.

Рис. 10.12. Параметры экрана монитора

Размеры экрана монитора пользователя являются очень важными для разработчика. Создавая сайт под разрешение монитора 1280 х 720 пикселов, нужно помнить, что его будет очень неудобно просматривать на экране с разрешением 800 х 600. Используя свойства объекта Screen, в сценарии JavaScript можно изменять размер веб-страниц в зависимости от разрешения экрана монитора пользователя. Если вместе с этим приемом использовать сценарий для определения браузера пользователя, то ваш сайт будет прекрасно отображаться в окне любого браузера на экране с любым разрешением.

 

Объект History

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

Внимание!

Поскольку объект History является частью объекта Window, доступ к нему осуществляется именно через этот объект: window, history, length.

У объекта History всего одно свойство – length. Оно определяет количество посещенных веб-страниц за текущий сеанс работы в браузере. Сценарий из листинга 10.14 показывает, сколько страниц вы посетили за сеанс.

Листинг 10.14. Определение количества посещенных веб-страниц

Количество посещенных страниц

Данный сценарий содержит функцию hislen(), вызывающую окно Alert при нажатии кнопки формы. В окне отображается количество веб-страниц, посещенных за текущий сеанс работы с браузером. Если вы запускаете сценарий с жесткого диска, не удивляйтесь, если количество посещенных страниц будет равно нулю (рис. 10.13).

Рис. 10.13. Окно с указанием количества посещенных веб-страниц

Передвигаться по истории и загружать ранее посещенные пользователем веб-страницы позволяют следующие методы объекта History:

• go() – загружает веб-страницу с определенным номером относительно страницы, открытой в данный момент в браузере (текущая страница имеет индекс 0, предыдущая– 1, посещенная до этого страница–2 и т. д.);

• back() – загружает предыдущую веб-страницу, посещенную пользователем (эквивалентно go(-1));

• forward() – загружает следующую веб-страницу из списка истории, если таковая имеется (эквивалентно go(1)).

Например, чтобы перейти на две страницы назад, можно использовать сценарий из листинга 10.15.

Листинг 10.15. Перемещение по истории посещений

Перемещение по истории посещений

При нажатии кнопки формы (рис. 10.14) запускается функция goback(), позволяющая перейти на две страницы назад.

Рис. 10.14. Кнопка для запуска функции

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

 

Объект Location

Объект Location является частью объекта Window. Он содержит информацию об URL-адресе текущей страницы и его составляющих.

Использование объекта Location в сценарии JavaScript позволяет обновить текущую страницу или полностью поменять URL-адрес, то есть перейти на другую веб-страницу.

Свойства объекта Location содержат различную информацию о подключении пользователя к HTTP-серверу.

• href – полный URL-адрес текущей веб-страницы.

• hash – имя «якоря» в URL-адресе веб-страницы (значение атрибута name), если он есть.

• host – часть URL-адреса страницы, содержащая имя сервера в Интернете и номер порта.

• hostname – имя сервера в Сети, с которого загружена текущая веб-страница.

• pathname – путь к файлу на веб-сервере без имени сервера и порта.

• port – сообщает номер порта HTTP-сервера, через который идет обращение к веб-странице. Если порт не указан, возвращает номер 8 0 – стандартный порт, через который работает протокол HTTP.

• protocol – протокол передачи данных (HTTP, FTP и др.). Если протокол не указан, возвращает значение http:.

• search – строка параметров для серверных сценариев, начинается со знака?.

Команды host, hostname, port, search не работают, если просматривать страницу с жесткого диска компьютера. Результат может быть только в том случае, если веб-страница размещается на сервере в Интернете.

Внимание!

Поскольку объект Location является частью объекта Window, доступ к нему осуществляется именно через этот объект: window.location.property.

Рассмотрим использование свойств объекта Location на примере сценария из листинга 10.16.

Листинг 10.16. Свойство href объекта Location

URL текущего HTML-документа

Данный сценарий определяет полный URL-адрес текущего HTML-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).

Рис. 10.15. Путь к файлу со сценарием

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

Рассмотрим подробнее методы объекта Location.

• assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.

• reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).

• replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.

В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().

Листинг 10.17. Использование метода replace()

Метод replace()

//РєРЅРѕРїРєР°

Сценарий позволяет изменить текущую страницу в окне браузера на главную страницу сайта . За это отвечает функция replaceDoc(), которая вызывается при нажатии кнопки Replace (рис. 10.16).

Р РёСЃ.В 10.16. РљРЅРѕРїРєР° Replace

Таким образом, объект Location позволяет не только определять адрес загруженного в браузер HTML-документа, но, что более важно, загружать в текущее окно новую вебстраницу.

Итак, мы рассмотрели объекты браузера, их свойства и методы. Для HTML-документа и его содержимого в языке JavaScript также определены свои объекты.

 

10.4. Объектная модель документа (DOM)

 

Стандартный набор объектов в HTML-документе, их свойства и способ доступа к ним определяется объектной моделью документа (Document Object Model, сокращенно DOM). DOM позволяет управлять всеми элементами на веб-странице, изменять их свойства и содержание, создавать новые элементы.

 

Объект Document

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

Любая веб-страница, которую вы просматриваете в окне браузера, может быть описана как набор объектов. Она включает собственно HTML-документ «в целом» и более мелкие объекты – элементы веб-страницы. Например, заголовок, абзац_1, абзац_2, абзац_3, рисунок, ссылка, форма и т. п.

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

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

Коллекция – это массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам и имеющий свойства и методы. Коллекция отличается от обычного массива именно наличием свойств и методов. Поэтому каждая коллекция сама по себе объект и в то же время свойство объекта Document.

Рассмотрим, какие же коллекции существуют для объекта Document.

• anchors – коллекция всех локальных меток («якорей»), размещенных в HTML-документе. Эти метки содержатся в тегах и применяются для организации ссылок внутри одной веб-страницы.

• links – коллекция всех ссылок в HTML-документе, содержащихся в тегах .

• images – массив всех изображений на веб-странице.

• forms – коллекция всех форм в HTML-документе.

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

Пример сценария, использующего одну из коллекций объекта Document, приведен в листинге 10.18.

Листинг 10.18. Использование коллекции anchors

Anchors

1 anchor

2 anchor

3 anchor


Количество "якорей" в этом HTML-документе:

Данный сценарий демонстрирует использование массива anchors для определения количества «якорей» в HTML-документе. Команда document. write отображает количество «якорей» на странице в числовом выражении (рис. 10.17).

Рис. 10.17. Использование коллекции anchors

Количество «якорей» подсчитывается с помощью команды document.anchors. length, где document – объект Document, anchor – массив всех «якорей» на веб-странице, а length – длина массива (то есть количество элементов в массиве).

Аналогично можно определить количество всех ссылок, изображений и форм на веб-странице. Для этого вместо коллекции anchors в строку document. anchors. length достаточно подставить названия массивов: links, images или forms.

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

• alinkColor – содержимое атрибута alink. Он определяет цвет ссылок, выбранных пользователем.

• linkColor – содержимое атрибута link, определяющего цвет еще не посещенных ссылок, размещенных в HTML-документе.

• vlinkColor – содержимое атрибута vlink. Он задает цвет уже посещенных ранее ссылок, размещенных в HTML-документе.

• bgColor – содержимое атрибута bgcolor. Применяется для создания цветного фона HTML-документа. Цвет задается либо в шестнадцатеричном виде (например, #F0F8FF), либо в виде названий цветов (например, red или white).

• fgColor – содержимое атрибута text, определяющего цвет текста. Задается таким же образом, что и цвет фона веб-страницы bgcolor.

• lastModified – дата последнего изменения HTML-документа.

• location – полный URL-адрес текущей веб-страницы.

• referrer – URL-адрес страницы, с которой была открыта данная веб-страница.

• title – заголовок документа, заданный с помощью элемента TITLE.

• URL – полный URL-адрес HTML-документа.

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

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

Листинг 10.19. Свойства объекта Document

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

Изменение цветового оформления страницы

Щелкните по этим ссылкам:

Yandex

Бесплатная электронная почта

Сервер Microsoft

Результат работы сценария показан на рис. 10.18.

Рис. 10.18. Изменение цвета фона, текста и ссылок

Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».

Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).

Листинг 10.20. Использование свойства lastModified

Свойство lastModified

Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write() помещает полученную дату на веб-страницу (рис. 10.19).

Рис. 10.19. Использование свойства lastModified

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

• close() – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write(). Метод close() не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0.

• getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0.

• getElementByld ({ID}) – возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод getElementById() имеет единственный параметр – имя элемента страницы. Поддерживается браузером Internet Explorer, начиная с версии 5.0.

• getElementsByTagName({Имя тега}) – возвращает тег, имя которого передано в качестве параметра. Поддерживается браузером Internet Explorer, начиная с версии 5.0.

• write() – записывает текст или HTML-код в текущее место документа.

В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById(), getElementsByName() и getElementsByTagName(). Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21).

Листинг 10.21. Использование метода getElementsByTagNameO

Метод getElementsByTagName()





Данный сценарий содержит функцию getElements(), которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20).

Рис. 10.20. Окно с количеством элементов

Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21).

Рис. 10.21. Элементы INPUT

Итак, мы рассмотрели один из главных объектов в языке JavaScript – объект Document, представляющий собой веб-страницу, загруженную в окно браузера. Благодаря определенным свойствам и методам через объект Document можно получить доступ к любым другим объектам, расположенным на веб-странице.

 

Доступ к объектам документа

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

Доступ к различным объектам HTML-документа в языке JavaScript организован в строгом соответствии с иерархией объектов. Каждый объект иерархической структуры имеет свое имя.

Например, на веб-странице может находиться несколько изображений с именами img1, img2 и img3. Если вы хотите обратиться к первому рисунку, то должны сориентироваться в иерархии объектов и начать с самой ее вершины. Главный объект на веб-странице называется Document. Все изображения на странице представлены как коллекция images. Причем первый рисунок всегда обозначается как images [0], второй как images [1], третий как images [2] и т. д. Иными словами, отсчет объектов в коллекции начинается не с единицы, а с нуля.

Таким образом, вы можете получить доступ к первому изображению img1, записав в сценарии JavaScript document.images[0]. Чтобы получить доступ ко второму изображению img2, запишите в сценарии строку document. images [1]. Соответственно для получения доступа к третьему изображению img3 на веб-странице используйте конструкцию document.images[2].

Примечание

Как видите, номер изображения на веб-странице и номер изображения в коллекции отличаются на единицу.

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

Например, чтобы узнать, какой текст ввел посетитель вашей веб-страницы в поле формы, необходимо обратиться к значению (value) данного поля. Для этого в сценарии JavaScript можно записать строку name= document. forms [0]. elements [0]. value. Полученная строка заносится в переменную name. И теперь вы можете работать с этой переменной, используя ее в других строках сценария JavaScript.

Однако, если вы создаете сложную веб-страницу, процедура адресации к различным объектам по номеру становится весьма затруднительной. Например, довольно неудобно обращаться к объекту через строку document. forms [4]. elements [15]. Можно запутаться в количестве объектов на странице и неправильно указать номер нужного объекта.

Во избежание подобной проблемы в JavaScript можно не только пользоваться существующими коллекциями объекта Document, но и самим присваивать различным объектам уникальные имена. Например, форме на вашей веб-странице можно присвоить имя myform с помощью оператора name:

. Эта запись означает, что первая форма, соответствующая объекту forms[0], получает уникальное имя myform.

Точно так же нужно поступать по отношению к любому элементу формы. Вместо elements[0] вы можете указывать оператор name. Вместо name = document. forms[0].elements[0].value можно записать name = document.myf orm. element name.value.

Такой прием значительно упрощает доступ к элементам HTML-документа, а следовательно, и программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов.

Внимание!

При написании имен объектов обязательно следите за положением регистра. Нельзя писать Myform вместо myform, поскольку язык JavaScript чувствителен к регистру и будет воспринимать их как совершенно разные имена объектов.

Таким образом, доступ к объектам HTML-документа можно получить двумя способами:

• используя коллекции и нумерацию объектов;

• присваивая каждому объекту уникальное имя.

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

Рассмотрим несколько примеров, иллюстрирующих способы доступа к объектам веб-страницы.

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

Листинг 10.22. Передача данных в функцию

Ваша любимая геометрическая фигура:

Ваш любимый цвет:

Почему вам нравится эта фигура:

В данном HTML-документе расположена форма с полями ввода и кнопкой (рис. 10.22). При ее нажатии обработчик событий onClick запускает функцию doit(), обрабатывающую данные, введенные пользователем в поля формы.

Рис. 10.22. Элементы формы

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

Самой форме присвоено имя aform. Каждому полю ввода также присвоены уникальные имена: geometr, color, prichina. Введенные пользователем данные передаются в функцию как значение value. В соответствии с иерархией объектов на первом месте стоит объект Document, далее идет форма, затем поле формы и, наконец, значение поля – текст, введенный пользователем.

В сценарии эта цепочка объектов выглядит следующим образом: document. aform.geometr.value. Таким образом, функция doit() получает данные пользователя из значения value поля geometr формы aform в HTML-документе document. Аналогично происходит передача данных в функцию из других полей формы.

Данные, полученные от формы, отображаются функцией в окне Alert (рис. 10.23).

Рис. 10.23. Результат работы сценария

Рассмотрим еще один пример сценария JavaScript (листинг 10.23).

Листинг 10.23. Смена изображений на веб-странице

Смена картинок через массив

Просмотр фотографий

РџСЂРёСЂРѕРґР°

Данный сценарий позволяет просматривать различные фотографии природы на веб-странице (рис. 10.24).

Рис. 10.24. Просмотр фотографий на странице

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

Сам сценарий находится в заголовке HEAD HTML-документа. Он содержит функцию myimage(pic), которой передаются названия рисунков. В функции определена строка, ответственная за смену изображений: document. images [0]. src=pic. Как видите, в данной строке указаны объект Document, массив изображений на странице (images [0]) и источник изображений (src). В массиве определен индекс [0], поскольку в веб-странице отображается только одна картинка. Как вы помните, нулевой индекс в коллекции соответствует первому изображению в HTML-документе.

Изначально на странице отображается картинка d.jpg. Это определено в строке . При щелчке кнопкой мыши на ссылке с названием картинки запускается сценарий: . Фотографии сменяют друг друга благодаря тому, что название изображения из скобок передается в строку document.images [0].src=pic. Значение pic заменяется названием фотографии из выбранной ссылки, например 'a.jpg'. При выборе следующей ссылки значение pic опять заменяется названием фотографии, а точнее именем файла с изображением.

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

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

 

Резюме

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