HTML, XHTML и CSS на 100%
Шрифт:
Если в HTML-документе имеются формы, то они также предстают в виде иерархического набора объектов. Сама форма соответствует объекту Form, выступающему дочерним по отношению к объекту Document. Объект Fo rm может включать в себя такие объекты, как кнопки, переключатели, поля для ввода текстовой информации. Все элементы формы являются ее дочерними объектами.
Иерархия объектов внутри веб-страницы задается вложенностью HTML-элементов друг в друга и текста внутрь элементов. Объекты, имеющие открывающий и закрывающий теги (элементы-контейнеры), могут иметь дочерние объекты. Текст, атрибуты и элементы типа img, не имеющие закрывающего тега, не могут иметь дочерних объектов.
Чтобы лучше понять иерархию объектов в HTML-документе, рассмотрим простейший пример (листинг 10.2).
<html>
<head>
<title>javascript objects</title>
</head>
<body>
<h1>Объекты JavaScript</h1>
Все элементы этой страницы являются объектами
</body>
</html>
Разберем этот документ с точки зрения иерархии объектов в языке 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.
<html>
<head>
<title>Свойство status объекта Window</title>
</head>
<body>
<script language="JavaScript">
window.status="ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ!"
</script>
Обратите внимание на текст в строке состояния вашего браузера!
</body>
</html>
Сценарий позволяет изменить текст в строке состояния браузера (рис. 10.3).
Рис. 10.3. Изменение текста в строке состояния браузера
Этот механизм удобно использовать при работе со ссылками. Вместо того чтобы выводить на экран URL-ссылку, вы можете объяснять пользователю краткое содержание загружаемой по ней веб-страницы.
Среди методов, определенных для объекта Window, можно отметить методы, предназначенные для открытия новых окон и закрытия существующих, для отображения на экране диалоговых панелей с сообщениями и методы для установки таймера.
• alert – отображение диалоговой панели Alert (Предупреждение) с сообщением и кнопкой OK.
• close – закрытие окна.
• confirm – отображение диалоговой панели Confirm (Подтверждение) с кнопками OK и Отмена.
• prompt – отображение диалоговой панели Prompt (Запрос) с полем ввода.
• open – открытие окна.
• setTimeout – установка таймера.
• clearTimeout – сброс таймера.
Рассмотрим практические примеры использования каждого из этих методов.
Метод alert применяется для вывода на экран простейшей диалоговой панели, отображающей какое-либо сообщение. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку OK в окне с сообщением.
Пример сценария, в котором используется метод alert, приведен в листинге 10.4.
<html>
<head>
<title>Метод alert</title>
</head>
<body>
<script language="JavaScript">
alert("Добро пожаловать!")
</script>
</body>
</html>
Приведенный в примере сценарий выдает пользователю окно с сообщением Добро пожаловать! (рис. 10.4).