Введение В JavaScript для Мага

Главная Программы Flash-игры Анекдоты	Новости Заставки Java-игры Афоризмы	Статьи Фото-приколы PC-игры Смешные истории	Книги Обои Личное Программы-шутки
Гостевая книга		О проекте

[EXT] [EXT]

[EXT]

Страница: 1 | 2 | 3 | 4

Part 7: Forms

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

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

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

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

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

<html>
<head>
<script language="JavaScript">
<!-- Скрыть 

function test1(form) {
  if (form.text1.value == "")
    alert("Пожалуйста, введите строку!")
  else { 
   alert("Hi "+form.text1.value+"! Форма заполнена корректно!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 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: :

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

<html>
<head>
<script language="JavaScript">
<!-- hide

// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************

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

Изображения на 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

// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************

  // 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: Слои I

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

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

В данный момент пользоваться слоями Вы можете только в Netscape Navigator 4.0!

И, как обычно, я не буду детально описывать различные тэги. Хороший документ, описывающий все свойства такого объекта Netscape Navigator 4.0, как слои, находится по адресу http://home.netscape.com/comprod/products/communicator/index.html - и потому у меня нет нужды его пересказывать.

Что такое в действительности слои? Объяснять это очень легко на простом примере: берете несколько листов бумаги. На одном листе пишете текст. На другом - рисуете картинку. На третьем листе берете картинку и вписываете вокруг нее некий текст. И так далее. Теперь кладете эти листы на стол. Допустим, каждый лист - это некий слой. В этом смысле слой представляет собой в некотором роде контейнер. То есть он может включать в себя (содержать) некие объекты - в данном случае это будет текст и изображения.
Теперь берем бумагу с изображением и двигаем его по столу. Внимательно следите за тем, как это изображение движется вслед за бумагой. Если Вы сместим лист бумаги вправо, то и изображение тоже сдвинется! И что же собственно мы должны извлечь из этого увлекательного опыта? Слои, способные содержать различные объекты, например изображения, формы, текст, могут быть наложены на Вашу 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

Страница: 1 | 2 | 3 | 4

Главная | Вверх

Сайт оптимизирован под разрешения 1024х768 и 1280х1024, нажмите F11, для более полного погружения в контент сайта

Используются технологии uCoz