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

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

< html>

< head>

< title> My homepage

< /head>

< body bgcolor=#ffffff>

< center>

< img src=" home.gif" name=" pic1" >

< /center>

< p>

< form name=" myForm" >

Name:

< input type=" text" name=" name"

value=" " > < br>

e-Mail:

< input type=" text" name=" email"

value=" " > < br> < br>

< input type=" button" value=" Push me" name=" myButton"

onClick=" alert('Yo')" >

< /form>

< p>

< center>

< img src=" ruler.gif" name=" pic4" >

< p>

< a href= " http: //yyyy.de/~qqq/" >

My homepage< /a>

< /center>

< /body>

< /html>

Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера - это некий объект

window, внутри которого размещается документ HTML. Такая страница является ни чем иным, как объектом document. Объект document является очень важным объектом в языке JavaScript т.к. все без исключения объекты HTML являются свойствами объекта document. На следующем рисунке иллюстрируется иерархия

объектов, создаемая HTML-страницей из нашего примера:

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

Доступ к первому полю для ввода текста можно получить, записав:

doc ument. forms [0]. elements [0]. Элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту.

Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутанной. Во избежание подобной проблемы, Вы можете сами присваивать различным объектам уникальные имена.

< form name=" myForm" >

Name:

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

...

Эта запись означает, что объект forms [0] получает теперь еще и второе имя - myForm. Таким образом, вместо

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

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

name= document.myForm.name.value;

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

Впрочем, для нас гораздо более важно, что Вы имеете возможность записывать в location. href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:

< form>

< input type=button value=" Yahoo"

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

< /form>

3.3. Фреймы и JavaScript. Навигационные панели

А теперь давайте посмотрим, как JavaScript " видит" фреймы, присутствующие в окне браузера. Для этой цели мы создадим два фрейма, как было показано в первом примере этой части описания.

Как мы уже видели, JavaScript организует все элементы, представленные на web-странице, в виде некой иерархической структуры. То же самое относится и к фреймам. В вершине иерархии находится окно браузера (browser window). В данном случае он разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной

иерархии (parent), а два фрейма - соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные имена - frame 1 и frame 2. И с помощью этих имен мы можем

обмениваться информацией с двумя указанными фреймами.

Если Вы пишете скрипт для родительского окна - то есть для страницы, создающей эти фреймы - то можете обращаться к этим фреймам, просто называя их

по имени. Например, можно написать:

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

В некоторых случаях Вам понадобится, находясь

во фрейме, получать доступу к родительскому окну. Например, это бывает необходимо, если

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

И, наконец, очень часто Вам придется решать задачу обеспечения доступа с одного фрейма-потомка к другому такому же фрейму-потомку. Мы не можем просто так вызвать frame 2, находясь в фрейме frame 1, который просто ничего не знает о существовании второго фрейма. С точки же зрения родительского окна второй фрейм действительно существует и

называется frame 2, а к самому родительскому окну можно обратиться из первого фрейма по имени parent. Таким образом, чтобы получить доступ к объекту document, разместившемуся во втором фрейме, мы должны написать следующее,:

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

 

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

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

Сперва нам необходимо написать скрипт, создающий указанные фреймы. frames 3. htm

< html>

< frameset rows=" 80%, 20%" >

< frame src=" start.htm" name=" main" >

< frame src=" menu.htm" name=" menu" >

< /frameset>

< /html>

Следующая web-страница будет загружена во фрейм " menu ": menu. htm

< html>

< head>

< script language=" JavaScript" >

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 (). Во второй ссылке присутствует параметр target. На самом деле это уже не относится к JavaScript. Это одна из конструкций языка HTML. Как видно, мы всего лишь указываем имя необходимого фрейма. И на примере третьей ссылки Вы можете видеть, как с помощью target можно избавиться от фреймов.

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

3. 4. Формы и JavaScript

Допустим, HTML-страница содержит два элемента для ввода текста. В первый из них пользователь должен вписать свое имя, во второй элемент - адрес для электронной почты. Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы введете '17', то получите приглашение 'Hi 17! '. Так что эта проверка не может быть идеальна.

Второй элемент формы несколько более сложнее. Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @.

Как скрипт работает с этими двумя элементами формы и как выглядит проверка? Это происходит следующим образом:

< html>

< head>

< script language=" JavaScript" >

function test1(form) {

if (form.text1.value == " " )

alert(" Пожалуйста, введите строку! " )

else {alert(" Hi" +form.text1.value+"! Форма заполнена корректно! " );

} } function test2(form) {

if (form.text2.value == " " || form.text2.value.indexOf('@') == -1) alert(" Неверно введен адрес e-mail! " );

else alert(" OK! " ); }

< /script> < /head> < body>

< form name=" first" >

Введите Ваше имя: < br>

< input type=" text" name=" text1" >

< input type=" button" name=" button1" value=" Проверка" onClick=" test1(this.form)" >

< P>

Введите Ваш адрес e-mail: < br>

< input type=" text" name=" text2" >

< input type=" button" name=" button2" value=" Проверка" onClick=" test2(this.form)" > < /body>

< /html>

Функция test1 (form) проверяет, является ли данная строка пустой. Это делается посредством if ( form. text 1. value == " " ).... Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'

Рассмотрим теперь функцию test 2( form ). Здесь вновь сравнивается введенная строка с пустой - " " и проверяется наличие символа @.

Проверка на присутствие определенных символов

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

< html>

< head>

< script language=" JavaScript" >

function check(input) {

var ok = true;

for (var i = 0; i < input.length; i++) {
var chr = input.charAt(i);
var found = false;

for (var j = 1; j < check.length; j++) {

if (chr == check[j]) found = true;

}

if (! found) ok = false;

}

return ok;

}

function test (input) {

if (! check(input, " 1", " 2", " 3", " 4", " 5", " 6", " 7", " 8", " 9", " 0" ) {alert(" Input not ok." );

}

else {

alert(" Input ok! " );

}}

< /script>

< /head>

< body>

< form>

Telephone:

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

< input type=" button" value=" Check"

onClick=" test(this.form.telephone.value)" >

< /form>

< /body>

< /html>

Функция test() определяет, какие из введенных символов признаются корректными.

Предоставление информации, введенной в форму

Какие существуют возможности для передачи информации, внесенной в форму? Самый простой способ состоит в передаче данных формы по электронной почте.

Соответствующий скрипт будет простым текстом HTML. Я должен лишь добавить, что команда mailto работает не повсюду - например, поддержка для нее отсутствует в Microsoft Internet Explorer 3.0.

< form method=post action=" mailto: [email protected]" enctype=" text/plain" >

Нравится ли Вам эта страница?

< input name=" choice" type=" radio" value=" 1" > Вовсе нет.< br>

< input name=" choice" type=" radio" value=" 2" CHECKED> Напрасная трата времени.< br>

< input name=" choice" type=" radio" value=" 3" > Самый плохой сайт в Сети.< br>

< input name=" submit" type=" submit" value=" Send" >

< /form>

Параметр enctype =" text / plain " используется для того, чтобы пересылать именно простой текст

без каких-либо кодируемых частей. Будет отправлено письмо

choice=3 submit=Send.

Если Вы хотите проверить форму прежде, чем она будет передана в сеть, то для этого можете воспользоваться программой обработки событий onSubmit. Вы должны поместить вызов этой программы в тэг < form>. Например:

function validate() {

// check if input ok

if (inputOK) return true

else return false;

}

...

< form... onSubmit=" return validate()" >

...

Форма, составленная таким образом, не будет послана в Интернет, если в нее внесены некорректные данные.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: