Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 29

Visitas el mes pasado: 40

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. El tiempo (I)

10.1 La fecha

javascript

obtener fechas

El manejo de las fechas en javascript depende del objeto Date

El objeto Date permite acceder a la fecha y la hora del ordenador del usuario. También permite escribir otras fechas, o hacer cálculos entre fechas.

Para obtener la fecha actual con el objeto date escribiremos:

fechaActual = new Date()

Donde fechaActual es la variable donde guardaremos el objeto fecha que hemos creado.

Si lo que queremos es escribir otra fecha, dentro del paréntesis debemos escribir los parámetros que indiquen cual es esa otra fecha, de la manera siguiente:

miFecha = new Date(anno,mes,dia,hora,minuto,segundo)

Los parámetros que pasamos tienen que ser números; el año debe escribirse con las cuatro cifras (por ejemplo 2009 y no 09); los meses empiezan a contar desde 0 de manera que el mes de enero es el 0 y el mes de diciembre es el 11, por lo que debemos restar un número al número de mes que escribiríamos normalmente; no se escribe ningún 0 a la izquieda, por ejemplo el día 5 de un mes es 5 y no 05.

Podemos prescindir de los tres últimos parámetros, es decir escribir sólo el año, mes y día, de manera que la fecha se indicará de la siguiente manera:

miFecha = new Date(anno,mes,dia)

En este caso la hora, minuto y segundo serán igual a 0 horas, 0 minutos, y 0 segundos.

Sin embargo el formato en que obtenemos la fecha no es muy habitual, ya que será algo parecido a lo siguiente:

Mon Mar 01 2010 12:23:15 GMT+0100

Lo cual se interpreta de la siguiente manera:

En el siguiente párrafo obtenemos mediante javascript la fecha actual en este formato a la hora en que se ha cargado esta página:

El script que hemos escrito para obtener esta fecha es el siguiente:

window.onload = function() {
         fecha = new Date()
         texto = document.getElementById("hoy")
         texto.innerHTML = fecha
}

Y en el código HTML hemos añadido esta etiqueta donde queremos poner la fecha:

<p id="hoy"></p>

En el siguiente enlace puedes ver cómo queda el script anterior:

Fecha con objeto Date



Metodos del objeto date: lectura

Sin embargo el objeto Date posee varios métodos que nos permiten ver o modificar solo una parte de la fecha, por ejemplo el día, el mes , o la hora.

Los métodos de lectura son distintos de los de escritura, todos ellos empiezan por la palabra get. Para aplicarlos escribimos la variable que almacena la fecha, seguida de un punto y el nombre del método: partimos de la siguiente variable:

fecha = new Date()

A partir de aquí vamos a ver los diferentes métodos de lectura; nosotros hemos puesto aquí la fecha actual, pero podriamos haber puesto cualquier otra fecha, si dentro del paréntesis hubieramos escrito los parámetros anteriores. Una vez obtenemos la fecha mediante fecha = new Date() podemos aplicar los metodos de lectura:

getDate()

dia = fecha.getDate(): Devuelve el día del mes.

getDay()

diaSemana = fecha.getDay(): Devuelve el día de la semana en un formato de número de manera que empieza la semana en domingo y le corresponde el 0 y la acaba en sábado con el número 6.

getMonth()

mes = fecha.getMonth(): Devuelve el mes en formato numérico, los números van del 0 al 11, siendo el 0 el mes de enero y el 11 el mes de diciembre.

getFullYear()

annoCompleto = fecha.getFullYear(): Devuelve el año en formato completo, es decir escrito con los cuatro dígitos.

getYear()

annoCorto = fecha.getYear(): Devuelve el año al que se le ha restado 1900, por tanto en fechas anteriores al año 2000 se muestra con los dos últimos dígitos, a partir del 2000 muestra los dos últimos dígitos con un 1 delante, (ej: 2007 se muestra como 107). Sin embargo en Internet Explorer devuelve el año completo igual que en el anterior.

getHours()

hora = fecha.getHours(): Devuelve la hora en formato de 0 a 24.

getMinutes()

minuto = fecha.getMinutes(): Devuelve el minuto en formato de número entre 0 y 59.

getSeconds()

segundo = fecha.getSeconds(): Devuelve el segundo en formato de número entre 0 y 59.

getMilliseconds()

milisegundo = fecha.getMilliseconds(): Devuelve el milisegundo en formato de número entre 0 y 999.

getTime()

tiempo = fecha.getTime(): Devuelve la cantidad de segundos transcurridos desde el 1 de enero de 1970. Se emplea habitualmente para cálculos con fechas.

getTimezoneOffset()

local = fecha.getTimezoneOffset(): Devuelve la diferencia horaria expresada en minutos,entre la zona en la que estamos y la hora oficial internacional o del meridiano de Greenwich. El resultado depende por tanto de como se tenga configurada la hora en el ordenador.

Los métodos vistos hasta aquí son sólo de lectura, por lo que no permiten modificar la fecha.

Veamos un ejemplo de página en la que se obtienen los valores anteriores para la fecha actual:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>objeto Date</title> 
<style type="text/css">
#caja  { width: 400px; border: 1px solid black; float: right; }
</style>
<script type="text/javascript">
var Semana = ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"];
var Mes = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
fecha = new Date() //obtener fecha actual
window.onload = function() {	// estado inicial del panel de datos 
texto = document.getElementById("caja")
texto.innerHTML = "<h3>Fecha actual</h3><p>Formato de Date: " + fecha + "<p>"
}
function laFecha() {
         texto.innerHTML = "<h3>Fecha actual</h3><p>Formato de Date: " + fecha + "<p>"
         if (document.fecha.dia.checked) { //día del mes
            elDia = fecha.getDate();
            texto.innerHTML += "<p>Día del mes: " + elDia + "</p>";
            } 
         if (document.fecha.semana.checked) { //día de la semana
            diaSemana = fecha.getDay();
            laSemana = Semana[diaSemana]
            texto.innerHTML += "<p>Día de la semana: " + laSemana + "</p>";
            }
         if (document.fecha.mes.checked) { //mes
            numMes = fecha.getMonth();
            elMes = Mes[numMes]
            texto.innerHTML += "<p>Mes: " + elMes + "</p>";
            }
         if (document.fecha.anoLargo.checked) { //año largo
            elAnoL = fecha.getFullYear();
            texto.innerHTML += "<p>Año (completo): " + elAnoL + "</p>";
            }
         if (document.fecha.anoCorto.checked) { //año corto
            elAnoC = fecha.getYear();
            texto.innerHTML += "<p>Año (Corto): " + elAnoC + "</p>";
            }
         if (document.fecha.hora.checked) { //hora
            laHora = fecha.getHours();
            texto.innerHTML += "<p>Hora: " + laHora + "</p>";
            }
         if (document.fecha.minuto.checked) { //minuto
            elMinuto = fecha.getMinutes();
            texto.innerHTML += "<p>Minutos: " + elMinuto + "</p>";
            }
         if (document.fecha.segundo.checked) { //segundo
            elSegundo = fecha.getSeconds();
            texto.innerHTML += "<p>Segundos: " + elSegundo + "</p>";
            }
         if (document.fecha.milis.checked) { //milisegundo
            elMilisegundo = fecha.getMilliseconds();
            texto.innerHTML += "<p>Milisegundos: " + elMilisegundo + "</p>";
            }	
         if (document.fecha.tiempo.checked) { //milisegundos desde 1-enero-1970
            elTiempo = fecha.getTime();
            texto.innerHTML += "<p>Milisegundos desde 1-1-1970: " + elTiempo + "</p>";
            }
         if (document.fecha.local.checked) { //Diferencia horaria
            difLocal = fecha.getTimezoneOffset();
            texto.innerHTML += "<p>Diferencia con Greenwich en minutos: " + difLocal + "</p>";
            }
         }	     
</script>
</head>
<body>
<div id="caja"></div>
<h1>Ver métodos del objeto Date</h1>
<p>Elige los diferentes formatos para ver la fecha y hora, y pulsa luego en "ver fecha".</p>
<form action="#" name="fecha">
  <p><input type="checkbox" name="dia" /> Día del mes. -getDate()-</p>
  <p><input type="checkbox" name="semana" /> Día de la semana. -getDay()-</p>
  <p><input type="checkbox" name="mes" /> Mes del año. -getMonth()-</p>
  <p><input type="checkbox" name="anoLargo" /> Año en formato largo. -getFullYear()-</p>
  <p><input type="checkbox" name="anoCorto" /> Año en formato corto. -getYear()-</p>
  <p><input type="checkbox" name="hora" /> Hora. -getHours()-</p>
  <p><input type="checkbox" name="minuto" /> Minuto. -getMinutes()-</p>
  <p><input type="checkbox" name="segundo" /> Segundo. -getSecons()-</p>
  <p><input type="checkbox" name="milis" /> Milisegundos. -getMilliseconds()-</p>
  <p><input type="checkbox" name="tiempo" /> Milisegundos desde 1-Enero-1970. -getTime()-</p>
  <p><input type="checkbox" name="local" /> Diferencia con meridiano de Greenwich en minutos. -getTimezoneOffset()-</p>
  <p><input type="button" onclick="laFecha()" value="ver fecha" />
  </form>
</body>
</html>

Puedes ver esta página de ejemplo en el siguiente enlace:

Fecha actual





En la siguiente página veremos cómo se manejan las fechas en javascript

Manejar fechas



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com