Date JavaScript. (now, parse, utc). Diferencias entre gmt y utc ó local. getMonth, getDate, getDay (CU01162E)

Codificación aprenderaprogramar.com: CU01162E

OBJETO DATE JAVASCRIPT

Con frecuencia cuando creamos webs o apps tenemos que trabajar con fechas y calendarios. Por ejemplo en la página web de un hotel o un restaurante es posible que trabajemos con fechas y horas de comienzo de reserva, de fin de reserva, etc. JavaScript dispone del objeto predefinido Date para facilitar el trabajo con fechas.

El manejo del “tiempo” es un aspecto controvertido en la programación. La primera dificultad y más obvia es que existen cientos de dispositivos electrónicos y no todos manejan la misma fecha. Por ejemplo mi computador personal puede indicar que hoy es lunes 25 de enero de 2048 y la hora es las 12:35:44 mientras que el servidor al que estoy conectado, suponiendo que está en mi misma ciudad, puede indicar que hoy es lunes 25 de enero de 2048 y la hora es las 12:33:21. Otro servidor, en otro país, puede indicar que la fecha es domingo 24 de enero de 2048 y la hora es las 23:51:15 debido a la diferencia horaria entre países. Aquí, claro está, nos estaríamos refiriendo a horas locales. Para poder disponer de horas de referencia globales para todo el mundo se crearon estándares como:

a) GMT o tiempo medio de Greenwich: ha sido un estándar ampliamente usado. GMT era el tiempo medido en el observatorio británico de Greenwich, que se definió como meridiano cero de la tierra. Así cada país podía expresar su hora en función de la hora del meridiano de Greenwich. Por ejemplo GMT+0 indicaba que la hora era la misma que la hora oficial en el meridiano de Greenwich, mientras que GMT+3 indicaba que la hora eran 3 horas más que en el meridiano de Greenwich (es decir, si es Greenwich eran las 09:00 en un país cuya hora fuera GMT+3 serían las 12:00).

b) UTC o tiempo universal coordinado: es el estándar que se ha adoptado como referencia que indica un tiempo único independientemente de en qué lugar del planeta nos encontremos, basado en las mediciones de relojes atómicos distribuidos por distintos países. Es el estándar que se está imponiendo en los sistemas informáticos.

La circunferencia terrestre se dividió en 24 husos horarios de modo que cada huso quedaba referenciado a un tiempo común (lo que se denominaba el tiempo de Greenwich).

Aunque desde el punto de vista de su definición técnica UTC y GMT no son lo mismo, a efectos prácticos hablar de GMT+3 es lo mismo que hablar de UTC+3.

A pesar de este gran avance, el trabajo con el tiempo sigue presentando grandes dificultades en los sistemas informáticos, tanto por la falta de sincronización entre dispositivos como por la disparidad en cuanto a cómo medir el tiempo y con qué grado de precisión, existencia de horarios de verano e invierno, etc. Por ello encontrarás que es relativamente frecuente encontrar que a medida que los lenguajes de programación evolucionan vayan introduciendo cambios en la forma de manejar el tiempo.

Una cuestión a tener en cuenta es que el tiempo oficial de Greenwich, tiempo GMT ó UTC, no se corresponde con el tiempo local el Greenwich debido a la existencia del horario de verano. Por ejemplo, Lisboa se encuentra en el huso horario de Greenwich, pero en verano la hora local está adelantada una hora respecto al tiempo oficial de Greenwich por motivos de ahorro energético. Esto da lugar a que el 5 de agosto a las 21:00 en Lisboa se corresponda con el 5 de agosto 20:00 UTC debido al horario de verano, a pesar de que Lisboa se encuentre en el mismo huso horaria que Greenwich.

OBJETO DATE JAVASCRIPT

JavaScript nos provee de un objeto predefinido (existente) del lenguaje que podemos usar para trabajar con fechas en nuestros scripts: el objeto Date. Este es uno de los objetos predefinidos de JavaScript, ya que existen otros (como Math, RegExp, etc.). Además de un objeto predefinido Date define un tipo de dato en JavaScript.

MÉTODOS DEL OBJETO PREDEFINIDO DATE

El objeto Date (predefinido) nos proporciona estos métodos:

El método toString() aplicado a estos métodos devuelve un valor numérico (milisegundos).

CONSTRUCTORES DE OBJETOS TIPO DATE

Además del objeto predefinidio Date, podemos crear objetos Date, que representan “un instante” en el tiempo. Hay cuatro formas distintas de crear objetos Date (constructores):

El constructor sin parámetros crea un objeto Date donde el instante de tiempo que representa es el tiempo del sistema en el momento de la creación. El tiempo del sistema es el tiempo de acuerdo con nuestro computador (sistema operativo), y no necesariamente coincidirá con el de otro computador.

Si se invoca Date() sin la palabra new, se obtiene la representación del tiempo actual del sistema. No hay que confundir esta invocación (que sería a una función que devuelve un valor de tipo Date correspondiente al tiempo actual y que cambiará en cada invocación) con la invocación new Date(), que crea un objeto Date que representa el tiempo actual, que queda almacenado en el objeto.

El constructor que recibe un valor entero crea un objeto Date cuyo instante de tiempo está definido por los milisegundos que hayan pasado desde el origen de tiempo (el origen de tiempo en JavaScript está fijado el 1 de enero de 1970 a las 00:00:00 horas, medianoche). Dado que un día tiene 24 horas, una hora 60 minutos, un minuto 60 segundos y un segundo 1000 milisegundos, para representar el 2 de enero de 1970 usaríamos new Date(86400000); , donde el entero entre paréntesis son los milisegundos que contiene un día.

Ejecuta este código y comprueba sus resultados:

El resultado esperado (ten en cuenta que puede diferir según el navegador y sistema operativo que estés usando) es que se muestre:

capturaTiempo es Mon Aug 11 2094 17:22:48 GMT+0100 >> El valor numérico 86400000 representa la fecha Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT) >> Date tiempo actual es Mon Aug 11 2094 17:23:31 GMT+0100 mientras que capturaTiempo sigue valiendoMon Aug 11 2094 17:22:48 GMT+0100 y unaFecha sigue valiendo Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)

Comprobamos que el método toString() aplicado a objetos de tipo Date devuelve una representación como cadena de texto de la fecha.

El constructor que recibe un String crea un objeto Date a partir de una cadena de texto que representa una fecha construida según las formas normalizadas válidas. Hay múltiples formas normalizadas (europeas, norteamericanas) y algunos navegadores reconocen más formas que otros, por lo que no vamos a estudiar todas ellas, sino a mostrar ejemplos en una forma recomendada consistente en indicar año-mes-diaThh:mm+xxyy donde +xxyy indica una diferencia horaria respecto a la hora UTC, que puede ser negativa (hora local retrasada respecto a la UTC) o positiva (hora local adelantada respecto a la UTC).

El constructor new Date(año, mes, día, hora, minuto, segundo, milisegundo); trabaja de la misma forma que el método Date.UTC: año y mes son obligatorios y el resto opcionales. El año ha de ser mayor que 1900. Los meses van de 0 a 11 y los días de 1 a 31. Devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970 a las 00:00:00 UTC hasta el instante UTC indicado en los argumentos. Ejemplo:

var miFecha = new Date(1970, 0, 2, 0, 0, 0);

alert('Milisegundos desde 1 de enero de 1970 son: '+(miFecha-0));

Escribimos una operación aritmética para forzar a que el método toString devuelva el valor numérico en lugar de una representación del tipo << Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)>>

MÉTODOS GETTERS DE OBJETOS TIPO DATE

Los objetos de tipo Date disponen de estos métodos:

MÉTODOS SETTERS DE OBJETOS TIPO DATE

Los objetos de tipo Date disponen de estos métodos para establecer los datos correspondientes a una fecha:

PARADOJAS CON FECHAS Y RECOMENDACIÓN

Suponiendo que estamos en México D.F. (zona horaria) UTC-6 si ejecutamos:

var miFecha1 = new Date('2050-12-24T23:00:00-0600');

var miDia = miFecha.getDate(); da lugar a que miDia contenga 24

Suponiendo que estamos en Lisboa (zona horaria UTC+0000) si ejecutamos:

var miFecha1 = new Date('2050-12-24T23:00:00-0600');

var miDia = miFecha.getDate();da lugar a que miDia contenga 25

¿Por qué en un caso obtenemos 24 y en otro 25? Primeramente partimos de la fecha '2050-12-24T23:00:00-0600', esta fecha son las 5 de la mañana del 25 de diciembre de 2050 hora UTC. El día del mes expresado como día local depende de en qué zona del planeta estemos: si estamos en México D.F. a esa hora UTC serán las 23:00 del 24 de diciembre, por ello el método getDate() devolvería 24 en un computador situado en México D.F. Si estamos en Lisboa, a esa hora UTC son las 5 de la mañana del 25 de diciembre y por ello el método getDate() devolvería 25 en un computador situado en Lisboa. Cuando decimos situado nos referimos a que tenga como hora local del sistema la hora local del sitio donde está ubicado el computador (aunque no necesariamente tendría por qué ser así).

Esta aparente paradoja (que no es tal) podría traernos complicaciones si no tenemos en cuenta los detalles. A modo de recomendación, recomendamos trabajar siempre bajo la referencia UTC y hacer conversiones a fechas locales de forma controlada.

EJERCICIO

Crea un documento HTML que conste de un título h1 con el texto <<Calendario>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Dentro del div central crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 píxeles y tamaño de fuente en la tabla 24 píxeles. La primera columna corresponderá a lunes y la última a domingo. Usa un método JavaScript para determinar el mes actual. Mediante código JavaScript, haz que aparezca dinámicamente como texto encima de la tabla el mes y año de que se trate (por ejemplo <<MAYO DE 2050>>). Haz que cada celda de la primera fila se rellene indicando el día de la semana (Lu – Ma – Mi – Ju – Vi –Sa –Do). Haz que la tabla se rellene dinámicamente (al cargar la página) con:

a) Espacio en blanco si no corresponde ningún día.

b) El número del día del mes según corresponda (28, 30 ó 31 días según de qué mes se trate).

El aspecto, suponiendo que te encuentras en el mes de mayo de 2050, sería el siguiente:

MAYO DE 2050

Ten en cuenta que debe generarse el calendario del mes en que te encuentres según la hora local del sistema (de tu computador).

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.