Книга: HTML, XHTML и CSS на 100%

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

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

Сценарии 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: <form name="myform">. Эта запись означает, что первая форма, соответствующая объекту 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>

<head>

<!–Код JavaScript –>

<script language="JavaScript">

function doit()

{

var greeting="Мне нравится "

alert(greeting + document.aform.color.value

+ " " + document.aform.geometr.value)

var prich="Потому, что "

alert(prich + document.aform.prichina.value)

alert("Количество букв в названии вашей фигуры "

+ document.aform.geometr.value.length)

}

</script>

</head>

<body>

<center>

<!–Форма –>

<form name="aform">

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

<input type="text" NAME="geometr"><p>

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

<input type="text" NAME="color"><p>

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

<input type="text" NAME="prichina"><p>

<input type="button" VALUE="Ответить">

</form>

</center>

</body>

</html>

В данном 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. Смена изображений на веб-странице

<html>

<head>

<title>Смена картинок через массив</title>

<!–Код JavaScript –>

<script language="JavaScript">

function myimage(pic) //функция

{

document.images[0].src=pic

}

</script>

</head>

<body text="#000000" bgcolor="#FFFFCC" link="#0000EE" vlink="#551A8B" alink="#FF0000">

<!– Элементы страницы –>

<h1>

<font color="#000099">Просмотр фотографий</FONT>

</h1>

<center>

<table cols=2 width="100%">

<caption>

<font color="#000099" size=+2>Природа</font>

</caption>

<tr>

<td>

<ul>

<li><a href="javascript:myimage('a.jpg')">картинка1</li>

<li><a href="javascript:myimage('b.jpg')">картинка2</li>

<li><a href="javascript:myimage('c.jpg')">картинка3</li>

<li><a href="javascript:myimage('d.jpg')">картинка4</li>

<li><a href="javascript:myimage('e.jpg')">картинка5</li>

<li><a href="javascript:myimage('f.jpg')">картинка6</li>

<li><a href="javascript:myimage('g.jpg')">картинка7</li>

</ul>

</td>

<td align=center valign=center>

<img src="d.jpg"> </td>

</tr>

</table>

</center>

</body>

</html>

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


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

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

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

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

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

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

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 1.453. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз