Ingeniería de Sistemas e Informática

Posicionamiento por capas mediante estilos - I

Aunque ya se ha tratado el tema en el capítulo 2º, el código siguiente muestra un ejemplo sencillo de posicionamiento por capas utilizando estilos definidos en la misma página.

Figura 34. Posicionamiento por capas mediante estilos

Operadores e identificadores en los diagramas de flujo - IV

Algunos efectos visuales

Degradación de fondos

Entre los numerosos efectos visuales que se pueden conseguir mediante el nuevo modelo de objetos, uno de los más populares es la degradación del fondo de un formulario pasando de un color a otro mediante pequeños saltos de color.

El Código fuente 95 consigue este efecto mediante un bucle, combinando los colores rojo, verde y
azul, aplicándolo a la propiedad bgColor del objeto document:

<html>
<head>
<script type="text/javascript">
<!—
function Degradar(InicioRojo, InicioVerde, InicioAzul, FinalRojo, FinalVerde,
FinalAzul, delay){
for(var i = 1; i <= delay - 1; i++){
var FinalPorcentaje = i/delay;
var InicioPorcentaje = 1 - FinalPorcentaje;
document.bgColor = Math.floor(InicioRojo * InicioPorcentaje + FinalRojo *
FinalPorcentaje) * 256 * 256 + Math.floor(InicioVerde * InicioPorcentaje +
FinalVerde * FinalPorcentaje) * 256 + Math.floor(InicioAzul * InicioPorcentaje +
FinalAzul * FinalPorcentaje ); }
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!—
Degradar( 255,255,240,0,128,128,170 );
//-->
</script>
</body>
</html>

Código fuente 95

Al mostrarse la página comienza con color clarito en verde que va volviéndose verde oscuro según se van aplicando los valores generados por el bucle a la propiedad bgcolor.

Ejemplos de uso del modelo de objetos DOM - IV

Y el código fuente que corresponde con esta ventana es el que aparece en el Código fuente 94.
<HTML>
<HEAD>
<TITLE>Construcción de Tablas mediante DOM</TITLE>
</HEAD>
<BODY ID="bodyNode">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
Código fuente 94

Ejemplos de uso del modelo de objetos DOM - III

Un poco más compleja, pero basándose en los mismos principios es la situación que sigue. Se crea una tabla totalmente a partir de código fuente de DOM, generando por código los nodos correspondientes y añadiéndolos a las colecciones del documento. Una vez terminado el proceso el mecanismo de rendering será el encargado de visualizar la tabla como si se hubiera construido con etiquetas HTML tipo estándar. Obtendríamos una salida en el navegador similar a la Figura 33. Figura 33.

Figura 33. Construcción dinámica de tablas mediante DOM

Ejemplos de uso del modelo de objetos DOM - II

Y su salida nos mostraría la tabla con diferentes colores, y la caja de mensaje a la que se llama a continuación, nada más cargarse el documento.

Figura 32. Acceso a las propiedades de un elemento mediante DOM
El mecanismo utilizado aquí consiste en clonar el contenido de una etiqueta (un objeto, en realidad, según se ha visto en el primer capítulo), para acceder después a sus propiedades y mostrarlas en una caja de mensaje.

Ejemplos de uso del modelo de objetos DOM - I

Uso del método cloneNode

Mediante el método cloneNode , podemos copiar información de otras etiquetas (elementos, desde el punto de vista de DOM), y modificar sus propiedades o añadir otras nuevas, implementando así una forma de herencia. Veamos, en el Código fuente 93, un primer ejemplo de uso de estas propiedades mediante el acceso a información de una tabla, leyendo los datos de una sola celda, y mostrándolos en una caja de diálogo.

<HTML>
<BODY ID="bodyNode">
<TABLE ID="tableNode">
<BODY>
<TR ID="tr1Node"><TD BGCOLOR="yellow">Fila 1, Columna 1</TD>
<TD BGCOLOR="orange">Fila 1, Columna 2</TD>
</TR>
<TR ID="tr2Node"><TD BGCOLOR="yellow">Fila 2, Columna 1</TD>
<TD BGCOLOR="orange">Fila 2, Columna 2</TD>
</TR>
<TR ID="tr3Node"><TD BGCOLOR="lightgreen">Fila 3, Columna 1</TD>
<TD BGCOLOR="beige">Fila 3, Columna 2</TD>
</TR>
<TR ID="tr4Node"><TD BGCOLOR="blue">Fila 4, Columna 1</TD>
<TD BGCOLOR="lightblue">Fila 4, Columna 2</TD>
</TR>
<TR ID="tr5Node"><TD BGCOLOR="orange">Fila 5, Columna 1</TD>
<TD BGCOLOR="purple">Fila 5, Columna 2</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
tr4Obj = tr1Node.cloneNode(true);
alert( "Primer Hijo = " + tr4Obj.firstChild + "\n" +
"Nombre del Nodo= " + tr4Obj.nodeName );

</SCRIPT>
</BODY>
</HTML>
Código fuente 93

Llamada condicional a una función

En Javascript, podemos generar estructuras complejas que se ejecuten en función de varias condiciones. Por ejemplo podemos crear funciones para el tratamiento de situaciones que dependen del navegador en el que la página se esté ejecutando. En el Código fuente 92, la función a la que se llama en el código depende del resultado combinado del operador condicional (?:)

function funcionIE() {...}
function funcionNetscape() {...}
var funcion = (IE) ? funcionIE : funcionNetscape;
// Si IE es verdadero, funcion hace referencia a funcionIE, en caso contrario
// funcion es una referencia a funcionNetscape
funcion();
// La llamada que haremos realmente depende de la
// línea anterior

Código fuente 92

Escritura dinámica de un documento - III

En este caso la salida anula el contenido del cuerpo de la página, y solo veremos la primera parte:

Parte dinámica terminada con fecha: 01/30/2001 14:12:07

Los saludos son sobrescritos, porque primero se ejecuta la carga del documento, y una vez terminada,
se produce el evento onload, que ordena volver a escribir el búfer del documento, ignorando el
mensaje de saludo.

Escritura dinámica de un documento - II

En este caso la salida es:

Ejemplo de documento con una parte fija y otra creada dinámicamente. Parte dinámica terminada con fecha: 01/30/2001 14:06:10

Esto es debido a que el script está contenido dentro del cuerpo (<BODY>) del documento, pero
veamos lo que sucede si sacamos el script fuera de <BODY>, y añadimos un mensaje interno (Código
fuente 91)

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function EscribirDocumento() {
document.write('Parte dinámica terminada con fecha: ');
document.write(document.lastModified); }
</SCRIPT>
</HEAD>
<BODY onLoad="EscribirDocumento()">
Saludos cordiales, desde el cuerpo del documento…
</BODY>
</HTML>

Código fuente 91

Escritura dinámica de un documento - I

Una de las capacidades del objeto document es la de poder escribir en el búfer de la pantalla de visualización, lo que nos permite crear documentos on-line. En el Código fuente 90, vemos como el código que sigue puede escribir y sobrescribir en un documento, dependiendo de cómo usemos el método write del objeto document: Si la rutina se encuentra en el cuerpo del documento, la instrucción document.write añadirá el contenido al generado por las etiquetas, mientras que si la llamada se produce una vez cargado el documento, el método write sobrescribirá todo el búfer anulando los valores generados por cualquier etiqueta anterior.

<HTML>
<BODY>
Ejemplo de documento con una parte fija y otra creada dinámicamente.
<BR>
<SCRIPT LANGUAGE="JavaScript">
document.write('Parte dinámica terminada con fecha: ');
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Código fuente 90

Otro ejemplo, más completo

En el Código fuente 89 se presenta un ejemplo más completo, accediendo a todos los recursos de fecha
y hora para presentarlos como parte de la salida de una página. Se utilizan los métodos getMonth(),
getDate() y getHours() del objeto Date.
<script type="text/javascript" language="JavaScript1.1">

</script>
Código fuente 89

La salida de esta página sería:
La presente rutina se está ejecutando en Miércoles, el día 31 de Enero del año del Señor de 2001 D.C. a las 13 horas.

Mas aplicaciones de los objetos: Presentar Fechas y Horas

Las funciones de fecha y hora nos permiten hacer un control de los valores de reloj en Javascript, utilizando algunas de las funciones asociadas con el objeto Date. En el Código fuente 88, incluimos un ejemplo para mostrar la hora actual al cargarse una página web.

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
Código fuente 88

Este documento, instancia un nuevo objeto Date llamado HoraActual y utiliza sus métodos getHours()
y getMinutes() para obtener los valores que nos presenta como salida (la hora actual del sistema):

Hora del Reloj: 12:39