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

Предыдущая 26 27 28 29 30 31 323334 35 36 37 38 39 40 41 Следующая

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

<html>

<head>

</head>

</center>

<p>

Name:

e-Mail:

</form>

<p>

<p>

<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>

</center>

</body>

</html>

А вот как выглядит эта страница на экране (с комментариями) (рис. 12.2.1):

Рисунок 12.2.1 – внешний вид страницы

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

Рисунок 12.2.2 – иерархия объектов

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

document.forms[0].elements[0]

А теперь как узнать текст, введенный читателем? Чтобы выяснять, которое из свойств и методов объекта позволят получить доступ к этой информации, необходимо обратиться к какому-либо справочнику по JavaScript (например, это может быть документация, предоставляемая фирмой Netscape). Там вы найдёте, что элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Итак, теперь мы имеем все необходимое, чтобы прочитать искомое значение. Для этого нужно написать на языке JavaScript строку:

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

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

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

Name:

...

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

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

вы можете записать

name= document.myForm.name.value;

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

Пример кода на JavaScript, иллюстрирующего такую возможность – интересующий нас фрагмент записан как свойство onClick второго тэга <input> (пример 12.2.2):

<input type="button" value="Write"

onClick="document.myForm.input.value= 'Yo!'; ">

В заключение этого раздела приведём небольшой пример. В нем вы увидите, как используются различные объекты. Попытайтесь разобрать его, обращаясь за помощью к документации).

Исходный код скрипта (пример 12.2.3):

<html>

<head>

<title>Objects</title>

<!-- hide

function first() {

// создает выпадающее окно, где размещается

// текст, введенный в поле формы

alert("The value of the textelement is: " +

document.myForm.myText.value);

}

function second() {

// данна\я функци\я провер\яет состо\яние переключателей

var myString= "The checkbox is ";

// переключатель включен, или нет?

if (document.myForm.myCheckbox.checked) myString+= "checked"

else myString+= "not checked";

// вывод строки на экран

alert(myString);

}

// -->

</script>

</head>

<input type="button" name="button1" value="Button 1"

onClick="first()">

<br>

<input type="button" name="button2" value="Button 2"

onClick="second()">

</form>

<!-- hide

document.write("The background color is: ");

document.write(document.bgColor + "<br>");

document.write("The text on the second button is: ");

document.write(document.myForm.button2.value);

// -->

</script>

</body>

</html>

Кроме объектов window и document в JavaScript имеется еще один важный объект – location. В этом объекте представлен адрес загруженного HTML-документа. Например, если вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу. Впрочем, для нас гораздо более важно, что вы имеете возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу (пример 12.2.4):

<form>

<input type=button value="Yahoo"

onClick="location.href='http://www.yahoo.com'; ">

</form>

Фреймы

Создание фреймов

Один из часто задаваемых вопросов – как фреймы и JavaScript могут работать вместе. В общем случае окно браузера может быть разбито в несколько отдельных фреймов. Это означает, что фрейм определяется как некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа. Для создания фреймов необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом (пример 12.3.1.1):

<html>

</frameset>

</html>

Свойство rows позволяет расположить фреймы над другом. В верхний фрейм будет загружена HTML-страница page1.htm, а в нижнем фрейме разместится документ page2.htm. Если нужно, чтобы документы располагались не друг над другом, а рядом то, следует использовать свойство cols. Фрагмент "50%,50%" определяет относительные размеры фреймов (в процентах или пикселах). Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность пригодится нам в языке JavaScript для доступа к фреймам.

При создании web-страниц вы можете использовать несколько вложенных тэгов <frameset> (пример 12.3.1.2):

</frameset>

</frameset>

Вы можете задать толщину границы между фреймами, воспользовавшись параметром border. Запись border=0 означает, что вы не хотите, чтобы между фреймами имелась какая-либо граница.

Фреймы и JavaScript

А теперь посмотрим, как JavaScript “видит” фреймы, присутствующие в окне браузера. Для этой цели мы создадим два фрейма, как было показано в примере 12.3.1.1 этой части описания. Как мы уже видели, JavaScript организует все элементы, представленные на web-странице, в виде некой иерархической структуры. То же самое относится и к фреймам. На следующем рисунке показана иерархия объектов, представленных в примере 12.3.1.1 (рис. 12.3.2.1):

Рисунок 12.3.2.1 – фреймы

В вершине иерархии находится окно браузера (browser window). В данном случае он разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent), а два фрейма – соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные имена - frame1 и frame2. И с помощью этих имён мы можем обмениваться информацией с двумя указанными фреймами.

С помощью скрипта можно решить следующую задачу: допустим посетитель активирует некую ссылку в первом фрейме, однако соответствующая страница должна загружаться не в этот же фрейм, а в другой. Примером такой задачи может служить составление меню (или навигационных панелей), где один фрейм всегда остается неизменным, но предлагает посетителю несколько различных ссылок для дальнейшего изучения данного сайта. Чтобы решить эту задачу, мы должны рассмотреть на три случая:

· главное окно/фрейм получает доступ к фрейму-потомку;

· фрейм-потомок получает доступ к родительскому окну/фрейму;

· фрейм-потомок получает доступ к другому фрейму-потомку.

С точки зрения объекта “окно” (window) два указанных фрейма называются frame1 и frame2. Как можно видеть на предыдущем рисунке, существует прямая взаимосвязь между родительским окном и каждым фреймом. Так образом, если вы пишете скрипт для родительского окна – то есть для страницы, создающей эти фреймы – то можете обращаться к этим фреймам, просто называя их по имени. Например, можно написать:

frame2.document.write("Это сообщение передано от родительского окна.");

В некоторых случаях вам понадобится, находясь во фрейме, получать доступу к родительскому окну. Например, это бывает необходимо, если вы хотите при следующем переходе избавиться от фреймов. В таком случае удаление фреймов означает лишь загрузку новой страницы вместо содержавшей фреймы. В нашем случае это загрузка страницы в родительское окно. Сделать это нам поможет доступ к родительскому окну (или родительскому фрейму) из фреймов, являющихся его потомками. Чтобы загрузить новый документ, мы должны внести в location.href новый адрес URL. Поскольку мы хотим избавиться от фреймов, следует использовать объект location из родительского окна. (Напомним, что в каждый фрейм можно загрузить собственную страницу, то мы имеем для каждого фрейма собственный объект location). Итак, мы можем загрузить новую страницу в родительское окно с помощью команды:

parent.location.href= "http://...";

Аналогичного эффекта можно достичь и средствами HTML, используя свойство target тега a:

<a href="mypage.html" target="_top"> (_new – загрузить в новое окно, имя_фрейма – загркзить в указанный фрейм)

И наконец, очень часто вам придётся решать задачу обеспечения доступа с одного фрейма-потомка к другому такому же фрейму-потомку. Итак, как можно, находясь в первом фрейме, записать что-либо во второй? Как можно увидеть на нашем рисунке, между двумя этими фреймами нет никакой прямой связи. И потому мы не можем просто так вызвать frame2, находясь в фрейме frame1, который просто ничего не знает о существовании второго фрейма. С точки же зрения родительского окна второй фрейм действительно существует и называется frame2, а к самому родительскому окну можно обратиться из первого фрейма по имени parent. Таким образом, чтобы получить доступ к объекту document, разместившемуся во втором фрейме, мы должны написать следующее,:

parent.frame2.document.write("Привет, это вызов из первого фрейма.");

Навигационные панели

Рассмотрим теперь, как создаются навигационные панели. В одном фрейме мы создаем несколько ссылок. Однако, если посетитель активирует какую-либо из них, соответствующая страница будет помещена не в тот же самый фрейм, а в соседний. Нам необходимо написать скрипт, создающий указанные фреймы. Такой документ выглядит точно так же, как и тот, что мы рассматирвали ранее в этой части описания (пример 12.3.3.1):

frames3.htm

<html>

</frameset>

</html>

Здесь start.htm – это страница, которая первоначально будет показана в главном фрейме (main). У нас нет никаких специальных требований к содержимому этой страницы. Следующая web-страница будет загружена во фрейм "menu" (пример 12.3.3.2):

menu.htm

<html>

<head>

<!-- hide

function load(url) {

parent.main.location.href= url;

}

// -->

</script>

</head>

<body>

<a href="javascript:load('first.htm')">first</a>

<a href="second.htm" target="main">second</a>

<a href="third.htm" target="_top">third</a>

</body>

</html>

Здесь вы можете увидеть несколько способов загрузки новой страницы во фрейм main. В первой ссылке для этой цели используется функция load(). Давайте посмотрим, как это делается:

<a href="javascript:load('first.htm')">first</a>

Вместо явной загрузки новой страницы мы предлагаем браузеру выполнить некую команду на языка JavaScript. Сама же функция load() определяется следующим образом:

function load(url) {

parent.main.location.href= url;

}

Во второй ссылке присутствует параметр target. На самом деле это уже не относится к JavaScript, это одна из конструкций языка HTML. Как видно, мы всего лишь указываем имя необходимого фрейма. И на примере третьей ссылки вы можете видеть, как с помощью target можно избавиться от фреймов.

А если вы хотите избавиться от фреймов с помощью функции load(), то вам необходимо написать в ней лишь

parent.location.href= url.

Одна из наиболее часто возникающих проблем состоит в том, чтобы разом загрузить две страницы в два различных фрейма. Предположим, мы имеем три фрейма с именами frame1, frame2 и frame3. Допустим, посетитель активирует ссылку в frame1. И мы хотим, чтобы при этом в два других фрейма загружались две различные web-страницы. В качестве решения этой задачи вы можете, например, воспользоваться функцией:

function loadtwo() {

parent.frame1.location.href= "first.htm";

parent.frame2.location.href= "second.htm";

}

Предыдущая 26 27 28 29 30 31 323334 35 36 37 38 39 40 41 Следующая

Не нашли, что искали? Воспользуйтесь поиском по сайту: