Buscador

Operadores e identificadores en los diagramas de flujo - V

Como ejemplo integrador de los aspectos vistos hasta el momento, el siguiente caso muestra la creación de un algoritmo algo más complejo y completo. El problema a desarrollar se basa en un programa de venta de artículos; cada cliente puede comprar un número de artículos variable, por lo que el usuario del programa debe ir introduciendo el precio de cada artículo. Una vez hecho esto, se comprobará el precio del artículo, y si sobrepasa el importe de 30, se le aplicará un descuento del 2%. En el caso de que el importe sea menor, se le otorgará al cliente un punto de bonificación sobre el artículo para la próxima compra. Cuando se hayan procesado todos los artículos, deberemos obtener el importe total de la compra y la cantidad de puntos de bonificación, finalizando de esta manera el algoritmo. El diagrama de flujo correspondiente quedaría como muestra la Figura 17.

Operadores e identificadores en los diagramas de flujo - III

Figura 14. Diagrama de flujo con el algoritmo para calcular el importe de cartuchos de impresora. Supongamos ahora, que en el anterior algoritmo hemos olvidado realizar el cálculo del impuesto a aplicar sobre el importe de los cartuchos. Para solucionar este inconveniente realizaremos un proceso de depuración sobre dicho algoritmo, obteniendo una nueva versión, representada en el diagrama de la Figura 15. Los algoritmos representados hasta el momento, se basan en un proceso simple de toma de datos, cálculo de operaciones, y muestra de resultados. Pero una de las ventajas de la programación consiste en la posibilidad de repetir, un número determinado de veces, un mismo proceso, dentro de una estructura repetitiva denominada bucle. Entre las operaciones a realizar dentro de una estructura repetitiva, podemos definir un identificador que actúe como contador, y que controle el número de veces que llevamos ejecutada la estructura, para saber en qué momento debemos finalizar su ejecución y seguir con el resto del proceso. Otra particularidad relacionada con las estructuras repetitivas, consiste en acumular un valor en un identificador, en cada paso o ejecución de la estructura. Para ello, debemos hacer algo tan sencillo como poner dicho identificador o acumulador, además de en la parte izquierda de la asignación, también en la parte derecha. El algoritmo desarrollado a continuación, muestra un ejemplo de los elementos que acabamos de mencionar. Vamos a definir un bucle controlado por un contador, que tiene un identificador con el nombre Pasos, el cuál estaremos ejecutando mientras que dicho contador no sea 10. En cada paso del bucle, el usuario debe introducir un dato que se depositará en el identificador Valor; dicho dato se almacenará en el identificador Resultado, acumulándolo al valor que previamente hubiera en Resultado. Cuando el contador haya alcanzado el valor adecuado, se finalizará la ejecución del bucle, escribiendo el resultado del acumulador. Ver Figura 16.

Operadores e identificadores en los diagramas de flujo - II

El símbolo igual ( = ), además de para una comparación, se utiliza también para asignar el resultado de una operación a un identificador, situando el identificador al que vamos a asignar el valor a la izquierda del símbolo, y la operación a realizar en la derecha. En el caso de necesitar representar una entrada o salida de datos, podemos usar las palabras Lectura y Escritura, seguidas de los identificadores a los que se asignará, o de los que se obtendrá un valor. En el siguiente ejemplo, representaremos un algoritmo mediante un diagrama de flujo, enfocado al siguiente problema: calcular el importe de una factura emitida por una empresa de consumibles que vende cartuchos de impresora. Cada cartucho tiene un precio de 12 euros, y el usuario debe de
introducir la cantidad de cartuchos vendidos, y calcular el total, mostrándolo al final. Este algoritmo nos servirá además para comprobar la representación de las entradas y salidas de información en un diagrama. Ver Figura 14.

Operadores e identificadores en los diagramas de flujo - I

Dentro de los elementos de un diagrama de flujo, es frecuente la necesidad de realizar operaciones para obtener diversos resultados. En función de la acción o partícula de la acción a representar, emplearemos un conjunto de símbolos en mayor o menor medida generalizados, de los cuales pasamos a describir los más comunes.
 Cuando necesitemos indicar una operación aritmética, emplearemos los siguientes símbolos:

• + Suma.
• - Resta.
• * Multiplicación.
• / División.
• \ División entera.
• ^ Potenciación.
Para establecer una comparación utilizaremos estos símbolos:
• > Mayor que.
• >= Mayor o igual que.
• < Menor que.
• <= Menor o igual que.
• = Igual que.

Al realizar una operación, el resultado necesitaremos guardarlo en algún sitio; para ello, disponemos de los llamados identificadores, que son elementos que representan un valor utilizado a lo largo del desarrollo del algoritmo. El valor contenido en un identificador puede variar según las operaciones que realicemos con el mismo. A un identificador le daremos un nombre cualquiera, siendo recomendable que guarde cierta relación con el valor que contiene. En el próximo ejemplo se utilizarán identificadores, de forma que el lector pueda comprobar cómo se lleva a cabo su uso.

Diagramas de flujo - IV

Anteriormente hemos mencionado la depuración, como la técnica que nos permite corregir o mejorar el proceso desarrollado por un algoritmo o programa; dicho sistema puede ser aplicado a este algoritmo que acabamos de representar en forma de optimización. El anterior ejemplo sólo contempla la posibilidad de una llave para abrir la puerta, pero normalmente suele ocurrir que tenemos varias llaves, entre las que hemos de elegir la correcta. Teniendo este aspecto en cuenta, depuremos el anterior algoritmo tal y como se muestra en la Figura 13, de manera que nos sirva para introducir de paso un elemento de decisión.

Diagramas de flujo - III

• Complementarios.
o Teclado. Indica una acción de entrada de datos en el algoritmo. Ver Figura 9.


En el proceso de diseño de un diagrama de flujo, se indicarán las operaciones mediante el símbolo correspondiente, introduciendo dentro del símbolo si es necesario, o este lo requiere, una nota con la operación que va a realizarse. Un algoritmo no sirve única y exclusivamente para ser aplicado en la resolución de problemas informáticos, es posible emplear algoritmos para resolver los más variados tipos de problema, incluso tareas simples. Como ejemplo ilustrativo de esta situación, vamos a mostrar un diagrama con el algoritmo de un problema tan natural como abrir una puerta con una llave. Ver Figura 12.

Diagramas de flujo - II

• Principales.

Diagramas de flujo - I

Un diagrama de flujo consiste en una representación gráfica, basada en símbolos, de los pasos que debe realizar un algoritmo. Estos símbolos pueden clasificarse, de mayor a menor importancia, en:
  Básicos.

Algoritmos - II

Observemos cómo los datos de entrada serían el CD a reproducir; el proceso estaría representado por los pasos dados con el reproductor para ponerlo en funcionamiento; mientras que la salida sería la música reproducida que escucharíamos. Cuando finalicemos la escritura de un algoritmo, es muy conveniente realizar una ejecución de prueba para el mismo, empleando datos reales para comprobar que el resultado es el adecuado. En el caso de que obtengamos resultados no esperados, o bien, consideremos que es posible optimizar el proceso de ejecución del algoritmo, modificaremos las partes que consideremos necesarias para mejorarlo; este proceso se denomina depuración o refinamiento. Tomando este concepto de depuración, y aplicándolo al anterior algoritmo para escuchar un CD, podríamos refinar el proceso añadiendo los elementos adicionales que se muestran en el Código fuente 3.

1. Inicio
2. Tomar un CD
3. Pulsar el botón de encendido del reproductor
4. Abrir la bandeja del reproductor
5. Introducir el CD en la bandeja
6. Cerrar la bandeja
7. Ajustar el volumen
8. Pulsar el botón de comienzo
9. Escuchar la música
10. Fin
Código fuente 3

De esta manera tenemos en cuenta otros factores como el hecho de que el reproductor pueda estar apagado o el volumen de reproducción no sea el adecuado. Una vez que hemos realizado el análisis del algoritmo, necesitamos un elemento que nos permita representarlo. Si bien no existe una técnica única para la representación de algoritmos, disponemos de algunas que, dadas sus características, nos facilitan dicha tarea, por lo que son mayormente utilizadas. Entre los medios para la creación de algoritmos, tenemos los diagramas de flujo, el pseudocódigo, y los diagramas Nassi-Schneiderman.

Algoritmos - I

Un algoritmo se puede definir como el conjunto de acciones a realizar para resolver un determinado problema. El modo de afrontar la creación de un algoritmo, pasa por descomponer el problema planteado en problemas más pequeños y fáciles de resolver independientemente. Una vez resueltos los problemas independientes, se unirán todos, obteniendo de esta forma el correspondiente algoritmo. El proceso indicado por un algoritmo debe ser claro y tener sus pasos bien definidos, de forma que si realizamos dicho proceso varias veces, empleando siempre los mismos valores en el algoritmo, deberemos obtener el mismo resultado. De igual forma, en un algoritmo deben distinguirse las siguientes fases: entrada, proceso y salida. Para comenzar a familiarizarnos con el diseño y escritura de algoritmos tomemos el siguiente ejemplo: desarrollar el algoritmo para escuchar un CD de música. El Código fuente 2 muestra los pasos a seguir para confeccionar este algoritmo.

1. Inicio
2. Tomar un CD
3. Introducirlo en el reproductor
4. Pulsar el botón de comienzo
5. Escuchar la música
6. Fin
Código fuente 2

Análisis del problema

Esta etapa consiste en investigar el problema a resolver, y desarrollar los procesos necesarios para ello. Tras estudiar el problema, deberemos diseñar un algoritmo que lo solvente satisfactoriamente, y realizar diversas comprobaciones para verificar su correcto funcionamiento. Los siguientes apartados describen los principales puntos a desarrollar durante la fase de análisis

Etapas en el desarrollo de un programa

No existen una serie de normas absolutas en el proceso de creación de un programa, ya que como comentamos en un apartado anterior, la programación es una actividad creativa, en la que confluyen, por un lado, los requerimientos del problema a afrontar, las capacidades que nos proporciona el lenguaje empleado por otro, y la pericia e inventiva del programador para resolver dicho problema. No obstante, sí podemos establecer unas pautas generales a seguir, en lo que se puede llamar ciclo de desarrollo del programa, y que podemos dividir en dos grandes etapas, compuestas a su vez cada una de una serie de pasos. A continuación se muestran los puntos constituyentes de este proceso.

• Análisis del problema.
o Estudio del problema.
o Desarrollo del algoritmo.
o Comprobación del algoritmo.
• Implementación del programa.
o Escritura del programa en base a los resultados obtenidos del algoritmo.
o Ejecución del programa
o Depuración del programa.
o Documentación del programa.

En los siguientes apartados y temas del texto iremos realizando una descripción más detallada de los puntos más importantes de este esquema.

¿Qué es un programa?

Como describimos en una definición anterior, un programa (o aplicación, como también lo denominaremos) es un conjunto de instrucciones escritas en un lenguaje de programación, que pueden llevar a cabo uno o múltiples procesos, normalmente relacionados, aunque sin ser esto obligatorio, y que en definitiva nos permiten resolver uno o más problemas. A las instrucciones o código que forman parte de un programa se le denomina código fuente. Como hemos mencionado anteriormente, para crear un programa debemos conocer los elementos del lenguaje a emplear y sus normas de utilización. Por ejemplo, el lenguaje Visual Basic .NET dispone de las palabras clave Dim e Integer para declarar variables, y los símbolos = y + para asignar valores y realizar operaciones (no se preocupe el lector si todavía no comprende estos conceptos, serán explicados en un tema posterior). Para poder crear una variable y realizar una operación con ella, no basta saber cuáles son las palabras claves y símbolos a utilizar, sino que también debemos saber cómo utilizar estos elementos. El Código fuente 1 muestra una forma incorrecta y otra correcta de crear una variable y asignar una operación de suma a la misma

"' incorrecto
Integer MiDato Dim
MiDato + 50 = 700"
"' correcto
Dim MiDato As Integer
MiDato = 50 + 700"


Código fuente 1
En el primer caso, si intentamos ejecutar el código incorrecto se producirá un error, ya que no se atiene
a las normas de escritura de código del lenguaje, cosa que sí sucede en el caso siguiente.

¿Qué es un lenguaje de programación?

Un lenguaje de programación es la principal herramienta de las utilizadas por el programador para la creación de programas. Todo lenguaje se compone de un conjunto más o menos extenso de palabras claves y símbolos, que forman la denominada sintaxis del lenguaje, y una serie de normas o reglas para el correcto uso y combinación de tales palabras y símbolos.

¿Qué es la programación?

La programación de ordenadores es aquella rama de las tecnologías de la información, encargada del diseño y escritura de las instrucciones o sentencias que un ordenador debe ejecutar para completar una operación o resolver un problema. Al conjunto de operaciones que lleva a cabo un ordenador para proporcionar un determinado resultado se le denomina proceso, el conjunto de varios procesos que realizan tareas comunes, conformando de esta manera una única entidad, la denominamos programa. 
Por ejemplo, un proceso puede ser la suma de los importes que componen las líneas de una factura; otro, el cálculo de los impuestos a aplicar sobre el importe de la factura; la obtención de los datos del cliente al que vamos a enviar la factura sería otro proceso; si todos estos procesos y otros similares los juntamos, tendríamos un programa de facturación. Adicionalmente, si tenemos un proceso que calcula las rutas y distancias de los vehículos de una empresa de transportes, podríamos añadirlo al programa anterior, aunque la lógica nos indica que no tendría mucho sentido, por lo cual, este proceso y los que tengan que ver con la logística de una empresa de transporte, deberían ubicarse en otro programa diferente. 
De este modo conseguiremos un conjunto de programas mejor organizados, enfocados a resolver tareas concretas, con un mayor rendimiento en ejecución.

Las ventajas del uso de ordenadores

Todas aquellas personas que hayan tenido acceso a un ordenador o computador, habrán podido comprobar cómo estas máquinas permiten realizar trabajos que incluyen una elevada y compleja cantidad de cálculos, de forma efectiva, y a una gran velocidad de proceso. 
Para que un ordenador pueda realizar operaciones y resolver problemas necesita, además de sus componentes físicos, un elemento lógico que es el que permite realizar dichas tareas, dicho elemento es el programa, que al ser ejecutado por el ordenador, lleva a cabo las operaciones pertinentes, proporcionando el resultado correspondiente, a una velocidad infinitamente superior que si hubiéramos tenido que realizarlas de forma manual. 
La creación de un programa para ordenador no es una labor trivial, requiere un adiestramiento en una disciplina: la programación, y en sus herramientas informáticas: los lenguajes de programación, que nos permitirán su diseño y creación La descripción de las técnicas de programación, y de un lenguaje de programación en concreto: Visual Basic .NET (VB.NET, como también lo denominaremos a lo largo del texto), son los objetivos perseguidos en este texto, cuya finalidad es la de mostrar al lector las fases de creación de una aplicación informática, y de iniciarle en el apasionante arte de la programación.

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">
<!--
#Primero{
background-color: green;
height: 100;
left: 0;
position: absolute;
top: 0;
width: 100;
z-index: 2;
}
#Segundo{
background-color: red;
height: 100;
left: 20;
position: absolute;
top: 20;
width: 100;
}
#Tercero{
background-color: blue;
height: 100;
left: 40;
position: absolute;
top: 40;
width: 100;
z-index: 1;
}
#Cuarto{
background-color: yellow;
height: 100;
left: 60;
position: absolute;
top: 60;
width: 100;
}
-->
</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.

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

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">
<!--
Fila1Columna1Obj = document.createTextNode("Fila 1, Columna 1 ");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode(false);
tr2td1Obj = tr1td1Obj.cloneNode(false);
tr2td2Obj = tr1td1Obj.cloneNode(false);
tr3td1Obj = tr1td1Obj.cloneNode(false);
tr3td2Obj = tr1td1Obj.cloneNode(false);
tr2Obj = tr1Obj.cloneNode(false);
tr3Obj = tr1Obj.cloneNode(false);
Fila1Columna2Obj = Fila1Columna1Obj.cloneNode(false);
Fila2Columna1Obj = Fila1Columna1Obj.cloneNode(false);
Fila2Columna2Obj = Fila1Columna1Obj.cloneNode(false);
Fila3Columna1Obj = Fila1Columna1Obj.cloneNode(false);
Fila3Columna2Obj = Fila1Columna1Obj.cloneNode(false);
Fila1Columna2Obj.nodeValue = "Fila 1, Columna 2 ";
Fila2Columna1Obj.nodeValue = "Fila 2, Columna 1 ";
Fila2Columna2Obj.nodeValue = "Fila 2, Columna 2 ";
Fila3Columna1Obj.nodeValue = "Fila 3, Columna 1 ";
Fila3Columna2Obj.nodeValue = "Fila 3, Columna 2 ";
returnValue = tableObj.insertBefore(tbodyObj);
tbodyObj.insertBefore(tr3Obj);
tbodyObj.insertBefore(tr2Obj, tr3Obj);
tbodyObj.insertBefore(tr1Obj, tr2Obj);
tr1Obj.insertBefore(tr1td2Obj);
tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);
tr2Obj.insertBefore(tr2td2Obj);
tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);
tr3Obj.insertBefore(tr3td2Obj);
tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);
tr1td2Obj.insertBefore(Fila1Columna2Obj);
tr1td1Obj.insertBefore(Fila1Columna1Obj);
tr2td2Obj.insertBefore(Fila2Columna2Obj);
tr2td1Obj.insertBefore(Fila2Columna1Obj);
tr3td2Obj.insertBefore(Fila3Columna2Obj);
tr3td1Obj.insertBefore(Fila3Columna1Obj);
bodyNode.insertBefore(tableObj);
// -->
</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">
<!--
Date.prototype.getActualMonth = MesActual;

Date.prototype.getActualDay = DiaActual;
Date.prototype.getCalendarDay = LeerSemanaCalendario;
Date.prototype.getCalendarMonth = LeerMesCalendario;
function MesActual() {
var n = this.getMonth();
n += 1;
return n;
}
function DiaActual() {
var n = this.getDay();
n += 1;
return n;
}
function LeerSemanaCalendario() {
var n = this.getDay();
var dow = new Array(7);
dow[0] = "Domingo";
dow[1] = "Lunes";
dow[2] = "Martes";
dow[3] = "Miércoles";
dow[4] = "Jueves";
dow[5] = "Viernes";
dow[6] = "Sábado";
return dow[n];
}
function LeerMesCalendario() {
var n = this.getMonth();
var moy = new Array(12);
moy[0] = "Enero";
moy[1] = "Febrero";
moy[2] = "Marzo";
moy[3] = "Abril";
moy[4] = "Mayo";
moy[5] = "Junio";
moy[6] = "Julio";
moy[7] = "Agosto";
moy[8] = "Septiembre";
moy[9] = "Octubre";
moy[10] = "Noviembre";
moy[11] = "Diciembre";
return moy[n];
}
// Comprobar los métodos creados
var Hoy = new Date();
document.write("<b>La presente rutina se está ejecutando en "
+ Hoy.getCalendarDay() + ", el día " + Hoy.getDate()
+ " de " + Hoy.getCalendarMonth() + " del año del Señor de "
+ Hoy.getFullYear() + " D.C. a las " + Hoy.getHours() + " horas. </b>");
//-->
</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">
<!--
function Reloj (Horas, Minutos){
this.Horas = Horas;
this.Minutos = Minutos;
this.PonerEnHora = PonerEnHora;
this.MostrarLaHora = MostrarLaHora;
}
function PonerEnHora (Horas, Minutos){
this.Horas = Horas;
this.Minutos = Minutos;
}
function MostrarLaHora (){
var line = this.Horas + ":" + this.Minutos;
document.write ("<hr>Hora del Reloj: " + line);
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var HoraActual = new Date();
miReloj = new Reloj(HoraActual.getHours (), HoraActual.getMinutes ());
miReloj.MostrarLaHora ();
//-->
</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