Чтение онлайн

Если в 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-документе.

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

Объект 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).