4. Основы JavaScript
4.9. Иерархия объектов в JavaScriptВ языке JavaScript все элементы на веб-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами веб-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, продемонстрировано на следующем примере. Рассмотрим простую HTML-страницу:
<!DOCTYPE html>
Как выглядит эта страница на экране (красным цветом выделены комментарии) показано на рис. 1.
Итак, на страничке имется два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера – это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состоятия. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа – однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript и его часто используют. К свойствам объекта document относятся, например, цвет фона для веб-страницы. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На рис. 2 иллюстрируется иерархия объектов, создаваемая HTML-страницей из выше преведенного примера.
Разумеется, должна быть возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого следует знать, как в языке 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">
Эта запись означает, что объект 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 можно записать в поле новую строку. |
||
![]() |
![]() |
![]() |