HTML, XHTML и CSS на 100%
Шрифт:
Резюме
В данной главе были разобраны основные возможности CSS по оформлению документа. Немного попрактикуйтесь, и с уверенностью можно будет сказать, что вы можете создать и оформить страницу как истинный профессионал.
Глава 10
Введение в динамический HTML
10.1. Браузер и HTML-документ
10.2. Родительские и дочерние объекты
10.3. Объекты браузера
10.4. Объектная модель документа (DOM)
Язык HTML позволяет создавать только статические веб-страницы, не обеспечивающие интерактивное взаимодействие с посетителем
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
В листинге 10.1 представлен пример сценария, демонстрирующий рассмотренные ранее правила записи свойства и метода объекта Document.
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script language="JavaScript">
document.write("Hello world!"); //пишем текст на странице
document.bgColor="yellow" //устанавливаем желтый фон страницы
</script>
</body>
</html>
Обратите внимание, что строки внутри сценария отделяются друг от друга точкой с запятой. Данный сценарий меняет фоновый цвет веб-страницы и выводит текст 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.