HTML, XHTML и CSS на 100%
Шрифт:
Таким образом, доступ к объектам HTML-документа можно получить двумя способами:
• используя коллекции и нумерацию объектов;
• присваивая каждому объекту уникальное имя.
В любом из этих случаев вам необходимо будет определить имя объекта и всех его предков. Объект высшего уровня всегда находится слева в выражении, и слева направо происходит переход к дочерним объектам. По правилам языка JavaScript родительские и дочерние объекты отделяются друг от друга точками.
Рассмотрим несколько примеров, иллюстрирующих способы доступа к объектам
В листинге 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">
Ваш любимый цвет:
<input type="text" NAME="color">
Почему вам нравится эта фигура:
<input type="text" NAME="prichina">
<input type="button" VALUE="Ответить" onClick="doit">
</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).
<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="#">картинка1</li>
<li><a href="#">картинка2</li>
<li><a href="#">картинка3</li>
<li><a href="#">картинка4</li>
<li><a href="#">картинка5</li>
<li><a href="#">картинка6</li>
<li><a href="#">картинка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-документе.