Fruta cubierta: Rambután. El rambután o nefelio es un fruto originario de Malasia, común en la isla de Java, que pertenece a la misma familia que el lichi, las Sapindáceas, formada por más de 1.000 especies de árboles y arbustos distribuidos por regiones cálidas de todo el mundo. De hecho, por su aspecto se le conoce también como "Lichi peludo". Se trata de una fruta dulzona, muy agradable al paladar y de consistencia similar a la de las uvas. También se le conoce en Centroamérica como "mamón chino" .
Agradecimientos Escribir un libro es una tarea muy dura. Hasta que uno lo intenta por primera vez no se da cuenta de cuánto. Se necesita invertir muchísimas horas de trabajo que en términos económicos es casi imposible que salgan rentables (al menos en el caso un libro técnico). Por ello, la principal razón para escribir un libro técnico suele ser siempre el “frikismo”, el amor por la tecnología y por la divulgación, sobre todo si no
es el primero (como es mi caso). Es complicado, por tanto, justificar en el trabajo las horas invertidas, por lo que casi todos los autores técnicos que conozco utilizamos nuestras horas libres para escribir. Eso significa fines de semana de jornadas maratonianas, horas por la noche después del trabajo y casi siempre sacrificar las vacaciones. Este libro lo escribí durante el verano de 2012. Básicamente no tuve vacaciones y dejé de lado en bastantes ocasiones a amigos, familia y especialmente a mi mujer. Así que quiero, como siempre, agradecerle a Eva su compresión, su paciencia conmigo (engañada no vino, ¡eso es verdad!), su amor, su amistad, su apoyo y asistencia sin los cuales ni esto, ni la empresa ni muchas otras cosas serían posibles, y por supuesto quiero dedicarle el libro con gran
( )
-1.2 ≤ X, Y, Z ≤ 1.2
http://bit.ly/SqOPQ0
Contenido AGRADECIMIENTOS ............................................................................................... III CONTENIDO .............................................................................................................. V PRESENTACIÓN ...................................................................................................... XI CAPÍTULO 1: INTRODUCCIÓN AL LENGUAJE JAVASCRIPT ........................ 1 1.- Versiones de JavaScript y la problemática de la compatibilidad .......................................1 2.- Editores de JavaScript para la Web ..........................................................................................3 2.1.- Microsoft Visual Studio Express Edition .................................................................... 3 2.2.- Aptana Studio ................................................................................................................... 4 2.3.- JetBrains WebStorm ....................................................................................................... 5 2.4.- JS Fiddle .............................................................................................................................. 6 2.5.- Maquetta ............................................................................................................................ 7 3.- La etiqueta <script> .....................................................................................................................8 3.1.- El atributo type ............................................................................................................... 10 3.2.- Inclusión de archivos externos................................................................................... 11 4.- Comentarios en el código ....................................................................................................... 12 5.- ¿Y si el navegador no soporta JavaScript? ........................................................................... 13
CAPÍTULO 2: TIPOS DE DATOS, VARIABLES Y FUNCIONES BÁSICAS ...15 1.- Declaración de variables .......................................................................................................... 15 2.- Tipos de datos ............................................................................................................................ 17 2.1.- El tipo String o Cadena................................................................................................. 18 2.2.- Tipos numéricos............................................................................................................. 20 2.3.- Variables Booleanas o indicadores ............................................................................ 22 2.4.- Variables Nulas ............................................................................................................... 23 3.- Conversión entre tipos de datos........................................................................................... 24 3.1.- Conversión implícita de tipos ..................................................................................... 24 3.2.- Conversión explícita de tipos ..................................................................................... 25 4.- Definición básica de funciones ............................................................................................... 28 5.- Ámbito de las variables ............................................................................................................ 30 6.- Notación de variables y funciones ........................................................................................ 33
CAPÍTULO 3: OPERADORES DE JAVASCRIPT ................................................. 37 1.2.3.4.5.-
Operadores de JavaScript ........................................................................................................ 37 Precedencia de operadores .................................................................................................... 38 Incrementos y Decrementos .................................................................................................. 40 Operadores lógicos................................................................................................................... 41 Operadores bit a bit ................................................................................................................. 43
vi Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
5.1.- La representación de los números ............................................................................ 44 5.2.- Los operadores de desplazamiento de bits ............................................................. 48 6.- Operadores de asignación ....................................................................................................... 49 7.- Operaciones matemáticas. El objeto Math. ........................................................................ 50 7.1.- Funciones Logarítmicas y exponenciales ................................................................. 50 7.2.- Raíces cuadradas ............................................................................................................ 51 7.3.- Potencias de números .................................................................................................. 51 7.4.- Funciones de acotación y redondeo ......................................................................... 51 7.5.- Números aleatorios ...................................................................................................... 52 7.6.- Funciones trigonométricas .......................................................................................... 53 7.7.- Funciones máximo y mínimo ...................................................................................... 54 7.8.- La función Signo ............................................................................................................. 54 7.9.- Constantes matemáticas definidas en Math ............................................................ 55 8.- La cláusula with .......................................................................................................................... 56
CAPÍTULO 4: ESTRUCTURAS DE CONTROL DE FLUJO ...............................59 1.- Condicionales: La estructura if-else ...................................................................................... 59 1.1.- Cortocircuito de expresiones condicionales .......................................................... 63 2.- Bucles determinados. La cláusula “for” ................................................................................ 66 2.1.- Anidamiento de bucles ................................................................................................. 68 2.2.- Bucles for-in para enumeraciones ............................................................................. 69 3.- Bucles indeterminados. Estructuras ‘while’ y ‘do -while’.................................................. 70 3.1.- Evitar los bucles infinitos.............................................................................................. 72 4.- Cómo salir a propósito de un bucle ..................................................................................... 74 5.- Evaluación de casos. Estructura ‘switch - case’.................................................................. 77
CAPÍTULO 5: MATRICES EN JAVASCRIPT ........................................................ 83 1.2.3.4.5.-
Definición de matrices ............................................................................................................. 84 Inicializando matrices ................................................................................................................ 89 Matrices con varias dimensiones ........................................................................................... 90 Matrices asociativas ................................................................................................................... 91 Métodos del objeto Array ....................................................................................................... 92 5.1.- Manipulación de elementos ......................................................................................... 92 5.2.- Ordenación, búsqueda y procesamiento ................................................................. 95
CAPÍTULO 6: MANEJO DE CADENAS DE TEXTO .........................................101 1.- Conceptos básicos sobre cadenas de texto ..................................................................... 101 1.1.- Codificación de caracteres: ASCII, UNICODE, UTF-16 ................................... 101 2.- Análisis de cadenas de texto................................................................................................. 104 3.- Filtrado de cadenas de texto ................................................................................................ 109 4.- Comparación de cadenas de texto ..................................................................................... 111 5.- Funciones para formato HTML ............................................................................................ 112 6.- ejemplo real: Conversión a números romanos ............................................................... 113
vi
Contenido vii
CAPÍTULO 7: FECHAS, HORAS Y TEMPORIZADORES ................................119 1.2.3.4.5.-
¿Qué hora es? ........................................................................................................................... 120 Las partes del tiempo: formatos propios .......................................................................... 123 Hora Universal Coordinada .................................................................................................. 126 Métodos de cambio de hora................................................................................................. 128 Temporizadores y cronómetros ......................................................................................... 129 5.1.- La precisión de los intervalos de tiempo ............................................................... 132 6.- Ejemplo: Un reloj dentro de una página web ................................................................... 134 7.- Ejemplo: Diferencias de tiempos. Cuenta atrás. .............................................................. 136
CAPÍTULO 8: PROGRAMACIÓN ORIENTADA A OBJETOS CON JAVASCRIPT.............................................................................................................141 1.- Conceptos básicos de POO ................................................................................................. 143 2.- Definiendo objetos en JavaScript ......................................................................................... 144 2.1.- Constructores .............................................................................................................. 147 2.2.- Determinando el tipo de un objeto ........................................................................ 149 2.3.- ¿Por qué la palabra clave this establece propiedades? ........................................ 150 2.4.- Controlando el valor de contexto con call y apply ............................................ 153 3.- Prototipos .................................................................................................................................. 154 3.1.- Búsqueda de miembros y cadena de prototipos ................................................. 157 4.- Herencia en JavaScript............................................................................................................ 160 4.1.- Robo de constructores .............................................................................................. 163 5.- Encapsulación en JavaScript ................................................................................................... 165 5.1.- Clausuras y la verdadera regla de ámbito de variables ...................................... 167 5.2.- Definición de variables privadas en JavaScript ...................................................... 169 5.3.- Verdaderas propiedades encapsuladas ................................................................... 170 6.- Inspeccionando los objetos: Reflexión ............................................................................... 174 7.- Funciones con número variable de argumentos .............................................................. 177
CAPÍTULO 9: MANIPULACIÓN DINÁMICA DE ELEMENTOS: EL BOM Y EL DOM ...........................................................................................................................181 1.- Orígenes del DOM ................................................................................................................. 181 1.1.- El BOM o DOM Level 0............................................................................................. 182 1.2.- Los DOMs intermedios y el DOM Level 1 ........................................................... 183 1.3.- Los DOM Level 2 y Level 3....................................................................................... 183 2.- Trabajo con el BOM o DOM Level 0................................................................................. 185 2.1.- El objeto window ......................................................................................................... 186 2.1.1.- Propiedades del objeto window ...................................................................... 187 2.1.2.- Acceso a marcos de ventanas ........................................................................... 189 2.1.3.- Métodos del objeto window ............................................................................. 190 2.1.4.- Generación de ventanas propias ...................................................................... 192 2.1.5.- Ventanas modales ................................................................................................ 194 2.2.- El objeto location......................................................................................................... 196 2.2.1.- Propiedades de location ..................................................................................... 196 2.2.2.- Métodos del objeto location............................................................................. 197
viii Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
2.3.- El objeto history ........................................................................................................... 198 2.4.- El objeto navigator....................................................................................................... 199 2.4.1.- Propiedades de navigator ................................................................................... 200 2.5.- El objeto screen ........................................................................................................... 201 2.6.- El objeto document en el BOM ............................................................................... 202 2.6.1.- Colecciones del objeto document en el BOM ............................................. 203 2.6.2.- Acceso a los elementos de formularios en el BOM ................................... 205 3.- Acceso y manipulación de elementos con el DOM........................................................ 207 3.1.- Los nodos del DOM ................................................................................................... 207 3.2.- Recorriendo la estructura jerárquica del DOM .................................................. 209 3.3.- Obtener referencias directas a elementos del DOM ......................................... 212 3.3.1.- Colecciones “vivas” y estáticas ........................................................................ 215 3.4.- Principales propiedades base de los nodos ........................................................... 216 3.5.- Atributos y propiedades específicas de los nodos .............................................. 219 3.6.- Modificación dinámica de la estructura del DOM ............................................... 221
CAPÍTULO 10: EVENTOS EN LAS PÁGINAS ...................................................225 1.- Un poco más de historia para ubicarnos ........................................................................... 226 2.- Gestores de eventos en el BOM ......................................................................................... 227 2.1.- Anular la acción por defecto en el BOM ............................................................... 230 2.2.- Subclasificación de eventos en el BOM: deshabilitar botón durante el envío de un formulario ..................................................................................................................... 230 3.- Eventos según DOM LEvel 2 ................................................................................................ 233 3.1.- ¿Dónde se captura de verdad un evento? ............................................................. 233 3.2.- Gestión de eventos según el DOM Level 2 .......................................................... 237 4.- Gestión de eventos con Internet Explorer 8- .................................................................. 239 5.- Un modelo de eventos unificado ......................................................................................... 241 6.- El objeto event ......................................................................................................................... 243 6.1.- El objeto event en el DOM ....................................................................................... 244 6.2.- El objeto event en Internet Explorer...................................................................... 246 6.3.- Un objeto event unificado ......................................................................................... 248 7.- eventos que podemos capturar en una página................................................................. 249 7.1.- Eventos de ciclo de vida de la página ...................................................................... 250 7.1.1.- Ejemplo: Detectando que la página está lista ................................................ 251 7.1.2.- Ejemplo: Detectando que se abandona la página ......................................... 253 7.2.- Eventos del ratón......................................................................................................... 256 7.2.1.- Ejemplo: cartel que persigue al ratón ............................................................. 258 7.2.2.- Ejemplo: anular el menú contextual selectivamente ................................... 260 7.2.3.- Ejemplo: detección del scroll de la página ..................................................... 260 7.2.4.- Ejemplo: desactivar un botón de radio........................................................... 261 7.3.- Eventos de teclado ...................................................................................................... 264 7.3.1.- Ejemplo: Permitir solamente valores numéricos ......................................... 267 7.3.2.- Ejemplo: Evitar pegar información ................................................................... 269 7.3.3.- Ejemplo: Control básico de un marcianito .................................................... 271 7.4.- Anexo: Control avanzado de un marcianito......................................................... 274 7.5.- Otros eventos .............................................................................................................. 275 viii
Contenido ix
7.5.1.- Eventos de formularios y controles de entrada ........................................... 275 7.5.2.- Eventos de mutación del DOM ........................................................................ 275 7.5.3.- Otros eventos sueltos ........................................................................................ 276
CAPÍTULO 11: FUNDAMENTOS DE AJAX .......................................................277 1.- Interfaces de usuario avanzadas ........................................................................................... 278 2.- El objeto XMLHttpRequest .................................................................................................. 280 3.- Uso práctico de XMLHttpRequest ..................................................................................... 282 3.1.- Envío de datos al servidor ......................................................................................... 285 4.- Problemas típicos de AJAX ................................................................................................... 286 4.1.- Llamadas fuera de dominio ........................................................................................ 286 4.2.- Gestión de errores y llamadas que no vuelven.................................................... 287 4.3.- Contenidos no actualizados debido a cachés ....................................................... 288 5.- Devolución de información: JSON ...................................................................................... 289 6.- JSONP: accediendo a datos en otros dominios............................................................... 292 6.1.- Una biblioteca propia para JSONP .......................................................................... 294 6.2.- Ejemplo: mostrar información de Twitter ............................................................ 296 7.- Control de acceso entre dominios: CORS ....................................................................... 300 7.1.- Funcionamiento básico de CORS ............................................................................ 301
CAPÍTULO 12: ERRORES COMUNES Y DEPURACIÓN DE APLICACIONES JAVASCRIPT.............................................................................................................303 1.- Errores típicos cometidos en JavaScript ............................................................................ 303 1.1.- Mayúsculas y minúsculas ............................................................................................ 305 1.2.- Variables de distinto ámbito o no declaradas ....................................................... 306 1.3.- Usar = en lugar de == al comparar ......................................................................... 307 1.4.- Olvidarse de cerrar llaves o paréntesis.................................................................. 307 1.5.- Cuanto “esto” no es lo que te esperas .................................................................. 308 1.6.- Tipos por referencia y cambios inesperados ........................................................ 308 2.- Gestión de excepciones......................................................................................................... 309 2.1.- Captura de errores a nivel de página ..................................................................... 313 3.- Herramientas de depuración ................................................................................................ 313 4.- Herramientas para desarrolladores de Chrome ............................................................. 315 4.1.- La sección de elementos de página ......................................................................... 317 4.2.- Recursos de la página.................................................................................................. 319 4.3.- Análisis de red .............................................................................................................. 320 4.4.- Análisis de scripts ........................................................................................................ 321 4.5.- La línea temporal.......................................................................................................... 323 4.6.- El “Profiler” ................................................................................................................... 327 4.7.- Auditoría de optimización de páginas ..................................................................... 327 4.8.- La consola de JavaScript ............................................................................................. 329 4.8.1.- Escribiendo a la consola desde código ........................................................... 332 4.8.2.- Mensajes de consola destacados ...................................................................... 334 4.8.3.- Agrupación de mensajes..................................................................................... 335 4.8.4.- Medición de tiempos y profiling ....................................................................... 336 5.- Depuración paso a paso......................................................................................................... 337
x Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
5.1.- Puntos de interrupción o breakpoints ................................................................... 344 5.1.1.- Puntos de interrupción condicionales ............................................................ 345 5.1.2.- Detenerse automáticamente en los errores................................................. 346 5.1.3.- Cambiar el flujo de ejecución ........................................................................... 347 5.1.4.- Otros tipos de puntos de interrupción.......................................................... 347
APÉNDICE A: EXPRESIONES REGULARES EN JAVASCRIPT ......................349 1.- Qué son las expresiones regulares ..................................................................................... 351 2.- El lenguaje de las expresiones regulares ............................................................................ 352 2.1.- Elementos de una expresión regular ...................................................................... 353 2.2.- Definición de expresiones regulares en el código............................................... 358 2.3.- Orden de precedencia ................................................................................................ 358 3.- Construcción y uso de expresiones regulares ................................................................. 359 3.1.- Ejemplo 1: validar una dirección de email ............................................................. 359 3.2.- Ejemplo 2: encontrar todas las coincidencias ....................................................... 364 4.- Expresiones regulares y cadenas de texto ........................................................................ 366 4.1.- Sustitución de cadenas................................................................................................ 367
Presentación ACERCA DEL LIBRO JavaScript es el pegamento de Internet. Nacido en 1.995 como un lenguaje casi de juguete para validar formularios web, se ha convertido en indispensable. En la actualidad todos y cada uno de los ordenadores, tablets y móviles del mundo incorporan al menos un intérprete de JavaScript. Además su influencia se ha incrementado para alcanzar todo tipo de ámbitos:
Código de servidor: Node.js, RingoJS, J axer, EJScript…
Inteligencia para aplicaciones: PDF, Open Office, Phot oshop…
Diversas plataformas de desarrollo: paquete javax.script en Java, JScript en .NET, QtScript en Qt, ActionScript en Flash…
Extensiones y plugins para todo tipo de productos: GMail, Google Docs, Chrome, Safari, Gadgets de Windows, Widgets de Mac…
Aplicaciones estilo “Metro” para Windows 8
Las API de miles de servicios Web como Twitter, Dropbox…
Etc…
Un programador actual simplemente no puede permitirse el lujo de no conocer JavaScript.
UN LENGUAJE INCOMPRENDIDO El hecho de ser un lenguaje interpretado y aparentemente sencillo provoca el rechazo inicial de muchos programadores, que lo subestiman. Sin embargo, la mayoría de éstos, aunque lo hayan denostado, no tiene más remedio que usarlo dada su penetración actual. Detrás de su aparente simplicidad se esconde un lenguaje de programación multi paradigma, ya que es funcional, imperativo, dinámico y orientado a objetos, todo a la vez, lo que lo hace tremendamente versátil.
xii
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
Lo cierto es que se trata en general de un lenguaje muy incomprendido. Mucha gente lo utiliza sin entender bien cómo funciona por debajo, en qué se fundamenta. Esto conduce en ocasiones a resultados poco satisfactorios, bugs, problemas e incluso pérdidas económicas. En los últimos años han proliferado multitud de bibliotecas como jQuery o ExtJS que facilitan enormemente el uso de JavaScript en páginas web. Si bien esto es estupendo, ahorra mucho trabajo y es recomendable usarlas, lo cierto es que ha provocado también un efecto secundario poco beneficioso: un nuevo tipo de programadores web que no saben JavaScript, sólo jQuery. Aplican recetas y plugins sacados de búsquedas de Google sin entender bien lo que están haciendo ni por qué. Es por ello que, si aparecen errores o bugs, esta falta de conocimiento de los fundamentos se convierte en un problema. Además, en desarrollo de páginas web, JavaScript es inseparable de los navegadores. Y no todos los navegadores son iguales ni se comportan del mismo modo al programarlos. A un gran porcentaje de los programadores web les resulta difícil discernir qué elementos de los que están usando para programar forman parte del navegador y cuáles de JavaScript. Las mencionadas bibliotecas que nos abstraen de esas complejidades no nos ayudan a saberlo. Más bien todo lo contrario. Es por ello que es más importante que nunca dominar los fundamentos del lenguaje y conocer las particularidades de los navegadores sobre los que se ejecuta.
¿QUÉ ESPERAR DE ESTA OBRA? El libro está dividido en dos partes claramente diferenciadas: 1. Fundamentos del lenguaje: lo que hay que saber sobre la sintaxis de JavaScript, sus tipos de datos, funciones, estructuras de control, manejo de fechas, cadenas y otros tipos de datos, etc… Resultará especialmente
interesante a los principiantes, aunque incluso algunos programadores experimentados podrán encontrar en esta parte cosas que no sabían. Abarca de los capítulos 1 al 7, lo que supone alrededor de un tercio de los contenidos del libro. 2. Programación del navegador: esta es la parte avanzada. Comienza con un repaso a fondo de la programación orientada a objetos con JavaScript (que sí, ¡se puede hacer correctamente!), para analizar las diferentes maneras de interaccionar con el navegador desde el lenguaje, las diferencias existentes entre ellos, la comunicación asíncrona con los servidores con AJAX o la depuración de aplicaciones entre otras muchas cosas. Encontrarás algunas explicaciones que no son fáciles de encontrar en otros libros de esta materia y te ayudará comprender los entresijos del lenguaje y los navegadores. Capítulos 8 al 13 y apéndice A. Así que el libro contiene algo para todo el mundo. Los programadores noveles podrán partir prácticamente de cero para conocer lo más básico del lenguaje, que también les servirá en gran medida para otros lenguajes que estudien en el futuro. Los
Presentación xiii
programadores experimentados encontrarán materias más avanzadas con explicaciones sobre cómo funcionan los navegadores, las clases, los eventos y demás elementos relacionados. Por ello este libro está orientado a todo tipo de profesionales de Internet:
Diseñadores web que no conocen JavaScript y desean iniciarse en el lenguaje. Programadores web que utilizan el lenguaje pero necesitan crear código más eficiente y profesional. Programadores de jQuery y otras bibliotecas similares que desean profundizar en el conocimiento del lenguaje que las sustenta, para entenderlas mejor, saber solucionar los problemas que les surjan y no depender tanto de ellas para cosas sencillas. Cualquier profesional que desee iniciarse en la programación y hacerlo con el lenguaje más popular del mundo.
Se espera que el lector sea un usuario habitual de Internet, conozca mínimamente como trabaja la Web, y disponga al menos de unas nociones básicas de HTML y CSS. Se ha usado un estilo de escritura directo y sencillo, tratando de evitar los tecnicismos, accesible a cualquiera. Puede utilizarse como guía de aprendizaje, leyendo los capítulos en orden, o bien como manual de referencia. No se trata este de un libro de recetas (aunque se ofrecen algunas), ni tampoco del tipo “Aprende JavaScript por las tardes, sin esfuerzo y mientras ves la tele”. El libro
ofrece un estudio sistemático del lenguaje por antonomasia de Internet, con aumento progresivo de dificultad hasta llegar a tener un nivel apreciable de dominio de JavaScript en los navegadores. Pero para ello el lector tendrá que poner de su parte también. La única forma de aprender a programar es programando así que deberás practicar por tu cuenta todo lo explicado, e inventarte ejemplos propios. Ver el código de las páginas web de otros también es muy útil: nada más fácil pues todas lo llevan a la vista, listo para ser analizado por cualquiera. Los ejemplos desarrollados a lo largo de los distintos capítulos son intencionadamente simples. En cada parte se construyen ejemplos pequeños orientados a entender el concepto explicado en cada caso. De esta forma no te despistarás de lo esencial y podrás asentar mejor los conocimientos. Hay algún código más elaborado, como por ejemplo el gestor universal de eventos, pero está totalmente explicado en el texto. Todos los ejemplos se pueden descargar desde la web de la editorial: www.krasispress.com. Busca el libro en el catálogo y podrás acceder a las descargas. He salpicado el texto de notas. Algunos capítulos la verdad es que tienen muchas :-) Se trata de comentarios adicionales relacionados con lo que se está explicando, que
xiv
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
aportarán información extra no esencial, curiosidades, consejos, etc… Espero que las
encuentres de interés. Ahí va la primera: Nota:
En mi blog técnico, www.jasoft.org, publico con cierta frecuencia posts sobre desarrollo web que pueden resultarte interesantes y que pueden complementar a este libro. Puedes seguir en Twitter a @campusMVP para obtener cada día enlaces a artículos interesantes, noticias y otros recursos para programadores. También en Facebook si lo prefieres: www.facebook.com/campusMVP. En www.campusmvp.com encontrarás multitud de cursos on-line tutelados por los mejores profesionales del sector. Échale un vistazo y anímate a prepararte con nosotros. Ponte en contacto con la editorial a través de su página web si quieres transmitirnos cualquier comentario o sugerencia. ¡Ah! Y personalmente te agradecería mucho que, si te gusta el libro y te ha ayudado, nos dejes un comentario en la ficha del mismo en la tienda on-line, para que otros visitantes puedan conocer las opiniones de los lectores. He puesto el máximo empeño en hacer el libro ameno, exhaustivo, fácil de comprender y exento de erratas. Espero haberlo conseguido y que te sirva para aprender y ser mejor en tu trabajo. ¡Comenzamos!
CAPÍTULO
Fechas, horas y temporizadores
Nada hay más importante que el tiempo. En el ajetreado y estresante mundo actual vale incluso más que el dinero para muchas personas. Este capítulo se centra en el manejo con JavaScript de este preciado bien inmaterial. Un calendario es un sistema para organizar el tiempo con objetivos sociales, religiosos o administrativos. A cada periodo se le otorga un nombre (día, semana, mes, año…), y el calendario sitúa el momento actual frente a una referencia pasada elegida
arbitrariamente (por ejemplo, en occidente, el momento en el que se considera que nació Jesucristo). La mayoría de los calendarios modernos se rigen por el ciclo que sigue la tierra al rodear al sol, por lo que se denominan calendarios solares. En la mayor parte del mundo el calendario que se utiliza es el calendario Gregoriano, solar. Éste debe su nombre al Papa Gregorio XIII y sustituyó en 1582 al calendario Juliano instaurado por Julio César en el año 46 a.C. En cuanto a la medida más inmediata del tiempo, la unidad utilizada en el sistema internacional es el segundo, con sus unidades derivadas: el minuto (60 segundos) y la hora (60 minutos o 3.600 segundos). Un día del calendario consta de 24 horas. Nota:
La definición oficial de 1 segundo es la duración de 9.192.631.770 oscilaciones de la radiación emitida en la transición entre los dos niveles hiperfinos del estado fundamental del isótopo 133 del átomo de cesio (133Cs), a una temperatura de 0 K.1 Por supuesto estas unidades de medida del tiempo las tenemos todos muy interiorizadas. Las conocemos y las utilizamos con naturalidad. Sin embargo un ordenador no lo tiene tan fácil. Una computadora no tiene conciencia del exterior y debe regirse por algún sistema interno que le marque el paso del tiempo. 119
120
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
Todos los ordenadores modernos incorporan un hardware especial que actúa de reloj interno y que está calibrado para medir la cantidad de tiempo que ha transcurrido desde una determinada fecha arbitraria denominada técnicamente “epoch”. Los sistemas operativos que corren por encima del hardware miden el tiempo en “ticks”
que son unidades arbitrarias trasladables a unidades de tiempo real en el sistema internacional. Cada sistema operativo define su propio valor para cada “tick”. Por ejemplo, en Windows cada milisegundo de tiempo real contiene 10.000 “ticks” del procesador ( http://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspx) o
lo que es lo mismo, cada tick representa un nanosegundo o una diezmillonésima de segundo. La precisión que ofrece, obviamente, es muy elevada. La fecha de referencia del sistema operativo es el 1 de enero del año 1 a media noche, y el sistema informa permanentemente del número de “ticks” transcurridos desde entonces (sin contar segundos intercalares: http://es.wikipedia.org/wiki/Segundo_intercalar). Otros sistemas operativos usan otras referencias. Por ejemplo Mac OS X usa como “epoch”
el 1 de enero de 1904, el primer año bisiesto del siglo XX, y Linux utiliza el 1 de Enero de 1970 que es el año elegido de manera arbitraria por los programadores del primer sistema UNIX. Asimismo, cada lenguaje de programación ofrece su propia resolución temporal - la cantidad mínima de tiempo que puede medir- y su propia “epoch” o fecha de referencia. Por ejemplo la plataforma .NET utiliza el mismo año que Windows, pero el lenguaje COBOL usa el 1/1/1601, SQL Server el 1/1/1753, y Cocoa (la plataforma de desarrollo de Apple) usa el 1/1/2001. En la variedad está el gusto :-) JavaScript utiliza como referencia temporal el 1 de Enero de 1970, como los sistemas UNIX, y la unidad más pequeña que puede medir es el milisegundo. Por todo lo que acabamos de ver los ordenadores internamente no trabajan con fechas, como nosotros, sino con números muy elevados que se relacionan con determinadas referencias arbitrarias. Y los lenguajes que utilizamos para construir programas usan otras referencias diferentes encima del sistema operativo, pero representan también las fechas con números larguísimos que carecen de sentido cuando los ve una persona. Como hemos comprobado, la gestión del tiempo en los sistemas digitales dista mucho de ser un problema simple. Por fortuna los sistemas operativos y lenguajes modernos nos abstraen de toda esta complejidad para facilitarnos el uso del tiempo en los programas que construimos. Como veremos enseguida, JavaScript nos ofrece las herramientas que necesitamos para trabajar con el tiempo sin tener que preocuparnos de nada de lo anterior, que sin embargo es interesante conocer y debería formar parte de la cultura general de todo programador.
1.- ¿QUÉ HORA ES? Esta es la más simple de las preguntas que nos podemos hacer al empezar a trabajar con el tiempo en un lenguaje de programación. JavaScript proporciona las funciones necesarias para determinar las características temporales del sistema desde donde accede cada usuario. Podemos averiguar la fecha
Fechas, horas y temporizadores
121
del año y felicitarles así la Navidad, la hora del día para poder desearles las buenas noches, la franja horaria en la que se encuentran, etc... Todas las funciones relacionadas con unidades temporales (fecha y hora) se ofrecen como métodos de la clase JavaScript llamada Date . Como hemos visto en la introducción, una variable que contenga una fecha (o sea, un objeto de tipo Date) contiene en realidad un valor numérico que expresa el número de milisegundos transcurridos desde el 1/1/1970 a las 00:00:00 horas. Las diferencias entre instantes temporales también se devuelven en milisegundos, de manera que si dos variables temporales se diferencian en 15.000 implica que están separadas sólo por 15 segundos. Un día tiene 86.400.000 milisegundos. De todos modos generalmente no tendremos que lidiar con estas medidas tan precisas y será suficiente con utilizar las unidades temporales más habituales para nosotros: días, meses, horas o minutos. Para obtener la fecha y hora actuales en una variable basta con definir una nueva instancia de Date, así: var hoy = new Date();
Ahora la variable “hoy” tendrá
un valor que representa la fecha y hora en el momento de ser creada. Cuando la intentemos mostrar por pantalla no se verá, sin embargo, el valor numérico del que hemos hablado (el número de milisegundos desde 1/1/1970) sino que se mostrará una cadena del estilo: Fri Aug 3 18:56:28 UTC+0200 2012 //Internet Explorer Fri Aug 03 2012 18:56:28 GMT+0200 (Romance Daylight Time) //Chrome
que como vemos dependerá del navegador que estemos utilizando. Las fechas se muestran así porque, como vimos en su momento, todos los objetos tienen un método especial llamado toString que es invocado automáticamente cuando se quieren representar por pantalla de modo textual. En el caso de los objetos de tipo Date se devuelve en una expresión más legible para un humano (aunque generalmente en inglés, luego veremos como poner todo en español) en lugar del número que alberga interiormente. Nota: La especificación para el método toString de una fecha en el estándar ECMAScript indica lo siguiente: “Este método devolverá un valor String . Sus
contenidos son dependientes de la implementación, pero su intención es que muestre la fecha en la zona horaria actual en una forma apropiada para ser leída por un humano”. Sin más. Por ello difiere lo que se muestra de una implementación de JavaScript a otra. Se puede leer completo en: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma262.pdf
122
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
Por fortuna JavaScript nos facilita un método alternativo toLocaleString que nos permite mostrar la fecha y hora usando la configuración del idioma actual del navegador (esto es, la del idioma seleccionado como preferido en el navegador del usuario, no la del sistema operativo, que no tienen porqué coincidir. var hoy = new Date(); alert(hoy.toLocaleString());
que devolvería en castellano, por ejemplo: viernes, 03 de agosto de 2012 18:56:28
Existen dos métodos complementarios al anterior, toLocaleDateString y toLocaleTimeString que devuelven respectivamente las partes correspondientes a la fecha y a la hora. Si en lugar de querer obtener la fecha y hora actuales deseamos guardar en una variable una fecha y hora arbitrarias elegidas por nosotros, deberemos especificarla entre los paréntesis al crear un nuevo objeto Date. Existen varios constructores diferentes de este estilo, a saber: var fecha = new Date("mes día, año horas:minutos:segundos") var fecha = new Date(año, mes, día, [horas, [minutos, [segundos, [milisegundos]]]])
así pues para definir una variable que guarde la fecha 23 de Mayo de 1972, a las 21:00 horas escribiremos una de estas dos expresiones equivalentes: var n = new Date(1972,4,23,21,0); var n = new Date("May 23, 1972 21:00");
Nótese que en el primer caso el mes se especifica como un número empezando a contar desde 0, por lo que el mes de Mayo, que es el quinto, se expresa como 4. Mucho cuidado con esto. En el segundo caso el mes se debe expresar por su nombre o abreviatura en i nglés, en este caso “May”. El año debe expresarse siempre con las cuatro cifras. En caso de facilitarse solamente dos se entenderá siempre que es un año del siglo XX, por lo que si escribimos: var n = new Date(72,4,23);
se entenderá que se trata del 23 de mayo de 1972. Esto es interesante resaltarlo ya que en otros lenguajes dependiendo del número de dos cifras que se pase se considerará que es un año perteneciente al siglo XX o al XXI. En JavaScript no ocurre esto y siempre se les supondrá el “19” delante. Existe una tercera variante del constructor de Date que nos permite pasarle como argumento un valor que representará el número de milisegundos desde el 1/1/1971. Raramente se utiliza.
Fechas, horas y temporizadores
123
El constructor de las fechas se adapta a las incongruencias que le facilitemos en el constructor, de modo que adapta a la posibilidad más apropiada en cada caso aquellas fechas incorrectas que le pasemos. Por ejemplo: var fecha = new Date(2012, 3, 31);
Intenta asignar el día 31 de abril de 2012. Pero abril sólo tiene 30 días, así que la fecha no es correcta. Sin embargo en lugar de obtener un error JavaScript cogerá la fecha más congruente con lo que le pasamos, que es el 1 de mayo (el día que sobra se lo suma a la fecha). Nota: Así que en realidad en JavaScript sí que podríamos aplicar sin problema lo del dicho: “Hasta el cuarenta de mayo no te quites el sayo”, ya que el 40 de
mayo existe y se transforma en el 9 de Junio ;-) Por ejemplo, especifiquemos una fecha como esta: var fecha = new Date(2012, 20, 10);
que literalmente sería el 10 del mes 21 de 2012 (recuerda que los meses cuentan desde el 0 así que el 20 es en realidad el 21). Como esto no tiene sentido, JavaScript se suma los meses sobrantes de modo similar a lo que acabamos de ver con los días,, con lo que realmente la fecha que hemos definido es el ¡10 de septiembre de 2013!. ¿Qué fecha sería esta entonces?: var fecha = new Date(2012, 20, 40);
Pues el 10 de octubre de 2013, ya que el 20 se refiere al mes 21 contando desde enero del año indicado (2012), o sea que es septiembre de 2013, y el 40 sube 10 días más ese día de septiembre (que tiene 30 días), hasta el 10 de octubre. Lo mismo pasa con los números negativos: var fecha = new Date(2012, 4, -10);
Esta fecha sería el 20 de abril de 2012.
2.- LAS PARTES DEL TIEMPO: FORMATOS PROPIOS Una vez que tenemos definida una variable que contiene un objeto “Date” sería
interesante poder acceder a sus diversas partes de manera directa, es decir, saber directamente el día de la semana en el que estamos, o sólo la hora, etc. Para ello la clase Date cuenta con una serie de métodos que pasamos a enumerar a continuación:
124
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
getTime : obtiene
solamente la parte correspondiente a la hora, rechazando la fecha. Devuelve el número de segundos transcurridos desde el 1/1/ 1970. Es útil para crear marcas de tiempo para ciertas aplicaciones especiales de comunicación con el servidor.
getDay :
getDate : obtiene el día del mes dentro de la fecha dada.
getM onth :
getYear :
nos dice el día de la semana en el que nos encontramos, empezando a contar en domingo, que sería un 0. De este modo el lunes sería el 1, el martes el 2 y así sucesivamente.
devuelve el número correspondiente al mes contenido en el objeto Date. Se comienza a contar en 0 que correspondería al mes de Enero. devuelve el año contenido en la variable de tipo fecha. Esta función tiene un comportamiento algo extraño puesto que para las fechas comprendidas entre 1900 y 2000 (ambos inclusive) devuelve sólo las dos últimas cifras del año (1985 sería 85) mientras que para el resto de las fechas devuelve el número completo. Hay que tenerlo en cuenta porque para cualquier fecha actual devolverá cuatro cifras, pero para una fecha del siglo pasado serán solamente dos.
getFullYear :
funciona igual que el anterior, pero en este caso el año se devuelve siempre con las cuatro cifras correspondientes. Debemos usarlo generalmente en sustitución de getYear .
getHours : permite
getM inutes : con
obtener el valor de la hora en una variable Date, sin incluir la fecha actual, ni los minutos ni los segundos. este método conseguimos averiguar los minutos de la hora
indicada.
getSeconds : permite
variable de hora.
obtener la parte correspondiente a los segundos en una
getM il li seconds : facilita
el número de milisegundos después del segundo actual que está especificado dentro de una variable de tipo Date. Es decir, aunque la hora actual se muestre redondeada a 19:22:37, internamente hay unos cuantos milisegundos de precisión más que podemos obtener, por lo que sería 19:22:37:849 (siendo 849 los milisegundos a mayores que devolverá esta función).
Dado que JavaScript no nos proporciona método alguno para poder devolver formatos personalizados, y lo máximo que facilita de manera directa es que devolvamos fechas largas en la lengua local, usaremos las funciones anteriores para devolver el formato que deseemos.
Fechas, horas y temporizadores
125
Por ejemplo, vamos a crear un formato especial que devuelve una fecha en un formato especial. En nuestro caso usaremos el ejemplo planteado al final del capítulo anterior (convertir un número en su expresión textual) para conseguir fechas de este tipo: Viernes, tres de Agosto de dos mil doce
con todas sus letras. El ejemplo lo tienes en el archivo Cod07_01.htm de las descargas del libro. Para conseguirlo, antes de nada, vamos a introducir una referencia a un archivo JavaScript con la función de conversión de número a texto vista en el capítulo anterior, así como sus constantes y métodos asociados: <script type="text/javascript" src="numeroATexto.js">
Esto hará que esté disponible en nuestra página (lo habitual es reunir en archivos .js las funciones reutilizables que tengamos para nuestras aplicaciones, agrupándolas por funcionalidad). Ahora vamos a definir un par de funciones auxiliares que nos resultarán de utilidad y que devolverán respectivamente el nombre del día de la semana y del día del mes utilizando los métodos que acabamos de estudiar: function getNombreDiaSemana(fecha) { var dias = ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"]; return dias[fecha.getDay()]; } function getNombreMes(fecha) { var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Noviembre", "Diciembre"]; return meses[fecha.getMonth()]; }
Como vemos simplemente devuelven el nombre apropiado desde una lista (contenida en un array) a partir de las funciones getDay y getMonth. Ahora, el resto del código es trivial: function formatoTextual(fecha) { return getNombreDiaSemana(fecha) + ", " + numeroATexto(fecha.getDate()) + " de " + getNombreMes(fecha) + " de " + numeroATexto(fecha.getFullYear()); } var hoy = new Date(); alert(formatoTextual(hoy)); //viernes, tres de Agosto de dos mil doce
En el archivo Cod07_02.htm se ofrece una versión alternativa y orientada a objetos de este código, que de hecho extiendo la clase Date para que disponga directamente de un método formatoTextual que nos permita simplemente escribir esto:
126
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
var fechaTexto = hoy.formatoTextual(); alert(fechatexto);
Nota: Todavía no hemos llegado a la parte de programación orientada a objetos
por lo que el código para lograrlo te será más difícil de entender, pero lo dejo para mostrar la forma más correcta de hacer este tipo de cosas. En un próximo capítulo quedará claro cómo funciona. Para terminar este apartado veamos un truco poco conocido de las fechas JavaScript. Si en el constructor de una fecha especificamos como día del mes un 0 (obviamente un valor no válido), JavaScript asigna a la fecha el último día de ese mismo mes. Es un comportamiento extraño pero muy útil ya que podemos aprovecharlo para averiguar el número de días que tiene un mes cualquiera de un año dado: function numDiasEnMes(mes, anio) { var comodin = new Date(anio, mes, 0); return comodin.getDate(); }
alert( numDiasEnMes(2, 2012) );
que en este caso devuelve 29 ya que el año 2012 fue bisiesto y por lo tanto el mes de febrero tuvo 29 días.
3.- HORA UNIVERSAL COORDINADA De acuerdo con las especificaciones ECMA-Script que normalizan el lenguaje, JavaScript dispone de funciones para el manejo de unidades temporales estándar, lo que se conoce como Universal Coordinated Time, UTC u Hora Universal Coordinada. Este baremo para medir la hora es más conocido por todo el mundo como GMT (o Greenwich Meridian Time, hora en el meridiano de Greenwich) y todos estamos acostumbrados a utilizarlo. Prácticamente todas las funciones vistas en el apartado anterior para obtener las partes de un objeto Date se han implementado también para horas universales. Sólo hay que añadir la palabra UTC después de “get” en sus nombr es. Así tenemos:
getUTCDay
getUTCDate
Fechas, horas y temporizadores
getUTCMonth
getUTCFullYear
getUTCHours
getUTCMinutes
getUTCSeconds
getUT CM il li seconds
127
Todos estos métodos tienen en cuenta la diferencia horaria del sistema en el que nos encontramos respecto al meridiano de Greenwich, de forma que es posible que un método “get” de hora local visto en el apartado anterior, y un método “get” de hora
UTC ofrezcan resultados completamente diferentes. Por ejemplo, la fecha: n = new Date(2013,0,1,0,15);
Correspondiente a los 15 primeros minutos del día de Año Nuevo del año 2013 en España (GMT+1), es realmente una hora menos en Greewich, por lo que esa fecha en hora local sería ya el 2013, pero en hora UTC sería todavía 2012. Las funciones toUTCString y toGMTString son equivalentes y devuelven las fechas expresadas en el meridiano de Greenwich. Así, el siguiente código: var fecha = new Date(2013,0,1,0,15); alert(fecha + "\n" + fecha.toUTCString());
Mostrará el resultado de la figura 1.
Figura 1.- Diferencia entre la hora local y la de Greenwich
La getTimezoneOffset se ocupa de decirnos los minutos de diferencia existentes entre la hora local y la GMT, y puede resultar muy útil cuando la diferencia horaria entre donde está el servidor y los usuarios es importante. Usando esta función podríamos escribir nosotros mismos todas las funciones UTC que acabamos de ver con suma facilidad. Para el caso de España esta función devuelve el número -60 o -120, ya que hay una hora de diferencia en invierno pero dos en verano
128
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
con el horario de ahorro energético. En realidad puede devolver casi cualquier valor pues existen países con diferencias horarias con GMT que no son horas completas. Por ejemplo Venezuela está en GMT-04:30 (o sea, cuatro horas y media por detrás), y Nepal está en GTM+05:45 (5 horas y tres cuartos por delante). JavaScript nos abstrae de todas estas dificultades y siempre devuelve la diferencia horaria correcta con código similar a este: Var fecha = Date(); alert(fecha.getTimezoneOffset());
4.- MÉTODOS DE CAMBIO DE HORA Al igual que podemos guardar en una variable fechas y sus partes a través de los métodos “get...” y “getUTC..”, es posible igualmente fijar a posteriori estos valores. La clase Date posee unos métodos “ set...” que están pensados para modificar el contenido
de las variables de este tipo para reflejar fechas y horas diferentes. Ninguno de estos métodos afecta a la hora o fecha reales del sistema, sólo a los valores almacenados en las variables que tratemos con ellos. Así podemos almacenar fechas arbitrarias en una variable de tipo temporal previamente definida. A continuación se detallan los mismos:
setDate : Permite
asignar un nuevo día del mes a la fecha contenida en una
variable.
setM onth : Asigna
un nuevo valor para el mes en la fecha contenida en la variable. Recuerda que los meses empiezan a contar desde 0 para enero.
setYear : Permite cambiar el valor del año en una fecha.- Si se usan sólo dos
dígitos como argumento se considerará un año dentro del rango 1900-2000.
setFullYear : idéntico
al método anterior pero se deben especificar siempre los cuatro dígitos del año. Este método permite especificar opcionalmente el mes y el día del mes como segundo y tercer parámetro respectivamente.
setTime : permite
asignar una nueva hora pasando como argumento el número de milisegundos transcurridos desde la medianoche del 1/1/1970. No se utiliza demasiado por razones obvias.
: fija setM il li Seconds
el número de milisegundos que pasan del segundo en la hora actual de una variable.
: permite setSeconds
fijar el número de segundos actuales en la variable. Opcionalmente se pueden especificar también los milisegundos como segundo parámetro.
Fechas, horas y temporizadores
129
setM in utes : fija
los minutos actuales en la hora contenida en una variable. Tiene como parámetros opcionales el número de segundos y el de milisegundos transcurridos.
: nos permite fijar la hora actual para una variable tipo “Date”. setHours
Tiene como tres parámetros opcionales los minutos, segundos y milisegundos. Del mismo modo que antes había funciones “get...” para horas locales y “getUTC...” para horas GMT, en el caso de los métodos “set..” ocurre igual y existen:
setUTCDate
setUT CM onth
setUTCFullYear
setUT CM il li Seconds
setUTCSeconds
setUTCM inu tes
setUTCHours
que funcionan de la misma manera pero refiriéndose sus parámetros a hora universal UTC y no a la hora local del sistema donde se ejecuten.
5.- TEMPORIZADORES Y CRONÓMETROS Además de medir el tiempo, algo verdaderamente útil en cualquier plataforma de desarrollo es tener la capacidad de ejecutar código a intervalos regulares de tiempo. Un programa en JavaScript, según todo lo que hemos visto hasta el momento, es una sucesión continua de líneas de código que se ejecutan una tras otra por orden para obtener un resultado. Sin embargo en la realidad no solo llega con ejecutar el código en el momento de cargar una página, sino que es necesario que éste se ejecute en el momento apropiado: ante algo concreto que ocurra en una página o al cabo de determinado tiempo. El primer caso se soluciona gracias a los eventos de HTML, que estudiaremos en un capítulo posterior y nos permitirán reaccionar ante diferentes situaciones que se den en una página (como pulsar un botón o pasar el cursor sobre un texto). La segunda situación se resuelve con el uso de temporizadores. Los temporizadores son objetos sin representación física que se encargan de ejecutar una determinada tarea al cabo de un cierto tiempo. La orden para poner en marcha un temporizador es:
130
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
tempID = setTimeout(“Rutina”, Tiempo);
donde “Rutina” es el nombre (debe ir entre comillas) de un procedimiento o función que el temporizador se encargará de ejecutar; y “Tiempo” es un valor expresado en
milésimas de segundo que indica cuánto tiempo tardará éste en ejecutar la rutina especificada. Al fijar un temporizador con setTimeout se puede anotar el valor devuelto en una variable. Este valor es un número que identifica de manera única al temporizador recién definido. El interés de este identificador reside únicamente en usarlo con el método complementario clearTimeout que lo toma como argumento para anular el temporizador relacionado. Según esto, si por ejemplo se dispone en el Script de una función llamada “ miFunción” y se quiere activar ésta al cabo de dos segundos habría que escribir: var miId = setTimeout(“miFunción()”, 2000);
En caso de que, por cualquier motivo, sea necesario detener este temporizador antes de que llegue a actuar y ejecute la función, haremos: clearTimeout(miId);
En lugar del nombre de una función podríamos pasarle también una cadena de texto con el código a ejecutar: setTimeout(“alert(‘Hola’)”, 2000);
Sin embargo esto es considerado una mala práctica y solamente se soporta por compatibilidad con versiones antiguas del lenguaje. En la actualidad raramente lo verás en ningún sitio ya que, entre otras cosas, puede interferir con los procesos de minimización de código que se llevan a cabo para mejorar el rendimiento de descarga de las páginas. Nota:
El proceso de minimización de código JavaScript consiste en retirar de un archivo de código todo lo superfluo para que ocupe el menor espacio posible. Se retiran comentarios, retornos de carro, tabulaciones, espacios… pero también se
puede refactorizar e incluso reducir el nombre de las variables para que ocupen menos. Se pueden conseguir reducciones de tamaño espectaculares, haciendo que el código se descargue antes, y ahorrando ancho de banda. En ocasiones el proceso va unido a otro denominado Ofuscación, que básicamente trata de hacer el código menos legible y difícil de seguir para un humano, dificultando que se copie o se “cacharree” con él.
Muchas veces el proceso de minimizado se acompaña de otro denominado “bundling”, que consiste en combinar varios archivos de código .js en uno solo
para reducir también el número de peticiones que una página debe realizar al servidor, lo que también ahorra tiempo y ancho de banda. Estos procesos los llevan a cabo ciertos programas especializados de manera
Fechas, horas y temporizadores
131
automática. Los más conocidos son JSCompress ( http://jscompress.com), JSMin de Douglas Crockford ( http://www.crockford.com/javascript/jsmin.html), YUI Compressor de Yahoo (http://refresh-sf.com/yui/) o el AJAX MInifier de Microsoft (http://ajaxmin.codeplex.com/). Todos son gratuitos. También es posible pasarle directamente una función anónima definida como primer parámetro, así: setTimeout( function(){alert(‘Hola’);}, 2000);
Pero tampoco se utiliza a menudo, prefiriéndose por claridad la primera de las variedades de uso. Si necesitamos ejecutar la función repetidamente, a intervalos regulares de tiempo, es posible llamar repetidas veces al temporizador de nuevo con el método que acabamos de estudiar o, mucho mejor, se puede usar el método setI nterval . Éste es exactamente igual al anterior en cuanto a parámetros y forma de uso, pero la llamada se repite continuamente cada intervalo de tiempo especificado, hasta que lo detengamos con una llamada a su función complementaria clearI nterval . Por ejemplo: id = setInterval(“Mifuncion()”, 2000);
O bien: id = setInterval(Mifuncion, 2000);
llamará continuamente a la función indicada cada dos segundos. Sólo dejará de invocarla cuando llamemos a clearInterval pasándole como parámetro el identificador devuelto al crear el temporizador (guardado en la variable “id” en la línea anterior). Nota:
Tanto a setTimeout como a SetInterval se les pueden pasar como parámetros opcionales los argumentos que necesite la función que vamos a ejecutar. Tantos como sea necesario: setTimeout(Mifuncion, 2000, parametro1, parametro2…);
Esto funciona en todos los navegadores del mercado a excepción de en Internet Explorer, por lo que no es muy recomendable. Si necesitas pasar parámetros a la llamada a la función es mejor que la envuelvas en otra función auxiliar sin parámetros y que llames a ésta.
132
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
Nota: Hay que tener en cuenta que estos cuatro métodos de temporizadores no forman parte en realidad del lenguaje JavaScript sino que son métodos proporcionados por los navegadores web (a través de su objeto intrínseco window,
que ya estudiaremos) y que pueden ser utilizados desde nuestro código JavaScript embebido en una página web. Si queremos usar el código descrito fuera de un navegador no funcionará. Sin embargo otros lenguajes basados en JavaScript suelen incluir su propia implementación nativa para facilitar la compatibilidad. Por ejemplo Node.js ofrece las cuatro funciones, que funcionan del modo descrito en este capítulo.
5.1.- La precisión de los intervalos de tiempo El tiempo del intervalo para un temporizador puede ser cualquier valor. Sin embargo, si nos pasamos poniéndolo demasiado pequeño, veremos que pueden ocurrir cosas malas. Aparte de poder llegar a bloquear la ejecución del navegador, a partir de determinado valor que varía de un navegador a otro (entre los 15 y los 25 milisegundos), el temporizador no tiene resolución suficiente y entonces da igual lo que bajemos el tiempo puesto que no habrá diferencia. En cualquier caso debemos evitar los procesos periódicos lanzados con intervalos muy pequeños. Todo lo que sea inferior a 100 milisegundos no parece muy recomendable salvo en casos muy puntuales, así que deberíamos mantenernos por encima de esa zona de confort. En el epígrafe anterior afirmé que setInterval llamaba a una función cada “x” milisegundos, especificados como segundo parámetro. Sin embargo esto no es exactamente así, y en ocasiones puede tener importancia esta distinción. JavaScript solamente posee un hilo de ejecución, por lo que todas las funciones se ejecutan dentro de éste (dejando de lado la salvedad de la API de Web Workers de HTML, un tema avanzado). Esto significa no se pueden ejecutar dos scripts al mismo tiempo en una página. El método setTimeOut y setInterval ayudan a emular la ejecución en paralelo de código, ya que podemos lanzar procesos al cabo de cierto tiempo o periódicamente, que parecen ejecutarse en otro hilo. Pero es solo una ilusión. En realidad, tanto los intervalos de estos temporizadores como cualquier otro evento asíncrono que se provoque (a través de la interfaz, por ejemplo), se encolan para su ejecución para cuando el motor de JavaScript (mono-hilo, recordémoslo) esté disponible. Veamos que pasa cuando ejecutamos una función cada cierto tiempo corto. Imaginemos una función relativamente larga de ejecutar (que tarde sobre 70 ms) ejecutada cada 100 ms:
Fechas, horas y temporizadores
133
Figura 2.- Ejecución de una función larga a intervalos cortos
Esto no deja de ser una simplificación ya que hay otros posibles eventos ejecutándose en el tiempo del proceso de JavaScript (eventos de la interfaz de usuario u otros temporizadores), pero no sirve para explicar el fenómeno. En este caso como la función tarda menos tiempo que el intervalo en ejecutarse dará tiempo a lanzarla con el periodo que hemos indicado en setInterval . Lo que JavaScript hace es introducir en una cola de ejecución los eventos asíncronos que debe ejecutar, y los ejecuta en el momento en el que puede hacerlo. En el ejemplo de la figura la función se encola cada 100 ms y como tras cada ejecución aún sobra tiempo, al ir a ejecutarla nuevamente no hay nada pendiente en la cola y la ejecuta inmediatamente. Este sería el comportamiento normal deseable. Imaginemos ahora un proceso que tarda más en ejecutarse que el intervalo de repetición que hemos especificado (se puede simular mostrando desde el evento periódico un diálogo bloqueante mediante alert – que bloquea la ejecución hasta que lo aceptamos- y tardando más tiempo del indicado en aceptarlo). Lo que ocurre lo vemos reflejado en la siguiente figura:
Figura 3.- Tareas repetitivas muy largas
En este caso la primera vez que se ejecuta función se tarda más tiempo del especificado en el intervalo en terminarla. Mientras tanto el código JavaScript está detenido. Al pasar los siguientes 100 ms (el intervalo de repetición) JavaScript no puede ejecutar la función puesto que está en un bloqueo así que lo que hace es introducirla en la cola de ejecución de eventos asíncronos, a la espera de un momento libre para ejecutarla. Al acabo de otros 100 ms se debería introducir en la cola otra
134
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
repetición de la tarea, pero en realidad se descarta pues sólo puede haber una de cada tipo. Finalmente al cabo de 335 milisegundos, se termina la primera ejecución y se lanza inmediatamente la que está en la cola (que es la segunda todavía). Con lo cual el intervalo, que era de 100 ms, se ha convertido en este caso en un intervalo mucho más largo. Conclusión: en condiciones extremas los intervalos no son fiables, con posibles grandes variaciones, por lo que no podemos contar siempre con que nuestra función se ejecutará todas las veces que pensábamos. Esto puede tener importancia en ciertos tipos de aplicaciones y debemos tenerlo en cuenta. Si realmente es importante para nosotros que una tarea se repita en un intervalo de tiempo preciso tras cada ejecución (es decir, que se ejecute “x” milisegundos después de haber terminado la primera ejecución, ojo) lo que tenemos que hacer es emplear un temporizador simple con setTimeOut y relanzarlo desde la propia función al final de su ejecución: function periodica() { //Hacemos lo que sea que puede tardar setTimeOut(periodica, 100); }
Es decir, iniciamos otro nuevo intervalo al terminar la ejecución del anterior. OJO: con esto no conseguimos repeticiones cada cierto tiempo, sino que la función se repita con un periodo de tiempo predecible entre cada ejecución, que no es lo mismo como ilustra la siguiente figura.
Figura 4.- Ejecución constante al terminar la función
6.- EJEMPLO: UN RELOJ DENTRO DE UNA PÁGINA WEB Con ayuda de los temporizadores y nuestros conocimientos del lenguaje y del manejo de fechas y cadenas de texto vamos a construir un pequeño reloj digital como el que se ve en la figura. Éste marcará dentro de una página web la hora con todos los dígitos. Esto quiere decir que rellenaremos con ceros si es necesario cada parte de la hora para que aparezca “05” en lugar de sólo “5”.
Fechas, horas y temporizadores
135
Figura 5.- Un reloj digital en una página Web
El código necesario (Cod07_04.htm) es el siguiente: Reloj Digital <script type="text/javascript"> function mostrarHora() { //Asigno la fecha y hora actual var h = new Date(); //Muestro la fecha actual en su zona document.getElementById("fecha").textContent = h.toLocaleDateString(); //Descompongo el tiempo en sus partes var horas = h.getHours().toString(); if (horas.length == 1) horas = "0" + horas; var mins = h.getMinutes().toString(); if (mins.length == 1) mins = "0" + mins; var segs = h.getSeconds().toString(); if (segs.length == 1) segs = "0" + segs; document.getElementById("reloj").textContent = horas + ":" + mins + ":" + segs; setTimeout("mostrarHora()", 1000); }
136
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
En este código hay un par de cosas que necesitamos y que todavía no hemos estudiado, pero son sencillas: el evento onload de una página, que ejecuta un código cuando ésta ha terminado de cargar, y el método getElementbyId , que permite localizar elementos dentro de la página. Obviemos por el momento esto (lo vamos a ver en un próximo capítulo con detalle). El código que queda para crear el reloj es realmente sencillo y fácil de seguir con lo que sabemos hasta ahora.
7.- EJEMPLO: DIFERENCIAS DE TIEMPOS. CUENTA ATRÁS. Para terminar este capítulo vamos a hacer un ejemplo un poco más complicado, pero sencillo de todos modos. Nos servirá para ver algunos detalles más sobre cómo trabajar con el tiempo y los temporizadores. Se trata de crear un cronómetro de cuenta regresiva, que mostrará en pantalla el tiempo que queda para que pase un determinado periodo de tiempo. Puede ser útil, por ejemplo, para informar en pantalla a los alumnos de una prueba de evaluación sobre cuánto tiempo les queda para terminar (ver figura 6).
Figura 6.- Nuestro cronómetro de cuenta regresiva
Para programar algo así, lo primero es colocar la interfaz de usuario en la página:
Fechas, horas y temporizadores
137
Cuenta regresiva
00:00
Hemos definido un
que contiene a los demás elementos. Dentro de éste hay otro
que servirá para mostrar la cuenta atrás y debajo de éste un control de selección con unos determinados rangos de tiempo que podemos seleccionar, seguido de un botón que servirá para iniciar y detener el contador. En la cabecera se ha referenciado una hoja de estilos que le dará un aspecto agradable a todo el conjunto. En el evento onclick del botón se llama a la función “comenzarParar” que será la encargada de poner en marcha el cronómetro o detenerlo si ya estaba funcionando. Veamos el aspecto que tiene: var dObjetivo = null; var divreloj = null; var idTimer = 0; function comenzarParar() { if (idTimer != 0) { //parar clearInterval(idTimer); idTimer = 0; document.getElementById("botonCrono").value = "Iniciar"; pintarTiempo(0, 0); } else { //arrancar var tDescuento = parseInt(document.getElementById("tiempo").value, 10); dObjetivo = new Date(); //hora actual como referencia dObjetivo.setMinutes(dObjetivo.getMinutes() + tDescuento); document.getElementById("botonCrono").value = "Parar"; pintarTiempo(tDescuento, 0); idTimer = setInterval(tick, 900); } }
138
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
Primero se definen tres variables globales que es necesario compartir entre varias funciones que vamos a crear. Acto seguido se define la función comezarParar . Dado que ésta va a tener un doble propósito se hace divide su lógica entre dos ramas de un condicional. Vamos a fijarnos antes de nada en la rama de “arrancar” que es la delelse. Lo que se hace es guardar en una variable local auxiliar ( tDescuento) el tiempo seleccionado por el usuario en la lista desplegable, convirtiéndolo en un número entero antes, con parseInt . Este es un tiempo en minutos. A continuación se averigua la fecha y hora actuales, guardándolas de momento en la variable global dObjetivo que contendrá la fecha y hora destino en la que la cuenta regresiva deberá detenerse. Como debemos contar (más bien descontar) el número de minutos elegido por el usuario, la fecha objetivo será igual a la actual más esos minutos elegidos por el usuario. Para poder sumar esos minutos a la hora actual hacemos uso del método setMinutes, para lo cual le sumamos a los minutos actuales ( getMinutes) el tiempo que queremos descontar. Por ejemplo, si ahora son las 20:00:00 y queremos contar 5 minutos, le sumamos esos 5 minutos a la parte de minutos de la hora actual. Así, para saber el tiempo que ha transcurrido sólo debemos restar de esa hora “objetivo” la hora
actual. A las 20:05:00 sabremos que el contador ha terminado y debemos detenerlo. Nota:
No debemos preocuparnos de si lo que sumamos con setMinutes sobrepasa los 60 minutos, ya que como hemos visto la clase Date es suficientemente inteligente para adaptarse. Así que si son las 20:55 y le sumamos 10 minutos a los minutos (es decir, le diríamos que queremos las 20:65) la hora resultante son las 21:05 ya que se recalcula todo automáticamente. Es importante hacer estas sumas y restas con la fecha completa (como de hecho lo estamos haciendo) porque podemos comenzar la cuenta cerca de las 00:00 de la noche y si sólo consideráramos la hora nos conduciría a errores. Ahora que ya sabemos la hora objetivo lo único que hacemos es cambiar el texto del botón para que ponga “Parar”, pintamos el tiempo inicial (con una función pintarTiempo que no es interesante para el propósito de este ejemplo) y lanzamos un temporizador que llamará cada 900 ms a una función llamada tick .
Fíjate en que se almacena el identificador del temporizador en la variable global idTimer . Con este identificador global conseguimos dos cosas: poder parar el temporizador cuando queramos, y averiguar si está actualmente en marcha o no (es la condición del if con el que comienza la función). Si está parado se hace lo que acabamos de ver, y si está en marcha se detiene con una llamada a clearTimer , dejando el resto de elementos comoestaban. La función tick tiene el siguiente aspecto:
Fechas, horas y temporizadores
139
function tick() { var dif = (dObjetivo - new Date()) / 1000; if (dif > 0) { var minutos = Math.floor(dif / 60); var segundos = Math.floor(dif % 60); pintarTiempo(minutos, segundos); } else { comenzarParar(); } }
Esta función lo que hace es averiguar la diferencia que existe entre la hora objetivo calculada en la función anterior y la hora actual. En JavaScript cuando se restan dos fechas se obtiene la diferencia entre éstas en milisegundos. Así que si la dividimos entre 1000 tenemos la diferencia entre ambas en segundos, que es lo que nos interesa para pintar el contador regresivo. Nota:
Hay que tener mucho cuidado con las operaciones que se realizan con fechas. Si restamos dos fechas obtenemos su diferencia como era de esperar. Sin embargo si se suman dos fechas ( fecha1 + fecha2) lo que conseguimos es transformarlas a cada una de ellas en cadenas de texto y que éstas se concatenen, que no es generalmente lo que querremos. Sumar dos fechas no tiene sentido matemáticamente, mientras que restarlas sí. Si lo que queremos es sumar un determinado intervalo a una fecha (por ejemplo 5 minutos, 9 horas o 3 meses) debemos proceder como se ha visto hace un momento, es decir, utilizar la función setXXXX correspondiente sumándole ahí la cantidad que necesitemos. Es un muy importante tener en cuenta esto. Bien, una vez que ya sabemos la diferencia en segundos que existe entre la fecha y hora actual y la objetivo, si ésta es menor que cero es que ya la hemos sobrepasado y por lo tanto debemos parar el contador, para lo cual llamamos a comenzarParar (raa else del condicional). Si todavía estamos en el intervalo lo único que tenemos que hacer es ver cuántos minutos y segundos faltan:
Minutos: dividimos la diferencia en segundos entre 60 (hay 60 segundos en un minuto) y nos quedamos con la parte entera. Segundos: nos quedaremos con el resto de la división anterior (operador %), que son los segundos que sobran del último minuto.
Una vez hechas estas divisiones, pintamos esos minutos y segundos. ¡Listo! El ejemplo es sencillo pero nos ha ayudado a ver cómo se trabaja con diferencias entre fechas, que no es tan obvio como podría parecer a priori. En el correspondiente archivo descargable (Cod07_05.htm) está el código completo con comentarios para su estudio. Tiene algunas otras cosas interesantes, como por ejemplo el uso de “media
140
Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web
queries” de CSS3 para adaptar automáticamente y en tiempo real el tamaño del contador al tamaño de la pantalla que lo muestra.
