Стефан Кох - Введение в JavaScript для Мага

…

то в дальнейшем можем получить доступ к нему с помощью конструкции 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 или выше).

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

function showHide() {

if (document.layers["myLayer"].visibility == "show")

document.layers["myLayer"].visibility= "hide"

else document.layers["myLayer"].visibility= "show";

}

// — >

This text is inside a layer

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

Вместо тэга

я также пользовался тэгом , поскольку хотел поместить этот слой в "информационный поток" документа.

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

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

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

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

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

function move() {

if (pos < 0) direction= true;

if (pos > 200) direction= false;

if (direction) pos++

else pos-;

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

}

// — >

This text is inside a layer

Мы создаем слой с именем myLayer2 . Можно видеть, что в тэге

мы пользуемся процедурой 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:

document.write("Вы используете браузер, совместимый с JavaScript 1.2.");

// — >

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

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

Текст внутри слоя

Читать дальше