4.- USO DE JAVASCRIPT.
4.1.- EL OBJETO Layer.
Definamos como definamos los layers, podremos tratarlos como objetos modificables desde scripts de JS.
Para cada layer de una página, ya haya sido definido con el tag <LAYER> o con estilos CSS
con propiedad position, hay un objeto layer en JS.
Desde JS será posible desplazar las capas creadas por la pantalla, cambiar sus características
como color y tamaño, hacerlas visibles o invisibles, etc. Incluso será posible generar nuevas
capas mediante programa.
Cualquier layer, se haya generado con el tag <LAYER> o con estilos CSS, estará representado por
un objeto layer, que tendrá una serie de atributos y propiedades que pueden ser consultados
y modificados desde JS.
Para acceder a los atributos de una Layer con JS desde Netscape, lo hemos visto aquí
y para el Internet
Explorer lo hemos visto aquí. De todos modos en
en el tema sobre INCOMPATIBILIDADES. COMO HACER PAGINAS COMPATIBLES, veremos como
solventar (en parte) las diferencias entre ambos navegadores.
4.2.- PROPIEDADES DEL OBJETO Layer.
Algunas propiedades no tienen parámetro HTML asociado (como document) y otras, que se podían
definir desde HTML, no estarán accesibles desde JS, o serán sólo de "lectura".
Las propiedades accesibles desde JS sólo para lectura son las siguientes:
document: Así como el objeto document dispone, en Netscapem, de un array
layers y en el IE, de una array all, cada layer, dispone de una propiedad
document, que representa el documento contenido en el layer, documento que a su vez tiene
las propiedades habituales del objeto document, y que se utiliza para acceder a todos los
elementos de que el
layer es "padre".
Por ejemplo, en el Netscape sería:
document.layers["capa"].document.layers.length
y en el IE sería:
document.all["capa"].document.all.length
nos daría la cantidad de layers que están en el layer que se llama capa.name: Devuelve el nombre que se le asignó a través de los atributos ID o NAME. Los layers creados dinámicamente (una vez cargada la página), dispondrán de un nombre asignado por el navegador.siblingAbove: Devuelve el objeto layer que se encuentra sobre éste en el orden de apilamiento de entre todas las capas que comparten el mismo layer padre.siblingBellow: Devuelve el objeto layer que se encuentra debajo de éste en el orden de apilamiento de entre todas las capas que comparten el mismo layer padre. above: Es parecido a siblingAbove, pero tiene en cuenta todos los layers del documento, y no sólo los que tienen padre común.below: Es parecido a siblingBellow, pero tiene en cuenta todos los layers del documento, y no sólo los que tienen padre común.parentLayer: Indica el objeto layer que actúa como contenedor de éste.
Las propiedades accesibles desde JS para lectura/escritura son las siguientes:
left: En layers con posición absoluta indica la posición horizontal del borde izquierdo del layer relativa a su layer contenedor. En layers con posición relativa, indica la posición respecto al flujo HTML.
Puede ser un valor porcentual o un entero, y su unidad de medida es el pixel.top: De la misma forma que left, éste se refiere a la posición vertical del borde superior del layer.pageX: Indica la posición horizontal del layer respecto a la página.pageY: Indica la posición vertical del layer respecto a la página.zIndex: Indica el orden de apilamiento del layer. Los que tengan menor valor, aparecen debajo de los que lo tengan mayor. El más bajo es 0.visibility: Determina si un layer es visible o no. Puede tomar los valores show para hacerlo visible o hide para hacerlo invisible, o inherit (heredado) tendrá el mismo valor que el del layer contenedor.
background: Indica la imagen de fondo del layer. Para acceder o modificar la imagen, podemos acceder a la propiedad src, por ejemplo:
capa.background.src="piedra.gif"
bgColor: Especifica el color de fondo sólido del layer. Será null si es transparente.
layer.bgColor="#0000FF";
layer.bgColor=null;
clipping: Disponemos de las propiedades de clipping: clip.top, clip.left, clip.right, clip.bottom, clip.width y clip.height que son muy útiles para realizar redimensionamiento de layers. Las propiedades anteriores cumplen que:
clip.width = clip.right - clip.left
clip.height = clip.bottom - clip.top
src: Fuentes del contenido del layer, especificado como una URL válida.
4.3.- MÉTODOS DEL OBJETO Layer.
Al igual que los objetos de JS, también los layers, como objetos
que son definen una serie de métodos o funciones con los cuales
podemos modificarlos. Dichos métodos podemos simularlos cambiando
las propiedades del objeto Layer. Como Internet Explorer no soporta
estos métodos, siempre que queramos hacer páginas
compatibles los simularemos cambiando aquellas propiedades que fueran
necesarias.
Para utilizar un método del objeto Layer en Netscape,se hace
como en JS, podemos llamar un método
de un layer del siguiente modo:
objetolayer.metodo(argumentos)
por ejemplo, la siguiente expresión llama al método moveBy() del layer capa, moviéndolo 10 pixels a la derecha y 10 hacia abajo:
document.capa.moveBy(10,10);
No importa cómo se haya creado un layer (con el tag <LAYER> o con estilos CSS), podremos hacer uso de los métodos que aparecen en la siguiente lista una vez que la página haya sido cargada:
moveBy(dx,dy): mueve el layer dx píxeles hacia la izquierda y dy hacia abajo, desde su posición actual.moveTo(x,y): Cuando se ejecuta sobre layers con posición absoluta, los desplaza a las coordenadas (x,y), en píxeles del documento o layer contenedor.
Cuando se ejecuta sobre layers con posición relativa, lo hace respecto a su posición natural en el flujo HTML.
Tiene el mismo efecto que modificar las propiedades left y top.moveToAbsolute(x,y): Actúa como moveTo(), pero sobre el sistema de coordenadas de la página, en lugar del layer contenedor.
Tiene el mismo efecto que modificar las propiedades pageX y pageY.resizeBy(dw,dh): Ajusta el tamaño del layer según las diferencias de ancho y alto indicadas como parámetros. Si el contenido del layer no cabe en las nuevas dimensiones, queda cortado (se hace clipping).
Tiene el mismo efecto que modificar las propiedades clip.width y clip.height.resizeTo(w,h): Ajusta el tamaño del layer a las dimensiones indicadas como parámetros. También se hace clipping del contenido que no quepa.
Tiene el mismo efecto que modificar las propiedades clip.width y clip.height.moveAbove(layer): Coloca el layer sobre el especificado como parámetro. Este cambio afecta a la visibilidad y a la jerarquía establecida de layers. Tras el cambio, ambos layers compartirán el layer padre.moveBelow(layer): Coloca el layer bajo el especificado como parámetro. Este cambio afecta a la visibilidad y a la jerarquía establecida de layers. Tras el cambio, ambos layers compartirán el layer padre.load(cad,w): Cambia el documento fuente del layer al indicado por cad y a la vez fija un nuevo ancho para el layer al cual se ajustará el nuevo contenido.
Para ver un ejemplo de métodos del objeto Layer, pulsa aquí.
4.4.- Ejercicios.
Para hacer los ejercicios de este tema pulsa aquí
|
