Объект layer

Все слои, определенные в документе, доступны как элементы кол­лекции layers. Например: document.layers[2]; document.layers["somelayer"]

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

document.layers["outerlayer"].layers["innerlayer"]

Свойства объекта layer: above-Возвращает ссылку на слой, находящийся над те­кущим, background-Ссылка на объект Image, представляющий фоновый рисунок текущего слоя,.below-Возвращает ссылку на слой, находящийся под текущим, bgcolor-Цвет фона слоя, document-Возвращает ссылку на объект document, представляющий содержимое слоя. Left-Горизонталь­ная координата левого верхнего угла слоя в пикселах, name-Имя тега, за­данного в атрибуте NAME, pageX Горизонтальная координата слоя отно­сительно остального до-кумента,.pageY-Вертикальная координата слоя относительно остального документа, parentLayer Возвращает ссылку на родительский слой или объект window, если родительского слоя нет, siblingAbove-Возвращает ссылку на слой, находящийся над те­кущим и имеющий того же родителя, siblingBelow-Возвращает ссылку на слой, находящийся под текущим и имеющий того же родителя, Src-Возвращает адрес файла документа, отображаемого в слое. Top-Верти­кальная координата левого верхнего угла слоя в пикселах.

Visibility-Видимость слоя: show показывает его, hide скрывает, а inherit наследует видимость от родителя ( по умолчанию). Window-Возвращает ссылку на объект window (или frame), где находится текущий слой. X То же самое, что left, Y-То же самое, что top. zIndex-Порядок перекрытия слоев. Слои с большим значением свойства перекрывают слои с мень­шим значением.

Методы объекта layer: load({Адрес файла нового документа}, {Но­вая ширина слоя в пикселах})-Позволяет заменить содержимое слоя на указанный в адресе документа. moveAbove({Имя слоя})-Перемещает те­кущий слой выше слоя, имя ко-торого передано в качестве параметра.

moveBelow({Имя слоя})-Перемещает текущий слой ниже слоя, имя ко-торого передано в качестве параметра. moveBy({X},{Y})-Перемещает слой на X пикселов вправо и на Y пикселов вниз. moveTo({X},{Y}) - Пе­ремещает слой в точку, заданную координа-тами X и Y. Координаты от­считываются относительно родительского слоя. moveToAbsolute({X},{Y}) -Перемещает слой в точку, заданную коор­динатами документа X и Y. resizeBy({X},{Y})-Увеличивает/уменьшает слой на X пикселов по горизонтали и на Y пикселов по вертикали. resizeTo({X},{Y})-Увеличивает слой до размера, заданного значениями X и Y.

Каскадные таблицы стилей и объект style

Каждый узел DOM имеет объект style, который описывает стили. Через стили можно изменить, например, цвет шрифта элемента: document.getElementById("simpl").style.color = red.

Объект style поддерживает свойства, задающие стиль документа или относящиеся к самому объекту style. Свойства первой группы аналогичны соответствующим атрибутам стиля и имеют похожие имена. Символы "-" в именах убираются, как не соответстующие соглашению JavaScript. Первые буквы второго, третьего слов, имени атрибута, делаются прописными. Примеры: background-attachment-> backgroundAttachment;border-bottom-color -> borderBottomColor; font-family ->fontFamily; z-index ->zIndex.

По аналогии можно преобразовать все атрибуты стилей в свойства объекта style. Все не относящееся к стилю свойства объекта style пере­числены в таблице.

Свойство	Описание
cssText	текстовое представление стиля (параметр атрибута STYLE).
pixelHeight	Высота элемента в пикселах.
pixelLeft	Смещение левого края элемента в пикселах.
pixelTop	Смещение верхнего края элемента в пикселах.
pixelWidth	Ширина элемента в пикселах.
posHeight	Высота элемента в единицах, в которых она была установлена в определении стиля.
posLeft	Смещение левого края.
posTop	Смещение верхнего края.
posWidth	Ширина элемента.

Объект style позволяет изменить геометрические размеры элемента и его месторасположение, например:

paragraph1.style.fontSize = 7;

image1.style.height = "100mm";

image1.style.width = "120mm";

iamge1.style.top = "200px";

image1.style.left = "50px";

Можно использовать также свойства pos*, принимающие числовые значения в тех единицах, в которых они были заданы в определении стиля.

<IMG src="img1.gif" id="img1" style="height: 100mm; width: 100">

nheight = img1.style.posHeight; // Значение в миллиметрах

nwidth = img1.style.posWidth; // Значение в пикселах

5.6. JavaScript и AJAX

Технология AJAX (Asynchronous JavaScript And XML) позволяет соз­давать интерактивные веб-приложения, в которых возвращаемая клиенту страница полностью не перегружается, а перегружается только часть, содержащая изменившиеся данные. Новейшие сервисы Google, в том числе GMail, Orkut, Google Groups, Google Maps, Google Suggest, Google Finance, являются AJAX-приложениями. Базисом технологии являются: использование модели DOM для обновления содержимого, обмен и обработка данных в виде XML, асинхронные запросы к серверу через интерфейс XMLHttpRequest, использование JavaScript и DOM.

Рассмотрим отличия классической модели веб-приложения от AJAX.

Классическая модель веб-приложения:

Пользователь загружает в браузер веб-страницу и вызывает событие.

Браузер отправляет HTTP запрос серверу.

Сервер генерирует страницу - ответ и возвращает ее браузеру.

В браузере отображается новая страница.