 |
ISO 9000 | ISO 14000 | Forum |
|
|
Лабораторная работа 1.
Тема: Общие сведения по JavaScript.
Цель: Ознакомиться и получить общие сведения по языку составления скриптов
JavaScript.
Теоритические сведения.
Что такое JavaScript и для чего нужен этот курс лабораторных
работ?
JavaScript - новый язык для составления скриптов, разработанный
фирмой Netscape. С помощью JavaScript
Вы можете легко создавать интерактивные Web-страницы. В данном курсе
лабораторных работ Вы научитесь, что можно сделать с помощью JavaScript.
JavaScript
- это не Java!
Многие люди считают, что JavaScript - это то же самое,
что и Java, лишь потому, что эти языки имеют схожие названия. На самом
деле это не так. Я считаю, что сейчас будет излишне показывать Вам все
различия между этими языками - так что запомните лишь то, что JavaScript
- это не Java.
Чтобы получить дополнительную информацию по затронутой
теме, обратитесь пожалуйста к введению, опубликованному на сайте Netscape
.
Запуск JavaScript
Что необходимо сделать, чтобы запускать скрипты, написанные
на языке JavaScript? Вам понадобится броузер, способный работать с JavaScript
- например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet
Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих броузера
стали широко распространеными, множество людей получили возможность
работать со скриптами, написанными на языке JavaScript. Несомненно,
это важный аргумент в пользу выбора языка JavaScript, как средства улучшения
ваших Web-страниц.
Размещение JavaScript на HTML-странице
Код скрипта JavaScript размещется непосредственно на
HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий
простой пример:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
<br>
Вновь документ HTML.
</body>
</html>
С первого взгляда пример напоминает
обычный файл HTML. Единственное новшество здесь - конструкция:
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
Это действительно код JavaScript. Чтобы видеть, как этот скрипт
работает, запишите данный пример как обычный файл HTML и загрузите его
в броузер, имеющий поддержку языка JavaScript.
А это результат выполнения этого файла (если Вы используете броузер,
имеющий поддержку JavaScript, то у Вас будет 3 строки):
Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.
Признаем, что данный скрипт не столь
полезен - то же самое и более просто можно было бы написать на "чистом"
языке HTML. Он просто демонстрирует Вам тэг признака <script>.
Все, что стоит между тэгами <script> и </script>, интерпретируется
как код на языке JavaScript. Здесь Вы также видите пример использования
инструкции document.write() - одной из наиболее важных команд,
используемых при программировании на языке JavaScript. Команда document.write()
используется, когда необходимо что-либо написать в текущем документе
(в данном случае таковым является наш HTML-документ). Так наша небольшая
программа на JavaScript в HTML-документе пишет фразу "А это
JavaScript!".
Броузеры без поддержки JavaScript
А как будет выглядеть наша страница, если броузер не
воспринимает JavaScript? Броузеры, не имеющие поддержки JavaScript,
"не знают" и тэга <script>. Они игнорируют его и печатают
все стоящие вслед за ним коды как обычный текст. Иными словами, читатель
увидит, как код JavaScript, приведенный в нашей программе, окажется
вписан открытым текстом прямо посреди HTML-документа. Разумеется, это
не входило в наши намерения. На этот случай имеется специальный способ
скрыть исходный код скрипта от старых версий броузеров - мы будем использовать
для этого тэг комментария из HTML - <!-- -->. В результате
новый вариант нашего исходного кода будет выглядеть как:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
<!-- hide from old browsers
document.write("А это JavaScript!")
// -->
</script>
<br>
Вновь документ HTML.
</body>
</html>
В этом случае броузер без поддержки
JavaScript будет печатать:
Это обычный HTML документ.
Вновь документ HTML.
А без HTML-тэга комментария броузер
без поддержки JavaScript напечатал бы:
Это обычный HTML документ.
document.write("А это JavaScript!")
Вновь документ HTML.
Пожалуйста обратите внимание, что
Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь
делаем, имеет целью предотвратить распечатку кода скрипта на старых
броузерах - однако тем не менее посетитель сможет увидеть этом код посредством
пункта меню 'View document source'. Не существует также способа
скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен
тот или иной трюк).
События
События и обработчики событий являются очень важной
частью для программирования на языке JavaScript. События, главным образом,
инициируются теми или иными действиями посетителя. Если он щелкает по
некоторой кнопке, происходит событие "Click". Если
указатель мыши пересекает какую-либо ссылку гипертекста - происходит
событие MouseOver. Существует несколько различных типов событий.Мы
можем заставить нашу JavaScript-программу реагировать на некоторые из
них. И это может быть выполнено с помощью специальных программ обработки
событий. Так, в результате щелчка по кнопке может создаваться выпадающее
окно. Это означает, что создание окна должно быть реакцией на событие
щелка - Click. Программа - обработчик событий, которую мы должны
использовать в данном случае, называется onClick. И она сообщает
компьютеру, что нужно делать, если произойдет данное событие. Приведенный
ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Проверьте этот пример" onClick="alert('Это текст')">
</form>
Данный пример имеет несколько новых особенностей - рассмотрим
их по порядку. Вы можете здесь видеть, что мы создаем некую форму с
кнопкой. Первая новая особенность - onClick="alert('Это тест')" в тэге <input>.
Как мы уже говорили, этот атрибут определяет, что происходит, когда
нажимают на кнопку. Таким образом, если имеет место событие Click,
компьютер должен выполнить вызов alert('Это тест'). Это и есть пример кода на языке
JavaScript (обратите внимание, что в этом случае мы даже не пользуемся
тэгом <script>).Функция alert() позволяет Вам создавать
выпадающие окна. При ее вызове Вы должны в скобках задать некую строку.
В нашем случае это 'Это тест'. И это как раз будет тот текст,
что появится в выпадающем окне. Таким образом, когда посетитель нажимает
кнопку, наш скрипт создает окно, содержащее текст 'Это тест'.Некоторое
замешательство может вызвать еще одна особенность данного примера: в
команде document.write() мы использовали двойные кавычки ("), а
в конструкции alert() - только одинарные. Почему? В большинстве случаев
Вы можете использовать оба типа кавычек. Однако в последнем примере
мы написали onClick="alert('Это
тест')" - то есть мы использовали и двойные, и одинарные кавычки.
Если бы мы написали onClick="alert("Это
тест")", то компьютер не смог бы разобраться в нашем скрипте,
поскольку становится неясно, к которой из частей конструкции имеет отношение
функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены
в данном случае перемежать оба типа кавычек. Не имеет значения, в каком
порядке Вы использовали кавычки - сперва двойные, а затем одинарные
или наоборот. То есть Вы можете точно так же написать и onClick='alert("Это
тест")'.
Вы можете использовать в скрипте множество различных
типов функций обработки событий. Сведения о некоторых из них Вы получите
в данном курсе лабораторных работ, однако не о всех.
К базовым событиям, поддерживаемым в JavaScript, относятся:
События
|
Описание
|
OnAbort
|
Происходит при прерывании загрузки графического изображения. |
OnBlur
|
Происходит, когда какой-либо элемент теряет фокус. |
OnChange
|
Происходит при изменении значения текстового поля. |
OnClick
|
Происходит при нажатии кнопки мыши в области элемента . |
OnError
|
Происходит при ошибке загрузки докумета или графического
изображения |
OnFocus
|
Происходит при получении элементом
фокуса. |
OnLoad
|
Происходит по завершении загрузки
страниц или графического изоброжения |
onMouseOver
|
Происходит при перемещении курсора
мыши в области элемента |
onMouseOut
|
Происходит при перемещении курсора
мыши из области элемента |
OnReset
|
Происходит при нажатии кнопки типа
Reset |
OnSelect
|
Происходит при выборе текста в текстовом
поле. |
OnSubmit
|
Происходит при нажатии кнопки типа
Submit |
OnUnload
|
Происходит при переходе на другую
страницу или при завершении работы с браузером. |
Сейчас расмотрим несколько примеров демонстрирующих
работу с этими событиями.
onAbort.
<script
language="JavaScript">
function doAbort() {
alert("Загрузка изображения прервана")
}
</script>
<body>
<img src="rose.jpg onAbort="doAbort()"">
</body>
Такой обработчик может быть необходим в тех случаях,
когда изображение, используемое в качестве изображения-карты (image-map),
имеет большой размер и пользователь не дождался его полной загрузки
- нажпл кнопку "стоп". В этом случае функциональность карты
будет нарушена и пользователь не сможет перемещаться по узлу.
onLoad
<script
language="JavaScript">
function doLoad() {
alert("Загрузка изображения завершена")
}
</script>
<body>
<img src="rose.jpg onLoad="doLoad()"">
</body>
Просмотрите этот пример
Событие onLoad происходит после завершения загрузки документа или графического
изображения.
onMouseOver и onMouseOut
<script
language="JavaScript">
function doMouseOver() {
alert("Указатель на ссылке")<ик>
}
function doMouseOut()
{
alert("Укакзатель за пределами cсылки")<ик>
}
</script>
<body>
<a href="index.htm"
onMouseOver="doMouseOver()"
onMouseOut="doMouseOut()">
Оглавление</a>
</body>
<ик>
Оглавление
Итак, если Вы используете броузер Netscape Navigator,
то выпадающее окно содержит текст, что был передан функции JavaScript
alert. Такое ограничение накладывается по соображениям безопасности.
Такое же выпадающее окно Вы можете создать и с помощью метода prompt().
Однако в этом случае окно будет воспроизводить текст, введенный читателем.
А потому, скрипт, написанный злоумышленником, может принять вид системного
сообщения и попросить читателя ввести некий пароль. А если текст помещается
в выпадающее окно, то тем самым читателю дается понять, что данное окно
было создано web-броузером, а не вашей операционной системой. И поскольку
данное ограничение наложено по соображениям безопасности, Вы не можете
взять и просто так удалить появившееся сообщение.
Функции
В большинстве наших программ на языке JavaScript мы
будем пользоваться функциями. Поэтому уже теперь необходимо рассказать
об этом важном элементе языка.
В большинстве случаев функции представляют собой лишь
способ связать вместе нескольких команд. Давайте, к примеру, напишем
скрипт, печатающий некий текст три раза подряд. Для начала рассмотрим
простой подход:
<html>
<script language="JavaScript">
<!-- hide
document.write("Добро пожаловать на мою страницу!<br>")
document.write("Это JavaScript!<br>")
document.write("Добро пожаловать на мою страницу!<br>")
document.write("Это JavaScript!<br>")
document.write("Добро пожаловать на мою страницу!<br>")
document.write("Это JavaScript!<br>")
// -->
</script>
</html>
И такой скрипт напишет следующий
текст
Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный
код скрипта, то видно, что для получения необходимого результата определенная
часть его кода была повторена три раза. Разве это эффективно? Нет, мы
можем решить ту же задачу еще лучше. Пример скрипта для решения той
же самой задачи:
<html>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>")
document.write("Это JavaScript!<br>")
}
myFunction()
myFunction()
myFunction()
// -->
</script>
</html>
В этом скрипте мы определили некую
функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>")
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся
внутри фигурных скобок - {} - принадлежат функции myFunction().
Это означает, что обе команды document.write() теперь связаны воедино
и могут быть выполнены при вызове указанной функции. И действительно,
в нашем примере есть три вызова этой функции - можно увидеть, что мы
написали строку myFunction() три раза сразу после того, как дали
определение самой функции. То есть как раз и сделали три вызова. В свою
очередь, это означает, что содержимое этой функции (команды, указанные
в фигурных скобках) было выполнено трижды.
Поскольку это довольно простой пример использования функции, то у Вас
мог возникнуть вопрос, а почему собственно эти функции столь важны в
JavaScript. По выполнению данного курса лабораторных работ Вы конечно
же поймете их пользу. Именно возможность передачи переменных при вызове
функции придает нашим скриптам подлинную гибкость - что это такое, мы
увидим позже.
Функции могут также использоваться совместно с процедурами
обработки событий. Рассмотрим следующий пример:
<html>
<head>
<script language="JavaScript">
<!-- hide
function calculation() {
var x= 12
var y= 5
var result= x + y
alert(result)
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Вычислить" onClick="calculation()">
</form>
</body>
</html>
Теперь Вы можете попробовать этот
пример:
Здесь при нажатии на кнопку осуществляется вызов функции
calculation(). Как можно заметить, эта функция выполняет некие
вычисления, пользуясь переменными x, y и result.
Переменную мы можем определить с помощью ключевого слова var.
Переменные могут использоваться для хранения различных величин - чисел,
строк текста и т.д. Так строка скрипта var result= x + y сообщает броузеру о том, что необходимо создать переменную
result и поместить туда результат выполнения арифметической операции
x + y (т.е. 5 + 12). После этого в переменную result будет
размещено число 17. В данном случае команда alert(result) выполняет
то же самое, что и alert(17). Иными словами,
мы получаем выпадающее окно, в котором написано число 17.
Лабораторная работа 2.
Тема: Документ HTML.
Цель: Изучить структуру объектов в JavaScript.
Теоритические сведения.
Иерархия объектов в JavaScript
В языке JavaScript все элементы на web-странице выстраиваются
в иерархическую структуру. Каждый элемент предстает в виде объекта.
И каждый такой объект может иметь определенные свойства и методы. В
свою очередь, язык JavaScript позволит Вам легко управлять объектами
web-страницы, хотя для этого очень важно понимать иерархию объектов,
на которые опирается разметка HTML. Как это все действует, Вы сможете
быстро понять на следующем примере. Рассмотрим простую HTML-страницу:
<html>
<head>
<title>Пример
</head>
<body background="bg.gif" TEXT="#000000" LINK="#B50000" VLINK="#800080" ALINK="#800080">
<center>
<img src="1.gif" name="pic1">
</center>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value="Вова"><br>
e-Mail:
<input type="text" name="email" value="test@test.com"><br><br>
<input type="button" value="Нажми меня" name="myButton" onClick="alert('Привет')">
</form>
</p>
<center>
<p>
<img src="2.gif" name="pic2" width=700 height=3>
</p>
<p>
<a href="1.htm">Пример</a>
</p>
</center>
</body>
</html>
А вот как выглядит эта страница на
экране (с комментариями):
Итак, мы имеем два рисунка, одну ссылку и некую форму
с двумя полями для ввода текста и одной кнопкой. С точки зрения языка
JavaScript окно броузера - это некий объект window. Этот объект
также содержит в свою очередь некоторые элементы оформления, такие как
строка состоятия. Внутри окна мы можем разместить документ HTML. Такая
страница является ни чем иным, как объектом document. Это означает,
что объект document представляет в языке JavaScript загруженный на настоящий
момент документ HTML. Объект document является очень важным объектом
в языке JavaScript и Вы будете пользоваться им многократно. К свойствам
объекта document относятся, например, цвет фона для web-страницы. Однако
для нас гораздо важнее то, что все без исключения объекты HTML являются
свойствами объекта document. Примерами объекта HTML являются, к примеру,
ссылка или заполняемая форма.
На следующем рисунке иллюстрируется иерархия объектов, создаваемая HTML-страницей
из нашего примера:
Разумеется, мы должны иметь возможность получать информацию
о различных объектах в этой иерархии и управлять ею. Для этого мы должны
знать, как в языке JavaScript организован доступ к различным объектам.
Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно,
если Вы хотите узнать, как можно обратиться к первому рисунку на нашей
HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать
нужно с самой вершины. Первый объект такой структуры называется 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("Привет" + 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, особенно в случае с большими web-страницами, содержащими
множество объектов. (Обратите внимание, что при написании имен Вы должны
еще следить и за положением регистра - то есть Вы не имеете права написать
myform вместо myForm)
В JavaScript многие свойства объектов доступны не только для чтения.
Вы также имеете возможность записывать в них новые значения. Например,
посредством JavaScript Вы можете записать в упоминавшееся поле новую
строку.
Пример кода на JavaScript, иллюстрирующего
такую возможность - интересующий нас фрагмент записан как свойство onClick
второго тэга <input>:
<form name="myForm">
<input type="text" name="input" value="Привет!">
<input type="button" value="Нажмите меня,плиззззззз..."
onClick="document.myForm.input.value= 'Спасибо! :-)'; ">
Теперь рассмотрим более сложный пример.
В нем Вы увидите, как используются различные объекты. Попытайтесь разобрать
его самостоятельно, для облегчения этой задачи в код скрипта введены
комментарии.
Исходный код скрипта:
<html>
<head>
<title>Объекты</title>
<script language="JavaScript">
<!-- hide
function first() {
// создает выпадающее окно, где размещается
// текст, введенный в поле формы
alert("Значение элемента text: " +
document.myForm.myText.value);
}
function second() {
// данная функция проверяет состояние переключателей
var myString= "Переключатель ";
// переключатель включен, или нет?
if (document.myForm.myCheckbox.checked) myString+= "включен"
else myString+= "не включен";
// вывод строки на экран
alert(myString);
}
// -->
</script>
</head>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="Привет">
<input type="button" name="button1" value="Элемент text"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Переключатель"
onClick="second()">
</form>
<br>
<br>
<script language="JavaScript">
<!-- hide
document.write("Цвет фона: ");
document.write(document.bgColor + "<br>");
document.write("На второй кнопке написано: ");
document.write(document.myForm.button2.value);
// -->
</script>
</body>
</html>
Объект location
Кроме объектов window и document в JavaScript
имеется еще один важный объект - location. В этом объекте представлен
адрес загруженного HTML-документа. Например, если Вы загрузили страницу
index.htm, то значение location.href как раз и будет соответствовать
этому адресу.
Впрочем, для нас гораздо более важно, что Вы имеете возможность записывать
в location.href свои новые значения. Например, в данном примере
кнопка загружает в текущее окно новую страницу:
<form>
<input type=button value="К оглавлению"
onClick="location.href='index.htm'">
</form>
Лабораторная работа 3.
Тема: Фреймы.
Цель: Ознакомиться и получить общие сведения по совместному использованию
фреймов и JavaScript.
Теоритические сведения.
Создание фреймов
Один из часто задаваемых вопросов - как фреймы и 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>. Следующий пример демонстрирует это:
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="page3.htm">
<frame src="page3.htm">
</frameset>
<frameset rows="33%,33%,33%">
<frame src="page3.htm">
<frame src="page3.htm">
<frame src="page3.htm">
</frameset>
</frameset>
В результате созданная структура
фреймов будет выглядеть следующим образом:
Вы можете задать толщину границы между фреймами, воспользовавшись
в тэге <frameset> параметром border. Запись border=0 означает,
что Вы не хотите, чтобы между тэгами имелась какая-либо граница.
Фреймы и JavaScript
А теперь давайте посмотрим, как JavaScript "видит"
фреймы, присутствующие в окне броузера. Для этой цели мы создадим два
фрейма, как было показано в первом примере этой лабораторной работы.
Как мы уже видели, JavaScript организует все элементы, представленные
на web-странице, в виде некой иерархической структуры. То же самое относится
и к фреймам. На следующем рисунке показана иерархия объектов, представленных
в первом примере:
В вершине иерархии находится окно броузера (browser
window). В данном случае он разбито на два фрейма. Таким образом, окно,
как объект, является родоначальником, родителем данной иерархии (parent),
а два фрейма - соответственно, его потомки (children). Мы присвоили
этим двум фреймам уникальные имена - frame1 и frame2.
И с помощью этих имен мы можем обмениваться информацией с двумя указанными фреймами.
С помощью скрипта можно решить следующую задачу: допустим посетитель
активирует некую ссылку в первом фрейме, однако соответствующая страница
должна загружаться не в этот же фрейм, а в другой. Примером такой задачи
может служить составление меню (или навигационных панелей), где один
фрейм всегда остается неизменным, но предлагает посетителю несколько
различных ссылок для дальнейшего изучения данного сайта.
Чтобы решить эту задачу, мы должны рассмотреть три случая:
- главное
окно/фрейм получает доступ к фрейму-потомку
- фрейм-потомок
получает доступ к родительскому окну/фрейму
- фрейм-потомок
получает доступ к другому фрейму-потомку
С точки зрения объекта "окно" (window) два
указанных фрейма называются frame1 и frame2. Как можно
видеть на предыдущем рисунке, существует прямая взаимосвязь между родительским
окном и каждым фреймом. Таким образом, если Вы пишете скрипт для родительского
окна - то есть для страницы, создающей эти фреймы - то можете обращаться
к этим фреймам, просто называя их по имени. Например, можно написать:
frame2.document.write("Это сообщение передано от родительского окна.");
В некоторых случаях Вам понадобится, находясь во фрейме,
получать доступу к родительскому окну. Например, это бывает необходимо,
если Вы хотите при следующем переходе избавиться от фреймов. В таком
случае удаление фреймов означает лишь загрузку новой страницы вместо
содержавшей фреймы. В нашем случае это загрузка страницы в родительское
окно. Сделать это нам поможет доступ к родительскому- parent
- окну (или родительскому фрейму) из фреймов, являющихся его потомками.
Чтобы загрузить новый документ, мы должны внести в location.href
новый адрес URL. Поскольку мы хотим избавиться от фреймов, следует использовать
объект location из родительского окна. (Напомним, что в каждый фрейм
можно загрузить собственную страницу, таким образом мы имеем для каждого
фрейма собственный объект location). Итак, мы можем загрузить новую
страницу в родительское окно с помощью команды:
parent.location.href= "http://...";
И наконец, очень часто Вам придется решать задачу обеспечения
доступа с одного фрейма-потомка к другому такому же фрейму-потомку.
Итак, как можно, находясь в первом фрейме, записать что-либо во второй
- то есть, какой командой следует воспользоваться на HTML-странице page1.htm?
Как можно увидеть на нашем рисунке, между двумя этими фреймами нет никакой
прямой связи. И потому мы не можем просто так вызвать frame2,
находясь в фрейме frame1, который просто ничего не знает о существовании
второго фрейма. С точки же зрения родительского окна второй фрейм действительно
существует и называется frame2, а к самому родительскому окну
можно обратиться из первого фрейма по имени parent. Таким образом,
чтобы получить доступ к объекту document, разместившемуся во втором
фрейме, мы должны написать следующее,:
parent.frame2.document.write("Привет, это вызов из первого фрейма.");
Навигационные панели
Давайте рассмотрим, как создаются навигационные панели.
В одном фрейме мы создаем несколько ссылок. Однако, если посетитель
активирует какую-либо из них, соответствующая страница будет помещена
не в тот же самый фрейм, а в соседний.
Пример этого:
Сперва нам необходимо написать скрипт, создающий указанные
фреймы. Такой документ выглядит точно так же, как и тот, что мы рассматирвали
ранее в этой лабораторной работе:
frames3.htm
<html>
<frameset rows="80%,20%">
<frame src="start.htm" name="main">
<frame src="menu.htm" name="menu">
</frameset>
</html>
Здесь start.htm - это та страница,
которая первоначально будет показана в главном фрейме (main).
У нас нет никаких специальных требований к содержимому этой страницы.
Следующая web-страница будет загружена во фрейм "menu":
menu.htm
<html>
<head>
<script language="JavaScript">
<!-- hide
function load(url) {
parent.main.location.href= url;
}
// -->
</script>
</head>
<body>
<a href="javascript:load('first.htm')">Первая</a>
<a href="second.htm" target="main">Вторая</a>
<a href="third.htm" target="_top">Третья</a>
</body>
</html>
Здесь Вы можете увидеть несколько
способов загрузки новой страницы во фрейм main. В первой ссылке
для этой цели используется функция load(). Давайте посмотрим,
как это делается:
<a href="javascript:load('first.htm')">first</a>
Как Вы можете видеть, вместо явной
загрузки новой страницы мы предлагаем броузеру выполнить некую команду
на языка JavaScript - для этого мы всего лишь должны воспользоваться
параметром javascript: вместо обычного href. Далее, внутри
скобок можно увидеть 'first.htm'. Эту строка передается в качестве
аргумента функции load(). Сама же функция load() определяется
следующим образом:
function load(url) {
parent.main.location.href= url;
}
Здесь Вы можете увидеть, что внутри
скобок написано url. Это означает, что в нашем примере строка
'first1.htm' при вызове функции заносится в переменную url. И
эту новую переменную теперь можно использовать при работе внутри функций
load(). Позже мы познакомимся с другими примерами использования
важной концепции переменных.
Во второй ссылке присутствует параметр target. На самом деле
это уже не относится к JavaScript. Это одна из конструкций языка HTML.
Как видно, мы всего лишь указываем имя необходимого фрейма. Заметим,
что в этом случае мы не обязаны ставить перед именем указанного фрейма
слово parent, что, честно говоря, несколько смущает. Причина
такого отступления от правил кроется в том, что параметр target
- это функция языка HTML, а не JavaScript.
И на примере третьей ссылки Вы можете видеть, как с помощью target
можно избавиться от фреймов.
А если Вы хотите избавиться от фреймов с помощью функции <