Титульная страница
ISO 9000 ISO 14000
GMP Consulting
 

Лабораторная работа 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 можно избавиться от фреймов.
А если Вы хотите избавиться от фреймов с помощью функции load(), то Вам необходимо написать в ней лишь
parent.location.href= url.

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

function loadtwo() {
  parent.frame1.location.href= "first.htm";
  parent.frame2.location.href= "second.htm";
}

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

function loadtwo(url1, url2) {
  parent.frame1.location.href= url1;
  parent.frame2.location.href= url2;
}

После этого можно организовать вызов функции: loadtwo("first.htm", "second.htm") или loadtwo("third.htm", "forth.htm"). Очевидно, передача аргументов делает Вашу функцию более гибкой. В результате Вы можете использовать ее многократно и в различных контекстах.

 

Лабораторная работа 4.
Тема: Окна и динамическое управление документами.
Цель: Изучить возможности JavaScript связанные с окнами и динамическим управлением документами.

Теоритические сведения.

Создание окон

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

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
function openWin() {
  myWin= open("page4.htm");
}
 
// -->
</script>
 
</head>
<body>
 
<form>
<input type="button" value="Открыть новое окно" onClick="openWin()">
</form>
 
</body>
</html>
(Открыть новое окно)

В представленном примере в новое окно с помощью метода open() записывается страница page4.htm.

Заметим, что Вы имеете возможность управлять самим процессом создания окна. Например, Вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того Вы можете задать размер окна. Например, в следующем скрипте открывается новое окно размером 400x300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню.

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
function openWin2() {
  myWin= open("page4.htm", "displayWindow", 
    "width=400,height=300,status=no,toolbar=no,menubar=no");
}
 
// -->
</script>
 
</head>
<body>
 
<form>
<input type="button" value="Открыть новое окно" onClick="openWin2()">
</form>
 
</body>
</html>
(Открыть новое окно)

Как видите, свойства окна мы формулируем  строке"width=400,height=300,status=no,toolbar=no,menubar=no".  Обратите внимание также и на то, что Вам не следует помещать в этой строке символы пробела

Список свойств окна, которыми Вы можете управлять:

directories

yes|no

Позволяет указывать, отбражается ли полоса кнопок для выбора каталогов.

height

количество пикселов

Задаёт высоту окна в пикселах. Минимальное значение -100 .

location

yes|no

Позволяет указывать, отбражается ли полоса для ввода адреса.

menubar

yes|no

Позволяет указывать, отбражается ли полоса меню.

resizable

yes|no

Позволяет указывать, может ли окно менять свой размер.

scrollbars

yes|no

Задёт отображение горизонтальной и вертикальной полос прокрутки.

status

yes|no

Позволяет указывать, отбражается ли полоса статуса .

toolbar

yes|no

Позволяет указывать, отбражается ли полоса статуса.

width

количество пикселов

Задаёт ширну окна в пикселах. Минимальное значение -100 .

fullscreen

yes|no

Указывает, показывается ли новое окно на полный экран или как обычное окно. По умолчанию показывается обычное окно.

channelmode

yes|no

Позволяет указать, отбражается ли полоса каналов.

top

число

Задаёт вертикальную координату левого верхнего угла.

left

число

Задаёт горизонтальную координату левого верхнего угла.

В версии 1.2 языка JavaScript были добавлены некоторые новые свойства (то есть в Netscape Navigator 4.0). Вам не следует пользоваться этими свойствами, готовя материалы для Netscape 3.x или Microsoft Internet Explorer 3.x, поскольку эти броузеры не понимают языка 1.2 JavaScript. Новые свойства окон:

alwaysLowered

yes|no

alwaysRaised

yes|no

dependent

yes|no

hotkeys

yes|no

innerWidth

количество пикселов (заменяет width)

innerHeight

количество пикселов (заменяет height)

outerWidth

количество пикселов

outerHeight

количество пикселов

screenX

количество пикселов

screenY

количество пикселов

titlebar

yes|no

z-lock

yes|no

Например, теперь с помощью этих свойств Вы можете определить, в каком месте экрана должно находиться вновь открываемое окно. Работая со старой версией языка JavaScript, Вы не смогли бы этого сделать.

Имя окна

Как видите, открывая окна, мы должны использовать три аргумента:

  myWin= open("page4.htm", "displayWindow", 
    "width=400,height=300,status=no,toolbar=no,menubar=no")

А для чего нужен второй аргумент? Это имя окна. Ранее мы видели, как оно использовалось в параметре target. Так, если Вы знаете имя окна, то можете загрузить туда новую страницу с помощью записи:

<a href="page4.html" target="displayWindow">

При этом Вам необходимо указать имя соответствующего окна (если же такого окна не существует, то с этим именем будет создано новое).
Обратите внимание, что myWin - это вовсе не имя окна. Но только с помощью этой переменной Вы можете получить доступ к окну. И поскольку это обычная переменная, то область ее действия - лишь тот скрипт, в котором она определена. А между тем, имя окна (в данном случае это displayWindow) - уникальный идентификатор, которым можно пользоваться с любого из окон броузера.

Закрытие окон

Вы можете также закрывать окна с помощью языка JavaScript. Чтобы сделать это, Вам понадобится метод close(). Давайте, как было показано ранее, откроем новое окно. И загрузим туда очередную страницу:

<html>
<script language="JavaScript">
<!-- hide
 
function closeIt() {
  close();
}
 
// -->
</script>
 
<center>
<form>
<input type=button value="Закрыть окно" onClick="closeIt()">
</form>
</center>
 
</html>

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

Open() и close() - это методы объекта window. Мы должны помнить, что следует писать не просто open() и close(), а window.open() и window.close(). Однако в нашем случае объект window можно опустить - Вам нет необходимости писать префикс window, если Вы хотите всего лишь вызвать один из методов этого объекта (и такое возможно только для этого объекта).

Динамическое создание документов

Теперь мы готовы к рассмотрению такой замечательной возможности JavaScript , как динамическое создание документов. То есть Вы можете разрешить Вашему скрипту на языке JavaScript самому создавать новые HTML-страницы. Более того, Вы можете таким же образом создавать и другие документы Web, такие как VRML-сцены и т.д. Для удобства Вы можете размещать эти документы в отдельном окне или фрейме.
Для начала мы создадим простой HTML-документ, который покажем в новом окне. Рассмотрим следующий скрипт.

<html>
<head>
<script language="JavaScript">
<!-- hide
 
function openWin4() {
  myWin= open("", "displayWindow", 
    "width=500,height=400,status=yes,toolbar=yes,menubar=yes")
 
  // открыть объект document для последующей печати 
  myWin.document.open()
  
  // генерировать новый документ 
  myWin.document.write("<html><head><title>Динамическое создание HTML-документа")
  myWin.document.write("</title><META HTTP-EQUIV='Content-Type' CONTENT='text/html;")
  myWin.document.write("charset=windows-1251'></head><body background='bg.gif'>")
  myWin.document.write("<center><font size=+3>")
  myWin.document.write("Этот HTML-документ создан при помощи ");
  myWin.document.write("JavaScript!");
  myWin.document.write("</font></center>")
  myWin.document.write("</body></html>")
 
  // закрыть документ - (но не окно!)
  myWin.document.close();  
}
 
// -->
</script>
 
</head>
<body>
 
<form>
<input type=button value="Динамическое создание HTML-документа" onClick="openWin4()">
</form>
 
</body>
</html>
 

Давайте рассмотрим функцию openWin4(). Очевидно, мы сначала открываем новое окно броузера. Поскольку первый аргумент функции open() - пустая строка (""), то это значит, что мы не желаем в данном случае указывать конкретный адрес URL. Броузер должен только не обработать имеющийся документ - JavaScript обязан создать дополнительно новый документ.
В скрипте мы определяем переменную myWin. И с ее помощью можем получать доступ к новому окну. Обратите пожалуйста внимание, что в данном случае мы не можем воспользоваться для этой цели именем окна (displayWindow).
После того, как мы открыли окно, наступает очередь открыть для записи объект document. Делается это с помощью команды:

  // открыть объект document для последующей печати 
  myWin.document.open()

Здесь мы обращаемся к open() - методу объекта document. Однако это совсем не то же самое, что метод open() объекта window! Эта команда не открывает нового окна - она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку myWin, чтобы получить возможность писать в новом окне.
В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:

  // генерировать новый документ 
  myWin.document.write("<html><head><title>Dinamic HTML")
  myWin.document.write("</title></head><body background='bg.gif'>")
  myWin.document.write("<center><font size=+3>")
  myWin.document.write("This HTML-document has been created ");
  myWin.document.write("with the help of JavaScript!");
  myWin.document.write("</font></center>")
  myWin.document.write("</body></html>")

Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML! При этом Вы можете использовать абсолютно любые тэги HTML.
По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:

  // закрыть документ - (но не окно!)
  myWin.document.close()  

Как уже упоминалось ранее, Вы можете не только динамически создавать документы, но и по своему выбору размещать их в в том или ином фрейме. Например, если Вы получили два фрейма с именами frame1 и frame2, а теперь во frame2 хотите сгенерировать новый документ, то для этого в frame1 Вам достаточно будет написать следующее:

parent.frame2.document.open();
 
parent.frame2.document.write("Здесь будет располагаться Ваш HTML-код");
parent.frame2.document.close();

 

Лабораторная работа 5.
Тема: Строка состояния и таймеры.
Цель: Изучить возможности JavaScript связанные со строкой состояния и таймерами.

Теоритические сведения.

Строка состояния

Составленные Вами программы на JavaScript могут выполнять запись в строку состояния - прямоугольник в нижней части окна Вашего броузера. Все, что Вам необходимо для этого сделать - всего лишь записать нужную строку в window.status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать.

Данный скрипт выглядит следующим образом:

<html>
<head>
<script language="JavaScript">
<!-- hide
 
function statbar(txt) {
   window.status = txt;
}
 
// -->
</script>
</head>
<body>
 
<form>
  <input type="button" name="look" value="Писать!" 
    onClick="statbar('Привет! Это окно состояния!');">
  <input type="button" name="erase" value="Стереть!" 
    onClick="statbar('');">
</form>
 
</body>
</html>

Итак, мы создаем форму с двумя кнопками. Обе эти кнопки вызывают функцию statbar(). Вызов от клавиши Писать! выглядит следующим образом:

statbar('Привет! Это окно состояния!');

В скобках мы написали строку: 'Привет! Это окно состояния!'. Это как раз и будет текст, передаваемый функции statbar(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:

function statbar(txt) {
   window.status = txt;
}

В заголовке функции в скобках мы поместили слово txt. Это означает, что строка, которую мы передали этой функции, помещается в переменную txt.
Передача функциям переменных - прием, часто применяемый для придания функциям большей гибкости. Вы можете передать функции несколько таких аргументов - необходимо лишь отделить их друг от друга запятыми.
Строка txt заносится в строку состояния посредством команды
window.status = txt.
Соответственно, удаление текста из строки состояния выполняется как запись в window.status пустой строки.

Механизм вывода текста в строку состояния удобно использовать при работе со ссылками. Вместо того, чтобы выводить на экран URL данной ссылки, Вы можете просто на словах объяснять, о чем будет говориться на следующей странице. Так link демонстрирует это - достаточно лишь поместить указатель вашей мыши над этой ссылкой: Исходный код этого примера выглядит следующим образом:

<a href="dontclick.htm" 
  onMouseOver="window.status='Don\'t click me!'; return true;"
  onMouseOut="window.status='';">link</a> 
 

Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой.
Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что броузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния броузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, броузер перепишет строку состояния на свой лад - то есть наш текст будет тут же затерт и пользователь не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события броузером, возвращая true в своей собственной процедуре обработки события.
В этом скрипте Вы можете видеть еще одну вещь - в некоторых случаях Вам понадобится печатать символы кавычек. Например, мы хотим напечатать текст Don't click me - однако поскольку мы передаем эту строку в процедуру обработки события onMouseOver, то мы используем для этого одинарные кавычки. Между тем, как слово Don't тоже содержит символ одинарной кавычки! И в результате если Вы просто впишете 'Don't ...', броузер запутается в этих символах '. Чтобы разрешить эту проблему, Вам достаточно лишь поставить обратный слэш \ перед символом кавычки - это означает, что данный символ предназначен именно для печати. (То же самое Вы можете делать и с двойными кавычками - ").

Таймеры

С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд.

Скрипт выглядит следующим образом:

<script language="JavaScript">
<!-- hide
 
function timer() {
  setTimeout("alert('Время истекло!')", 3000);
}
 
// -->
</script>
...
<form>
  <input type="button" value="Таймер" onClick="timer()">
</form>

Здесь setTimeout() - это метод объекта window. Он устанавливает интервал времени. Первый аргумент при вызове - это код JavaScript, который следует выполнить по истечении указанного времени. В нашем случае это вызов - "alert('Время истекло!')". Обратите пожалуйста внимание, что код на JavaScript должен быть заключен в кавычки.
Во втором аргументе компьютеру сообщается, когда этот код следует выполнять. При этом время Вы должны указывать в миллисекундах (3000 миллисекунд = 3 секунда).

<html>
<head>
<title> Clock in statu</title>
<script language="JavaScript">
function clock_status()
{
setTimeout("clock_status()",100);
today=new Date();
window.status=today;
}
</script>
</head>
<body onLoad="clock_status()">
</body>
</html>

Здесь может быть не понятна строка today=new Date(). Таким образом мы создали экземпляр объекта Date используя конструктор new. Объект Date и его методы используются для работы с датой и временем в скриптовых программах. Если неуказано никаких параметров, то экземпляр будет содержать текущую дату и время.
Расмотрим ещё один пример с таймером.

<html>
<head>
<title>Clock full</title>
</head>
<script language="JavaScript">
function fulltime()
{
var time=new Date();
document.clock.full.value=time.toLocaleString();
setTimeout('fulltime()',500)
}
</script>
<body bgcolor=fffff1 text=ff0000>
<center>
<form name=clock>
<input type=text size=17 name=full>
</form>
<script language="JavaScript">
fulltime();
</script>
</center>
</body>
</html>

Здесь использовался метод toLocaleString(),который переводит дату в строку, используя местный часовой пояс.

Прокрутка

Теперь, когда Вы знаете, как делать записи в строке состояния и как работать с таймерами, мы можем перейти к управлению прокруткой. Вы уже могли видеть, как текст перемещается в строке состояния. В Интернет этим приемом пользуются повсеместно. Теперь же мы рассмотрим, как можно запрограммировать прокрутку в основной линейке.
Создать бегущую строку довольно просто. Для начала давайте задумаемся, как вообще можно создать в строке состояния перемещающийся текст - бегущую строку. Очевидно, сперва мы должны записать в строку состояния некий текст. Затем по истечении короткого интервала времени мы должны записать туда тот же самый текст, но при этом немного переместив его влево. Если мы это сделаем несколько раз, то у пользователя создастся впечатление, что он имеет дело с бегущей строкой.
Однако при этом мы должны помнить еще и о том, что обязаны каждый раз вычеслять, какую часть текста следует показывать в строке состояния (как правило, объем текстового материала превышает размер строки состояния).

Эта кнопка откроет окно и покажет образец прокрутки:

Итак, исходный код скрипта - c комментариями:

<html>
<head>
<script language="JavaScript">
<!-- hide
 
 
// определение текста для прокрутки
var scrtxt = "Это JavaScript! " +
    "Это JavaScript! " +
    "Это JavaScript!"; 
var len = scrtxt.length;
var width = 100;
var pos = -(width + 2);
 
function scroll() {
 
  // напечатать заданный текст справа и установить таймер 
 
  // перейти на исходную позицию для следующего шага 
  pos++;
 
  // вычленить видимую часть текста 
  var scroller = "";
  if (pos == len) {
    pos = -(width + 2);
  }
 
  // если текст еще не дошел до левой границы, то мы должны 
  // добавить перед ним несколько пробелов. В противном случае мы должны 
  // вырезать начало текста (ту часть, что уже ушла за левую границу 
  if (pos < 0) {
    for (var i = 1; i <= Math.abs(pos); i++) {
      scroller = scroller + " ";}
    scroller = scroller + scrtxt.substring(0, width - i + 1);
  }
  else {
    scroller = scroller + scrtxt.substring(pos, width + pos);
  }
 
  // разместить текст в строке состояния 
  window.status = scroller;
 
  // вызвать эту функцию вновь через 100 миллисекунд 
  setTimeout("scroll()", 100);
}
 
// -->
</script>
</head>
 
<body onLoad="scroll()">
<H2>Это пример прокрутки в строке состояния средствами JavaScript.</H2>
</body>
</html>
 

Большая часть функции scroll() нужна для вычисления той части текста, которая будет показана пользователю. Давайте разберем этот код - Вам необходимо лишь понять, как вообще осуществляется эта прокрутка.
Чтобы запустить этот процесс, мы пользуемся процедурой обработки события onLoad, описанной в тэге <body>. То есть функция scroll() будет вызвана сразу же после загрузки HTML-страницы.
Через посредство процедуры onLoad мы вызываем функцию scroll(). Первым делом в функции scroll() мы устанавливаем таймер. Этим гарантируется, что функция scroll() будет повторно вызвана через 100 миллисекунд. При этом текст будет перемещен еще на один шаг и запущен другой таймер. Так будет продолжаться без конца.
Скроллинг используется в Интернет довольно широко. И есть риск, что быстро он станет непопулярным. В большинстве страниц, где он применяется, особенно раздражает то, что из-за непрерывного скроллинга становится невозможным прочесть в строке состояния адрес URL. Эту проблему можно было бы решить, позаботившись о приостановке скроллига, если происходит событие onMouseOver - и, соответственно, продолжении, когда фиксируется onMouseOut. Если Вы хотите попытаться создать скроллинг, то пожалуйста не используйте стандартный его вариант - пробуйте привнести в него некоторые приятные особенности. Возможен вариант, когда одна часть текста приходит слева, а другая - справа. И когда они встречаются посередине, то в течение некоторых секунд текст остается неизменным. Воспользовавшись небольшой долей фантазии, Вы конечно же сможете найти еще несколько хороших альтернатив.

 

Лабораторная работа 6.
Тема: Предопределенные объекты.
Цель: Изучить предопределенные объекты JavaScript.

Теоритические сведения.

Объект Date

В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Есть еще несколько таких же объектов - полное описание см. в документации, предоставляемой фирмой Netscape.
Для начала давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества или можете внести в Ваш HTML-документ запись текущего времени.
Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new:

today= new Date()

Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date Вы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.
Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например
, это методы - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее. Полное описание объекта Date и его методов Вы сможете найти в документации по JavaScript, предоставляемой фирмой Netscape.
Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду.
Чтобы зафиксировать какие-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date(), который при создании нового объекта Date вызывается через оператор new):

today= new Date(1999, 0, 1, 17, 35, 23)

При этом будет создан объект Date, в котором будет зафиксировано первое января 1999 года 17:35 и 23 секунд. Таким образом, Вы выбираете дату и время по следующему шаблону:

Date(year, month, day, hours, minutes, seconds)

Заметьте, что для обозначения января Вы должны использовать число 0, а не 1, как Вы вероятно думали. Число 1 будет обозначать февраль, ну и так далее.

Теперь мы напишем скрипт, печатающий текущие дату и время. Результат будет выглядеть следующим образом:

Время: 10:22
Дата: 7/23/2001

Сам же код выглядит следующим образом:

<script language="JavaScript">
<!-- hide
 
now= new Date();
 
document.write("Время: " + now.getHours() + ":" + now.getMinutes() + "<br>");
document.write("Дата: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" +
                now.getYear());
 
// -->
</script>
 

Здесь мы пользуемся такими методами, как getHours(), чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Помните также, что мы обязаны увеличивать на единицу значение, получаемое от метода getMonth().
В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03. Решение этой проблемы мы рассмотрим в следующем примере.

Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:

Время:
Дата:

Исходный код скрипта:

<html>
<head>
 
<script Language="JavaScript">
<!-- hide
 
var timeStr, dateStr;
 
function clock() {
        now= new Date();
 
        // время
        hours= now.getHours();
        minutes= now.getMinutes();
        seconds= now.getSeconds();
        timeStr= "" + hours;
        timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
        timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
        document.clock.time.value = timeStr;
 
        // дата
        date= now.getDate();
        month= now.getMonth()+1;
        year= now.getYear();
        dateStr= "" + month;
        dateStr+= ((date < 10) ? "/0" : "/") + date;
        dateStr+= "/" + year;
        document.clock.date.value = dateStr;
 
        Timer= setTimeout("clock()",1000);
}
 
// -->
</script>
</head>
 
<body onLoad="clock()">
 
<form name="clock">
 Время:
  <input type="text" name="time" size="8"  value=""><br>
 Дата:
  <input type="text" name="date" size="8" value="">
</form>
 
</body>
</html>
 

Здесь для ежесекундной коррекции времени и даты мы пользуемся методом setTimeout(). Фактически это сводится к кому, что мы каждую секунду создаем новый объект Date, занося туда текущее время.
Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг <body>. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr. Как мы уже упомянули ранее, существует проблема с индикацией, когда количество минут меньше 10 - в данном скрипте эта проблема решается с помощью следующей строки:

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;

Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Для Вас эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:

if (minutes < 10) timeStr+= ":0" + minutes
  else timeStr+= ":" + minutes;

Объект Array

Массивы играют в программировании очень важную роль. Подумайте только, что бы Вы делали, если бы Вам понадобилось хранить 100 различных имен. Как бы Вы могли это сделать с помощью JavaScript? Хорошо, Вы могли бы явным образом задать 100 переменных и присвоить им различные имена. Но согласитесь, это будет весьма утомительно.
Массив может быть полезен там, где имеется много взаимосвязанных переменных. При этом к каждой из них Вы можете получить доступ, воспользовавшись общим названием и неким номером. Допустим, есть массив в именем names. В этом случае мы можем получить доступ к первой переменной с именем name, написав names[0]. Вторая переменная носит name[1] и так далее.
Начиная с версии 1.1 языка JavaScript (Netscape Navigator 3.0), Вы можете использовать объект Array. Вы можете создать новый массив, записав
myArray= new Array(). После этого можно начать заносить в массив значения:

myArray[0]= 17;
myArray[1]= "Вова";
myArray[2]= "Саша";

Массивы JavaScript обладают большой гибкостью. Например, Вам нет нужды беспокоиться о размере массива - он устанавливается динамически. Если Вы напишете myArray[99]= "xyz", размер массива будет установлен 100 элементов. (В языке JavaScript размер массива может только увеличиваться - массив не может "сжиматься". Поэтому старайтесь делать Ваши массивы как можно копактнее.)
Не имеет значения, заносите ли Вы в массив числа, строки, либо другие объекты. Мы не будем останавливаться на каждой такой подробности структуры массивов, но надеюсь, Вы поймете, что массивы - очень важный элемент языка.
Конечно же многое станет понятнее, если рассматривать примеры. Следующий скрипт печатает следующий текст:

first element
second element
third element

Исходный код:

<script language="JavaScript">
<!-- hide
 
myArray= new Array();
 
myArray[0]= "first element";
myArray[1]= "second element";
myArray[2]= "third element";
 
for (var i= 0; i< 3; i++) {
  document.write(myArray[i] + "<br>");
}
 
// -->
</script>

Первым делом мы создаем здесь новый массив с именем myArray. Затем мы заносим в него три различных значения. После этого мы запускаем цикл, который трижды выполняет команду document.write(myArray[i] + "<br>");. В переменной i ведется отсчет циклов от 0 до 2. Заметим, что в цикле мы пользуемся конструкцией myArray[i]. И поскольку i меняет значения от 0 до 2, то в итоге мы получаем три различных вызова document.write(). Иными словами, мы могли бы расписать этот цикл как:

document.write(myArray[0] + "<br>");
document.write(myArray[1] + "<br>");
document.write(myArray[2] + "<br>");

Объект Math

Если Вам необходимо в скрипте выполнять математические рассчеты, то некоторые полезные методы для этого Вы найдете в объекте Math. Например, имеется метод синуса sin(). Полную информацию об этом объекте Вы найдете в документации фирмы Netscape.
Хотелось бы продемонстрировать работу метода random(). Если Вы вызовете функцию
Math.random(), то получите случайное число, лежащее в диапазоне между 0 и 1. Один из возможных результатов вызова document.write(Math.random()) (при каждой новое загрузке данной страницы здесь будет появляться другое число):

0.3448107284244919

 

Лабораторная работа 7.
Тема: Формы.
Цель: Получить сведения о формах в Java Script.

  • Проверка данных в форме.
  • Проверка на наличие определённых символов .
  • Передача данных из формы.
  • Как выделить определённый элемент.

Проверка информации, введенной в форму

Формы широко используются на Интернет. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно выполнить проверку формы. А затем мы рассмотрим, какие есть возможности для пересылки информации по Интернет.

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

Введите Ваше имя:

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

Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы ввведете '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('@', 0) == -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>

Рассмотрим сначала HTML-код в разделе body. Здесь мы создаем лишь два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны.
Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение - ok.
Следующая проблема заключается в том, что пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Если есть желание, то Вы конечно можете добавить проверку такой возможности и исключить ее. Я полагаю, что это будет сделать легко, опираясь лишь на представленную здесь информацию.
Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ). С ним Вы уже знакомились в шестой части Введения.
Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)

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

В некоторых случаях Вам понадобится ограничивать информацию, вводимую в форму, лишь некоторым набором символов или чисел. Достаточно вспомнить о телефонных номерах - представленная информация должна содержать лишь цифры (предполагается, что номер телефона, как таковой, не содержит никаких символов). Нам необходимо проверять, являются ли введенные данные числом. Сложность ситуации состоит в том, что большинство людей вставляют в номер телефона еще и разные символы - например: 01234-56789, 01234/56789 or 01234 56789 (с символом пробела внутри). Не следует принуждать пользователя отказываться от таких символов в телефонном номере. А потому мы должны дополнить наш скрипт процедурой проверки цифр и некоторых символов. Решение задачи продемонстрировано в следующем примере, взятом из моей книги о JavaScript: :

Telephone:

Исходный код этого скрипта:

<html>
<head>
<script language="JavaScript">
<!-- hide
 
 
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() определяет, какие из введенных символов признаются корректными.

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

Какие существуют возможности для передачи информации, внесенной в форму? Самый простой способ состоит в передаче данных формы по электронной почте (этот метод мы рассмотрим поподробнее).
Если Вы хотите, чтобы за вносимыми в форму данными следил сервер, то Вы должны использовать интерфейс CGI (Common Gateway Interface). Последнее позволяет Вам автоматически обрабатывать данные. Например, сервер мог бы создавать базу данных со сведениями, доступную для некоторых из клиентов. Другой пример - поисковые страницы, такие как Yahoo. Обычно в них представлена форма, позволяющая создавать запрос для поиска в собственной базе данных. В результате пользователь получает ответ вскоре после того, как нажимает на соответствующую кнопку. Ему не приходится ждать, пока люди, отвечающие за поддержание данного сервера, прочтут указанные им данные и отыщут требуемую информацию. Все это автоматически выполняет сам сервер. JavaScript не позволяет делать таких вещей.
С помощью JavaScript Вы не сможете создать книгу читательских отзывов, поскольку JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Делать это Вы можете только через интерфейс CGI. Конечно, Вы можете создать книгу отзывов, для которой пользователи присылали сведения по электронной почте. Однако в этом случае Вы должны заносить отзывы вручную. Так можно делать, если Вы не предполагаете получать ежедневно по 1000 отзывов.
Соответствующий скрипт будет простым текстом HTML. И никакого программирования на JavaScript здесь вовсе не нужно! Конечно за исключением того случая, если Вам понадобится перед пересылкой проверить данные, занесенные в форму - и здесь уже Вам действительно понадобится JavaScript. Я должен лишь добавить, что команда mailto работает не повсюду - например, поддержка для ее отсутствует в Microsoft Internet Explorer 3.0.

<form method=post action="mailto:your.address@goes.here" 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" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей. Это значительно упрощает чтение такой почты.

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

function validate() {
  // check if input ok
  // ...
 
  if (inputOK) return true
    else return false;
}
 
...
 
<form ... onSubmit="return validate()">
 
...

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

Выделение определенного элемента формы

С помощью метода focus() Вы можете сделать вашу форму более дружественной. Так, Вы можете выбрать, который элемент будет выделен в первую очередь. Либо Вы можете приказать браузеру выделить ту форму, куда были введены неверные данные. То есть, что браузер сам установит курсор на указанный Вами элемент формы, так что пользователю не придется щелкать по форме, прежде чем что-либо занести туда. Сделать это Вы можете с помощью следующего фрагмента скрипта:

function setfocus() {
  document.first.text1.focus();
}

Эта запись могла бы выделить первый элемент для ввода текста в скрипте, который я уже показывал. Вы должны указать имя для всей формы - в данном случае она называется first - и имя одного элемента формы - text1. Если Вы хотите, чтобы при загрузке страницы данный элемент выделялся, то для этого Вы можете дополнить Ваш тэг <body> атрибутом onLoad. Это будет выглядеть как:

<body onLoad="setfocus()">

Остается еще дополнить пример следующим образом:

function setfocus() {
  document.first.text1.focus();
  document.first.text1.select();
}

Попробуйте следующий код:

При этом не только будет выделен элемент, но и находящийся в нем текст.

 

Лабораторная работа 8.

Тема:Объект Image.

Цель: Получить общие сведения об объекте Image в JavaScript.

 

  • Изображения на web-странице
  • Загрузка новых изображений
  • Упреждающая загрузка изображений
  • Смена картинок как реакция на события, инициируемые самим пользователем

 

Изображения на web-странице

Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1.1 языка JavaScript (то есть с Netscape Navigator 3.0). С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию.
Заметим, что пользователи браузеров более старых версий (таких как Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 - т.е. использующих версию 1.0 языка JavaScript) не смогут запускать скрипты, приведенные в этой части описания. Или, в лучшем случае, на них нельзя будет получить польный эффект.
Давайте сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться записав document.images[0].
Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи
document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселах).
К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью тэга

<img src="img.gif" name="myImage" width=100 height=100>

 то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"].

Загрузка новых изображений

Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут src. Как и в случае тэга <img>, атрибут src содержит адрес представленного изображения. Теперь - в языке JavaScript 1.1 - Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

<img src="img1.gif" name="myImage" width=100 height=100>

 Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое - img2.gif:

 document.myImage.src= "img2.src";

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

 

Упреждающая загрузка изображения

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

hiddenImg= new Image();
hiddenImg.src= "img3.gif";

В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой:

document.myImage.src= hiddenImg.src;

 Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения.
Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если Вы должны предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Вы всегда должны учитывать скорость связи с Интернет - загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение - поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко.
Если у Вас есть быстрая связь с Интернет, то Вы можете не понять, к чему весь этот разговор. О какой задержке все время говорит этот парень? Прекрасно, но еще остаются люди, имеющие более медленный модем, чем 14.4 (Нет, это не я. Я только что заменил свой на 33.6, да ...).

Изменение изображений в связи с событиями, инициируемыми самим читателем

Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку (впрочем, при этом Вы получите сообщение об ошибке, если пользуетесь браузером, поддерживающим лишь JavaScript 1.0 - как этого избежать, мы узнаем чуть позже).

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

<a href="#" 
  onMouseOver="document.myImage2.src='img2.gif'" 
  onMouseOut="document.myImage2.src='img1.gif'">
<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

При этом могут возникнуть следующие проблемы:

  • Читатель пользуется браузером, не имеющим поддержки JavaScript 1.1.
  • Второе изображение не было загружено.
  • Для этого мы должны писать новые команды для каждого изображения на web-странице.
  • Мы хотели бы иметь такой скрипт, который можно было бы использовать во многих web-страницах вновь и вновь, и без больших переделок.

Теперь мы рассмотрим полный вариант скрипта, который мог бы решить эти проблемы. Хотя скрипт и стал намного длиннее - но написав его один раз, Вы не больше будете беспокоиться об этих проблемах.
Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:

  • Не оговоривается количество изображений - не должно иметь значения, сколько их используется, 10 или 100
  • Не оговоривается порядок следования изображений - должна существовать возможность изменять этот порядок без изменения самого кода

Посмотрим этот код в работе:

   
Рассмотрим скрипт (я внес туда некоторые комментарии):

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
  // ok, у нас браузер с поддержкой JavaScript 
  var browserOK = false;
  var pics;
 
// -->
</script>
 
<script language="JavaScript1.1">
<!-- hide
 
  // браузер с поддержкой JavaScript 1.1!
  browserOK = true;
  pics = new Array();
 
// -->
</script>
 
<script language="JavaScript">
<!-- hide
 
var objCount = 0; // количество изображений на  web-странице 
 
function preload(name, first, second) {  
 
  // предварительна\я загрузка изображений и размещение их в массиве 
 
  if (browserOK) {     
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}
 
function on(name){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
        if (name != pics[i][2]) { 
          // вернуть в исходное систо\яние все другие изображени\я 
          document.images[pics[i][2]].src = pics[i][0].src;
        } else {
           // показывать вторую картинку, поскольку курсор пересекает данное изображение 
           document.images[pics[i][2]].src = pics[i][1].src;
        }
    }
  }
}
 
function off(){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      // вернуть в исходное систо\яние все изображени\я 
      if (document.images[pics[i][2]] != null) 
        document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}
 
// заранее загружаемые изображени\я - Вы должны здесь указать 
// изображени\я, которые нужно загрузить заранее, а также объект Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту часть 
// нужно корректировать, если Вы хотите использовать скрипт 
// применительно к другим изображени\ям (конечно это не освобождает
// Вас от об\язанности подредактировать в документе также и раздел body)
 
preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");
 
// -->
</script>
<head>
 
<body>
<a href="link1.htm" onMouseOver="on('link1')" 
  onMouseOut="off()">
<img name="link1" src="link1f.gif" 
  width="140" height="50" border="0"></a>
 
<a href="link2.htm" onMouseOver="on('link2')" 
  onMouseOut="off()">
<img name="link2" src="link2f.gif" 
  width="140" height="50" border="0"></a>
 
<a href="link3.htm" onMouseOver="on('link3')" 
  onMouseOut="off()">
<img name="link3" src="link3f.gif" 
  width="140" height="50" border="0"></a>
</body>
</html>
 

Данный скрипт помещает все изображения в массив pics. Создает этот массив функция preload(), которая вызвается в самом начале. Вызов функции preload() выглядит просто как:

preload("link1", "img1f.gif", "img1t.gif");

Это означает, что скрипт должен загрузить с сервера два изображения: img1f.gif и img1t.gif. Первое из них - это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел <body>, то обнаружите изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.
Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна).

Изображения - без сомнения могучее средство уличшения Вашей web-страницы. Объект Image дает Вам возможность создавать действительно сложные эффекты. Однако заметим, что не всякое изображение или программа JavaScript способно улучшить Вашу страницу. Если Вы пройдетесь по Сети, то сможете увидеть множество примеров, где изображения использованы самым ужасным способом. Не количество изображений делает Вашу web-страницу привлекательной, а их качество. Сама загрузка 50 килобайт плохой графики способна вызвать раздражение. При создании специальных эффектов с изображениями с помощью JavaScript помните об этом и ваши посетителями/клиентами будут чаще возвращаться на Ваши страницы. 

 

Лабораторная работа 9.

Тема: Слои.

Цель: Получить общие сведения о слоях в JavaScript

  • Что такое слои?
  • Создание слоёв.
  • Слои и JavaScript
  • Перемещение слоёв.

Что такое слои?

Слои - это одна из замечательных новых возможностей браузера Netscape Navigator 4.0. Она позволяет выполнять точное позиционирование таких объектов web-страницы, как изображения. Кроме того, теперь Вы можете перемещать объекты по вашей HTML-странице. Вы можете также делать объекты невидимыми.
Управлять слоями можно легко с помощью языка JavaScript. Я надеюсь, что Вы, как и я, проникнитесть энтузиазмом в отношении возможностей этих слоев.

В данный момент пользоваться слоями Вы можете только в Netscape Navigator 4.0!
Что такое в действительности слои? Объяснять это очень легко на простом примере: берете несколько листов бумаги. На одном листе пишете текст. На другом - рисуете картинку. На третьем листе берете картинку и вписываете вокруг нее некий текст. И так далее. Теперь кладете эти листы на стол. Допустим, каждый лист - это некий слой. В этом смысле слой представляет собой в некотором роде контейнер. То есть он может включать в себя (содержать) некие объекты - в данном случае это будет текст и изображения.
Теперь берем бумагу с изображением и двигаем его по столу. Внимательно следите за тем, как это изображение движется вслед за бумагой. Если Вы сместим лист бумаги вправо, то и изображение тоже сдвинется! И что же собственно мы должны извлечь из этого увлекательного опыта? Слои, способные содержать различные объекты, например изображения, формы, текст, могут быть наложены на Вашу HTML-страницу и даже перемещаться по ней. Если Вы сдвигаете какой-либо слой, то и все содержащиеся в этом слое объекты тоже будут повторять это движение.
Слои могут накладываться друг на друга подобно простым листам бумаги на столе. В каждом слое могут присутствовать прозрачные области. Сделайте в листе бумаги дырку. Теперь положите этот лист на другой. Такое отверстие - это 'прозрачная область' на первом листе - и через нее как раз видны нижележащие листы.

Создание слоев

Чтобы создать слой, мы должны использовать либо тэг <layer> либо <ilayer>. Вы можете воспользоваться следующими параметрами:

name="layerName"

Название слоя

left=xPosition

Абсцисса левого верхнего угла

top=yPosition

Ордината левого верхнего угла

z-index=layerIndex

Номер индекса для слоя

width=layerWidth

Ширина слоя в пикселах

clip="x1_offset, y1_offset, x2_offset, y2_offset"

Задает видимую область слоя

above="layerName"

Определяет, какой слой окажется под нашим

below="layerName"

Определяется, какой слой окажется над нашим

Visibility=show|hide|inherit

Видимость этого слоя

bgcolor="rgbColor"

Цвет фона - либо название стандартного цвета, либо rgb-запись 

background="imageURL"

Фоновая картинка

Тэг <layer> используется для тех слоев, которые Вы можете точно позиционировать. Если же Вы не указываете положение слоя (с помощью параметров left и top), то по умолчанию он помещается в верхний левый угол окна.
Тэг <ilayer> создает слой, положение которого определяется при формировании документа.

Давайте теперь начнем с простого примера. Мы хотим создать два слоя. В первом из них мы помещаем изображение, а во втором - текст. Все, что мы хотим сделать - показать этот текст поверх данного изображения.

Текст поверх изображения

Исходный код:

<html>
 
<layer name=pic z-index=0 left=200 top=100>
<img src="img.gif" width=160 height=120>
</layer>
 
<layer name=txt z-index=1 left=200 top=100>
<font size=+4> <i> Layers-Demo </i> </font>
</layer>
 
</html>

Как видим, с помощью тэга <layer> мы формируем два слоя. Оба слоя позиционируются как 200/100 (через параметры left и top). Все, что находится между тэгами <layer> и </layer> (или тэгами <ilayer> и </ilayer>) принадлежит описываемому слою.
Кроме того, мы используем параметр z-index, определяя тем самым порядок появления указанных слоев - то есть, в нашем случае, Вы тем самым сообщаете браузеру, что текст будет написан поверх изображения. В общем случае, именно слой с самым высоким номером z-index будет показан поверх всех остальных. Вы не ограничены в выборе z-index лишь значениями 0 и 1 - можно выбирать вообще любое положительное число.
Так, если в первом тэге <layer> Вы напишете z-index=100, то текст окажется под изображением - его слой номер Z-индекса (z-index=1). Вы сможете увидеть текст сквозь изображение, поскольку я использовал в нем прозрачный фон (формат gif89a).

Тект под изображением

Слои и JavaScript

Рассмотрим теперь, как можно получить доступ к слоям через JavaScript. Начнем же мы с примера, где пользователь получает возможность, нажимая кнопку, прятать или показать некий слой.
Для начала мы должны знать, каким образом слои представлены в JavaScript. Как обычно, для этого имеются несколько способов. Самое лучшее - дать каждому слою свое имя. Так, если мы задаем слой

<layer ... name=myLayer>
...
</layer>

то в дальнейшем можем получить доступ к нему с помощью конструкции document.layers["myLayer"]. Согласно документации, предоставляемой фирмой Netscape, мы можем также использовать запись document.myLayer - однако в моем браузере это приводит к сбою. Конечно, это всего лишь проблема предварительной версии и в заключительном варианте будет успешно решена (сейчас я пользуюсь Netscape Navigator 4.0 PR3 на WinNT). Однако, по-видимому, нет никаких проблем с конструкцией document.layers["myLayer"] - поэтому мы и будем пользоваться именно такой альтернативой из всех возможных.
Доступ к этим слоям можно также получить через целочисленный индекс. Так, чтобы получить доступ к самому нижнему слою, Вы можете написать document.layers[0]. Обратите внимание, что индекс - это не то же самое, что параметр z-index. Если, например, Вы имеете два слоя, называемые layer1 и layer2 с номерами z-index 17 и 100, то Вы можете получить доступ к этим слоям через document.layers[0] и document.layers[1], а не через document.layers[17] и document.layers[100].

Слои имеют несколько свойств, которые можно изменять с помощью скрипта на JavaScript. В следующем примере представлена кнопка, которая позволяет Вам скрывать или, наоборот, предоставлять один слой (требуется Netscape Navigator версии 4.0 или выше).

This text is inside a layer 

Исходный код скрипта выглядит следующим образом:

<html>
<head>
<script language="JavaScript">
<!-- hide
 
function showHide() {
  if (document.layers["myLayer"].visibility == "show")
    document.layers["myLayer"].visibility= "hide"
  else document.layers["myLayer"].visibility= "show";
}
 
// -->
</script>
</head>
<body>
 
<ilayer name=myLayer visibility=show>
<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>
</ilayer>
 
<form>
<input type="button" value="Show/Hide layer" onClick="showHide()">
</form>
 
</body>
</html>

Данная кнопка вызывает функцию showHide(). Можно видеть, что в этих функциях реализуется доступ к такому свойству объекта layer (myLayer), как видимость. Присвоивая параметру document.layers["myLayer"].visibility значения "show" или "hide", Вы можете показать или скрыть наш слой. Заметим, что "show" и "hide" - это строки, а не зарезервированные ключевые слова, то есть Вы не можете написать document.layers["myLayer"].visibility= show.
Вместо тэга <layer> я также пользовался тэгом <ilayer>, поскольку хотел поместить этот слой в "информационный поток" документа.

Перемещение слоев

Свойства left и top определяют задают положение данного слоя. Вы можете менять его, записывая в эти атрибуты новые значения. Например, в следующей строке задается горизонтальное положение слоя в 200 пикселов:

document.layers["myLayer2"].left= 200;

Перейдем теперь к программе перемещения слоев - она создает нечто вроде прокрутки внутри окна браузера.

This text is inside a layer 

Сам скрипт выглядит следующим образом:

<html>
<head>
<script language="JavaScript">
<!-- hide
 
function move() {
  if (pos < 0) direction= true;
  if (pos > 200) direction= false;
 
  if (direction) pos++
    else pos--;
 
  document.layers["myLayer2"].left= pos;
}
 
// -->
</script>
</head>
<body onLoad="setInterval('move()', 20)">
 
<ilayer name=myLayer2 left=0>
<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>
</ilayer>
 
</body>
</html>

Мы создаем слой с именем myLayer2. Можно видеть, что в тэге <body>мы пользуемся процедурой onLoad. Нам необходимо начать прокручивание слоя, как только страница будет загружена. В процедуре обработки события onLoad мы пользуемся функцией setInterval(). Это один из новых методов версии 1.2 языка JavaScript (то есть версии JavaScript, реализованной в Netscape Navigator 4.0). Им можно пользоваться, чтобы вызывать некую функцию мвновь и вновь через определенные интервалы времени. В прошлом для этого мы пользовались функцией setTimeout(). Функция setInterval() работает почти так же, однако Вам нужно вызвать ее всего лишь один раз.
С помощью setInterval() мы вызываем функцию move() каждые 20 миллисекунд. А функция move(), в свою очередь, всякий раз смещает слой на новую позицию. И поскольку мы вызываем эту функцию вновь и вновь, то мы получаем быстрый скроллинг нашего текста. Все, что мы нужно сделать в функции move() - это вычислить новую координату для слоя и записать ее: document.layers["myLayer2"].left= pos.

Если Вы посмотрите исходный код этой части в онлайновом описании, то увидите, что в действительности мой код выглядит несколько иначе - я добавил некий фрагмент кода с тем, чтобы люди, работающие со старыми версиями JavaScript-браузеров, не получали из-за этого никаких сообщений об ошибках. Как этого можно достичь? Следующий фрагмент кода будет выполняться только на тех браузерах, которые воспринимают язык JavaScript 1.2:

<script language="JavaScript1.2">
<!-- hide
document.write("Вы используете браузер, совместимый с JavaScript 1.2.");
// -->
</script>

Та же самая проблема возникает, когда мы работаем с объектом Image. Мы можем аналогичным способом переписать кодекс. Установка переменной browserOK решает эту проблему.

Следующий пример демонстрирует, как может осуществляться перекрывание слоев:

 

This text is inside a layer   

Лабораторная работа 10.

Тема: Операции со слоями.

Цель: учить основные операции JavaScrit со слоями.

  • Вырезка из слоя.
  • Вложенные слои.
  • Специальные эффекты со вложенными слоями.

Вырезка из слоя

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

<ilayer left=0 top=0 clip="20,50,110,120">
<img src="davinci.jpg" width=209 height=264>
</ilayer>

(Здесь я приписал параметры left=0 и top=0, поскольку в противном случае, если этого не сделать, то с моей версией Netscape (PR3 on WinNT) возникают некоторые проблемы)
Хотя само изображение и имеет размеры 209x264 пикселов, мы можем видеть лишь его малую часть:

 

Данный фрагмент изображения имеет размер 90x70 (пикселов). Первые два значения, указанные в атрибуте clip (атрибуте HTML-тэга <layer> или <ilayer>), указывают верхний левый угол вырезаемой части. Следующие два значения указывают нижний правый угол. Сказанное можно проиллюстрировать следующим рисунком:

Еще более интересных результатов можно добиться, управляя вырезанной частью с помощью языка JavaScript. Точнее, Вы можете изменять значения свойств clip.left, clip.top, clip.right и clip.bottom объекта Layer. Достаточно всего лишь занести в одно из этих свойств новое значение, как фрагмент тут же будет кадрирован соответствующим образом . В следующем примере параметры вырезанной части изображения меняются динамически, и в результате у пользователя создается впечатление, будто изображение медленно "растет":

 

Код соответсвующего скрипта:

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
var middleX, middleY, pos;
 
function start() {
  // получить размер изображени\я 
  var width= document.layers["imgLayer"].document.davinci.width;
  var height= document.layers["imgLayer"].document.davinci.height;
 
  // определить, какой пиксел находитс\я в центре изображени\я 
  middleX= Math.round(width/2);
  middleY= Math.round(height/2);
 
  // начальная позици\я 
  pos= 0;
 
  // запуск!
  show();
}
 
function show() {
 
  // увеличить размер вырезаемой области 
  pos+= 2; // step size
  document.layers["imgLayer"].clip.left= middleX- pos;
  document.layers["imgLayer"].clip.top= middleY- pos;
  document.layers["imgLayer"].clip.right= middleX+ pos;
  document.layers["imgLayer"].clip.bottom= middleY+ pos;
 
  // проверить, не высвечено ли все изображение 
  if (!((pos > middleX) && (pos > middleY))) 
    setTimeout("show()", 20);  
 
}
 
// -->
</script>
</head>
 
<body>
 
<ilayer name="imgLayer" clip="0,0,0,0">
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>
 
<form>
<input type=button value="Start" onClick="start()">
</form>
 
</body>
</html>
 

Кнопка, представленная в разделе <body>, вызывает функцию start(). Сначала мы должны определить точку, с которой нам следует начать работу - фактически это будет некий пиксел в центре нашего изображения. Значения координат x и y этого пиксела мы помещаем в переменные middleX и middleY. После этого мы вызываем функцию show(), которая задает размеры вырезаемой части изображения в зависимости от значений переменных middleX, middleY и параметра pos. При этом значение переменной pos автоматически увеличивается при каждом вызове функции show(). То есть размер вырезаемой части изображения с каждым разом становится все больше и больше. В самом конце процедуры show() мы устанавливаем таймер с помощью вызова setTimeout() - и благодаря этому функция show() вызывается вновь и вновь. И этот процесс остановится только тогда, когда изображение будет показано целиком.
Заметим, что размер изображения мы получаем в самом начале функции start():

  var width= document.layers["imgLayer"].document.davinci.width;
  var height= document.layers["imgLayer"].document.davinci.height;

С помощью конструкции document.layers["imgLayer"] мы можем обратиться к слою с именем imgLayer. Однако почему после document.layers["imgLayer"] мы ставим document? Дело в том, что каждый слой имеет свою собственную HTML-страницу - то есть, каждый слой имеет свой объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

Вложенные слои

Как мы уже видели, слой может содержать несколько различных объектов. Он могут даже включать в себя другие слои. Конечно, может возникнуть вопрос, для чего это нужно. На самом деле есть несколько причин, чтобы пользоваться вложенными слоями. Рассмотрим несколько примеров, демонстрирующих применение вложенных слоев.
В первом примере используется слой (называемый parentLayer), в который вложено еще два других слоя (layer1 и layer2).

Это первый слой Это второй слой 
 
 

Это главный (родительский) слой 

После открытия страницы мы видим три кнопки. Эти кнопки могут запускать и останавливать движение слоев. Также можно видеть, что перемещение слоя parentLayer сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев.

Рассмотрим теперь исходный код скрипта:

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
// начальна\я позици\я 
var pos0= 0; 
var pos1= -10;
var pos2= -10;
 
// движение?
var move0= true;
var move1= false;
var move2= false;
 
// направление?
var dir0= false;
var dir1= false;
var dir2= true;
 
function startStop(which) {
  if (which == 0) move0= !move0;
  if (which == 1) move1= !move1;
  if (which == 2) move2= !move2;
}
 
function move() {
 
  if (move0) {
    // перемещение parentLayer 
    if (dir0) pos0--
      else pos0++;
 
    if (pos0 < -100) dir0= false;
 
    if (pos0 > 100) dir0= true;
 
    document.layers["parentLayer"].left= 100 + pos0;    
  }
 
  if (move1) {
    // перемещение parentLayer 
    if (dir1) pos1--
      else pos1++;
 
    if (pos1 < -20) dir1= false;
 
    if (pos1 > 20) dir1= true;
 
    document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
  }
 
  if (move2) {
    // перемещение parentLayer 
    if (dir2) pos2--
      else pos2++;
 
    if (pos2 < -20) dir2= false;
 
    if (pos2 > 20) dir2= true;
 
    document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;    
  }
 
}
 
// -->
</script>
</head>
 
<body onLoad="setInterval('move()', 20)">
 
<ilayer name=parentLayer left=100 top=0>
  <layer name=layer1 z-index=10 left=0 top=-10>
 Это первый слой 
  </layer>
 
  <layer name=layer2 z-index=20 left=200 top=-10>
 Это второй слой 
  </layer>
 
  <br><br>
 Это главный (родительский) слой 
 
</ilayer>
 
<form>
<input type="button" value="Move/Stop parentLayer" onClick="startStop(0);">
<input type="button" value="Move/Stop layer1" onClick="startStop(1);">
<input type="button" value="Move/Stop layer2" onClick="startStop(2);">
</form>
 
</body>
</html>

Можно видеть, что внутри parentLayer мы определили два слоя. Это как раз и есть вложенные слои. Как получить к этим слоям доступ в языке JavaScript? Как это делается, можно посмотреть в функции move():

    document.layers["parentLayer"].left= 100 + pos0;
      ...    
    document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
      ...
    document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

Чтобы получить доступ к вложенным слоям, Вам недостаточно будет просто написать document.layers["layer1"] или document.layers["layer2"], поскольку слои layer1 и layer2 лежат внутри parentLayer.

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

Исходный код скрипта:

<html>
<head>
 
<script language="JavaScript">
<!-- hide
 
var pos= 0; // начальное положение 
var direction= false;
 
function moveNclip() {
 
  if (pos<-180) direction= true;
  if (pos>40) direction= false;
 
  if (direction) pos+= 2
    else pos-= 2;
 
  document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
 
}
 
// -->
</script>
 
</head>
<body onLoad="setInterval('moveNclip()', 20);">
 
<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0>
  <ilayer name="imgLayer" top=0 left=0>
  <img name=davinci src="davinci.jpg" width=209 height=264>
  </ilayer>
</ilayer>
 
</body>
</html>

И снова, можно видеть пример обращения к вложенному слою:

  document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

С остальными элементами этого скрипта Вы уже должны быть знакомы.

Различные эффекты с вложенными слоями

Интересные эффекты могут быть созданы с помощью (частично) прозрачных слоев. Сочетание специально подобранных изображений с прозрачными областями может создавать совершенно потрясающий результат. Не все форматы изображений поддерживают работу с прозрачными частями. В настоящее время лучший из отвечающих этому условию форматов - gif89a. Большинство новых графических программ поддерживает этот формат. Помимо этого, в Internet доступны некоторые свободно распространяемые инструменты для работы с графикой.
Новый формат изображений PNG также поддерживает эффект прозрачных частей изображения. Я полагаю, что в ближайшем будущем мы увидим множество страниц, использующих этот формат (точнее, как только большинство браузеров смогут его поддерживать). По сравнению с gif этот формат имеет множество преимуществ.

Давайте рассмотрим такого эффекта:

В данном примере используются два изображения (сплошные серые зоны здесь на самом деле являются прозрачными):

 

 

Сам скрипт несильно отличается от других примеров - так что я не буду здесь его распечатывать (впрочем, Вы конечно можете увидеть его, выбрав в меню Вашего браузера пункт 'View document source').

 

 

 
Rambler's Top100