Buscar Más buscado

Introduccion DHTML - Programación

4 - Programación

[editar]
Curso gratis creado por Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html
18 de Octubre de 2005
< anterior | 1 ... 2 3 4 5 6 | siguiente >
En este capítulo nos adentraremos en la creación de documentos con contenido dinámico usando las propiedades anteriores mediante funciones en Javascript. Como vimos en el capitulo anterior, cada browser tiene distintas propiedades y distintas formas de referenciar cada propiedad. Para evitar este problema, es útil construir funciones independientes de cada Browser. Asi, el hecho de mover o modificar un elemento es transparente para el programador.

Metodos Layer

Netscape provee por si mismo un conjunto de funciones predefinidas que son aplicables a objetos Layer. La lista es la siguiente:

load("filename", y)

moveAbove(layerObj)

moveBelow(layerObj)

moveBy(deltaX, deltaY)

moveTo(posX, posY)

moveToAbsolute(posX, posY)

resizeBy(deltaX, deltaY)

resizeTo(width, height)

La forma de usar estas funciones es: document.myLayer.moveTo(50,30).

Detectar Browser

Antes de comenzar a construir funciones, necesitamos saber que browser esta utilizando el cliente. Para hacer esto, utilizamos en siguiente código en Javascript:

var isNav, isIE;

var coll = ; var styleObj = ;

if( parseInt( navigator.appVersion >= 4 ) {

if( navigator.appName
"Netscape" ) {
isNav = true;

} else {

isIE = true;

coll = "all.";

styleObj = ".style"; } }

A modo de ejemplo, si queremos modificar la propiedad Z-Index del elemento myObj (que es una propiedad igual para ambos browsers, en caso contrario, habria utilizar la propiedad adecuada dependiendo del valor de las variables isNav y isIE), sencillamente colocamos:

var obj = eval("document." + coll + "myObj" + styleObj);

obj.zIndex = 5;

Librería

En esta sección veremos como construir funciones independientes del browser utilizado. Es de mucha utilidad almacenar este conjunto de funciones dentro de una libreria .js. A modo de ejemplo, veamos tres funciones tipicas. Para ver la lista completa haga clic (con el botón derecho, grabar a disco, si no funciona un click simple; esto porque el archivo está en Javascript y algunos browsers intentarán interpretarlo).

Convierte un nombre como string de un objeto o una referencia a un objeto en un objeto valido, dependiendo del browser function getObject(obj) {

var theObj;

if( typeof obj
"string" ) {
theObj = eval("document." + coll + obj + styleObj);

} else {

theObj = obj;

} return theObj; }

Posiciona un objeto en una coordenada dada en pixeles function shiftTo(obj, x, y) {

var theObj = getObject(obj);

if( isNav ) {

theObj.moveTo( x,y );

} else { theObj.pixelLeft = x;

theObj.pixelTop = y; } }

 Cambia el color de fondo de un objeto function setBGColor(obj, color) {

var theObj = getObject(obj);

if( isNav ) { theObj.bgColor = color;

} else { theObj.backgroundColor = color; } }

La forma de utilizar esta libreria, seria de la forma:

<script language="Javascript" src="dhtml.js"></script>

Resize y Netscape

Netscape tiene el problema que cuando el usuario modifica el tamano de la ventana del Browser, todo el Layout (esquema) de los elementos se destruye. La solución es recargar la página.

Para evitar este problema, debemos obligar a regargar la pagina cuando el usuario modifique el tamaño de la ventana. Para hacer esto, utilizamos el siguiente código:

Funcion que recarga la pagina function handlerResize() {

location.reload();

return false; }

 primer uso if( isNav ) {

window.captureEvents(Event.RESIZE);

window.onResize = handlerResize(); }

segundo uso <body onResize="handlerResize()">
[editar]
< anterior | 1 ... 2 3 4 5 6 | siguiente >

Opinar
1 opinión

opinion

necesito 20 aspectos de como ocupar dhtml

Cursos gratis relacionados con 'Introduccion DHTML'

Introduccion DHTML
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
Introducción al diseño web
El diseño web va más allá del diseño gráfico, al influir en él multitud de... Más »
Fundamentos de diseño de Sitios Web
Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de... Más »
Estrategias publicitarias para Internet
Los modelos de publicidad en Internet se basan en sus dos principales aplicaciones: el correo... Más »
Proxys y anonimato
Para proteger nuestra navegación y filtrar la publicidad disponemos en el mundo windows de los... Más »

Anuncios Google

Autor y licencia de 'Introduccion DHTML'


Curso gratis de Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html CopyLeft
Los contenidos de este sitio pueden ser reproducidos solamente bajo estas condiciones. La licencia está respaldada con el registro de propiedad intelectual número 97.125 en Chile y otros países.
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.