Стефан Кох - Введение в JavaScript для Мага
Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутынной. Например, придется решать, как следует обратиться к объекту 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, особенно в случае с большими web-страницами, содержащими множество объектов. (Обратите внимание, что при написании имен Вы должны еще следить и за положением регистра — то есть Вы не имеете права написать myform вместо myForm)
В JavaScript многие свойства объектов достпуны не только для чтения. Вы также имеете возможность записывать в них новые значения. Например, посредством JavaScript Вы можете записать в упоминавшееся поле новую строку.
Пример кода на JavaScript, иллюстрирующего такую возможность — интересующий нас фрагмент записан как свойство onClick второго тэга <input>:
<form name="myForm">
<input type="text" name="input" value="bla bla bla">
<input type="button" value="Write"
onClick="document.myForm.input.value= 'Yo!; ">
Сейчас я не имею возможности описывать каждую деталь данного примера. Намного лучше будет, если Вы попробуете сами понять иерархию объектов в JavaScript, обратившись к справочнику по JavaScript. В заключение я написал небольшой пример. В нем Вы увидите, как используются различные объекты. Попытайтесь разобрать его, обращаясь за помощью к документации, предоставляемой фирмой Netscape, или — еще лучше — к моей книге по JavaScript..: —)
Исходный код скрипта:
<html>
<head>
<title>Objects</title>
<script language="JavaScript">
<!- 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>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="bla bla bla">
<input type="button" name="button1" value="Button 1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Button 2"
onClick="second()">
</form>
<br><br>
<script language="JavaScript">
<!- 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>
Объект location
Кроме объектов 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: Фреймы
Создание фреймов
Один из часто задаваемых вопросов — как фреймы и JavaScript могут работать вместе. Сначала я хотел бы объяснить, что такое фреймы и для чего они могут использоваться. Затем мы рассмотрим, как можно использовать JavaScript совместно с фреймами.
В общем случае окно браузера может быть разбито в несколько отдельных фреймов. Это означает, что фрейм определяется как некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа (в большинстве случаев это документы HTML). Таким образом, Вы можете, к примеру, создать два фрейма. В первый такой фрейм Вы можете загрузить "домашнюю страницу" фирмы Netscape, а во второй — фирмы Microsoft.
Хотя создание фреймов является задачей языка HTML, я бы хотел все же описать здесь основные моменты этого процесса. Для создания фреймов Вам необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:
<html>
<frameset rows="50 %,50 %">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем свойство rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм будет загружена HTML-страница page1.htm, а в нижнем фрейме разместится документ page2.htm.
Если Вы хотите, чтобы документы располагались не друг над другом, а рядом то, Вам следует в тэге <frameset> писать rows, а cols. Фрагмент "50 %,50 %" сообщает, насколько велики должны быть оба получившихся окна. Вы имеете также возможность записать "50 %,*", если не хотите утруждать себя расчетами, насколько велик должен быть второй фрейм, чтобы в сумме получалась все те же 100 %. Вы можете также задать размер фрейма в пикселах, для чего достаточно после числа не ставить символ %.
Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность пригодится нам в языке JavaScript для доступа к фреймам.
При создании web-страниц Вы можете использовать несколько вложенных тэгов <frameset>. Следующий пример я нашел в документации, предоставляемой фирмой Netscape, (и слегка изменил его):
<frameset cols="50 %,50 %">
<frameset rows="50 %,50 %">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
<frameset rows="33 %,33 %,33 %">
<frame src="cell.htm">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
</frameset>
Вы можете задать толщину границы между фреймами, воспользовавшись в тэге <frameset> параметром border.
Запись border=0 означает, что Вы не хотите, чтобы между тэгами имелась какая-либо граница (в Netscape 2.x такой механизм не работает).
В вершине иерархии находится окно браузера (browser window). В данном случае он разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent), а два фрейма — соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные имена — frame1 и frame2. И с помощью этих имен мы можем обмениваться информацией с двумя указанными фреймами.
С помощью скрипта можно решить следующую задачу: допустим посетитель активирует некую ссылку в первом фрейме, однако соответствующая страница должна загружаться не в этот же фрейм, а в другой. Примером такой задачи может служить составление меню (или навигационных панелей), где один фрейм всегда остается неизменным, но предлагает посетителю несколько различных ссылок для дальнейшего изучения данного сайта.
Чтобы решить эту задачу, мы должны рассмотреть на три случая:
· главное окно/фрейм получает доступ к фрейму-потомку
· фрейм-потомок получает доступ к родительскому окну/фрейму
· фрейм-потомок получает доступ к другому фрейму-потомку
С точки зрения объекта «окно» (window) два указанных фрейма называются frame1 и frame2. Как можно видеть на предыдущем рисунке, существует прямая взаимосвязь между родительским окном и каждым фреймом. Так образом, если Вы пишете скрипт для родительского окна — то есть для страницы, создающей эти фреймы — то можете обращаться к этим фреймам, просто называя их по имени. Например, можно написать:
frame2.document.write("Это сообщение передано от родительского окна.");
В некоторых случаях Вам понадобится, находясь во фрейме, получать доступу к родительскому окну. Например, это бывает необходимо, если Вы хотите при следующем переходе избавиться от фреймов. В таком случае удаление фреймов означает лишь загрузку новой страницы вместо содержавшей фреймы. В нашем случае это загрузка страницы в родительское окно. Сделать это нам поможет доступ к родительскому- parent — окну (или родительскому фрейму) из фреймов, являющихся его потомками. Чтобы загрузить новый документ, мы должны внести в location.href новый адрес URL. Поскольку мы хотим избавиться от фреймов, следует использовать объект location из родительского окна. (Напомним, что в каждый фрейм можно загрузить собственную страницу, то мы имеем для каждого фрейма собственный объект location). Итак, мы можем загрузить новую страницу в родительское окно с помощью команды:
