107510173 Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press

7/29/2019 107510173 Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press

1/40


2/40


3/40


4/40

Fundamentos de

JavaScript y AJAXpara desarrolladores y diseadores web

Jos Manuel Alarcn Agun


5/40

FUNDAMENTOS DE JAVASCRIPT Y AJAX PARA DESARROLLADORES YDISEADORES WEB

No est permitida la reproduccin total o parcial de este libro, ni su tratamiento informtico, ni latransmisin de ninguna forma o por cualquier medio, ya sea electrnico, mecnico, por fotocopia,por registro u otros mtodos, sin el permiso previo y por escrito de los titulares del Copyright.Dirjase a CEDRO (Centro Espaol de Derechos Reprogrficos, www.cedro.org) si necesitafotocopiar o escanear algn fragmento de esta obra.

DERECHOS RESERVADOS 2012, respecto a la primera edicin en espaol, por

Krasis Consulting, S. L.www.Krasis.com

ISBN: 978-84-939659-3-8

CREATIVIDAD:

Diseo cubierta: Pablo Iglesias Francisco

Fruta cubierta: Rambutn.El rambutn o nefelio es un fruto originario de Malasia, comn en la isla de Java, que pertenece a la mismafamilia que el lichi, las Sapindceas, formada por ms de 1.000 especies de rboles y arbustos distribuidos porregiones clidas de todo el mundo. De hecho, por su aspecto se le conoce tambin como "Lichi peludo". Setrata de una fruta dulzona, muy agradable al paladar y de consistencia similar a la de las uvas. Tambin se leconoce en Centroamrica como "mamn chino".
http://www.cedro.org/http://www.cedro.org/http://www.krasis.com/http://www.krasis.com/http://www.cedro.org/


6/40

Agradecimientos

Escribir un libro es una tarea muy dura. Hasta que uno lo intenta por primera vez nose da cuenta de cunto. Se necesita invertir muchsimas horas de trabajo que entrminos econmicos es casi imposible que salgan rentables (al menos en el caso unlibro tcnico). Por ello, la principal razn para escribir un libro tcnico suele sersiempre el frikismo, el amor por la tecnologa y por la divulgacin, sobre todo si noes el primero (como es mi caso).

Es complicado, por tanto, justificar en el trabajo las horas invertidas, por lo que casitodos los autores tcnicos que conozco utilizamos nuestras horas libres para escribir.Eso significa fines de semana de jornadas maratonianas, horas por la noche despus deltrabajo y casi siempre sacrificar las vacaciones.

Este libro lo escrib durante el verano de 2012. Bsicamente no tuve vacaciones ydej de lado en bastantes ocasiones a amigos, familia y especialmente a mi mujer.

As que quiero, como siempre, agradecerle a Eva su compresin, su pacienciaconmigo (engaada no vino, eso es verdad!), su amor, su amistad, su apoyo yasistencia sin los cuales ni esto, ni la empresa ni muchas otras cosas seran posibles, ypor supuesto quiero dedicarle el libro con gran

( )

-1.2 X, Y, Z 1.2

http://bit.ly/SqOPQ0
http://bit.ly/SqOPQ0http://bit.ly/SqOPQ0http://bit.ly/SqOPQ0


7/40

Contenido

AGRADECIMIENTOS ............................................................................................... IIICONTENIDO .............................................................................................................. VPRESENTACIN ...................................................................................................... XICAPTULO 1: INTRODUCCIN AL LENGUAJE JAVASCRIPT ........................ 1

1.- Versiones de JavaScript y la problemtica de la compatibilidad .......................................1 2.- Editores de JavaScript para la Web ..........................................................................................3

2.1.- Microsoft Visual Studio Express Edition .................................................................... 32.2.- Aptana Studio ................................................................................................................... 42.3.-JetBrains WebStorm ....................................................................................................... 52.4.-JS Fiddle .............................................................................................................................. 62.5.- Maquetta ............................................................................................................................ 7

3.- La etiqueta .....................................................................................................................83.1.- El atributo type ............................................................................................................... 103.2.- Inclusin de archivos externos ................................................................................... 11

4.- Comentarios en el cdigo ....................................................................................................... 125.- Y si el navegador no soporta JavaScript? ........................................................................... 13

CAPTULO 2: TIPOS DE DATOS, VARIABLES Y FUNCIONES BSICAS ... 151.- Declaracin de variables .......................................................................................................... 152.- Tipos de datos ............................................................................................................................ 17

2.1.- El tipo String o Cadena................................................................................................. 182.2.- Tipos numricos............................................................................................................. 202.3.- Variables Booleanas o indicadores ............................................................................ 222.4.- Variables Nulas ............................................................................................................... 23

3.- Conversin entre tipos de datos........................................................................................... 243.1.- Conversin implcita de tipos ..................................................................................... 243.2.- Conversin explcita de tipos ..................................................................................... 25

4.- Definicin bsica de funciones ............................................................................................... 285.-

mbito de las variables ............................................................................................................ 30

6.- Notacin de variables y funciones ........................................................................................ 33

CAPTULO 3: OPERADORES DE JAVASCRIPT ................................................. 371.- Operadores de JavaScript ........................................................................................................ 372.- Precedencia de operadores .................................................................................................... 383.- Incrementos y Decrementos .................................................................................................. 404.- Operadores lgicos................................................................................................................... 415.- Operadores bit a bit ................................................................................................................. 43


8/40

vi Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

vi

5.1.- La representacin de los nmeros ............................................................................ 445.2.- Los operadores de desplazamiento de bits ............................................................. 48

6.- Operadores de asignacin ....................................................................................................... 497.- Operaciones matemticas. El objeto Math. ........................................................................ 50

7.1.- Funciones Logartmicas y exponenciales ................................................................. 507.2.- Races cuadradas ............................................................................................................ 517.3.- Potencias de nmeros .................................................................................................. 517.4.- Funciones de acotacin y redondeo ......................................................................... 517.5.- Nmeros aleatorios ...................................................................................................... 527.6.- Funciones trigonomtricas .......................................................................................... 537.7.- Funciones mximo y mnimo ...................................................................................... 547.8.- La funcin Signo ............................................................................................................. 547.9.- Constantes matemticas definidas en Math ............................................................ 55

8.- La clusula with .......................................................................................................................... 56CAPTULO 4: ESTRUCTURAS DE CONTROL DE FLUJO ............................... 59

1.- Condicionales: La estructura if-else ...................................................................................... 591.1.- Cortocircuito de expresiones condicionales .......................................................... 63

2.- Bucles determinados. La clusula for................................................................................ 662.1.- Anidamiento de bucles ................................................................................................. 682.2.- Bucles for-in para enumeraciones ............................................................................. 69

3.- Bucles indeterminados. Estructuras while y do-while.................................................. 703.1.- Evitar los bucles infinitos.............................................................................................. 72

4.- Cmo salir a propsito de un bucle ..................................................................................... 745.- Evaluacin de casos. Estructura switch - case.................................................................. 77

CAPTULO 5: MATRICES EN JAVASCRIPT ........................................................ 83

1.- Definicin de matrices ............................................................................................................. 842.- Inicializando matrices ................................................................................................................ 893.- Matrices con varias dimensiones ........................................................................................... 904.- Matrices asociativas ................................................................................................................... 915.- Mtodos del objeto Array ....................................................................................................... 92

5.1.- Manipulacin de elementos ......................................................................................... 925.2.- Ordenacin, bsqueda y procesamiento ................................................................. 95

CAPTULO 6: MANEJO DE CADENAS DE TEXTO .........................................1011.- Conceptos bsicos sobre cadenas de texto ..................................................................... 1011.1.- Codificacin de caracteres: ASCII, UNICODE, UTF-16 ................................... 1012.- Anlisis de cadenas de texto................................................................................................. 1043.- Filtrado de cadenas de texto ................................................................................................ 1094.- Comparacin de cadenas de texto ..................................................................................... 1115.- Funciones para formato HTML ............................................................................................ 1126.- ejemplo real: Conversin a nmeros romanos ............................................................... 113


9/40

Contenido vii

CAPTULO 7: FECHAS, HORAS Y TEMPORIZADORES ................................1191.- Qu hora es? ........................................................................................................................... 1202.- Las partes del tiempo: formatos propios .......................................................................... 1233.- Hora Universal Coordinada .................................................................................................. 1264.- Mtodos de cambio de hora ................................................................................................. 1285.- Temporizadores y cronmetros ......................................................................................... 129

5.1.- La precisin de los intervalos de tiempo ............................................................... 1326.- Ejemplo: Un reloj dentro de una pgina web ................................................................... 1347.- Ejemplo: Diferencias de tiempos. Cuenta atrs. .............................................................. 136

CAPTULO 8: PROGRAMACIN ORIENTADA A OBJETOS CONJAVASCRIPT .............................................................................................................141

1.- Conceptos bsicos de POO ................................................................................................. 1432.- Definiendo objetos en JavaScript ......................................................................................... 144

2.1.- Constructores .............................................................................................................. 1472.2.- Determinando el tipo de un objeto ........................................................................ 1492.3.- Por qu la palabra clave this establece propiedades? ........................................ 1502.4.- Controlando el valor de contexto con call y apply ............................................ 153

3.- Prototipos .................................................................................................................................. 1543.1.- Bsqueda de miembros y cadena de prototipos ................................................. 157

4.- Herencia en JavaScript............................................................................................................ 1604.1.- Robo de constructores .............................................................................................. 163

5.- Encapsulacin en JavaScript ................................................................................................... 1655.1.- Clausuras y la verdadera regla de mbito de variables ...................................... 1675.2.- Definicin de variables privadas en JavaScript ...................................................... 1695.3.-

Verdaderas propiedades encapsuladas ................................................................... 170

6.- Inspeccionando los objetos: Reflexin ............................................................................... 1747.- Funciones con nmero variable de argumentos .............................................................. 177

CAPTULO 9: MANIPULACIN DINMICA DE ELEMENTOS: EL BOM Y ELDOM ...........................................................................................................................181

1.- Orgenes del DOM ................................................................................................................. 1811.1.- El BOM o DOM Level 0............................................................................................. 1821.2.- Los DOMs intermedios y el DOM Level 1 ........................................................... 1831.3.- Los DOM Level 2 y Level 3....................................................................................... 183

2.- Trabajo con el BOM o DOM Level 0................................................................................. 1852.1.- El objeto window ......................................................................................................... 1862.1.1.- Propiedades del objeto window ...................................................................... 187

2.1.2.- Acceso a marcos de ventanas ........................................................................... 1892.1.3.- Mtodos del objeto window ............................................................................. 1902.1.4.- Generacin de ventanas propias ...................................................................... 1922.1.5.- Ventanas modales ................................................................................................ 194

2.2.- El objeto location ......................................................................................................... 1962.2.1.- Propiedades de location ..................................................................................... 1962.2.2.- Mtodos del objeto location ............................................................................. 197


10/40

viii Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

viii

2.3.- El objeto history ........................................................................................................... 1982.4.- El objeto navigator....................................................................................................... 199

2.4.1.- Propiedades de navigator ................................................................................... 2002.5.- El objeto screen ........................................................................................................... 2012.6.- El objeto document en el BOM ............................................................................... 202

2.6.1.- Colecciones del objeto document en el BOM ............................................. 2032.6.2.- Acceso a los elementos de formularios en el BOM ................................... 205

3.- Acceso y manipulacin de elementos con el DOM........................................................ 2073.1.- Los nodos del DOM ................................................................................................... 2073.2.- Recorriendo la estructura jerrquica del DOM .................................................. 2093.3.- Obtener referencias directas a elementos del DOM ......................................... 212

3.3.1.- Colecciones vivas y estticas ........................................................................ 2153.4.- Principales propiedades base de los nodos ........................................................... 2163.5.- Atributos y propiedades especficas de los nodos .............................................. 2193.6.- Modificacin dinmica de la estructura del DOM ............................................... 221

CAPTULO 10: EVENTOS EN LAS PGINAS ...................................................2251.- Un poco ms de historia para ubicarnos ........................................................................... 2262.- Gestores de eventos en el BOM ......................................................................................... 227

2.1.- Anular la accin por defecto en el BOM ............................................................... 2302.2.- Subclasificacin de eventos en el BOM: deshabilitar botn durante el envode un formulario ..................................................................................................................... 230

3.- Eventos segn DOM LEvel 2 ................................................................................................ 2333.1.- Dnde se captura de verdad un evento? ............................................................. 2333.2.- Gestin de eventos segn el DOM Level 2 .......................................................... 237

4.- Gestin de eventos con Internet Explorer 8- .................................................................. 2395.- Un modelo de eventos unificado ......................................................................................... 2416.- El objeto event ......................................................................................................................... 243

6.1.- El objeto event en el DOM ....................................................................................... 2446.2.- El objeto event en Internet Explorer...................................................................... 2466.3.- Un objeto event unificado ......................................................................................... 248

7.- eventos que podemos capturar en una pgina................................................................. 2497.1.- Eventos de ciclo de vida de la pgina ...................................................................... 250

7.1.1.- Ejemplo: Detectando que la pgina est lista ................................................ 2517.1.2.- Ejemplo: Detectando que se abandona la pgina ......................................... 253

7.2.- Eventos del ratn ......................................................................................................... 2567.2.1.- Ejemplo: cartel que persigue al ratn ............................................................. 2587.2.2.- Ejemplo: anular el men contextual selectivamente ................................... 2607.2.3.- Ejemplo: deteccin del scroll de la pgina ..................................................... 2607.2.4.- Ejemplo: desactivar un botn de radio........................................................... 261

7.3.- Eventos de teclado ...................................................................................................... 2647.3.1.- Ejemplo: Permitir solamente valores numricos ......................................... 2677.3.2.- Ejemplo: Evitar pegar informacin ................................................................... 2697.3.3.- Ejemplo: Control bsico de un marcianito .................................................... 271

7.4.- Anexo: Control avanzado de un marcianito ......................................................... 2747.5.- Otros eventos .............................................................................................................. 275


11/40

Contenido ix

7.5.1.- Eventos de formularios y controles de entrada ........................................... 2757.5.2.- Eventos de mutacin del DOM ........................................................................ 2757.5.3.- Otros eventos sueltos ........................................................................................ 276

CAPTULO 11: FUNDAMENTOS DE AJAX .......................................................2771.- Interfaces de usuario avanzadas ........................................................................................... 2782.- El objeto XMLHttpRequest .................................................................................................. 2803.- Uso prctico de XMLHttpRequest ..................................................................................... 282

3.1.- Envo de datos al servidor ......................................................................................... 2854.- Problemas tpicos de AJAX ................................................................................................... 286

4.1.- Llamadas fuera de dominio ........................................................................................ 2864.2.- Gestin de errores y llamadas que no vuelven .................................................... 2874.3.- Contenidos no actualizados debido a cachs ....................................................... 288

5.- Devolucin de informacin: JSON ...................................................................................... 2896.-JSONP: accediendo a datos en otros dominios ............................................................... 292

6.1.- Una biblioteca propia para JSONP .......................................................................... 2946.2.- Ejemplo: mostrar informacin de Twitter ............................................................ 296

7.- Control de acceso entre dominios: CORS ....................................................................... 3007.1.- Funcionamiento bsico de CORS ............................................................................ 301

CAPTULO 12: ERRORES COMUNES Y DEPURACIN DE APLICACIONESJAVASCRIPT .............................................................................................................303

1.- Errores tpicos cometidos en JavaScript ............................................................................ 3031.1.- Maysculas y minsculas ............................................................................................ 3051.2.- Variables de distinto mbito o no declaradas ....................................................... 3061.3.-

Usar = en lugar de == al comparar ......................................................................... 307

1.4.- Olvidarse de cerrar llaves o parntesis.................................................................. 3071.5.- Cuanto esto no es lo que te esperas .................................................................. 3081.6.- Tipos por referencia y cambios inesperados ........................................................ 308

2.- Gestin de excepciones ......................................................................................................... 3092.1.- Captura de errores a nivel de pgina ..................................................................... 313

3.- Herramientas de depuracin ................................................................................................ 3134.- Herramientas para desarrolladores de Chrome ............................................................. 315

4.1.- La seccin de elementos de pgina ......................................................................... 3174.2.- Recursos de la pgina.................................................................................................. 3194.3.- Anlisis de red .............................................................................................................. 3204.4.- Anlisis de scripts ........................................................................................................ 3214.5.- La lnea temporal.......................................................................................................... 3234.6.- El Profiler ................................................................................................................... 3274.7.- Auditora de optimizacin de pginas ..................................................................... 3274.8.- La consola de JavaScript ............................................................................................. 329

4.8.1.- Escribiendo a la consola desde cdigo ........................................................... 3324.8.2.- Mensajes de consola destacados ...................................................................... 3344.8.3.- Agrupacin de mensajes..................................................................................... 3354.8.4.- Medicin de tiempos y profiling ....................................................................... 336

5.- Depuracin paso a paso......................................................................................................... 337


12/40

x Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

x

5.1.- Puntos de interrupcin o breakpoints ................................................................... 3445.1.1.- Puntos de interrupcin condicionales ............................................................ 3455.1.2.- Detenerse automticamente en los errores................................................. 3465.1.3.- Cambiar el flujo de ejecucin ........................................................................... 3475.1.4.- Otros tipos de puntos de interrupcin.......................................................... 347

APNDICE A: EXPRESIONES REGULARES EN JAVASCRIPT ......................3491.- Qu son las expresiones regulares ..................................................................................... 3512.- El lenguaje de las expresiones regulares ............................................................................ 352

2.1.- Elementos de una expresin regular ...................................................................... 3532.2.- Definicin de expresiones regulares en el cdigo............................................... 3582.3.- Orden de precedencia ................................................................................................ 358

3.- Construccin y uso de expresiones regulares ................................................................. 3593.1.- Ejemplo 1: validar una direccin de email ............................................................. 3593.2.- Ejemplo 2: encontrar todas las coincidencias ....................................................... 364

4.- Expresiones regulares y cadenas de texto ........................................................................ 3664.1.- Sustitucin de cadenas................................................................................................ 367

NDICE ANALTICO ...............................................................................................369


13/40

Presentacin

ACERCA DEL LIBRO

JavaScript es el pegamento de Internet. Nacido en 1.995 como un lenguaje casi dejuguete para validar formularios web, se ha convertido en indispensable. En laactualidad todos y cada uno de los ordenadores, tablets y mviles del mundo

incorporan al menos un intrprete de JavaScript. Adems su influencia se haincrementado para alcanzar todo tipo de mbitos:

Cdigo de servidor: Node.js, RingoJS, Jaxer, EJScript Inteligencia para aplicaciones: PDF, Open Office, Photoshop 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 conocerJavaScript.

UN LENGUAJE INCOMPRENDIDO

El hecho de ser un lenguaje interpretado y aparentemente sencillo provoca elrechazo inicial de muchos programadores, que lo subestiman. Sin embargo, la mayorade stos, aunque lo hayan denostado, no tiene ms remedio que usarlo dada supenetracin actual.

Detrs de su aparente simplicidad se esconde un lenguaje de programacin multi-paradigma, ya que es funcional, imperativo, dinmico y orientado a objetos, todo a lavez, lo que lo hace tremendamente verstil.


14/40

xii Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

Lo cierto es que se trata en general de un lenguaje muy incomprendido. Muchagente lo utiliza sin entender bien cmo funciona por debajo, en qu se fundamenta.Esto conduce en ocasiones a resultados poco satisfactorios, bugs, problemas e inclusoprdidas econmicas.

En los ltimos aos han proliferado multitud de bibliotecas como jQuery o ExtJSque facilitan enormemente el uso de JavaScript en pginas web. Si bien esto esestupendo, ahorra mucho trabajo y es recomendable usarlas, lo cierto es que haprovocado tambin un efecto secundario poco beneficioso: un nuevo tipo deprogramadores web que no saben JavaScript, slo jQuery. Aplican recetas y pluginssacados de bsquedas de Google sin entender bien lo que estn haciendo ni por qu. Espor ello que, si aparecen errores o bugs, esta falta de conocimiento de los fundamentosse convierte en un problema.

Adems, en desarrollo de pginas web, JavaScript es inseparable de losnavegadores. Y no todos los navegadores son iguales ni se comportan del mismo modoal programarlos. A un gran porcentaje de los programadores web les resulta difcildiscernir qu elementos de los que estn usando para programar forman parte delnavegador y cules de JavaScript. Las mencionadas bibliotecas que nos abstraen deesas complejidades no nos ayudan a saberlo. Ms bien todo lo contrario.

Es por ello que es ms importante que nunca dominar los fundamentos del lenguajey 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 deJavaScript, sus tipos de datos, funciones, estructuras de control, manejo defechas, cadenas y otros tipos de datos, etc Resultar especialmente

interesante a los principiantes, aunque incluso algunos programadoresexperimentados podrn encontrar en esta parte cosas que no saban. Abarcade los captulos 1 al 7, lo que supone alrededor de un tercio de loscontenidos del libro.

2. Programacin del navegador: esta es la parte avanzada. Comienza con unrepaso a fondo de la programacin orientada a objetos con JavaScript (ques, se puede hacer correctamente!), para analizar las diferentes maneras deinteraccionar con el navegador desde el lenguaje, las diferencias existentes

entre ellos, la comunicacin asncrona con los servidores con AJAX o ladepuracin de aplicaciones entre otras muchas cosas. Encontrars algunasexplicaciones que no son fciles de encontrar en otros libros de esta materiay te ayudar comprender los entresijos del lenguaje y los navegadores.Captulos 8 al 13 y apndice A.

As que el libro contiene algo para todo el mundo. Los programadores novelespodrn partir prcticamente de cero para conocer lo ms bsico del lenguaje, quetambin les servir en gran medida para otros lenguajes que estudien en el futuro. Los


15/40

Presentacin xiii

programadores experimentados encontrarn materias ms avanzadas con explicacionessobre cmo funcionan los navegadores, las clases, los eventos y dems elementosrelacionados.

Por ello este libro est orientado a todo tipo de profesionales de Internet:

Diseadores web que no conocen JavaScript y desean iniciarse en ellenguaje.

Programadores web que utilizan el lenguaje pero necesitan crear cdigoms eficiente y profesional.

Programadores de jQuery y otras bibliotecas similares que deseanprofundizar en el conocimiento del lenguaje que las sustenta, paraentenderlas mejor, saber solucionar los problemas que les surjan y nodepender tanto de ellas para cosas sencillas.

Cualquier profesional que desee iniciarse en la programacin y hacerlo conel lenguaje ms popular del mundo.

Se espera que el lector sea un usuario habitual de Internet, conozca mnimamentecomo trabaja la Web, y disponga al menos de unas nociones bsicas de HTML y CSS.

Se ha usado un estilo de escritura directo y sencillo, tratando de evitar lostecnicismos, accesible a cualquiera.

Puede utilizarse como gua de aprendizaje, leyendo los captulos en orden, o biencomo manual de referencia.

No se trata este de un libro de recetas (aunque se ofrecen algunas), ni tampoco deltipo Aprende JavaScript por las tardes, sin esfuerzo y mientras ves la tele. El libroofrece un estudio sistemtico del lenguaje por antonomasia de Internet, con aumentoprogresivo de dificultad hasta llegar a tener un nivel apreciable de dominio deJavaScript en los navegadores. Pero para ello el lector tendr que poner de su partetambin. La nica forma de aprender a programar es programando as que deberspracticar por tu cuenta todo lo explicado, e inventarte ejemplos propios. Ver el cdigode las pginas web de otros tambin es muy til: nada ms fcil pues todas lo llevan ala vista, listo para ser analizado por cualquiera.

Los ejemplos desarrollados a lo largo de los distintos captulos sonintencionadamente simples. En cada parte se construyen ejemplos pequeos orientados

a entender el concepto explicado en cada caso. De esta forma no te despistars de loesencial y podrs asentar mejor los conocimientos. Hay algn cdigo ms elaborado,como por ejemplo el gestor universal de eventos, pero est totalmente explicado en eltexto. Todos los ejemplos se pueden descargar desde la web de la editorial:www.krasispress.com. Busca el libro en el catlogo y podrs acceder a las descargas.

He salpicado el texto de notas. Algunos captulos la verdad es que tienen muchas :-)Se trata de comentarios adicionales relacionados con lo que se est explicando, que
http://www.krasispress.com/http://www.krasispress.com/http://www.krasispress.com/


16/40

xiv Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

aportarn informacin extra no esencial, curiosidades, consejos, etc Espero que las

encuentres de inters. Ah va la primera:

Nota: En mi blog tcnico,www.jasoft.org, publico con cierta frecuencia postssobre desarrollo web que pueden resultarte interesantes y que puedencomplementar a este libro. Puedes seguir en Twitter a @campusMVP paraobtener cada da enlaces a artculos interesantes, noticias y otros recursos paraprogramadores. Tambin en Facebook si lo prefieres:www.facebook.com/campusMVP . En www.campusmvp.com encontrarsmultitud de cursos on-line tutelados por los mejores profesionales del sector.chale un vistazo y anmate a prepararte con nosotros.

Ponte en contacto con la editorial a travs de su pgina web si quieres transmitirnoscualquier comentario o sugerencia. Ah! Y personalmente te agradecera mucho que, site gusta el libro y te ha ayudado, nos dejes un comentario en la ficha del mismo en latienda on-line, para que otros visitantes puedan conocer las opiniones de los lectores.

He puesto el mximo empeo en hacer el libro ameno, exhaustivo, fcil decomprender y exento de erratas. Espero haberlo conseguido y que te sirva paraaprender y ser mejor en tu trabajo.

Comenzamos!
http://www.jasoft.org/http://www.jasoft.org/http://www.jasoft.org/http://twitter.com/campusMVPhttp://twitter.com/campusMVPhttp://www.facebook.com/campusMVPhttp://www.facebook.com/campusMVPhttp://www.campusmvp.com/http://www.campusmvp.com/http://www.campusmvp.com/http://www.facebook.com/campusMVPhttp://twitter.com/campusMVPhttp://www.jasoft.org/


17/40

119

CAPTULO

Nada hay ms importante que el tiempo. En el ajetreado y estresante mundo actualvale incluso ms que el dinero para muchas personas. Este captulo se centra en elmanejo 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 (da, semana, mes,ao), y el calendario sita el momento actual frente a una referencia pasada elegida

arbitrariamente (por ejemplo, en occidente, el momento en el que se considera quenaci Jesucristo). La mayora de los calendarios modernos se rigen por el ciclo quesigue la tierra al rodear al sol, por lo que se denominan calendarios solares. En lamayor 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 Julianoinstaurado por Julio Csar en el ao 46 a.C.

En cuanto a la medida ms inmediata del tiempo, la unidad utilizada en el sistemainternacional es el segundo, con sus unidades derivadas: el minuto (60 segundos) y lahora (60 minutos o 3.600 segundos). Un da del calendario consta de 24 horas.

Nota: La definicin oficial de 1 segundo es la duracin de 9.192.631.770oscilaciones de la radiacin emitida en la transicin entre los dos niveles hiper-finos del estado fundamental del istopo 133 del tomo de cesio (133Cs), a unatemperatura de 0 K.1

Por supuesto estas unidades de medida del tiempo las tenemos todos muyinteriorizadas. Las conocemos y las utilizamos con naturalidad. Sin embargo unordenador no lo tiene tan fcil. Una computadora no tiene conciencia del exterior ydebe regirse por algn sistema interno que le marque el paso del tiempo.

Fechas, horas ytemporizadores


18/40

120 Fundamentos de JavaScript y AJAXpara desarrolladores y diseadores web

Todos los ordenadores modernos incorporan un hardware especial que acta dereloj interno y que est calibrado para medir la cantidad de tiempo que ha transcurridodesde una determinada fecha arbitraria denominada tcnicamente epoch. Lossistemas operativos que corren por encima del hardware miden el tiempo en ticks

que son unidades arbitrarias trasladables a unidades de tiempo real en el sistemainternacional. Cada sistema operativo define su propio valor para cada tick. Porejemplo, en Windows cada milisegundo de tiempo real contiene 10.000 ticks del

procesador (http://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspx ) olo que es lo mismo, cada tick representa un nanosegundo o una diezmillonsima desegundo. La precisin que ofrece, obviamente, es muy elevada. La fecha de referenciadel sistema operativo es el 1 de enero del ao 1 a media noche, y el sistema informapermanentemente del nmero de ticks transcurridos desde entonces (sin contarsegundos intercalares: http://es.wikipedia.org/wiki/Segundo_intercalar ). Otrossistemas operativos usan otras referencias. Por ejemplo Mac OS X usa como epoch

el 1 de enero de 1904, el primer ao bisiesto del siglo XX, y Linux utiliza el 1 de Enerode 1970 que es el ao elegido de manera arbitraria por los programadores del primersistema UNIX.

Asimismo, cada lenguaje de programacin ofrece su propia resolucin temporal - lacantidad mnima de tiempo que puede medir- y su propia epoch o fecha dereferencia. Por ejemplo la plataforma .NET utiliza el mismo ao que Windows, pero ellenguaje COBOL usa el 1/1/1601, SQL Server el 1/1/1753, y Cocoa (la plataforma dedesarrollo 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 lossistemas UNIX, y la unidad ms pequea que puede medir es el milisegundo.

Por todo lo que acabamos de ver los ordenadores internamente no trabajan confechas, como nosotros, sino con nmeros muy elevados que se relacionan condeterminadas referencias arbitrarias. Y los lenguajes que utilizamos para construirprogramas usan otras referencias diferentes encima del sistema operativo, perorepresentan tambin las fechas con nmeros largusimos que carecen de sentido cuandolos ve una persona.

Como hemos comprobado, la gestin del tiempo en los sistemas digitales distamucho de ser un problema simple. Por fortuna los sistemas operativos y lenguajesmodernos nos abstraen de toda esta complejidad para facilitarnos el uso del tiempo enlos programas que construimos.

Como veremos enseguida, JavaScript nos ofrece las herramientas que necesitamospara trabajar con el tiempo sin tener que preocuparnos de nada de lo anterior, que sinembargo es interesante conocer y debera formar parte de la cultura general de todo

programador.

1.- QU HORA ES?Esta es la ms simple de las preguntas que nos podemos hacer al empezar a trabajar

con el tiempo en un lenguaje de programacin.JavaScript proporciona las funciones necesarias para determinar las caractersticas

temporales del sistema desde donde accede cada usuario. Podemos averiguar la fecha
http://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspxhttp://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspxhttp://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspxhttp://es.wikipedia.org/wiki/Segundo_intercalarhttp://es.wikipedia.org/wiki/Segundo_intercalarhttp://es.wikipedia.org/wiki/Segundo_intercalarhttp://msdn.microsoft.com/en-us/library/system.datetime.ticks.aspx


19/40

Fechas, horas y temporizadores 121

del ao y felicitarles as la Navidad, la hora del da para poder desearles las buenasnoches, la franja horaria en la que se encuentran, etc...

Todas las funciones relacionadas con unidades temporales (fecha y hora) se ofrecencomo mtodos de la clase JavaScript llamadaDate.

Como hemos visto en la introduccin, una variable que contenga una fecha (o sea,un objeto de tipoDate) contiene en realidad un valor numrico que expresa el nmerode milisegundos transcurridos desde el 1/1/1970 a las 00:00:00 horas. Las diferenciasentre instantes temporales tambin se devuelven en milisegundos, de manera que si dosvariables temporales se diferencian en 15.000 implica que estn separadas slo por 15segundos. Un da tiene 86.400.000 milisegundos. De todos modos generalmente notendremos que lidiar con estas medidas tan precisas y ser suficiente con utilizar lasunidades temporales ms habituales para nosotros: das, meses, horas o minutos.

Para obtener la fecha y hora actuales en una variable basta con definir una nuevainstancia deDate, as:

var hoy = new Date();

Ahora la variable hoy tendr un valor que representa la fecha y hora en elmomento de ser creada. Cuando la intentemos mostrar por pantalla no se ver, sinembargo, el valor numrico del que hemos hablado (el nmero de milisegundos desde1/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 mtodoespecial llamado toString que es invocado automticamente cuando se quierenrepresentar por pantalla de modo textual. En el caso de los objetos de tipo Date sedevuelve en una expresin ms legible para un humano (aunque generalmente eningls, luego veremos como poner todo en espaol) en lugar del nmero que albergainteriormente.

Nota: La especificacin para el mtodo toString de una fecha en el estndarECMAScript indica lo siguiente: Este mtodo devolver un valor String. Suscontenidos son dependientes de la implementacin, pero su intencin es que

muestre la fecha en la zona horaria actual en una forma apropiada para ser ledapor un humano. Sin ms. Por ello difiere lo que se muestra de unaimplementacin de JavaScript a otra.

Se puede leer completo en:http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-

262.pdf
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdfhttp://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdfhttp://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdfhttp://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdfhttp://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf


20/40


Por fortuna JavaScript nos facilita un mtodo alternativo toLocaleString que nospermite mostrar la fecha y hora usando la configuracin del idioma actual delnavegador (esto es, la del idioma seleccionado como preferido en el navegador delusuario, no la del sistema operativo, que no tienen porqu coincidir.


alert(hoy.toLocaleString());

que devolvera en castellano, por ejemplo:

viernes, 03 de agosto de 2012 18:56:28

Existen dos mtodos complementarios al anterior, toLocaleDateString ytoLocaleTimeString que devuelven respectivamente las partes correspondientes a lafecha y a la hora.

Si en lugar de querer obtener la fecha y hora actuales deseamos guardar en unavariable una fecha y hora arbitrarias elegidas por nosotros, deberemos especificarlaentre los parntesis al crear un nuevo objeto Date. Existen varios constructoresdiferentes de este estilo, a saber:

var fecha = new Date("mes da, ao horas:minutos:segundos")

var fecha = new Date(ao, mes, da, [horas, [minutos, [segundos,

[milisegundos]]]])

as pues para definir una variable que guarde la fecha 23 de Mayo de 1972, a las21: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");

Ntese que en el primer caso el mes se especifica como un nmero empezando acontar 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 oabreviatura en ingls, en este caso May.

El ao debe expresarse siempre con las cuatro cifras. En caso de facilitarsesolamente dos se entender siempre que es un ao del siglo XX, por lo que siescribimos:

var n = new Date(72,4,23);

se entender que se trata del 23 de mayo de 1972. Esto es interesante resaltarlo yaque en otros lenguajes dependiendo del nmero de dos cifras que se pase se considerarque es un ao perteneciente al siglo XX o al XXI. En JavaScript no ocurre esto ysiempre se les supondr el 19 delante.

Existe una tercera variante del constructor de Date que nos permite pasarle comoargumento un valor que representar el nmero de milisegundos desde el 1/1/1971.Raramente se utiliza.


21/40


El constructor de las fechas se adapta a las incongruencias que le facilitemos en elconstructor, de modo que adapta a la posibilidad ms apropiada en cada caso aquellasfechas incorrectas que le pasemos. Por ejemplo:

var fecha = new Date(2012, 3, 31);

Intenta asignar el da 31 de abril de 2012. Pero abril slo tiene 30 das, as que lafecha no es correcta. Sin embargo en lugar de obtener un error JavaScript coger lafecha ms congruente con lo que le pasamos, que es el 1 de mayo (el da que sobra selo suma a la fecha).

Nota: As que en realidad en JavaScript s que podramos aplicar sin problemalo del dicho: Hasta el cuarenta de mayo no te quites el sayo, ya que el 40 demayo existe y se transforma en el 9 de Junio ;-)

Por ejemplo, especifiquemos una fecha como esta:


que literalmente sera el 10 del mes 21 de 2012 (recuerda que los meses cuentandesde el 0 as que el 20 es en realidad el 21). Como esto no tiene sentido, JavaScript sesuma los meses sobrantes de modo similar a lo que acabamos de ver con los das,, conlo que realmente la fecha que hemos definido es el 10 de septiembre de 2013!.

Qu fecha sera esta entonces?:


Pues el 10 de octubre de 2013, ya que el 20 se refiere al mes 21 contando desdeenero del ao indicado (2012), o sea que es septiembre de 2013, y el 40 sube 10 dasms ese da de septiembre (que tiene 30 das), hasta el 10 de octubre.

Lo mismo pasa con los nmeros negativos:

var fecha = new Date(2012, 4, -10);

Esta fecha sera el 20 de abril de 2012.

2.- LAS PARTES DEL TIEMPO: FORMATOS PROPIOSUna vez que tenemos definida una variable que contiene un objeto Date sera

interesante poder acceder a sus diversas partes de manera directa, es decir, saberdirectamente el da de la semana en el que estamos, o slo la hora, etc.

Para ello la clase Date cuenta con una serie de mtodos que pasamos a enumerar acontinuacin:


22/40


getTime: obtiene solamente la parte correspondiente a la hora, rechazandola fecha. Devuelve el nmero de segundos transcurridos desde el 1/1/ 1970.Es til para crear marcas de tiempo para ciertas aplicaciones especiales decomunicacin con el servidor.

getDay: nos dice el da de la semana en el que nos encontramos,empezando a contar en domingo, que sera un 0. De este modo el lunessera el 1, el martes el 2 y as sucesivamente.

getDate: obtiene el da del mes dentro de la fecha dada. getMonth: devuelve el nmero correspondiente al mes contenido en el

objeto Date. Se comienza a contar en 0 que correspondera al mes deEnero.

getYear: devuelve el ao contenido en la variable de tipo fecha. Estafuncin tiene un comportamiento algo extrao puesto que para las fechascomprendidas entre 1900 y 2000 (ambos inclusive) devuelve slo las dosltimas cifras del ao (1985 sera 85) mientras que para el resto de lasfechas devuelve el nmero completo. Hay que tenerlo en cuenta porquepara cualquier fecha actual devolver cuatro cifras, pero para una fecha delsiglo pasado sern solamente dos.

getFullYear: funciona igual que el anterior, pero en este caso el ao sedevuelve siempre con las cuatro cifras correspondientes. Debemos usarlogeneralmente en sustitucin de getYear.

getHours: permite obtener el valor de la hora en una variable Date, sinincluir la fecha actual, ni los minutos ni los segundos.

getMinutes: con este mtodo conseguimos averiguar los minutos de la horaindicada.

getSeconds: permite obtener la parte correspondiente a los segundos en unavariable de hora.

getMilliseconds: facilita el nmero de milisegundos despus del segundoactual que est especificado dentro de una variable de tipo Date. Es decir,

aunque la hora actual se muestre redondeada a 19:22:37, internamente hayunos cuantos milisegundos de precisin ms que podemos obtener, por loque sera 19:22:37:849 (siendo 849 los milisegundos a mayores quedevolver esta funcin).

Dado que JavaScript no nos proporciona mtodo alguno para poder devolverformatos personalizados, y lo mximo que facilita de manera directa es quedevolvamos fechas largas en la lengua local, usaremos las funciones anteriores paradevolver el formato que deseemos.


23/40


Por ejemplo, vamos a crear un formato especial que devuelve una fecha en unformato especial. En nuestro caso usaremos el ejemplo planteado al final del captuloanterior (convertir un nmero en su expresin textual) para conseguir fechas de estetipo:

Viernes, tres de Agosto de dos mil doce

con todas sus letras. El ejemplo lo tienes en el archivo Cod07_01.htm de lasdescargas del libro.

Para conseguirlo, antes de nada, vamos a introducir una referencia a un archivoJavaScript con la funcin de conversin de nmero a texto vista en el captulo anterior,as como sus constantes y mtodos asociados:

Esto har que est disponible en nuestra pgina (lo habitual es reunir en archivos .jslas funciones reutilizables que tengamos para nuestras aplicaciones, agrupndolas porfuncionalidad).

Ahora vamos a definir un par de funciones auxiliares que nos resultarn de utilidady que devolvern respectivamente el nombre del da de la semana y del da del mesutilizando los mtodos que acabamos de estudiar:

function getNombreDiaSemana(fecha) {

var dias = ["domingo", "lunes", "martes", "mircoles",

"jueves", "viernes", "sbado"];

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 cdigo es trivial:

function formatoTextual(fecha) {

return getNombreDiaSemana(fecha) + ", " +

numeroATexto(fecha.getDate()) + " de " +getNombreMes(fecha) + " de " +

numeroATexto(fecha.getFullYear());

}


alert(formatoTextual(hoy)); //viernes, tres de Agosto de dos mil doce

En el archivo Cod07_02.htm se ofrece una versin alternativa y orientada a objetosde este cdigo, que de hecho extiendo la clase Date para que disponga directamente deun mtodoformatoTextual que nos permita simplemente escribir esto:


24/40


var fechaTexto = hoy.formatoTextual();

alert(fechatexto);

Nota: Todava no hemos llegado a la parte de programacin orientada a objetospor lo que el cdigo para lograrlo te ser ms difcil de entender, pero lo dejo paramostrar la forma ms correcta de hacer este tipo de cosas. En un prximo captuloquedar claro cmo funciona.

Para terminar este apartado veamos un truco poco conocido de las fechasJavaScript.

Si en el constructor de una fecha especificamos como da del mes un 0 (obviamenteun valor no vlido), JavaScript asigna a la fecha el ltimo da de ese mismo mes. Es un

comportamiento extrao pero muy til ya que podemos aprovecharlo para averiguar elnmero de das que tiene un mes cualquiera de un ao 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 ao 2012 fue bisiesto y por lo tanto el mes

de febrero tuvo 29 das.

3.- HORA UNIVERSAL COORDINADADe acuerdo con las especificaciones ECMA-Script que normalizan el lenguaje,

JavaScript dispone de funciones para el manejo de unidades temporales estndar, loque se conoce como Universal Coordinated Time, UTC u Hora Universal Coordinada.Este baremo para medir la hora es ms conocido por todo el mundo como GMT (oGreenwich Meridian Time, hora en el meridiano de Greenwich) y todos estamosacostumbrados a utilizarlo.

Prcticamente todas las funciones vistas en el apartado anterior para obtener laspartes de un objeto Date se han implementado tambin para horas universales. Slohay que aadir la palabra UTC despus de get en sus nombres. As tenemos:

getUTCDay getUTCDate


25/40


getUTCMonth getUTCFullYear getUTCHours getUTCMinutes getUTCSeconds getUTCMilliseconds

Todos estos mtodos tienen en cuenta la diferencia horaria del sistema en el que nosencontramos respecto al meridiano de Greenwich, de forma que es posible que unmtodo get de hora local visto en el apartado anterior, y un mtodo 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 da de Ao Nuevo del ao 2013 enEspaa (GMT+1), es realmente una hora menos en Greewich, por lo que esa fecha enhora local sera ya el 2013, pero en hora UTC sera todava 2012.

Las funciones toUTCString y toGMTString son equivalentes y devuelven lasfechas expresadas en el meridiano de Greenwich. As, el siguiente cdigo:

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 existentesentre la hora local y la GMT, y puede resultar muy til cuando la diferencia horariaentre donde est el servidor y los usuarios es importante.

Usando esta funcin podramos escribir nosotros mismos todas las funciones UTCque acabamos de ver con suma facilidad. Para el caso de Espaa esta funcin devuelveel nmero -60 o -120, ya que hay una hora de diferencia en invierno pero dos en verano


26/40


con el horario de ahorro energtico. En realidad puede devolver casi cualquier valorpues existen pases con diferencias horarias con GMT que no son horas completas. Porejemplo Venezuela est en GMT-04:30 (o sea, cuatro horas y media por detrs), yNepal est en GTM+05:45 (5 horas y tres cuartos por delante). JavaScript nos abstraede todas estas dificultades y siempre devuelve la diferencia horaria correcta con cdigosimilar a este:

Var fecha = Date();

alert(fecha.getTimezoneOffset());

4.- MTODOS DE CAMBIO DE HORAAl igual que podemos guardar en una variable fechas y sus partes a travs de los

mtodos get... y getUTC.., es posible igualmente fijar a posteriori estos valores. La

claseDateposee unos mtodos set... que estn pensados para modificar el contenido de las variables de este tipo para reflejar fechas y horas diferentes. Ninguno de estosmtodos afecta a la hora o fecha reales del sistema, slo a los valores almacenados enlas variables que tratemos con ellos. As podemos almacenar fechas arbitrarias en unavariable de tipo temporal previamente definida.

A continuacin se detallan los mismos:

setDate: Permite asignar un nuevo da del mes a la fecha contenida en unavariable.

setMonth: Asigna un nuevo valor para el mes en la fecha contenida en lavariable. Recuerda que los meses empiezan a contar desde 0 para enero.

setYear: Permite cambiar el valor del ao en una fecha.- Si se usan slo dosdgitos como argumento se considerar un ao dentro del rango 1900-2000.

setFullYear: idntico al mtodo anterior pero se deben especificar siemprelos cuatro dgitos del ao. Este mtodo permite especificar opcionalmenteel mes y el da del mes como segundo y tercer parmetro respectivamente.

setTime: permite asignar una nueva hora pasando como argumento elnmero de milisegundos transcurridos desde la medianoche del 1/1/1970.No se utiliza demasiado por razones obvias.

setMilliSeconds: fija el nmero de milisegundos que pasan del segundo enla hora actual de una variable.

setSeconds: permite fijar el nmero de segundos actuales en la variable.Opcionalmente se pueden especificar tambin los milisegundos comosegundo parmetro.


27/40


setMinutes: fija los minutos actuales en la hora contenida en una variable.Tiene como parmetros opcionales el nmero de segundos y el demilisegundos transcurridos.

setHours: nos permite fijar la hora actual para una variable tipo Date.Tiene como tres parmetros opcionales los minutos, segundos ymilisegundos.

Del mismo modo que antes haba funciones get... para horas locales ygetUTC... para horas GMT, en el caso de los mtodos set.. ocurre igual y existen:

setUTCDate setUTCMonth setUTCFullYear setUTCMilliSeconds setUTCSeconds setUTCMinutes setUTCHours

que funcionan de la misma manera pero refirindose sus parmetros a horauniversal UTC y no a la hora local del sistema donde se ejecuten.

5.- TEMPORIZADORES Y CRONMETROSAdems de medir el tiempo, algo verdaderamente til en cualquier plataforma de

desarrollo es tener la capacidad de ejecutar cdigo a intervalos regulares de tiempo. Unprograma en JavaScript, segn todo lo que hemos visto hasta el momento, es unasucesin continua de lneas de cdigo que se ejecutan una tras otra por orden paraobtener un resultado. Sin embargo en la realidad no solo llega con ejecutar el cdigo enel momento de cargar una pgina, sino que es necesario que ste se ejecute en elmomento apropiado: ante algo concreto que ocurra en una pgina o al cabo de

determinado tiempo.El primer caso se soluciona gracias a los eventos de HTML, que estudiaremos en un

captulo posterior y nos permitirn reaccionar ante diferentes situaciones que se den enuna pgina (como pulsar un botn o pasar el cursor sobre un texto). La segundasituacin se resuelve con el uso de temporizadores.

Los temporizadores son objetos sin representacin fsica que se encargan deejecutar una determinada tarea al cabo de un cierto tiempo.

La orden para poner en marcha un temporizador es:


28/40


tempID = setTimeout(Rutina, Tiempo);

donde Rutina es el nombre (debe ir entre comillas) de un procedimiento o funcin

que el temporizador se encargar de ejecutar; y Tiempo es un valor expresado enmilsimas de segundo que indica cunto tiempo tardar ste en ejecutar la rutinaespecificada. Al fijar un temporizador con setTimeout se puede anotar el valordevuelto en una variable. Este valor es un nmero que identifica de manera nica altemporizador recin definido. El inters de este identificador reside nicamente enusarlo con el mtodo complementarioclearTimeout que lo toma como argumento paraanular el temporizador relacionado.

Segn esto, si por ejemplo se dispone en el Script de una funcin llamadamiFuncin y se quiere activar sta al cabo de dos segundos habra que escribir:

var miId = setTimeout(miFuncin(), 2000);

En caso de que, por cualquier motivo, sea necesario detener este temporizador antesde que llegue a actuar y ejecute la funcin, haremos:

clearTimeout(miId);

En lugar del nombre de una funcin podramos pasarle tambin una cadena de textocon el cdigo a ejecutar:

setTimeout(alert(Hola), 2000);

Sin embargo esto es considerado una mala prctica y solamente se soporta por

compatibilidad con versiones antiguas del lenguaje. En la actualidad raramente lo versen ningn sitio ya que, entre otras cosas, puede interferir con los procesos deminimizacin de cdigo que se llevan a cabo para mejorar el rendimiento de descargade las pginas.

Nota: El proceso de minimizacin de cdigo JavaScript consiste en retirar deun archivo de cdigo todo lo superfluo para que ocupe el menor espacio posible.Se retiran comentarios, retornos de carro, tabulaciones, espacios pero tambin sepuede refactorizar e incluso reducir el nombre de las variables para que ocupenmenos. Se pueden conseguir reducciones de tamao espectaculares, haciendo que

el cdigo se descargue antes, y ahorrando ancho de banda. En ocasiones el procesova unido a otro denominado Ofuscacin, que bsicamente trata de hacer el cdigomenos legible y difcil de seguir para un humano, dificultando que se copie o secacharree con l.

Muchas veces el proceso de minimizado se acompaa de otro denominadobundling, que consiste en combinar varios archivos de cdigo .js en uno solo

para reducir tambin el nmero de peticiones que una pgina debe realizar alservidor, lo que tambin ahorra tiempo y ancho de banda.

Estos procesos los llevan a cabo ciertos programas especializados de manera


29/40


automtica. Los ms conocidos son JSCompress (http://jscompress.com), JSMinde Douglas Crockford (http://www.crockford.com/javascript/jsmin.html ), YUICompressor de Yahoo (http://refresh-sf.com/yui/) o el AJAX MInifier deMicrosoft (http://ajaxmin.codeplex.com/). Todos son gratuitos.

Tambin es posible pasarle directamente una funcin annima definida comoprimer parmetro, as:

setTimeout( function(){alert(Hola);}, 2000);

Pero tampoco se utiliza a menudo, prefirindose por claridad la primera de lasvariedades de uso.

Si necesitamos ejecutar la funcin repetidamente, a intervalos regulares de tiempo,es posible llamar repetidas veces al temporizador de nuevo con el mtodo que

acabamos de estudiar o, mucho mejor, se puede usar el mtodo setInterval. ste esexactamente igual al anterior en cuanto a parmetros y forma de uso, pero la llamada serepite continuamente cada intervalo de tiempo especificado, hasta que lo detengamoscon una llamada a su funcin complementariaclearInterval. Por ejemplo:

id = setInterval(Mifuncion(), 2000);

O bien:

id = setInterval(Mifuncion, 2000);

llamar continuamente a la funcin indicada cada dos segundos. Slo dejar deinvocarla cuando llamemos a clearInterval pasndole como parmetro el identificadordevuelto al crear el temporizador (guardado en la variable iden la lnea anterior).

Nota: Tanto a setTimeout como a SetInterval se les pueden pasar comoparmetros opcionales los argumentos que necesite la funcin que vamos aejecutar. Tantos como sea necesario:

setTimeout(Mifuncion, 2000, parametro1, parametro2);

Esto funciona en todos los navegadores del mercado a excepcin de en InternetExplorer, por lo que no es muy recomendable. Si necesitas pasar parmetros a lallamada a la funcin es mejor que la envuelvas en otra funcin auxiliar sinparmetros y que llames a sta.
http://jscompress.com/http://jscompress.com/http://jscompress.com/http://www.crockford.com/javascript/jsmin.htmlhttp://www.crockford.com/javascript/jsmin.htmlhttp://www.crockford.com/javascript/jsmin.htmlhttp://refresh-sf.com/yui/http://refresh-sf.com/yui/http://refresh-sf.com/yui/http://ajaxmin.codeplex.com/http://ajaxmin.codeplex.com/http://ajaxmin.codeplex.com/http://ajaxmin.codeplex.com/http://refresh-sf.com/yui/http://www.crockford.com/javascript/jsmin.htmlhttp://jscompress.com/


30/40


Nota: Hay que tener en cuenta que estos cuatro mtodos de temporizadores noforman parte en realidad del lenguaje JavaScript sino que son mtodosproporcionados por los navegadores web (a travs de su objeto intrnseco window,que ya estudiaremos) y que pueden ser utilizados desde nuestro cdigo JavaScriptembebido en una pgina web. Si queremos usar el cdigo descrito fuera de unnavegador no funcionar. Sin embargo otros lenguajes basados en JavaScriptsuelen incluir su propia implementacin nativa para facilitar la compatibilidad.Por ejemplo Node.js ofrece las cuatro funciones, que funcionan del modo descritoen este captulo.

5.1.- La precisin de los intervalos de tiempoEl tiempo del intervalo para un temporizador puede ser cualquier valor. Sin

embargo, si nos pasamos ponindolo demasiado pequeo, veremos que pueden ocurrircosas malas. Aparte de poder llegar a bloquear la ejecucin del navegador, a partir dedeterminado valor que vara de un navegador a otro (entre los 15 y los 25milisegundos), el temporizador no tiene resolucin suficiente y entonces da igual loque bajemos el tiempo puesto que no habr diferencia. En cualquier caso debemosevitar los procesos peridicos lanzados con intervalos muy pequeos. Todo lo que seainferior a 100 milisegundos no parece muy recomendable salvo en casos muypuntuales, as que deberamos mantenernos por encima de esa zona de confort.

En el epgrafe anterior afirm que setInterval llamaba a una funcin cada x

milisegundos, especificados como segundo parmetro. Sin embargo esto no esexactamente as, y en ocasiones puede tener importancia esta distincin.JavaScript solamente posee un hilo de ejecucin, por lo que todas las funciones se

ejecutan dentro de ste (dejando de lado la salvedad de la API de Web Workers deHTML, un tema avanzado). Esto significa no se pueden ejecutar dos scripts al mismotiempo en una pgina. El mtodo setTimeOut y setInterval ayudan a emular laejecucin en paralelo de cdigo, ya que podemos lanzar procesos al cabo de ciertotiempo o peridicamente, que parecen ejecutarse en otro hilo. Pero es solo una ilusin.

En realidad, tanto los intervalos de estos temporizadores como cualquier otro eventoasncrono que se provoque (a travs de la interfaz, por ejemplo), se encolan para suejecucin para cuando el motor de JavaScript (mono-hilo, recordmoslo) estdisponible.

Veamos que pasa cuando ejecutamos una funcin cada cierto tiempo corto.Imaginemos una funcin relativamente larga de ejecutar (que tarde sobre 70 ms)ejecutada cada 100 ms:


31/40


Figura 2.- Ejecucin de una funcin larga a intervalos cortos

Esto no deja de ser una simplificacin ya que hay otros posibles eventosejecutndose en el tiempo del proceso de JavaScript (eventos de la interfaz de usuario uotros temporizadores), pero no sirve para explicar el fenmeno.

En este caso como la funcin tarda menos tiempo que el intervalo en ejecutarse dar

tiempo a lanzarla con el periodo que hemos indicado en setInterval. Lo que JavaScripthace es introducir en una cola de ejecucin los eventos asncronos que debe ejecutar, ylos ejecuta en el momento en el que puede hacerlo. En el ejemplo de la figura lafuncin se encola cada 100 ms y como tras cada ejecucin an sobra tiempo, al ir aejecutarla nuevamente no hay nada pendiente en la cola y la ejecuta inmediatamente.Este sera el comportamiento normal deseable.

Imaginemos ahora un proceso que tarda ms en ejecutarse que el intervalo derepeticin que hemos especificado (se puede simular mostrando desde el eventoperidico un dilogo bloqueante mediante alertque bloquea la ejecucin hasta que loaceptamos- y tardando ms tiempo del indicado en aceptarlo). Lo que ocurre lo vemosreflejado en la siguiente figura:

Figura 3.- Tareas repetitivas muy largas

En este caso la primera vez que se ejecuta funcin se tarda ms tiempo delespecificado en el intervalo en terminarla. Mientras tanto el cdigo JavaScript estdetenido. Al pasar los siguientes 100 ms (el intervalo de repeticin) JavaScript nopuede ejecutar la funcin puesto que est en un bloqueo as que lo que hace esintroducirla en la cola de ejecucin de eventos asncronos, a la espera de un momentolibre para ejecutarla. Al acabo de otros 100 ms se debera introducir en la cola otra


32/40


repeticin de la tarea, pero en realidad se descarta pues slo puede haber una de cadatipo. Finalmente al cabo de 335 milisegundos, se termina la primera ejecucin y selanza inmediatamente la que est en la cola (que es la segunda todava). Con lo cual elintervalo, que era de 100 ms, se ha convertido en este caso en un intervalo mucho mslargo.

Conclusin: en condiciones extremas los intervalos no son fiables, con posiblesgrandes variaciones, por lo que no podemos contar siempre con que nuestra funcin seejecutar todas las veces que pensbamos. Esto puede tener importancia en ciertostipos de aplicaciones y debemos tenerlo en cuenta.

Si realmente es importante para nosotros que una tarea se repita en un intervalo detiempo preciso tras cada ejecucin (es decir, que se ejecute x milisegundos despusde haber terminado la primera ejecucin, ojo) lo que tenemos que hacer es emplear untemporizador simple con setTimeOuty relanzarlo desde la propia funcin al final de suejecucin:

function periodica() {

//Hacemos lo que sea que puede tardar

setTimeOut(periodica, 100);

}

Es decir, iniciamos otro nuevo intervalo al terminar la ejecucin del anterior. OJO:con esto no conseguimos repeticiones cada cierto tiempo, sino que la funcin se repitacon un periodo de tiempo predecible entre cada ejecucin, que no es lo mismo comoilustra la siguiente figura.

Figura 4.- Ejecucin constante al terminar la funcin

6.- EJEMPLO: UN RELOJ DENTRO DE UNA PGINAWEB

Con ayuda de los temporizadores y nuestros conocimientos del lenguaje y delmanejo de fechas y cadenas de texto vamos a construir un pequeo reloj digital comoel que se ve en la figura. ste marcar dentro de una pgina web la hora con todos losdgitos. Esto quiere decir que rellenaremos con ceros si es necesario cada parte de lahora para que aparezca 05 en lugar de slo 5.


33/40


Figura 5.- Un reloj digital en una pgina Web

El cdigo necesario (Cod07_04.htm) es el siguiente:

Reloj Digital

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);

}


34/40


En este cdigo hay un par de cosas que necesitamos y que todava no hemosestudiado, pero son sencillas: el evento onload de una pgina, que ejecuta un cdigocuando sta ha terminado de cargar, y el mtodo getElementbyId, que permite localizarelementos dentro de la pgina. Obviemos por el momento esto (lo vamos a ver en unprximo captulo con detalle). El cdigo que queda para crear el reloj es realmentesencillo y fcil de seguir con lo que sabemos hasta ahora.

7.- EJEMPLO: DIFERENCIAS DE TIEMPOS. CUENTAATRS.

Para terminar este captulo vamos a hacer un ejemplo un poco ms complicado,pero sencillo de todos modos. Nos servir para ver algunos detalles ms sobre cmotrabajar con el tiempo y los temporizadores.

Se trata de crear un cronmetro de cuenta regresiva, que mostrar en pantalla eltiempo que queda para que pase un determinado periodo de tiempo. Puede ser til, porejemplo, para informar en pantalla a los alumnos de una prueba de evaluacin sobrecunto tiempo les queda para terminar (ver figura 6).

Figura 6.- Nuestro cronmetro de cuenta regresiva

Para programar algo as, lo primero es colocar la interfaz de usuario en la pgina:


35/40


Cuenta regresiva

00:00

5 min

10 min

15 min

20 min

25 min

30 min

Hemos definido un que contiene a los dems elementos. Dentro de ste hayotro que servir para mostrar la cuenta atrs y debajo de ste un control deseleccin con unos determinados rangos de tiempo que podemos seleccionar, seguidode un botn que servir para iniciar y detener el contador. En la cabecera se hareferenciado una hoja de estilos que le dar un aspecto agradable a todo el conjunto.

En el evento onclickdel botn se llama a la funcin comenzarParar que ser laencargada de poner en marcha el cronmetro 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);

}

}


36/40


Primero se definen tres variables globales que es necesario compartir entre variasfunciones que vamos a crear. Acto seguido se define la funcin comezarParar. Dadoque sta va a tener un doble propsito se hace divide su lgica entre dos ramas de uncondicional. Vamos a fijarnos antes de nada en la rama de arrancar que es la del else.

Lo que se hace es guardar en una variable local auxiliar ( tDescuento) el tiemposeleccionado por el usuario en la lista desplegable, convirtindolo en un nmero enteroantes, conparseInt. Este es un tiempo en minutos.

A continuacin se averigua la fecha y hora actuales, guardndolas de momento en lavariable global dObjetivo que contendr la fecha y hora destino en la que la cuentaregresiva deber detenerse.

Como debemos contar (ms bien descontar) el nmero de minutos elegido por elusuario, la fecha objetivo ser igual a la actual ms esos minutos elegidos por elusuario. Para poder sumar esos minutos a la hora actual hacemos uso del mtodosetMinutes, para lo cual le sumamos a los minutos actuales ( getMinutes) el tiempo quequeremos descontar. Por ejemplo, si ahora son las 20:00:00 y queremos contar 5minutos, le sumamos esos 5 minutos a la parte de minutos de la hora actual. As, parasaber el tiempo que ha transcurrido slo 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 setMinutessobrepasa los 60 minutos, ya que como hemos visto la clase Date essuficientemente inteligente para adaptarse. As que si son las 20:55 y le sumamos10 minutos a los minutos (es decir, le diramos que queremos las 20:65) la horaresultante son las 21:05 ya que se recalcula todo automticamente. Es importantehacer estas sumas y restas con la fecha completa (como de hecho lo estamoshaciendo) porque podemos comenzar la cuenta cerca de las 00:00 de la noche y sislo considerramos la hora nos conducira a errores.

Ahora que ya sabemos la hora objetivo lo nico que hacemos es cambiar el textodel botn para que ponga Parar, pintamos el tiempo inicial (con una funcinpintarTiempo que no es interesante para el propsito de este ejemplo) y lanzamos untemporizador que llamar cada 900 ms a una funcin llamada tick.

Fjate en que se almacena el identificador del temporizador en la variable globalidTimer. Con este identificador global conseguimos dos cosas: poder parar eltemporizador cuando queramos, y averiguar si est actualmente en marcha o no (es la

condicin del if con el que comienza la funcin). Si est parado se hace lo queacabamos de ver, y si est en marcha se detiene con una llamada a clearTimer, dejandoel resto de elementos comoestaban.

La funcin ticktiene el siguiente aspecto:


37/40


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 funcin lo que hace es averiguar la diferencia que existe entre la hora objetivocalculada en la funcin anterior y la hora actual. En JavaScript cuando se restan dosfechas se obtiene la diferencia entre stas en milisegundos. As que si la dividimosentre 1000 tenemos la diferencia entre ambas en segundos, que es lo que nos interesapara pintar el contador regresivo.

Nota: Hay que tener mucho cuidado con las operaciones que se realizan confechas. Si restamos dos fechas obtenemos su diferencia como era de esperar. Sinembargo si se suman dos fechas (fecha1 + fecha2) lo que conseguimos estransformarlas 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 sentidomatemticamente, mientras que restarlas s. Si lo que queremos es sumar undeterminado 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 funcinsetXXXXcorrespondiente sumndole 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 yhora actual y la objetivo, si sta es menor que cero es que ya la hemos sobrepasado ypor lo tanto debemos parar el contador, para lo cual llamamos a comenzarParar (raaelse del condicional). Si todava estamos en el intervalo lo nico que tenemos quehacer es ver cuntos minutos y segundos faltan:

Minutos: dividimos la diferencia en segundos entre 60 (hay 60 segundos enun minuto) y nos quedamos con la parte entera.

Segundos: nos quedaremos con el resto de la divisin 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 cmo se trabaja con diferencias

entre fechas, que no es tan obvio como podra parecer a priori. En el correspondientearchivo descargable (Cod07_05.htm) est el cdigo completo con comentarios para suestudio. Tiene algunas otras cosas interesantes, como por ejemplo el uso de media


38/40


queries de CSS3 para adaptar automticamente y en tiempo real el tamao delcontador al tamao de la pantalla que lo muestra.


39/40


40/40

Documents

107510173 Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press