Разработка веб-приложений: учебное пособие

4. Основы JavaScript

4.9. Иерархия объектов в JavaScript

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


<!DOCTYPE html>

<html>

<head>

<title>Моя домашняя страничка</title>

</head>

<body bgcolor=#ffffff>

<center>

<img src="images\home.gif" name="pic1" width=80 height=144>

</center>

<form name="myForm">

Name: 

<input type="text" name="name" value=""><br>

e-Mail:&nbsp;

<input type="text" name="email" value=""><br><br>

<input type="button" value="Нажми на меня" name="myButton" onClick="alert('Yo')">

</form>

<center>

<img  src="images\comp.gif" name="pic4" width=153 height=74>

<a href="MyHome.html">Моя домашняя страничка</a>

</center>

</body>

</html>

Показать страничку

Как выглядит эта страница на экране (красным цветом выделены комментарии) показано на рис. 1.

Рис. 1. Иерархическая структура веб-страницы

Итак, на страничке имется два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера – это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа – однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и его часто используют. К свойствам объекта document относятся, например, цвет фона для веб-страницы. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.

На рис. 2 иллюстрируется иерархия объектов, создаваемая HTML-страницей из выше преведенного примера.

Рис. 2. Иерархия объектов

Разумеется, должна быть возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого следует знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, чтобы узнать, как можно обратиться к первому рисунку на HTML-странице, то необходимо сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что можно получать доступ к этому объекту, записав в JavaScript: document.images[0].

Если же, например, следует знать, какой текст ввел читатель в первый элемент формы, то сперва нужно выяснить, как получить доступ к этому объекту. И снова начинаем с вершины иерархии объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0].

Как узнать текст, введенный пользователем? Элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Итак, чтобы прочитать искомое значение, нужно написать на языке JavaScript строку:

name = document.forms[0].elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь можно работать с этой переменной, как необходимо. Например, можно создать выпадающее окно, воспользовавшись командой alert ("Привет" + name). В результате, если пользователь введет в это поле слово 'Ваня', то по команде alert ("Привет " + name) будет открыто выпадающее окно с приветствием 'Привет Ваня'.

При работе с большими страницами процедура адресации к различным объектам по номеру может стать весьма запутынной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17] или document.forms[2].elements[18]? Во избежание подобной проблемы, можно сами присваивать различным объектам уникальные имена:

<form name="myForm">

Name: 

<input type="text" name="name" value=""><br>

...

Эта запись означает, что объект forms[0] получает теперь еще и второе имя myForm. Точно так же вместо elements[0] можно писать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо

name = document.forms[0].elements[0].value;

можно записать

name = document.myForm.name.value;

Это значительно упрощает программирование на JavaScript, особенно в случае с большими веб-страницами, содержащими множество объектов. Обратите внимание, что при написании имен следует следить и за положением регистра – то есть нельзя написать myform вместо myForm.

В JavaScript многие свойства объектов достпуны не только для чтения. Также имеется возможность записывать в них новые значения. Например, посредством JavaScript можно записать в поле новую строку.