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.
o Teclado. Indica una acción de entrada de datos en el algoritmo. Ver Figura 9.
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.
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.
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.
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.
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.
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.
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.
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.
<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.
<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
Suscribirse a:
Entradas (Atom)