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 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
Все элементы этой страницы являются объектами
Разберем этот документ СЃ точки зрения иерархии объектов РІ языке 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
Обратите внимание на текст в строке состояния вашего браузера!
Сценарий позволяет изменить текст в строке состояния браузера (рис. 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
Приведенный в примере сценарий выдает пользователю окно с сообщением Добро пожаловать! (рис. 10.4).
Рис. 10.4. Окно с сообщением
Внимание!
При вызове метода alert() не нужно указывать объект, для которого вызывается метод, – объект Window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту Window. Тем не менее вы можете явно указывать объект window: window. alert(). Результат будет тем же самым.
С помощью метода confi rm() также можно отобразить на экране диалоговую панель с вашим сообщением, однако эта панель содержит две кнопки – OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false. Поэтому данный метод часто применяется в сценариях с условиями if…else.
Рассмотрим использование метода confirm() на примере сценария из листинга 10.5.
Листинг 10.5. Рспользование метода 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()
Сценарий выдает пользователю запрос на ввод его имени (рис. 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
Листинг 10.8. Файл okno2.html
Щелкните, чтобы закрыть
Сценарий в файле 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
Данный 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
Здесь в элементе 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 назначена отдельная переменная. Благодаря команде document. write() информация о характеристиках браузера отображается на веб-странице (рис. 10.9).
Рис. 10.9. Характеристики браузера
Если какие-либо свойства объекта Navigator не определяются, значит, ваш браузер их не поддерживает.
Рассмотрим еще один пример использования свойств объекта Navigator (листинг 10.12).
Листинг 10.12. Определение имени браузера
Проверка имени браузера
Приведенный в листинге сценарий содержит условие 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
Результат работы сценария показан на рис. 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-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).
Рис. 10.15. Путь к файлу со сценарием
Методы объекта Location позволяют перезагружать текущую веб-страницу или менять URL-адрес, загружать другую веб-страницу вместо предыдущей. При этом будет невозможен переход к предыдущей странице с помощью кнопки Назад в браузере пользователя. Возникает эффект, что страницы как бы подменяются друг другом.
Рассмотрим подробнее методы объекта Location.
• assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.
• reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).
• replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.
В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().
Листинг 10.17. Рспользование метода 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
Количество "якорей" в этом 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
Рзменение цветового оформления страницы
Щелкните по этим ссылкам:
Бесплатная электронная почта
Результат работы сценария показан на рис. 10.18.
Р РёСЃ.В 10.18. Рзменение цвета фона, текста Рё ссылок
Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».
Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).
Листинг 10.20. Рспользование свойства 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
Данный сценарий содержит функцию 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:
В данном 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. Помните, что все эти элементы являются объектами. Правильное применение их свойств и методов позволит вам стать профессиональным веб-разработчиком.