| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home- WebScript- Varios - Fecha actual
Fecha actual
por
Luciano Moreno, del departamento de diseño web de BJS Software.
Es interesante en muchas ocasiones incluir la fecha actual en una o más de nuestras páginas web, especialmente en aquellas cuyo contenido está intimamente relacionado con el día en que estamos, como puede ser el caso de aplicaciones de banca, inversiones, etc., y de forma general, en cualquier página web.
Vamos a ver un script cross-browser que nos permite obtener la fecha de la máquina del usuario e introducirla en una capa. La elección de una capa contenedora la basamos en que nos permite un cómodo formateo del texto usado para presentar la fecha, así como un perfecto posicionamiento de la misma en la página, sin depender del resto del contenido.
El código necesario para presentar la fecha es el que sigue:
<html>
<head>
<title>HTMLWeb. WebScript. Varios. Fecha
actual</title>
<style
type="text/css">
#fecha{position:absolute;top:20px;left:20px;font-size:13px;font-family:Verdana,Helvetica;color:#006600;font-weight:bold;}
</style>
<script
language="JavaScript">
var
mifecha;
function pintaFecha()
{
var
fecha = new
Date();
var dia_letra =
fecha.getDay();
var dia =
fecha.getDate();
var mes =
fecha.getMonth();
var anyo = fecha.getFullYear();
switch(dia_letra)
{
case 0:
dia_letra = "Domingo";
break;
case 1:
dia_letra = "Lunes";
break;
case 2:
dia_letra = "Martes";
break;
case 3:
dia_letra = "Miércoles";
break;
case 4:
dia_letra = "Jueves";
break;
case 5:
dia_letra = "Viernes";
break;
case 6:
dia_letra = "Sábado";
break;
default:
dia_letra = "Domingo";
break;
}
switch(mes)
{
case 0:
mes = "Enero";
break;
case 1:
mes = "Febrero";
break;
case 2:
mes = "Marzo";
break;
case 3:
mes = "Abril";
break;
case 4:
mes = "Mayo";
break;
case 5:
mes = "Junio";
break;
case 6:
mes =
"Julio";
break;
case 7:
mes = "Agosto";
break;
case 8:
mes = "Septiembre";
break;
case 9:
mes = "Octubre";
break;
case 10:
mes = "Noviembre";
break;
case 11:
mes =
"Diciembre";
break;
default:
mes = "";
break;
}
mifecha=dia_letra+", "+dia+" de "+mes+" de "+anyo;
if(document.all)
document.all('fecha').innerHTML=mifecha;
else
if(document.getElementById)
document.getElementById('fecha').innerHTML=mifecha;
else
if(document.layers)
{
with(document.layers['fecha'])
{
document.open();
document.write("<font size='2' color='#006600'
face='Verdana'><b>"+mifecha+"</b></font>");
document.close();
}
}
}
</script>
</head>
<body bgcolor="#ffff99"
onload="pintaFecha()">
<div
id="fecha"></div>
</body>
</html>
Consideraciones:
1. Usamos el objeto Date, mediante una instacia del mismo, new Date(), para obtener la fecha actual del sistema del usuario (en realidad, Date nos da el número de milisegundos transcurridos desde el 1/1/1970, 00:00:00 horas, pero este dato concreto no nos va a interesar en este caso).
2. Una vez obtenida la fecha, sacamos de ella el día numerico de la semana mediante el método getDay() del objeto Date (0 para el domingo, 1 para el lunes, etc.), el día numerico del mes mediante el método getDate(), el mes numerico mediante el método getMonth() (0 para enero, 1 para febrero, etc.), y el año con 4 cifras mediante el método getFullYear().
3. Como de los métodos anteriores obtenemos el día numerico de la semana y el mes numerico del año, necesitamos entonces pasarlos a sus equivalentes literales en castellano. Para ello usamos la estructura condicional switch-case (conmutar según el caso), similar a la usada en lenguajes como C++ o Java, que nos permite ejecutar un determinado código cuando se cumpla una condición dada entre varias posibles. En nuestro caso, en la determinación de los días literales de la semana a partir de los numéricos, por ejemplo, condicionamos que si el día es 0, entonces nuestra variable dia_letra pasa a valer "Domingo", si vale 1 pasará a "Lunes", y así sucesivamewnte.
En todos los casos, después de especificar el comportamiento trás una condición, es necesario introducir la sentencia "break", para evitar que se ejecuten las siguientes condiciones. Es decir, break detiene la subsiguiente ejecución de la estructura condicional cuando se cumpla una de las condiciones.
Asímismo, introducimos en cada estructura switch-case una última asignación mediante "default", que será la que se ejecute por defecto en caso de que no se cumpla ninguno de los casos anteriores.
4. Una vez obtenidos los componentes de nuestra fecha, debemos escribir su resultado en la capa contenedora, "fecha". El método para ello varía según el navegador. En el caso de Internet Explorer o Nestcape Navigator 6x usaremos la propiedad innerHTML, que asigna un contenido de código HTML a una capa de forma dinámica.
En el caso de Nestcape Navigator 4x usamos en cambio los métodos document.open(), document.write() y document.close(), que abre un documento HTML, escribe en él y lo cierra, respectivamente. Esto es así porque para este navegador cada capa es un documento HTML independiente.
Con objeto de simplificar el código usamos la cláusula with, que nos permite definir el objeto que le pasemos como argumento como objeto predeterminado en la ejecución de las sentencias que contenga el bloque de la cláusula.
5. Por último, notad cómo hemos posicionado la capa absolutamente, ya que si no lo hacemos asó, en Nestcape 4x no podremos escribir en ella nada dinámicamente.
El resultado de éste código podéis verlo pinchando aquí.
Una variante de este script es aquella en la que pintamos la fecha en una celda de tabla, en un párrafo, etc. La ventaja que tiene escribir en una capa es que podemos acceder a ella y cambiar su contenido dinámicamente, cosa muy útil cuando queremos por ejemplo mostrar también la hora con los segundos, ya que entonces podemos llamar a la función principal de fecha cada segundo, con lo que el contenido de la capa irá mostrando la hora en tiempo real.