Ingeniería de Sistemas e Informática: Javascript

Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

Algunos sitios web de utilidad para los lectores

http://msdn.microsoft.com/msdnmag
http://www.microsoft.com/mind/default.asp
http://www.microsoft.com/com/
http://www.microsoft.com/com/tech/dcom.asp
http://www.microsoft.com/com/tech/activex.asp
http://www.vbthunder.com/
http://www.insteptech.com/VBTipsFr.htm
http://www.sourcesite.simplenet.com/visualbasic/
http://www.vbinformation.com/
http://www.programando.com/visualbasic/mundovisual/
http://vbprogzone.cjb.net/
http://www3.btwebworld.com/choruscomputing/vb_expert/home.htm

Posicionamiento por capas mediante estilos - II

Efecto que se consigue mediante el Código fuente 96
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<p name="Capa1" id="Primero">
Capa1
</p>
<p name="Capa2" id="Segundo">
Capa2
</p>
<p name="Capa3" id="Tercero">
Capa3
</p>
<p name="Capa4" id="Cuarto">
Capa4
</p>
</body>
</html>

Código fuente 96

Para más información recomendamos al lector algunos sitios web, donde podrá encontrar interesante
información relacionada con funciones avanzadas del HTML Dinámico.

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

Creación de un objeto - II

Con esto no creamos ninguna instancia especial. El objeto posee tres propiedades, Número de ICQ,
Nombre y Apodo. Para crear una instancia necesitaremos el constructor new. Con ello comunicamos a
Javascript que deseamos crear una nueva instancia y no ejecutar una función. Como indica el Código
fuente 84.
userForo1 = new foroEIDOS( 4053781, "Lagarto Juancho", "Juancho" )

Código fuente 84

Con la instrucción que aparece en el Código fuente 85 establecemos la instancia userForo1 que tiene
las propiedades.

userForo1.nNumICQ
userForo1.cNombre
userForo1.cApodo

Código fuente 85

Creación de un objeto - III

Todas las instancias de un objeto son independientes entre sí. Por lo tanto, también podríamos asignar una instancia especial con propiedades adicionales.

userForo1.seccion = "Reptiles"
Código fuente 86

Esta propiedad especial sólo es válida para la instancia userForo1. Si deseamos asignar esta propiedad
a todas las instancias, la definición correspondiente deberá colocarse en el constructor del objeto
afectado.

function foroEIDOS ( nNumICQ, cNombre, cApodo, cSeccion )
{
this.nNumICQ = nNumICQ
this.cNombre = cNombre
this.cNick = cApodo
this.seccion = cSeccion
}
Código fuente 87

Creación de un objeto - I

La mejor forma de verlo es con un ejemplo, lo primero que vamos hacer es crear un objeto al que le llamamos foroEIDOS y sus propiedades.

function foroEIDOS ( nNumICQ, cNombre, cApodo )

{
this.nNumICQ = nNumICQ
this.cNombre = cNombre
this.cApodo = cApodo
}
Código fuente 83

Averiguar la versión y el tipo de navegador utilizado - II:

Como vemos, el número de propiedades es suficiente para conocer en todo momento bajo qué entorno de ejecución se está viendo nuestra página. Dependiendo de esas situación podremos escribir código ejecutable para cada circunstancia. En este caso, la salida del Código fuente 82, produce una pantalla de referencias generales sobre todas las característicasque muestra la Figura 30.

Figura 31. Página mostrando las características del navegador

Nota para programadores experimentados en orientación a objetos

A pesar de la apariencia de las relaciones clase-subclase en la jerarquía Javascript, muchos de los aspectos

tradicionales de un entorno orientado a objetos no son aplicables a Javascript. En realidad la jerarquía Javascript es más una jerarquía de contenidos o de envoltorios que una jerarquía de herencia. No se heredan ni propiedades ni métodos de los objetos más altos en la cadena. No hay un mecanismo de trasvase de mensajes entre objetos en ninguna dirección. Por lo tanto, no puede invocar un método ventana mediante el envío de un mensaje a él desde un documento o plantilla. Cualquier referencia a un objeto debe ser explícita.

Los objetos Javascript predefinidos son generados sólo cuando el código HTML que contiene sus definiciones se carga en el navegador. No se puede añadir o modificar propiedades, métodos o manejadores de ningún objeto (aunque pueda añadir una propiedad a una variable que pertenece a un objeto). A lo sumo se puede modificar algunos valores de las propiedades.

Averiguar la versión y el tipo de navegador utilizado - I:

En numerosas ocasiones es preciso escribir código polivalente: es decir, que pueda ser usado para cualquier tipo de navegador, espcecialmente, cuando es importante que nuestras páginas sean accedidas por el mayor número de usuarios posible. Para estas situaciones, podemos utilizar las funciones provistas por el objeto window a tal efecto: appName, appVersion, etc. Veamos un ejemplo

de su utilización,en el Código fuente 82, mostrando la lista de propiedades disponibles.
<html>
<head>
<title>Manual EIDOS de HTML Dinámico, Modelos de objetos y Javascript. Marino
Posadas. (Grupo EIDOS)</title>
</head>
<body>
<script language="JavaScript">

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

Ubicación actual mediante URL, y referencias agrupadas mediante with - II

La estructura with, permite hacer referencia a las propiedades del objeto document sin repetir el prefijo
con el nombre del objeto en cada llamada. Se produce una salida donde el valor del título y la URL se
toman automáticamente de las propiedades del objeto document:

Figura 30. Salida del código anterior en Internet Explorer

Ubicación actual mediante URL, y referencias agrupadas mediante with - I

La página puede conocer siempre cual es la ubicación actual mediante la propiedad URL. Además en el caso de que tengamos que hacer referencia a más de una propiedad de un objeto, la estructura de agrupación with, permite hacer referencias múltiples a las propiedades de un objeto. El Código fuente 81 lo demuestra.

<html>
<head>
<title>Manual EIDOS de HTML Dinámico, Modelos de objetos y Javascript</title>
</head>
<body>
<script type="text/javascript">
with(document){
write("¡Hola!");
write("<br>El título del documento es, \"" + title + "\".");
write("<br>La URL de este documento es: " + URL);
write("<br>¡No es necesario usar el prefijo del objeto cada vez!");
}
</script>
</body>
</html>
Código fuente 81

Ingeniería de Sistemas e Informática

Etiquetas

Buscador