Anda di halaman 1dari 193

Gua Prctica

JavaScript
Edicin 2012
Astor de Caso Parra

www.FreeLibros.com

JavaScript Edicin 2012

www.FreeLibros.com

JavaScript Edicin 2012

Astor de Caso Parra

M U L TIM E D IA *

www.FreeLibros.com

G U A S P R C T IC A S

"Aunque los perros no programan; Yembo, form as parte de esta gua."

Reservados todos los derechos. El contenido de esta obra est protegido por la Ley, que establece penas de prisin y;/o multas, adems de las correspondientes indemnizaciones por. daos y perjuicios, para quienes reproduje- ; ren, plagiaren, distribuyeren o comunica ren pblicamente, en todo o en parte, una obra literaria, artstica o cientfica, o su transformacin, interpretacin o ejecucin artstica fijada en cualquier tipo de soporte o comunicada a travs de cualquier medio, sin la preceptiva autorizacin.

EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2012 Juan Ignacio Luca de Tena, 15. 28027 Madrid Depsito legal: M.38.836-2011 ISBN: 978-84-415-3048-5 Printed in Spain Impreso en: Closas-Orcoyen, S.L.

www.FreeLibros.com

Agradecimientos
Gracias a todos los lectores de la anterior edicin porque van a hacer posible que futuros nuevos lectores puedan aprender tanto como ellos. Tambin quiero dar las gracias a Anaya por confiar en m de nuevo para desarrollar esta nueva edicin. Por supuesto, gracias a m i familia y amigos ms cercanos por apoyarme tanto o ms que la vez anterior.

Indice

Introduccin........................................................................................ .. De qu trata este libro?............................................................... 15 Navegadores W e b ..........................................................................15 Herramientas para programar en Jav aScrip t....................... 17 Notas fin ales.....................................................................................\ j Cmo usar este lib ro ........................................................................... 19 Conocimientos p rev io s................................................................. 20 Estructura del libro.........................................................................20 Cdigo fuente...................................................................................20 1. Introduccin a Jav aScrip t.............................................................21 1.1. Versiones de JavaScript y los navegadores................... 23 1.2. Integracin con H TM L......................................................... 25 1.3. Sintaxis del lenguaje.............................................................. 26 1.3.1. M aysculas y m insculas.......................................27 1.3.2. C om entarios................................................................ 27 1.3.3. Separacin de instrucciones....................................28 1.4. Navegadores sin soporte JavaScrip t................................ 29
2 . Variables, tipos de datos y expresiones regulares................31 2 .1 . V ariables....................................................................................31 2 . 1 . 1 . Declaracin de v ariab les......................................... 32 2.1.2. Y las constantes?.......................................................33 2 .2 . Tipos de d atos..........................................................................34 2 .2 . 1 . N m eros........................................................................35

www.FreeLibros.com

2.2.2. L gicos........................................................................36 2.2.3. Cadenas.......................................................................37 2.2.4. O b jeto s................. ......................................................39 2.2.5. Valores especiales....................................................40 2.3. Expresiones regulares...........................................................41 2.3.1. Escribir una expresin reg u la r.............................41 2.3.2. Usar parntesis dentro de una expresin regular...........................................................................47 2.3.3. M odificadores............................................................ 48 2.4. Expresiones regulares tiles............................................... 49 3. Operadores y conversin entre tipos.........................................51 3.1. Operadores en JavaScript....................................................51 3.1.1. Operador de asignacin..........................................51 3.1.2. Operadores aritm ticos...........................................51 3.1.3. Operador sobre cadenas......................................... 57 3.1.4. Operadores l g ico s.................................................. 58 3.1.5. Operadores condicionales o de com paracin......................................... 59 3.1.6. Operadores sobre bits o b in arios.........................62 3.1.7. Operadores especiales.............................................71 3.1.8. Precedencia de los operadores............................. 74 3.2. Conversin entre tipos.........................................................75 3.2.1. Conversin im plcita................................................75 3.2.2. Conversin exp lcita................................................76 4. Estructuras de control...................................................................79 4.1. Estructuras condicionales...................................................80 4.1.1. Sentencia if - e ls e ...................................................... 80 4.1.2. Sentencia switch - case............................................ 83 4.2. Estructuras de b u cle............................................................. 86 4.2.1. Sentencia for............................................................... 86 4.2.2. Sentencia do - w h ile................................................ 89 4.2.3. Sentencia w h ile......................................................... 90 4.2.4. Sentencias break y continu.................................. 91 4.3. Estructuras de manipulacin de ob jetos...................... 92 5. Funciones......................................................................................... 93 5.1. Declaracin de funciones................................................... 93 5.2. Parm etros..............................................................................96
8

5.2.1. Definicin de parm etros..................................... 96 5.2.2. M ltiples parm etros............................................. 98 5.2.3. Parmetros obligatorios y opcionales.............. 99 5.3. Valores de retorn o...............................................................101 5.3.1. M ltiples valores de re to rn o ............................ 103 5.4. Funciones predefinidas..................................................... 104 5.4.1. Funcin N u m ber................................................... 104 5.4.2. Funcin String.........................................................105 5.4.3. Funcin isN aN ........................................................105 5.4.4. Funcin isF in ite..................................................... 106 5.4.5. Funcin parselnt.................................................... 107 5.4.6. Funcin parseFloat................................................109 5.4.7. Funcin escape....................................................... 109 5.4.8. Funcin unescape..................................................110 5.4.9. Funcin ev al............................................................ 111 5.5. mbito o alcance de las variables................................. 112 5.5.1. mbito lo cal............................................................112 5.5.2. mbito g lo b al........................................................ 114 5.5.3. Prioridad de las variables................................... 115
6 . Programacin orientadaa objetos........................................... 117

6.1. Definicin de un objeto (constructor).......................... 118 6.2. Trabajar con objetos............................................................ 119 6.2.1. Definicin de propiedades en un objeto......120 6.2.2. Definicin de m todos......................................... 121 6.3. Estructuras de manipulacin de o b jeto s..................... 124 6.3.1. Sentencia for - in .................................................... 125 6.3.2. Sentencia w ith........................................................ 126 7. Objetos de Jav aScrip t..................................................................129 7.1. Objetos en v oltorio.............................................................. 129 7.1.1. Objeto Boolean....................................................... 129 7.1.2. Objeto N um ber...................................................... 131 7.1.3. Objeto S trin g ...........................................................134 7.2. Objeto A rray......................................................................... 139 7.2.1. Constructor.............................................................. 139 7.2.2. Trabajar con un array........................................... 140 7.2.3. Propiedades y m todos.......................................145 7.2.4. Arrays m ultidim ensionales............................... 149 7.2.5. Arrays en elementos de JavaScript..................156
9

www.FreeLibros.com

7.3. Objeto D ate.......................................................................... 159 7.3.1. Constructor...............................................................160 7.3.2. Propiedades y m tod os........................................161 7.3.3. Trabajar con fechas................................................ 164 7.4. Objeto M ath .........................................................................167 7.4.1. Constructor...............................................................167 7.4.2. Propiedades y m tod os......................................167 7.5. Objeto RegExp...................................................................170 7.5.1. Constructor...............................................................170 7.5.2. Propiedades y m tod os........................................171
8 . Objetos del navegador (D O M )..............................................175

9. Form ularios................................................................................. 201 9.1. Form ularios en H T M L ....................................................... 201 9.1.1. Form ulario................................................................. 201 9.1.2. Campos de entrada de d atos...............................204 9.1.3. Campos de seleccin de datos............................ 207 9.1.4. Botones........................................................................210 9.1.5. Resumen de tipos de elementos <INPUT>.... 213 9.2. Formularios en JavaScrip t................................................ 214 9.2.1. Form ulario.................................................................214 9.2.2. Campos de entrada de d ato s.............................. 217 9.2.3. Campos de seleccin de datos............................ 221 9.2.4. Botones........................................................................226 9.2.5. Resumen de tipos de cam p os............................. 228 9.3. Validar datos de un form ulario...................................... 228 9.3.1. Definir form ulario.................................................. 229 9.3.2. Validacin del nom bre de usuario.................... 230 9.3.3. Validacin de la contrasea.................................231 9.3.4. Validacin del em a il.............................................. 231 9.3.5. Validacin del idiom a............................................232 9.3.6. Validacin del envo de publicidad..................233 9.3.7. Funcin principal de v alid acin ........................233 9.3.8. Ejecutar la validacin.............................................234 10. E v en tos.......................................................................................... 237 10.1. Eventos en JavaScript........................................................237 10.2. Eventos en una pgina H TM L....................................... 238 10.3. Trabajar con ev en to s.........................................................239 10.3.1. Manejadores como atributos H TM L................240 10.3.2. Trabajar con eventos en JavaScrip t.................. 251 10.4. El objeto ev en t..................................................................... 258 10.4.1. Propiedades............................................................. 259 11. C ookies.......................................................................................... 263 11.1. Trabajar con cookies.......................................................... 265 11.1.1. Estructura de una cook ie.....................................265 11.1.2. Almacenar una co o k ie......................................... 267 11.1.3. Recuperar una cookie........................................... 268 11.1.4. Modificar una co o k ie ........................................... 272 11.1.5. Borrar una cookie................................................... 272 11.2. Ejemplos prcticos............................................................. 273

8.1. Compatibilidad entre navegad ores...........................175 8.2. Objeto w indow ..................................................................176 8 .2 .1 . Colecciones de objetos.......................................176 8.2.2. Propiedades...........................................................177 8.2.3. M tod os................................................................. 179 8.3. Objeto n avigator............................................................... 185 8.3.1. Propiedades.......................................................... 186 8.3.2. M todos................................................................. 188 8.4. Objeto screen .....................................................................188 8.4.1. Propiedades............................................................ 188 8.5. Objeto history....................................................................189 8.5.1. Propiedades.......................................................... 189 8.5.2. M todos................................................................. 189 8 .6 . Objeto location ...................................................................190 8.6.1. Propiedades.......................................................... 190 8.6.2. M todos................................................................. 191 8.7. Objeto docu m en t.............................................................. 192 8.7.1. Colecciones de objetos.......................................192 8.7.2. Propiedades.......................................................... 193 8.7.3. M todos................................................................. 194 8 .8 . Objeto an chor..................................................................... 195 8.8.1. Propiedades............................................................ 195 8.8.2. M todos...................................................................196 8.9. Objeto lin k ............................................................................ 196 8.9.1. Propiedades............................................................ 196 8.9.2. M todos...................................................................198 8.10. Objeto im a g e .......................................................................198 8 .10.1. Propiedades.............................................................198
10

www.FreeLibros.com

11.2.1. 11.2.2. 11.2.3. 11.2.4.

Almacenar y recuperar una co o k ie.................. 273 Expiracin de co o k ies...........................................275 Modificar una co o k ie ........................................... 277 Borrar una cookie................................................... 278

C.7. R eg E xp ................................................................................... 340 C.7.1. Propiedades..............................................................341 C.7.2. M to d o s.....................................................................341 I ). Objetos del navegador (D O M )............................................... 343 D.l. Objeto w indow .................................................................... 343 D .l.l. Colecciones de ob jetos..........................................344 D .l.2. Propiedades.............................................................. 344 D.1.3. M to d o s.................................................................... 345 D.2. Objeto n av ig ato r................................................................. 346 D.2.1. Propiedades..............................................................347 D.2.2. M to d o s.................................................................... 347 D.3. Objeto scre en ........................................................................347 D.3.1. Propiedades..............................................................348 D.4. Objeto h istory .......................................................................348 D.4.1. Propiedades.............................................................. 348 ' D.4.2. M to d o s.....................................................................348 D.5. Objeto lo ca tio n .....................................................................348 D.5.1. Propiedades.............................................................. 349 D.5.2. M to d o s..................................................................... 349 D.6 . Objeto d o cu m en t................................................................ 349 D.6.1. Colecciones de ob jetos.......................................... 349 D.6.2. Propiedades.............................................................. 350 D.6.3. M tod o s..................................................................... 350 D.7. Objeto a n ch o r....................................................................... 351 D.7.1. Propiedades.............................................................. 351 D.7.2. M to d o s..................................................................... 351 D.8 . Objeto lin k ............................................................................. 351 D.8.1. Propiedades.............................................................. 351 D.8.2. M to d o s..................................................................... 352 D.9. Objeto im age..........................................................................352 D.9.1. Propiedades.............................................................. 352 E. Formularios en Jav aScrip t......................................................... 353 E .l. Form ulario..................................... .................................... 353 E .l.l. Colecciones de objetos.......................................... 353 E .l.2. Propiedades.............................................................. 353 E.1.3. M to d o s..................................................................... 354 E.2. Campos de entrada de d a to s .......................................... 354 E.2.1. Propiedades...............................................................354
13

12. Ejemplos p rctico s...................................................................279 12.1. 12.2. 12.3. 12.4. 12.5. 12.6. 12.7. M ostrar un texto ro tativ o................................................ 279 Calcular la letra del DN I.................................................. 282 Un reloj despertador.........................................................284 Calcular los caracteres restantes de un SM S.............291 La ventana que escap a..................................................... 294 Acceso restringido mediante una contrasea.......297 Las tres en ra y a ...................................................................302

13. Un paso ms all de JavaScript..............................................319 13.1. D H TM L................................................................................. 319 13.2. A JA X....................................................................................... 323 13.3. jQ uery.....................................................................................325 A. Palabras reservadas..................................................................... 329 B. Precedencia de operadores........................................................ 331 C. Referencia rpida a los objetos de JavaScript..................... 333 C .l. Boolean....................................................................................333 C.2. N u m b er.................................................................................. 333 C.2.1. Propiedades.............................................................. 334 C.2.2. M tod os.....................................................................334 C.3. S trin g .......................................................................................334 C.3.1. Propiedades.............................................................. 335 C.3.2. M tod os.....................................................................335 C.4. Array........................................................................................336 C.4.1. Propiedades.............................................................. 336 C.4.2. M todos.....................................................................336 C.5. D ate..........................................................................................337 C.5.1. Propiedades..............................................................338 C.5.2. M tod os.....................................................................338 C.6 . M ath.........................................................................................339 C.6.1. Propiedades..............................................................339 C.6.2. M todos.....................................................................340
12

www.FreeLibros.com

E.2.2. M tod o s.................................................................... 354 E.3. Campos de seleccin de d atos.............................................. ............ 355 E.3.1. Colecciones de objetos..........................................355 E.3.2. Propiedades..............................................................355 E.3.3. M tod os.................................................................... 356 E.4. Botones..................................................................................356 E.4.1. Propiedades..............................................................356 E.4.2. M todos............................................................ ......357 E.5. Resumen de tipos de cam pos..........................................357 F. Caracteres y modificadores de las expresiones regulares........................................................................................359 F .l. F.2. F.3. F.4. F.5. F. 6 . Caracteres de rep eticin ...................................................359 Caracteres especiales......................................................... 360 Agrupacin de valores......................................................360 Caracteres de p osici n ......................................................361 M odificad ores..................................................................... 361 Expresiones regulares tiles............................................361

Introduccin

De qu trata este libro?


Esta gua prctica est dirigida a personas que, como yo hace unos aos, sienten la necesidad de hacer sus pginas Web ms tiles o atractivas de lo que son ahora. El HTML a secas se queda pequeo cuando nos surge la necesidad de interactuar con el usuario que visita nuestra pgina para que nos enve una sugerencia o sencillamente para que vea lo bonito que queda que los botones cambien de color al pasar sobre ellos. Por esta razn, ha decidido que era el momento de ir un paso ms all y aprender un lenguaje de programacin Web como JavaScript comprando este libro, cosa que le agradezco desde este momento. Mi intencin no es llenarle la cabeza con tecnicismos que le dejen una sensacin de vaco y de no haber aprendido nada, aunque hay ciertos trminos que son imposibles de simplificar. Pese a ello, en la medida de lo posible, intentar que todas las explicaciones sean claras y concisas, acompandolas de un ejemplo si eso mejora la compresin.

ndice alfabtico................................................................................ 363

Navegadores Web
Todo aquel que desarrolle sitios W eb se encuentra ante un pequeo muro cuando visualiza el sitio en los distintos navegadores del mercado: las pginas no funcionan igual o ni siquiera se muestran de la misma manera. Un navegador no hace ms que interpretar cdigo HTML, ajustndose lo ms posible a unos estndares fijados, para despus plasmarlo en la pantalla del usuario de forma grfica. Por desgracia, algunos
14 15

www.FreeLibros.com

de ellos se desvan ms que otros de esos estndares y, como consecuencia directa, ma misma pgina puede tener distintas interpretaciones, de modo que recae sobre el desarrollador el hacer que sus pginas sean compatibles con todos o el mayor nmero posible de navegadores, m ediante pequeos ajustes o "trucos". Qu se debe tener en cuenta a la hora de intentar que nuestra pgina sea lo ms compatible posible? Dado que sera una tarea interminable el ajustarse a todos y cada uno de los navegadores y sus versiones, se opta por lo ms razonable: ajustar nuestro cdigo a los navegadores ms utilizados. Hasta hace no mucho, exista una clara predom inancia del navegador de M icrosoft (Internet Explorer), con una cuota al rededor del 60 por ciento, seguido por otros navegadores que poco a poco han ido ganando adeptos. Esto no quiere decir que Internet Explorer fuera el m ejor navegador, de hecho es uno de los m s criticados por ser de los que ms se intentan alejar de los estndares para im poner el suyo propio. En los dos ltim os aos la cosa ha cam biado bastante y el uso de Internet Explorer ha llegado a bajar del 40 por ciento. Adems hay que sum ar la aparicin de un nuevo tipo de usuario que est en pleno auge: los que usan Sm artphones o tabletas. Veam os entonces una lista con el resto de navegadores que tienen una presencia importante en la W eb hoy en da: FireFox: D esarrollado por M ozilla, fue el rival m s directo de Internet Explorer y actualmente tiene cerca de un 27 por ciento de cuota de m ercado. Por tanto, es una opcin a tener en cuenta para hacer nuestras pginas compatibles con l. Chrome: N avegador introducido por Google que ha alcanzado rpidam ente una cuota del 20 por ciento, convirtindose en un serio adversario. Safari: Estamos ante el navegador de Apple, eterno ad versario de Microsoft. Aunque dispone de una versin para W indows, su uso est ms centrado en sistemas de la propia com paa: ordenadores M ac y sus iAmigos (iPhone, iPad). Su cuota est alrededor del 7 por ciento. Opera: Este navegador, desarrollado por Opera Software, cuenta con una discreta cuota que supera ligeramente el 2 por ciento pese a ser un buen producto y estar presente en varios Sm artphones en su versin Opera Mini.

Herramientas para programar on JavaScript


Por suerte para nosotros, JavaScript no requiere que instaIrmos y aprendamos a usar complejos entornos de desarrollo 111tino pudiera ser Visual Studio o Eclipse) para escribir cdigo 111 nuestras pginas. Quiz se sorprenda si le digo que le ser suficiente con iln*r utilizar el bloc de notas de Windows o cualquier otro i'ilitor de texto en su forma ms bsica. Tambin puede que me II.une mentiroso porque un conocido suyo le haya comentado iitu* existen editores especficos para JavaScript. Bien, djeme i Henderme;). Es cierto que hay editores avanzados (como l.iv.iScript Plus o Antechinus), pero la ventaja que ofrecen es l.ilie facilitar la tarea de escribir cdigo sin tener que recordar li mlos los nombres de funciones o propiedades. Reconozco que i"ila ayuda es de agradecer cuando se trabaja intensivamente i on JavaScript, pero para aprender a manejarlo (como ser su i .iso si ha adquirido este libro) le recomiendo utilizar un editor i Ir lexto bsico para familiarizarse con la sintaxis. Iara ver el resultado de nuestro trabajo no tendrem os ni.is que abrir nuestra pgina con el navegador que tengamos Instalado. Sin ms.

Notas finales
Ser un "crack" de JavaScript no es algo que se consiga en | i lince das puesto que conocer el funcionamiento de muchas i* sus partes requiere cierta prctica, y ms an si contamos con todas las tcnicas que se basan en l (DHTML, A JA X ...). Con este libro podr construir una slida base de conoi imientos que le permitir enfrentarse a cualquier reto que l.ivaScript pudiera proponerle.

16

17

www.FreeLibros.com

Cmo usar este libro

No, no se asuste. A pesar del ttulo de este apartado, no Ia comprado un m anual de instrucciones sino una gua para .1prender JavaScript. El objetivo entonces de este apartado es adelantarle un poco con lo que se va a encontrar en cuanto | '.ise unas pginas. til motivo que posiblemente le habr llevado a adquirir esta una es porque alguien o algo (un sitio W eb normalmente) le h.i revelado una palabra, una tecnologa, un lenguaje nuevo ilrl que desconoca su existencia o slo lo conoca de odas: JilvaScript. Esto, por supuesto, le ha llamado la atencin y ha dividido lanzarse a aprenderlo para aprovechar su potencial V versatilidad aplicndolo a sus pginas. Bien por ello! No le defraudar en absoluto. Aunque en esta gua se comience desde cero, cuando la termine tendr conocimientos ms que suficientes para empezar .1 dar un toque de color a sus pginas, y ya ver como con el I lempo querr ms y ms. Y lo m ejor de todo es que JavaScript le ofrecer ms y ms posibilidades, puesto que su potencial no acaba en la ltima hoja de este libro ni mucho menos, todava Ir quedar mucho a lo que sacarle jugo. Sin embargo, las cosas no se hacen solas (vale, las puede 11ipiar de Internet... pero eso no es aprender JavaScript) y por i*lio le animo a intentar aportar su granito de arena mientras liv cada captulo, escribiendo sus propios ejemplos (por muy Ion tos que sean) y tratando de jugar con las opciones que tengamos a nuestro alcance. Con esto s podr llegar a ad quirir bastante soltura en este lenguaje y ser capaz de detectar lapidamente cul es la lnea de cdigo que no funciona bien, " incluso poder adaptar a otras necesidades un cdigo que tuviera hecho para otro propsito.
19

www.FreeLibros.com

Conocimientos previos
Aunque aqu se van a explicar todos los conceptos y los elementos utilizados en los ejemplos, podra ser ligeramente favorable tener unos conocim ientos sobre H TM L pues es la base donde opera JavaScript. De todas formas no se va a realizar un uso intensivo de las decenas de etiquetas HTML sino de algunas muy bsicas como los encabezados, enlaces o tablas. Por otro lado, si ha programado antes en cualquier lenguaje, sin duda leer este libro con ms soltura, sin detenerse en ciertos puntos, pero si no lo ha hecho nunca tampoco debe preocuparle puesto que lo que va a aprender a continuacin es justamente un lenguaje de programacin, y todos los trminos y elementos que se utilizan quedan detallados.

1
Introduccin a JavaScript

Estructura del libro


Se podra decir que este libro es como una escalera, puesto que no podemos llegar al peldao ms alto sin pasar antes por los dems. Por ello se ha intentado ir paso a paso con los captulos, sin utilizar elementos antes de ser explicados (cosa que a veces no ha resultado fcil), para as cubrir irnos conocimientos mnimos necesarios para explicar el siguiente captulo. Adems, cada captulo siempre tiene unos ejemplos asociados, que los considero fundamentales para comprender m ejor algo con lo que nunca se ha tenido contacto antes. Ahora le dejo que se sumerja en el amplio mundo de JavaS cript y espero que le resulte fcil la lectura de esta gua. Nos vemos en el ltimo captulo!

El lenguaje de programacin JavaScript se utiliza en las pginas Web para cubrir las carencias que deja el HTM L a secas. Incorporando este lenguaje a nuestras pginas logramos incrementar la funcionalidad de las mismas y la interaccin con el usuario, lo que se traduce en unas pginas ms dinmicas. Algunos ejemplos de su utilidad podran ser: Validar los datos introducidos en un formulario. Detectar el navegador que est utilizando el usuario. Almacenar informacin del usuario para que no tenga que v olv er a ser introducida en la siguiente visita (Cookies). El cdigo que escribamos en nuestras pginas ser inter pretado directamente por el navegador que estemos usando, de modo que el servidor Web no interpreta ni ejecuta nuestro cdigo. Esto lo convierte en un lenguaje del lado cliente, al contrario de lo que ocurre con lenguajes como PHP o ASP, donde todo se ejecuta en el lado del servidor. Si repasam os un poco la historia desde la aparicin de Internet, nos encontramos con que se em pezaron a necesitar una serie de funcionalidades en las pginas a principios de los 90 que el HTML no era capaz de satisfacer por s solo. Un caso m uy claro fue la validacin de formularios en el servidor Web, ya que la nica manera posible por entonces era enviar los datos al servidor para que ste devolviera una respuesta al usuario incluyendo los errores encontrados, si los hubiera. Otra circunstancia que agravaba este ir y venir de datos es que en esa poca la velocidad de conexin a Internet no era muy alta (del orden de decenas de kbps, frente a los mbps de hoy en da), por lo que surgi la necesidad de comprobar los
21

Cdigo fuente
Para desarrollar los ejemplos, puede optar por introducir de forma m anual el cdigo o utilizar los archivos de cdigo fuente que acompaan al libro. En el sitio W eb de A naya M ultim edia: h t t p : //www . a n a y a m u l t i m e d i a . e s / , dirjase a la seccin S o p o rte t cn ico > C o m p le m e n to s, donde encontrar una seccin de dicada a este libro introduciendo el cdigo 2335597.
20

www.FreeLibros.com

campos de los formularios en el propio navegador del usuario, es decir, antes de enviar nada al servidor. Con esto se conse guiran principalm ente dos cosas: 1. Evitar largas esperas al usuario con la respuesta del ser vidor para subsanar un error, por pequeo que fuera. 2. Liberar al servidor de realizar este tipo de operaciones, con lo que la respuesta sera m s rpida al tener que realizar m enos trabajo. Brendan Eich, durante su trabajo en la em presa Netscape Communications, desarroll un lenguaje capaz de dar solu cin a este problema, apareciendo por prim era vez en el nave gador Netscape 2.0 con un gran xito. Inicialm ente lo llamaron M ocha, ms tarde LiveScript y finalm ente fue rebautizado como JavaScript cuando Netscape se ali con Sun Microsystems (creadores del lenguaje Java). Nota: Es importante no confundir Java con JavaScript ya que, si bien su nombre y sintaxis son similares, su propsito y complejidad son muy distintas. Despus del lanzamiento de la primera versin de JavaScript, M icrosoft (autores del navegador rival de Netscape, Internet Explorer) desarroll su propio lenguaje del lado del cliente, al que denominaron JScript, que no era m s que una copia de JavaScript adaptada a su propio navegador. M s adelante de sarrollaran tambin VBScript, basado en Visual Basic. Nota: JavaScript es soportado por cualquier navegador gr fico actual, mientras que JScript y VBScript slo pueden ser utilizados junto con Internet Explorer. El uso de JavaScript se ha ido extendiendo y evolucionando a medida que la complejidad de las pginas lo requera. De este modo podemos encontrarnos con tcnicas de desarrollo como: DHTM L (Dynamic HTML): m ediante el uso de HTML, CSS y JavaScript esta tcnica es capaz de crear efectos visuales y aumentar la interactividad con el usuario. Por ejemplo, podemos crear un m en desplegable de forma que al pasar el puntero del ratn por encima de cada opcin del men aparezcan a su lado las opciones que tiene asociadas.
22

AJAX (Asynchronous JavaScript And XML ): es una tcnica capaz de solicitar datos adicionales al servidor en un segundo plano sin recargar o influir en la pgina que se est mostrando en el mismo momento. Lo normal es que la pgina se recargue por completo para poder mostrar la nueva informacin. Por ejemplo, si un usuario escribe las primeras letras del ttulo de una pelcula en un cuadro de texto, se pueden solicitar las coincidencias con un listado completo y mostrrselas al usuario para que elija. En el captulo 13 puede encontrar una descripcin un poco ms amplia sobre estas tcnicas, a modo informativo ya que no son el objetivo de esta gua. Le recomiendo que, una vez haya adquirido los conocimientos sobre JavaScript mediante los captulos siguientes, consulte otros libros de esta editorial, como "CSS, DHTM L y AJAX", el cual tuve ocasin de leer y me sirvi de gran ayuda para ampliar mis conocim ientos y aadir funcionalidades a mis pginas que antes me parecan muy complejas.

1.1. Versiones de JavaScript y los navegadores


Con el paso del tiempo se han ido implementando nuevas y ampliadas versiones de JavaScript para soportar nuevas funcionalidades, lo cual obliga a actualizar los navegadores, dado que es donde se interpreta el cdigo, y as poder mostrar correctamente una pgina que utilice estas nuevas versiones. Por todo esto, el prim er problem a al que se enfrentaba un program ador de cdigo JavaScript es que los usuarios no siempre tenan la ltim a versin de los navegadores y, por tanto, algunas instrucciones podran no ser reconocidas. Actualmente es raro encontrar un navegador que no soporte al menos la versin 1.5 de JavaScript (vase la tabla 1.1) aunque seguimos teniendo otros problemas a la hora de escribir nuestro cdigo por la existencia de distintos DOM (Document Object Model). Al cargar una pgina, los navegadores crean una jerar qua de objetos, cada uno de los cuales representa un elemento de la misma. Esta jerarqua es la que permite a los desarrolladores acceder y manipular todos los elementos que contiene dicha pgina (por ejemplo, guardar el telfono introducido en un formulario). Aunque existe un estndar definido para
23

www.FreeLibros.com

crear el DOM, en algunos navegadores o incluso en distintas versiones del mismo navegador, los objetos no siem pre se com portan igual. Siempre que programemos un cdigo JavaScript es con veniente probarlo en distintos navegadores para asegurar su correcto funcionamiento. En otro caso, estaremos dejando que un grupo de visitantes de nuestra pgina no pueda visualizarla correctamente o incluso que no pueda interactuar con ella. Tabla 1.1. Versiones de JavaScript y navegadores que las
soportan. Versin JavaScript 1.0 1.1 1.2 1.3 1.4 1.5 Navegador Netscape (2.0) Netscape (3.0) Netscape (4.0-4.05) Netscape (4.06-4.7x), Internet Explorer (4.0) Netscape Server Netscape (6.0), Internet Explorer (5.5-8.0), FireFox (1.0), Opera (6.0-9.0), Chrome (1.0), Safari (3.0.5) FireFox (1.5) FireFox (2.0), Safari (3.x) FireFox (3.0), Opera (11.5) FireFox (3.5) FireFox (3.6) FireFox (4.0), Internet Explorer (9.0) 1

versiones. Por tanto, no es recomendable utilizar caractersticas de la ltima versin si queremos que nuestro cdigo pueda ser ejecutado por el mayor nmero posible de navegadores. En su versin 1.3, Netscape Com munications present su lenguaje a ECMA (European Computer Manufacturers Association), organizacin que se encarga de crear estndares con el fin de facilitar el uso de las Tecnologas de Informacin. Como resultado de esta estandarizacin, surgi la especificacin ECMAScript, a la cual se ajust JavaScript en las versiones posteriores. Tabla 1.2. Versiones ECMAScript adaptadas en JavaScript.
Versin ECMAScript ECMA-262 (2a edicin) ECMA-262 (3a edicin) ECMA-262 (5a edicin) Versin JavaScript 1.3 1.5 1.8.5

1.2. Integracin con HTML


Para poder insertar nuestro cdigo JavaScript dentro de una pgina HTML, disponemos de la etiqueta <SCRIPT>. Su contenido ser interpretado y/o ejecutado segn se vaya cargando la pgina. Esta etiqueta debe usarse junto con el atributo TYPE, el cual es obligatorio. A nteriorm ente se utilizaba el atributo LANGUAGE, pero hace tiempo que est en desuso. Para el caso de JavaScript, debemos etiquetar nuestro cdigo de la siguiente manera:
<SCRIPT TYPE="text/javascript"> Nuestro cdigo </SCRIPT>

1.6 1.7 1.8 1.8.1 1.8.2 1.8.5

Nota: La tabla 1.1 refleja los navegadores que tienen un soporte total o muy cercano sobre la versin de JavaScript correspondiente. An as, existen versiones ms recientes de navegadores que soportan parte de las funcionalidades de versiones superiores de JavaScript. Cada versin de JavaScript es compatible hacia atrs con las antiguas, es decir, un cdigo escrito para una versin con creta siempre ser ejecutado correctamente en las siguientes
24

Si el cdigo utiliza alguna caracterstica especial de una versin en concreto, podremos especificarla de la siguiente manera: TYPE="text/javascript; version=l.6". En caso de que el navegador no la soporte, ignorar el cdigo que contenga esa etiqueta. Cuando tenemos un cdigo muy extenso y queremos reutilizarlo en otras pginas, podramos pensar que tendramos que escribirlo repetidas veces haciendo que su mantenim iento sea difcil pero, afortunadamente para nosotros, existe la posibi
25

www.FreeLibros.com

lidad de meterlo en un fichero con extensin ".js" y utilizar adems el atributo SRC de la etiqueta <SCRIPT> para incluirlo en todas las pginas que lo necesiten, suponiendo un esfuerzo bastante menor:
<SCRIPT TYPE="text/javascript" SRC="mi_codigo.js"> </SCRIPT>

1.3.1. Maysculas y minsculas


JavaScript es capaz de distinguir maysculas y minsculas en los nombres de variables, funciones u otros objetos. Por tanto, no ser lo mismo la variable posicion que la variable Posicion o incluso que una tercera llamada POSICION, pu diendo estar definidas todas a la vez y con valores totalmente distintos. Debemos tener cierto cuidado mientras escribimos nuestro cdigo, ya que estos pequeos matices pueden dar algn que bradero de cabeza, sobre todo las primeras veces que progra memos en JavaScript. Por norma general se usarn las m insculas para evitar este tipo de conflictos, aunque ya veremos que se usan algunas reglas (recomendadas pero no obligatorias) para mejorar la lectura y comprensin del cdigo.

En este caso, si escribim os cdigo adicional dentro de la etiqueta <SCRI PT>, ste ser ignorado por el navegador dado que estam os usando el atributo SRC.
<SCRIPT TYPE=text/javascript" SRC="mi_codigo.js"> Lo que pongamos aqu no se ejecutar </SCRIPT>

H ay dos sitios dentro de una pgina donde podemos situar nuestro cdigo, el nmero de veces que queramos: 1. Dentro de la etiqueta <HEAD>. Esta posicin se suele utilizar normalmente para cargar ficheros externos que vamos a utilizar en otras partes de la misma pgina. 2. Dentro de la etiqueta <BODY>. Aqu se coloca habi tualmente el cdigo que va a realizar acciones sobre la pgina, pudiendo hacer referencia a parte del cdigo cargado dentro de <HEAD>.
<HEAD> <SCRIPT TYPE="text/javascript" SRC=mi_codigo.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> Aqui hago algunas operaciones </SCRIPT> </BODY>

1.3.2. Comentarios
Los comentarios en el cdigo sirven para ayudar al progra mador u otra persona a comprender m ejor su funcionamiento, o simplemente para dejar anotaciones que nos puedan ser de inters (autor del cdigo, fecha en la que se escribi, etc.). Todo texto que se escriba como comentario no ser interpre tado por el navegador, por lo que su contenido es irrelevante para l. Existen dos tipos de comentarios: 1. Lnea simple: se identifican escribiendo dos barras (/ /) al comienzo de la lnea, y van seguidas del texto que queramos etiquetar como comentario. 2. Multilnea: si el comentario es muy extenso o queremos presentarlo en varias lneas, entonces debemos escribir una barra junto a un asterisco (/ *) al principio del texto y un asterisco junto a una barra (* /) al final del mismo.
<SCRIPT TYPE="text/javascript"> // Esto es un comentario corto de una lnea. /* En cambio este otro ocupa ms espacio y, adems,no pasa nada si escribo algo de cdigo como alto = 5; ya que estamos en un comentario. */ ancho = 7 ; // S se ejecuta el cdigo, pero este texto no. /* Esto es slo una lnea, pero tambin es vlido. */ </SCRIPT>

Ya iremos viendo que existen algunas restricciones cuando ponemos nuestro cdigo en el <BODY>.

1.3. Sintaxis del lenguaje


La sintaxis de JavaScript es muy parecida a la de otros len guajes como Java y C, por lo que si ya conoce esos lenguajes se sentir cmodo escribiendo cdigo. De cualquier modo, lo explicarem os a continuacin para que ningn lector tenga problem as a la hora de adentrarse en el m undo JavaScript.

27 26

www.FreeLibros.com

1.3.3. Separacin de instrucciones


Para separar las distintas instrucciones que contiene nuestro cdigo tenemos dos opciones: 1. Escribir un punto y coma ( ; ) al final de cada una de las instrucciones. 2. Insertar un salto de lnea al terminar cada una de las instrucciones. De este m odo, los siguientes ejemplos funcionarn correc tamente en JavaScript:
// Cdigo utilizando punto y coma <SCRIPT TYPE="text/j avascript> numero = 1; cuadrado = numero * numero; </SCRIPT> // Cdigo utilizando salto de linea <SCRIPT TYPE="text/javascript"> numero = 1 cuadrado = numero * numero </SCRIPT>

1.4. Navegadores sin soporte JavaScript


Aunque no es algo comn, puede darse la posibilidad de que el visitante de nuestra pgina est usando un navegador que no soporte JavaScript, o simplemente lo tenga desactivado. En estos casos, todo el cdigo que tengamos escrito no ser interpretado ni ejecutado, por lo que el visitante no ser capaz de ver correctamente nuestra pgina o hacer uso de ella. La causa de esto es que el navegador no reconoce la etiqueta <SCRIPT>, por lo que todo el cdigo que hayamos escrito dentro de ella puede ser ignorado o llegar a ser mostrado como un texto HTML. Para evitar esto ltimo, es bueno marcar el cdigo como un com entario HTML, usando < ! al principio y > al final, con la particularidad de escribir el cierre de co mentario a su vez como un comentario JavaScript para evitar que el navegador lo interprete como parte de nuestro cdigo. Lo explico a continuacin:
<SCRIPT TYPE="text/javascript">

< !-numero = 4 ; cuadrado = numero * numero;

N o siem pre es necesario que cada instruccin comience en una lnea nueva, pero si ponemos varias instrucciones se guidas en la misma lnea entonces estamos obligados a utilizar el punto y coma para separarlas, ya que de otro modo se in terpreta todo como una tnica instruccin, con el consecuente error de sintaxis.
// Varias instrucciones utilizando punto y coma -> Funciona <SCRIPT TYPE="text/j avascript"> alto = 5; ancho = 7; area - alto * ancho; </SCRIPT> // Varias instrucciones sin punto y coma -> Genera un error <SCRIPT TYPE="text/javascript"> alto = 5 ancho = 7 area = alto * ancho </SCRIPT>

// >
</SCRIPT>

Adicionalmente, tenemos un 'a s en la m anga' para advertir al usuario de que su navegador no soporta JavaScript: la eti queta <NOSCRIPT>. El contenido HTML de esta etiqueta slo ser mostrado si el navegador no puede interpretar JavaScript. Veamos un ejemplo:
<HTML> <BODY> <SCRIPT TYPE="text/javascript">

<!
numero = 4; cuadrado = numero * numero;

// >
</SCRIPT> Bienvenido a mi pgina! <NOSCRIPT>Lo siento, pero tu navegador no soporta JavaScript :(</NOSCRIPT> </BODY> </HTML>

N ota: Es aconsejable acostum brarse a escribir cada ins truccin en una nueva lnea y utilizar un punto y coma al fin al para que la apariencia de nuestro cdigo sea clara y se asemeje a la habitual en otros lenguajes, como java o C. A s mismo, un correcto tabulado del cdigo ayudar a mejorar su compresin.
28

Un navegador que soporte JavaScript ejecutar nuestro cdigo y mostrar nicamente el mensaje de bienvenida, m ien tras que los navegadores que no lo hagan ignorarn el cdigo
29

www.FreeLibros.com

y mostrarn tanto el mensaje de bienvenida como el aviso. En lugar de m ostrar slo este aviso, tambin podemos dar la op cin al usuario de dirigirse a una pgina que hayamos creado con aspecto similar, pero sin usar JavaScript.
<NOSCRIPT> Lo siento, pero tu navegador no soporta JavaScript : (<BR> Sin embargo, puedes ver una pgina similar <A HREF="pagina_sin_javascript.html">aqu</> </NOSCRIPT>

2
Variables, tipos de datos y expresiones regulares

A d v erten cia: Si el navegador no soporta la versin de JavaScript que hayamos especificado (por ejemplo la 1.6), tampoco se mostrar el texto contenido en <NOSCRIPT> ya que s es capaz de reconocer la etiqueta <SCRIPT>.

2.1. Variables
Una variable es un espacio de memoria donde almacenamos tem poralm ente un dato que utilizam os en las operaciones dentro de nuestro cdigo como, por ejemplo, el resultado de una suma. Ese dato podr ser recuperado en cualquier m o mento e incluso ser modificado. En el cdigo, cada variable estar identificada por un nombre a nuestra eleccin y que podr estar formado por ca racteres alfanumricos, el carcter guin bajo o subrayado ( ) y el smbolo de dlar ($). La nica restriccin es que no puede comenzar por un nmero. Tambin es im portante destacar que se distingue entre maysculas y minsculas, por lo que la variable suma no ser la misma que la variable SUMA.
Tabla 2.1. Ejemplos de nombres de variables. Nombre vlido dos_numeros nombrel Documento nombreApellidos $dinero Nombre no vlido 2_numeros nombre-1 %Documento nombre&apellidos dinero

Tambin debe tener en cuenta que el nombre de una va riable no puede coincidir con el de una palabra reservada de JavaScript (ver apndice A), ni con el de otro elemento que hayamos definido (funciones u objetos).
30

www.FreeLibros.com

Aunque no hay obligacin para ello, es una buena prc tica usar minsculas en los nombres de variables excepto si se compone de varias palabras, en cuyo caso escribiremos en maysculas la primera letra de cada palabra siguiente a la pri mera. Por ejemplo: nombre, miNombre,miNombreCompleto. Con el uso de esta sencilla regla estaremos haciendo nuestro cdigo ms limpio y fcil de seguir por otro program ador o nosotros mismos a la hora de retomarlo.

Opcionalmente, podemos asignar un valor a la variable al mismo tiempo que se declara, lo cual se conoce como inicializacin, a travs del operador de asignacin = (explicado ms adelante). Esta inicializacin es ineludible si hacemos declara ciones implcitas, como hemos visto hace un momento.
<SCRIPT TYPE="text/javascript"> // Declaracin explcita con inicializacin var alto = 5 ; // Declaracin implcita con inicializacin ancho = 12; // Declaracin explcita mltiple con inicializacin var alto = 5, ancho = 12, profundo = 7; // Declaracin implcita mltiple con inicializacin hora = 14, minutos = 35, segundos = 41; // Declaracin explcita mltiple con y sin // inicializacin var calle, numero = 7, piso = 3; </SCRIPT>

2.1.1. Declaracin de variables


Para utilizar una variable en nuestro cdigo debe estar indicado en alguna parte de ste cul es su nombre y, si pro cede, el valor que le queremos dar. A esto se le conoce como, declaracin de una variable. En la mayora de lenguajes de programacin es obligatorio declarar cada variable antes de utilizarla en el cdigo pero en JavaScript se puede hacer sobre la marcha segn las vayamos necesitando. No obstante, como queremos hacer un cdigo ejem plar, es bueno que nos acostumbremos a declarar las variables antes de darles uso. Para ello existen dos maneras de hacerlo: 1. Declaracin explcita: Consiste en usar la sentencia va r seguida del nombre de la variable. Esta opcin es la recom endada para aadir claridad al cdigo. 2. Declaracin implcita: Es cuando escribim os directa mente el nombre de la variable sin una sentencia previa. En este caso debe ir acompaada obligatoriamente de un valor si no queremos obtener un error de declaracin.
<SCRIPT TYPE="text/j avascript"> // Declaracin explcita var miEdad; // Declaracin implcita (errnea al no tener // un valor) miEdad; // Declaracin implcita (correcta) miEdad = 26; </SCRIPT>

Si declaramos la misma variable ms de una vez y la inicializamos con valores, prevalecer el ltimo que hayamos asignado.
<SCRIPT TYPE="text/javascript"> // Declaracin de la misma variable dos veces // valdr 8) var alto = 5; var alto = 8; </SCRIPT> (alto

Recordemos la importancia de las maysculas y minsculas puesto que estaremos definiendo variables distintas.
<SCRIPT TYPE="text/javascript"> // Declaracin con maysculas y minsculas var alto = 5; var Alto = 8; </SCRIPT>

2.1.2. Y las constantes?


Una constante es un dato cuyo valor no puede ser m odifi cado despus de haber sido inicializado. Esto es til cuando necesitamos trabajar con valores fijos como, por ejemplo, el nmero Pi (3,14). Aunque es posible declarar constantes en JavaScript a travs de la sentencia const, sta slo es soportada desde la versin 1.5 de JavaScript y principalmente por los navegadores basados
33

Tambin es posible declarar explcitamente varias variables a la vez, separando sus nombres por comas:
<SCRIPT TYPE="text/javascript"> // Declaracin explcita mltiple var nombre, apellidos, edad; </SCRIPT>

32

www.FreeLibros.com

en Mozilla (como FireFox), aunque se prev que tenga total in tegracin con la versin 2.0 de JavaScript. Los navegadores que no la soporten ignorarn todas las declaraciones que hagamos utilizando const haciendo que aparezcan errores cuando se intente utilizar una de esas constantes en nuestro script.
<SCRIPT TYPE="text/javascript"> // Declaracin de constantes const pi = 3.14; const valorMaximo = 256; </SCRIPT>

variable puede cambiar su tipo de datos a lo largo de un script sin que esto provoque errores, aunque es poco comn hacer este tipo de acciones.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var edad; I I La variable es un nmero... edad = 30; I I y ahora un texto edad = "treinta"; </SCRIPT>

Si est acostumbrado a program ar en otros lenguajes es posible que lo siguiente le resulte extrao pero, para asegurar el funcionamiento de nuestro cdigo en los distintos navega dores, definiremos nuestras constantes como una variable (a grandes males, grandes remedios!). Para poder diferenciarlas claram ente de las variables nor males, podemos escribir su nombre completamente en mays culas y separaremos las palabras que la form en con guiones bajos o subrayados (_).
<SCRIPT TYPE="text/javascript"> // Declaracin de constantes como variables
var PI = 3.14; var VALOR_MAXIMO = 256;

Nota; En algunos de los ejemplos que veremos a lo largo del libro se utiliza la instruccin a l e r t , cuyo funcionam iento an no hemos explicado, pero de momento le adelanto que nos permite mostrar el valor de una variable en la pantalla. De esta form a podr escribir los ejemplos en su ordenador y comprobar los resultados: a l e r t ( e d a d ) ; A continuacin veremos todos los tipos de datos que m a neja JavaScript.

2.2.1. Nmeros
Como viene siendo habitual, JavaScript se diferencia de nuevo de otros lenguajes de program acin ya que slo tiene un tipo de valor numrico. Por tanto, todo nm ero que es cribamos, ya sea entero o real, ser considerado del mismo tipo. Tambin lo sern los nm eros reales escritos en notacin cientfica mediante el indicador de exponente E o e. Veamos algunos ejemplos:
<SCRIPT TYPE="text/javascript"> // Declaracin de datos de tipo numrico var altura = 5; var precio = 12.65; var temperatura = -3.0; var PI = 3.141592; var seiscientos = 6E2; var sieteMilimetros = 7e-3; var MILLON_Y_MEDIO = 1.5e6; ;/SCRIPT>

</SCRIPT>

7 10

Advertencia: Las constantes definidas con a sentencia v a r dejan de ser variables , por lo que su valor sigue siendo modificable a travs del cdigo. Tenga cuidado de no alterar el valor de una constante.

2.2. Tipos de datos


En nuestro cdigo vamos a utilizar inform acin de distinta clase, como textos o nmeros. Estas clases son las que se co nocen como tipos de valores o tipos de datos, de forma que cada variable o constante que definamos pertenecer a uno de ellos. Una de las muchas particularidades de JavaScript, en su afn por hacer ms cm oda la program acin con este len guaje, consiste en no tener que definir el tipo de una variable al declararla, ser el propio JavaScript el que determine a cul corresponde en funcin del valor asignado. Gracias a esto, una
34

Nota: El separador decimal para los nmeros reales es el punto ( . ) y o la coma ( ,) .


35

www.FreeLibros.com

Adems, los nmeros enteros pueden ser representados en otros sistemas distintos al decimal (base 10 ): Sistem a octal (base 8 ): Utiliza dgitos del 0 al 7 para representar un nmero. Para ello debemos escribir un cero (0) delante del nmero. Este sistema est obsoleto, aunque JavaScript 1.5 mantiene un soporte para l con tal de mantener la com patibilidad hacia atrs. Sistema hexadecim al (base 16): Consta de 16 dgitos: los comprendidos entre el 0 y el 9 y las letras entre la A y la F (minsculas o maysculas). Para representarlo tenemos que escribir un cero y una equis (Ox) antes que el nmero.
Tabla 2.2. Ejemplos de nmeros en distintas bases. Base 10 8 16 10 8 16 16 Nmero 23 027 0x17 127 0177 0x7 F 0x7f Equivalencia en base 10 23 23 23 127 127 127 127

Advertencia: Tenga de nuevo en cuenta la importancia del uso de maysculas y minsculas, ya que JavaScript no reco nocer valores del estilo True o TRUE como un booleano.

2.2.3. Cadenas
Otra clase de inform acin muy comn en los scripts es la cadena de caracteres o string. Este tipo consta de un texto con cualquier carcter (letras, nmeros y smbolos). Las cadenas o strings se escriben en el cdigo entre co m illas dobles (" ) o sim ples ( ' ) pero nunca com binadas. Lo ms habitual es utilizar las com illas dobles para representar un texto.
<SCRIPT TYPE="text/j avascript"> // Declaracin de datos de tipo cadena o string var idioma = "espaol"; var dni = '12345678A'; var direccin = "C/ Mayor, 5"; var FICHERO = "mi_codigo.js"; // Declaracin errnea de datos de tipo cadena o string var pais = "Espaa'; </SCRIPT>

Caracteres especiales
A veces es necesario incluir en el texto de una variable ciertos caracteres, como una comilla simple ( ') , el fabulador o el salto de lnea, que deben escribirse de una forma concreta para que JavaScript pueda reconocerlos. Para identificar esos caracteres especiales utilizaremos lo que se denomina carcter de escape, que no es ms que una barra inversa o backslash (\). Este carcter de escape ir colocado delante del carcter que se quiera incluir expresado mediante un cdigo (vase la tabla 2 .3 ).
Tabla 2.3. Lista de caracteres especiales. Cdigo del carcter ti \ n Modo de empleo V V w \n Descripcin

2.2.2. Lgicos
Este tipo, conocido tambin como boolean o booleano, tan slo abarca dos valores posibles: verdadero (true) y falso (false), que nos servirn principalm ente para tomar deci siones sobre realizar una serie de acciones o no en nuestro cdigo. Un ejemplo con una situacin cotidiana sera: Si llueve entonces me llevo el paraguas, en otro caso lo dejo en casa. Nuestra variable booleana sera llueve, y, en funcin de su valor (true o false), realizara una accin u otra (llevarme el paraguas o dejarlo en casa).
<SCRIPT TYPE="text/javascript"> I I Declaracin de datos de tipo lgico o booleano var esVerdadero = true; var esFalso = false; var COMPROBAR = true; </SCRIPT>

Comilla doble Comilla simple Barra inversa o backslash Nueva lnea 37

36

www.FreeLibros.com

Cdigo del carcter t r b f V

Modo de empleo \t \r \b \f \v

Descripcin

[Aplicacin JavaScript]
jj . E ste libro s e titula "Gua d e JavaScript"

Tabulador Retorno de carro Retroceso o backspace Avance de pgina Tabulador vertical

[A c e p ta r ]
Figura 2.2. Ejemplo 2 de caracteres especiales en cadenas.
<SCRIPT TYPE="text/javascript"> // Ejemplo 3 de caracteres especiales en cadenas var cadena = "Primera linea\nSegunda linea\nTer\ u00A9era linea",// Mostramos su valor alert(cadena); </SCRIPT>
[Aplicacin JavaScript]
/\

Existe tambin la posibilidad de incluir cualquier carcter UNICODE (http://www. Unicode.org) m ediante la sen tencia de escape \ u xxxx, donde x x x x representan los dgitos hexadecim ales de un carcter. Por ejemplo, los dgitos 00A9 corresponden al smbolo de copyright (), el 0 0 0 9 al tabulador y el 0 0 2 2 a la comilla doble. La realidad es que rara vez se usan, siendo los ms com unes los contenidos en la tabla 2.3. Si utilizamos el carcter de escape con otro carcter fuera de los mencionados el resultado ser dicho carcter, es decir, se representa a s mismo. De esta forma, si escribisemos \c en la cadena, aparecera el carcter "c". Veam os algunos sencillos ejemplos junto con el resultado visto por pantalla:
<SCRIPT TYPE="text/javascript"> // Ejemplo 1 de caracteres especiales en cadenas var cadena = "El fichero est en C: \\Documentos , // Mostramos su valor alert(cadena); </SCRIPT>
[Aplicacin JavaScript]
El fichero e st en C:\Documentos

IScl

\ Segunda linea
T er era linea

Primera Inea

[T Aceptar

Figura 2.3. Ejemplo 3 de caracteres especiales en cadenas.

2.2.4. Objetos
Aunque este libro contiene un captulo dedicado en exclu siva al manejo de objetos en JavaScript, aqu explicar lo que es un objeto, puesto que se trata de un tipo ms. A grandes rasgos, un objeto es una estructura que engloba una serie de datos (propiedades) y las funcionalidades nece sarias para manejarlo (mtodos). Para que tenga una pequea idea de cmo imaginarse un objeto, vemoslo con un ejemplo: pensemos en un coche (ese con el que tanto suea!), el cual tiene un conjunto de caracte rsticas como el color, el modelo y la marca y una serie de fun cionalidades como arrancar, acelerar y frenar. En este contexto, el objeto sera el coche, las propiedades sus caractersticas y los m todos sus funcionalidades asociadas. Ahora bien, como no todos los coches son iguales necesitamos poder especificar las caractersticas individuales de cada uno. A cada uno de ellos se le denomina instancia. Para el caso que nos ocupa, podramos definir una instancia del objeto "coche" asig nando valores concretos a sus propiedades: color "Rojo", modelo "Punto" y marca "Fiat". Los mtodos que tendr esta instancia sern los mismos que los del objeto: arrancar, acelerar y frenar.
39

Bl

Aceptar

Figura 2.1 . Ejemplo 1 de caracteres especiales en cadenas.


<SCRIPT TYPE="text/javascript"> // Ejemplo 2 de caracteres especiales en cadenas var cadena = "Este libro se titula V'Guia de JavaScriptV' // Mostramos su valor alert(cadena); </SCRIPT>

38

www.FreeLibros.com

Objeto coche Propiedades < Color Modelo l Marca r Arrancar Mtodos < Acelerar l Frenar

com o resultado de la operacin que hem os tratado de hacer. Tam bin existe el valor infinito negativo (-Infinity) cuando la operacin se realiza con n m eros negativos.
Tabla 2.4. Ejemplos con valores especiales. Operacin var numero; var ahorros = nuil; var divisin = 0/0; var fraccin = 5/0; var fraccin = -1/0; var suma = numero + 5; Valor undefined nuil NaN Infinity -Infinity NaN (numero no estaba inicializado)

Figura 2.4. Representacin del objeto "coche". Instancia miCoche

r Color: Rojo Propiedades -i Modelo: Punto l Marca: Fiat r Arrancar Mtodos < Acelerar l Frenar
Figura 2.5. Representacin de una instancia del objeto "coche".

2.3. Expresiones regulares


Una expresin regular, o patrn, nos permitir buscar co incidencias dentro de un texto (por ejemplo, todas las palabras que tengan la letra T) o comprobar que una cadena tiene un formato concreto (el DNI de una persona). Esto nos ser especialmente til cuando queramos realizar de golpe una misma operacin sobre un grupo determinado de palabras como, por ejemplo, cambiar a maysculas todas las palabras que contengan la cadena "JavaScript". Con los mtodos tradicionales tendramos que buscar en el texto pa labra por palabra hasta encontrar la que nos interesa y despus cambiarla a maysculas. En un cap tu lo p o sterio r v erem os cm o trabajar con estos patrones dentro de nuestro cdigo a travs del objeto

Para que le vaya resultando fam iliar, le confesar que cuando asignam os un valor de cualquier tipo (nm eros, booleanos y cadenas) a una variable, sta se convierte en realidad en una instancia de un objeto con sus propiedades y mtodos propios. No se preocupe si esto le choca un poco ahora, puesto que lo explicar en captulos posteriores con ms detalle y verem os algunos ejemplos que, espero, no le dejen con los ojos abiertos de sorpresa.

2.2.5. Valores especiales


Las variables en JavaScript pueden tomar una serie de va lores especiales cuando estamos trabajando con ellas: Indefinido (undefined): Este valor indica que la va riable an no ha tomado ningn valor. Nulo (nuil): Nos permite definir o comprobar que una variable est vaca. No numrico (NaN, Not a Number ): Una variable recibe este valor si almacena el resultado de alguna operacin matemtica no vlida (divisin por cero, por ejemplo). Infinito (Infinity): N os indica que una variable num rica ha tomado un valor dem asiado alto (infinito)
40

RegExp.

2.3.1. Escribir una expresin regular


En JavaScript las expresiones regulares se identifican colo cando unas barras (/) al principio y al final de la cadena que la constituyen. Tenemos dos opciones a la hora de definir una expresin regular para encontrar las palabras que nos interesan: usar un patrn simple o uno con caracteres especiales.
41

www.FreeLibros.com

Patrn sim ple

Tabla 2.5. Ejemplos de patrones con caracteres de repeticin. Patrn Significado que lo cumpliran "hol" seguido de cero o ms aes. "hol" seguido de una o ms aes. "hol" seguido de cero o una "a". /"hol" seguido de exactamente dos aes. "hol" seguido de dos o ms aes. "hol" seguido de dos a cuatro aes. "h" seguido de una o ms oes, seguido de "1" y seguido de cero o ms aes. Valores

Consiste en escribir un conjunto de caracteres para despus encontrar coincidencias directas con l, es decir, nuestro con junto de caracteres deber aparecer dentro de la palabra en el mismo orden en que estn escritos. Supongamos que tenemos el texto "el pjaro salt del nido" y el patrn / e l/ . Si aplicsemos el patrn, obtendramos que las palabras "el" y "del" lo cum plen mientras que el resto no entraran en el saco.

/hola*/ /hola+/ /hola?/ /hola{2} /hola{2,}/ /hola{2,4}/ /ho+la*/

hol, hola, holaaaaa hola, holaaaaa hol, hola holaa holaa, holaaaaa holaa, holaaa, holaaaa hol, hooool, hola, hoolaaa

Patrn con caracteres especiales


Para hacer ms tiles las expresiones regulares, podemos utilizar una serie de estructuras y caracteres especiales que nos permitirn crear patrones ms complejos y adaptables a nuestras necesidades. Para que le sea ms fcil comprender el funcionamiento de cada uno, los vam os a agrupar en base a su funcionalidad.
Caracteres de repeticin

Gracias a estos caracteres podrem os indicarle a nuestro patrn que se busquen coincidencias teniendo en cuenta que algunas partes de la cadena pueden repetirse un nmero de terminado de veces. Pasemos a ver las distintas opciones que tenemos para ello: Asterisco (*): Nos permite indicar que el carcter que le precede puede aparecer cero o ms veces. Ms (+): En este caso indica que el carcter que le precede puede repetirse tina o ms veces. Interrogacin (?): Igual que los anteriores, pero indi cando que el carcter puede aparecer ninguna o una vez. {n}: Siendo n un entero positivo, esta estructura nos permite indicar que el carcter que le precede se debe repetir exactam ente el nmero de veces especificado por n . {n,}: Similar al anterior, pero esta vez se especifica que el carcter debe aparecer al m enos n veces. {n, m}: Esto supone una ampliacin de los anteriores con la que, teniendo n y mcomo enteros positivos, podemos indicar que el carcter que preceda a esta estructura debe repetirse un nm ero de veces entre las definidas por n y m .
42

A dvertencia: H ay que remarcar que en los ejemplos de la tabla 2.5 las palabras que contengan ms letras a continua cin del patrn encontrado sern igualm ente vlidas, es decir, en estos ejemplos no se obliga a que la palabra termine estrictam ente con el ltimo carcter del patrn, sino que puede haber ms letras despus. Pongamos como ejem plo el patrn / h o l a + / . Si nuestra palabra fu ese "holaaas!" nuestro patrn encontrara coincidencia con ella puesto que lo contiene ("holaaa") y de este modo la parte restante no afectara ("si").
Caracteres especiales

Funciona de forma exacta a lo visto en el apartado anterior, donde explicamos los caracteres especiales de las cadenas. En el caso de las expresiones regulares, los caracteres que se utilizan tienen bastantes coincidencias con los de las cadenas aunque hay otros ms complejos: Punto ( .) : Si lo escribimos dentro de un patrn, coin cidir con cualquier carcter simple excepto con el de salto de lnea.
43

www.FreeLibros.com

\n: Coincide con el carcter de nueva lnea (o salto de lnea). \r : El retom o de carro. \ t: Carcter de tabulado. \v: El de tabulado vertical. \ f : Avance de pgina. \ u xxxx: Coincide con el carcter UNICODE que tiene como cdigo cuatro dgitos hexadecim ales represen tados por x x x x . \b : Coincide con un separador de palabra, como puede ser el espacio o el carcter de nueva lnea. \B: Coincide con un carcter que no sea separador de palabra. \cX: Coincide con un carcter de control en una cadena siendo X dicho carcter, es decir, equivale a la com bina cin de teclas Control-X. \d: Coincide con un dgito entre cero y nueve. \D : Coincide con un carcter que no sea un dgito. \s: Coincide con un nico carcter de separacin (es pacio, tabulado, avance de pgina o nueva lnea). \S: Coincide con un nico carcter que no sea de sepa racin. \w: Coincide con cualquier carcter alfanumrico (letras de la "a" a la "z", m insculas o maysculas y nmeros del cero al nueve) o el subrayado. \W : Coincide con cualquier carcter no alfanumrico ni subrayado. \0 (cero): Coincide con el carcter nulo o de fin de cadena. No puede tener ningn dgito a continuacin (\03 por ejemplo). En los ejemplos de la tabla 2.6 se han escrito los caracteres no representables como texto entre corchetes ([]).
Tabla 2.6. Ejemplos de patrones con caracteres especiales. Patrn /.n/ Significado Un carcter seguido de una "n". "hola seguido de un salto de lnea. Valores que lo cumpliran un, en

Patrn /java\tscript/

Significado "java" seguido de un tabulado y de "script". "java" seguido de un separador y de "script".

Valores que lo cumpliran java script

/java\bscript/

java[NUEVA LNEA] script, java script

/java\Bscript/

"java" no seguido de java-script, javaOscript, un separador y java*script de "script". "java seguido de un dgito y de "script". "java" seguido de un carcter de separacin y de "script". "java" seguido de un carcter alfanu mrico o subrayado y de "script". "javascript" seguido de un carcter nulo. javaOscript, java6script

/java\dscript/

/java\sscript/

java[NUEVA LNEA] script, java script, java script java5script, javaX script, javaxscript, java_script JavaScript[NULO] 18-01-2009, 04-12-1997

/java\wscript/

/javascript\0/

Ad\d-\d\d-\d\d\d\d/ una fecha: dos dgitos, guin, dos dgitos, guin y cuatro dgitos. Aw\w\w\w/ cuatro caracteres alfanumricos o subrayados (una contrasea por ejemplo).

java, JaVa, J4va, 3 J s

Agrupacin de valores

/hola\n/

hola[NUEVA LNEA]

En ocasiones puede surgimos la necesidad de crear patrones que puedan encontrar una coincidencia con palabras que son muy similares y slo se diferencian en una pequea parte, lo cual nos obligara a crear un patrn por cada una de esas dife rencias. Por eso nos viene 'com o anillo al dedo" el uso de estas estructuras para as fusionar todo bajo un m ismo patrn.
45

44

www.FreeLibros.com

[xxx]: Coincide con uno de los caracteres que estn entre los corchetes. Tambin es posible especificar un rango de caracteres usando un guin. Por ejem plo [abe] es lo mismo que [a-c], o [01234] sera equivalente a [0-4]. La nica regla para usar este guin es que esos valores deben ser contiguos, es decir, no podremos decir que el rango es del cero al cuatro, excepto el tres. [''x x x ]: El uso del circunflejo (A) dentro de un conjunto de caracteres hace que coincida con cualquier carcter salvo los que estn indicados en el conjunto. A esto se le conoce como conjunto complementado o negado. Aqu tambin es posible definir un rango con el guin. Barra vertical (x |y): Puede coincidir con x o y, pero no con los dos. Puede ir dentro de corchetes para acortar mejor los valores. [\b]: Coincide con el carcter de retroceso o backspace. No lo confunda con el carcter especial \b (separador de palabra). Tabla 2.7. Ejemplos de patrones con agrupacin de valores.
Patrn /[ue]n/ /[Aue]n/ Significado "u" o "e" seguido de "n". Cualquier carcter excepto "u" o "e" seguido de "n". "cara" o "cruz". "gat" seguido de "a" u "o". Valores que lo cumpliran

Tabla 2.8. Ejemplos de patrones con caracteres de posicin. Patrn m /ABu / /o$/ /to$/ Significado "B" al inicio de la lnea. "Bu" al inicio de la lnea. "o" al final de la lnea. "to" al final de a lnea. Valores que lo cumpliran Buenos das, Bocadillo de tortilla... Buenos das, Buenas tardes... Hace viento, Altavoz amplificado... Hace viento, Eso est alto...

Nota: Si necesita buscar alguno de los caracteres que se emplean para construir los patrones, es tan sencillo como utilizar el carcter de escape antes de escribirlo. De modo que quedaran expresados como \A , \[ o \$, por ejemplo. Todos estos caracteres especiales pueden combinarse e in cluso un mismo patrn puede escribirse de distintas formas. Por ejemplo, suponiendo que queremos crear un patrn para encontrar un nmero de dos dgitos, todas las siguientes ex presiones regulares seran equivalentes:
/[0123456789] [0123456789]/ / [0-9] [0-9]/ / [0-9]{2}/ /\d\d/ /\d(2}/

un, en an, Fn, 1n...

/cara|cruz/ /gat[a|o]/

cara, cruz
gata, gato

Caracteres de posicin Estos caracteres nos permiten especificar en qu parte de la lnea debe existir la coincidencia dentro de nuestro patrn. Circunflejo ( A): H ace que nuestro patrn tenga que coincidir desde el inicio de la lnea. Debe ir colocado siempre al inicio del patrn. $: Cumple la m isma funcin que el anterior pero ha ciendo que nuestro patrn coincida hasta la parte final de la lnea. Se debe aadir al final de nuestra expresin regular. ;.
46

2.3.2. Usar parntesis dentro de una expresin regular


Si encerram os entre parntesis cualquier parte de una expresin regular causarem os que la cadena coincidente se recuerde para poder recuperar su valor ms tarde. Esto es til cuando querem os utilizar los patrones para hacer reem plazos en un texto utilizando parte del que ya existe, como por ejem plo buscar / (vasos)/ y sustituirlo por "posavasos" ("vasos" es el valor recordado). Podem os recordar tantos va lores como queram os, utilizando una pareja de parntesis para cada uno de ellos. n 11

Biblioteca de Sanfiag,
Direccin

www.FreeLibros.com

de B iblio teca* Ar chivos y Museos

47

As mismo, podemos aplicar alguno de los caracteres para patrones complejos a la parte delimitada por parntesis, de forma que su funcionalidad se aplicara a todo el conjunto. Si tenemos el patrn / ( j a ) + / obtendremos coincidencias con una o varias repeticiones del texto "ja": "ja" o "jajaja". Para poder recuperar estas coincidencias, tendremos que escribir la siguiente expresin: \x: Donde x es un entero positivo que hace referencia al nm ero de cadena que hem os m arcado para ser recordado, contando de izquierda a derecha. Imaginemos que tenemos el texto "doble clic". Si le apli camos el patrn / ( \w+) ( \w+) / obtendremos coincidencias con ambas palabras, puesto que buscaramos uno o ms carac teres alfanumricos, seguido de un espacio en blanco y otra vez uno o ms caracteres alfanumricos. Con esto, las partes de caracteres alfanumricos sern recordadas para poder ser recuperadas m ediante \1 (doble) y \2 (clic) respectivamente.

Patrn /(ja)+/g

Significado

Valores que lo cumpliran

Palabra "ja" repetida ja, Ja, JaJa, JAJAJA, una o ms veces, sin JAjaJAja... distinguir maysculas y minsculas y todas sus ocurrencias.

No se preocupe si no consigue escribir correctamente una expresin regular a la primera. Estas sentencias necesitan prc tica y an as hay ocasiones en las que se vuelve complicado dar con el fallo. Sin embargo, son tremendamente tiles cuando estn bien definidas.

2.4. Expresiones regulares tiles


A continuacin le dejo algunos patrones, en una forma bas tante bsica, que se suelen utilizar con frecuencia, aunque le aconsejo que cree los suyos propios para adquirir una mayor prctica.
Tabla 2.10. Expresiones regulares de uso frecuente. Expresin regular Ad{9}/ Ad{8}[a-zA-Z]/ Ad{2}-\d{2}-\d{4}/ /([0][1 -9]| 1[0-2]): [0-5]\d:[0-5]\d/ /([01]\d |2[0-3]): [0-5]\d:[0-5]\d/ Aw+@\w+\.\w{2,3}/ Descripcin Nmero de telfono. Nmero de DNI. Fecha (da-mes-ao). Hora (hora:minutos:segundos en formato de 12 horas). Hora (hora:minutos:segundos en formato de 24 horas). Direccin de correo electrnico.

2.3.3. Modificadores
Una expresin regular puede llevar m odificadores o flags para definir algunas caractersticas a tener en cuenta a la hora de buscar coincidencias. Podemos aplicar a un patrn tantos modificadores como queramos y deben escribirse justo al final, a continuacin de la ltima barra (/) que delimita el patrn. g: Fuerza que se sigan buscando coincidencias despus de encontrar la primera. Esto puede resultar til cuando queremos reemplazar la m isma cadena varias veces. i: Elimina la distincin entre maysculas y minsculas. m: Permite usar varios caracteres de posicin ( Ay $) en el patrn. s: Incluye el salto de lnea en el comodn punto ( .) . x: Fuerza que los espacios sean ignorados.
Tabla 2.9. Ejemplos de patrones con modificadores. Patrn /javascript/i Significado Palabra "javascript" sin distinguir maysculas y minsculas. Valores que lo cumpliran javascript, JavaScript, JAVASCRIPT |

48

49

www.FreeLibros.com

Operadores y conversin entre tipos

3.1. Operadores en JavaScript


Los operadores nos permiten realizar clculos o acciones sobre las variables o datos que maneja un script, devolviendo otro valor como resultado de dicha operacin. A esos datos utilizados se les da el nombre de operandos. JavaScript nos proporciona una buena lista de operadores para poder jugar con los datos.

3.1.1. Operador de asignacin


Este operador, identificado por el smbolo igual (=), asigna al operando situado a su izquierda el valor del operando que est a su derecha, pudiendo ser este ltimo el resultado de un clculo o una expresin. De este modo, si escribimos ennuestro cdigo var mi Dato = 5 ; el operador asignar el valor 5 a la variable mi Dato. Tambin sera posible escribir var miDato = otroDato; copiando as el valor que tuviera la variable otroDato en la variable miDato. Existen ms operadores de asignacin pero, como en rea lidad son formas abreviadas de algunos operadores que ve remos a continuacin, prefiero presentrselos en su m omento como operadores abreviados.

3.1.2. Operadores aritmticos


Estos operadores nos permiten realizar clculos m atem ticos sencillos. Para ello, toman valores numricos como ope randos y devuelven un nico valor, tambin numrico.

www.FreeLibros.com

O peradores sum a, resta y signo

| Operacin Suma y resta positivos y negativos Suma y resta positivos y negativos

Ejemplo var miDato = 3 - 2 + -1;

Resultado miDato vale 0

Estos tres operadores se identifican mediante dos smbolos: ms (+) y menos (-). Segn la posicin en que los utilicemos realizarn una operacin u otra: Si los colocamos entre dos operandos, se realiza la suma o resta entre ellos. Si lo colocamos junto a un operando, se cambia el signo de ste. Veam os esas distintas operaciones y la form a de escri birlas:
Tabla 3.1. Ejemplos de los operadores suma, resta y signo. Operacin Suma Resta Signo positivo Signo positivo Signo negativo Ejemplo var miDato = 3 + 2; var miDato = 3 - 2 ; var miDato = +7; var miDato = 7; var miDato = -7; Resultado miDato vale 5 miDato vale 1 miDato vale 7 miDato vale 7 (operador no obligatorio) miDato vale -7

var miDato = 3 + 2 - -1;

miDato vale 6

Operadores incremento y decremento


Com o extensin de los operadores anteriores, existe la posibilidad de utilizarlos para sumar (incremento) o restar (decremento) una unidad al valor de un operando, escrito de una forma ms breve. Para realizar una de estas operaciones, debemos usar ++ para hacer un incremento y para un de cremento.
Tabla 3.3. Incremento y decremento. | Operacin Incremento Decremento Ejemplo mDato++; miDato - ; Equivalencia

miDato = miDato + 1; miDato = miDato -1 ;

Se pueden realizar tantas com binaciones como queramos con estos operadores.
Tabla 3.2. Ejemplos de uso mltiple de los operadores suma, resta y signo. Operacin Suma y resta Resta y suma Suma mltiple Suma positivos Resta positivos Suma positivos Suma positivos y negativos 52 Ejemplo var miDato = 3 + 2 - 4 ; var miDato = 3 - 2 + 9; var miDato = 1 + 1 + 1 + 1; var miDato = 3 + +2; var miDato = 3 - +2; var miDato = 3 + -2; var miDato = -3 + 2 + 6; Resultado miDato vale 1 miDato vale 10 miDato vale 4 miDato vale 5 miDato vale 1 miDato vale 1 y negativos miDato vale 5

Veamos un ejemplo de cada uno con un pequeo script:


<SCRIPT TYPE="text/javascript"> I I Declaracin de variable var miDato = 3; I I Incremento miDato++; // Mostramos su valor alert(miDato); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de variable var miDato = 3; // Decremento miDato ; // Mostramos su valor alert(miDato); </SCRIPT>

En el primer ejemplo, la variable miDato valdr 4 al hacer el alert, mientras que en el segundo valdr 2 .
53

www.FreeLibros.com

O p erad o res sum a, resta y signo

Operacin Suma y resta positivos y negativos Suma y resta positivos y negativos

Ejemplo var miDato = 3 - 2 + -1;

Resultado miDato vale 0

Estos tres operadores se identifican mediante dos smbolos: ms (+) y menos (-). Segn la posicin en que los utilicemos realizarn una operacin u otra: Si los colocamos entre dos operandos, se realiza la suma o resta entre ellos. Si lo colocamos junto a un operando, se cambia el signo de ste. Veam os esas distintas operaciones y la form a de escri birlas:
Tabla 3.1. Ejemplos de los operadores suma, resta y signo. Operacin Suma Resta Signo positivo Signo positivo Signo negativo Ejemplo var miDato = 3 + 2; var miDato = 3 - 2 ; var miDato = +7; var miDato = 7; var miDato = -7; Resultado miDato vale 5 miDato vale 1 miDato vale 7 miDato vale 7 (operador no obligatorio) miDato vale -7

var miDato = 3 + 2 - -1;

miDato vale 6

O peradores increm ento y decrem en to

Como extensin de los operadores anteriores, existe la posibilidad de utilizarlos para sumar (incremento) o restar (decremento) una unidad al valor de un operando, escrito de una forma ms breve. Para realizar una de estas operaciones, debemos usar ++ para hacer un incremento y para un de cremento.
Tabla 3.3. Incremento y decremento. | Operacin Incremento Decremento Ejemplo miDato++; miDato Equivalencia I

miDato = miDato + 1; miDato = miDato -1 ;

Se pueden realizar tantas com binaciones como queramos con estos operadores.
Tabla 3.2. Ejemplos de uso mltiple de los operadores suma, resta y signo. Operacin Suma y resta Resta y suma Suma mltiple Suma positivos Resta positivos Suma positivos Suma positivos y negativos 52 Ejemplo var miDato = 3 + 2 - 4 ; var miDato = 3 - 2 + 9; var miDato = 1 + 1 + 1 + 1 ; var miDato = 3 + +2; var miDato = 3 - +2; var miDato = 3 + -2; var miDato = -3 + 2 + 6; Resultado miDato vale 1 miDato vale 10 miDato vale 4 miDato vale 5 miDato vale 1 miDato vale 1 y negativos miDato vale 5

Veamos un ejemplo de cada uno con un pequeo script :


<SCRIPT TYPE="text/javascript"> // Declaracin de variable var miDato = 3; I I Incremento miDato++; // Mostramos su valor alert(miDato); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de variable var miDato = 3; // Decremento miDato ; // Mostramos su valor alert(miDato); </SCRIPT>

En el primer ejemplo, la variable miDato valdr 4 al hacer el alert, mientras que en el segundo valdr 2 .
53

www.FreeLibros.com

Adems, estos operadores se pueden colocar antes o des pus del operando, generando resultados distintos: Si los colocamos antes (prefijo), el valor del operando se modifica antes de leer su contenido. A esto se le conoce como pre-increm ento y pre-decrem ento. Si lo colocamos despus (sufijo), el valor del operando se modifica despus de realizar obtener su contenido. A esto se le conoce como post-increm ento y post-decremento. Puede que esto resulte un poco confuso segn se lee, as que preste atencin al siguiente script:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var numl = 3; var num2 = 3; // Mostramos el valor con pre-incremento alert(++numl) ; // Mostramos el valor con post-incremento alert(num2++) ; </SCRIPT>

// Mostramos el valor con post-incremento alert(numero++); // Mostramos el valor con otro post-incremento alert(numero++); </SCRIPT>

Qu cree que ocurrir? Si analizamos con calma el cdigo veremos que el primer alert nos mostrar un 3, increm en tando seguidamente el valor de la variable numero. Por ello, el segundo alert mostrar un 4 y despus volver a incre mentar la variable. Vamos ahora con un ltimo ejemplo para reforzar nuestros conocimientos sobre el funcionamiento de estos operadores tan traviesos:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var numero = 3; // Mostramos el valor con pre-incremento alert(++numero); // Mostramos el valor con post-incremento alert(numero++); </SCRIPT>

A primera vista podram os decir que el resultado obtenido en ambos casos es el mismo pero, qu ocurre si ejecutamos ese cdigo? Aunque le parezca m entira, el prim er alert nos mostrar un 4 mientras que el segundo mostrar un 3. Cmo!? Por qu!?
[Aplicacin JavaScript] [X | [Aplicacin JavaScript] (X

Buf! Y ahora que saldr? C alm a... vayamos siempre paso a paso. Con el prim er alert se incrementar la variable numero antes de ser mostrada, por lo que veremos un 4. A continua cin volvemos a mostrar la variable, que ser incrementada despus, as que verem os... otro 4!

h 4
| Aceptar ]

h 3
| Aceptar ]

Operadores multiplicacin y divisin


Las operaciones de multiplicacin y divisin se representan con un asterisco (*) y una barra (/) respectivamente. Para uti lizarlos basta con ponerlos entre dos operadores, tal y como hemos visto con la suma y la resta.
Tabla 3.4. Ejemplos de los operadores multiplicacin y divisin.

P re -in c re m e n to

P o s t-in c re m e n to

Figura 3.1. Ejemplo con incrementos.

En el primer caso, la variable numl es incrementada antes de que alert nos m uestre su valor. Sin embargo, en el se gundo caso la variable num2 es increm entada despus de ser mostrada. Curioso, verdad? Pruebe ahora con el siguiente script:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var numero = 3;

Operacin Multiplicacin Divisin

Ejemplo var miDato = 6 * 2 ; var miDato = 6 /2 ;

Resultado miDato vale 12 miDato vale 3

Por supuesto, tambin se pueden encadenar varias opera ciones con estos operadores: var miDato = 6 / 2 * 3 , dando como resultado un 9.

54

www.FreeLibros.com

55

O p erad o r resto o m dulo

Este operador, a travs del smbolo de porcentaje (%), per mite obtener el resto resultante de la divisin de dos operandos. Este resto tambin es conocido como el mdulo del dividendo sobre el divisor. Tabla 3.5. Ejemplos del operador resto o mdulo.
Ejemplo var miDato = 6 % 2; var miDato = 7 % 2; Resultado miDato vale 0 miDato vale 1

Tambin sera posible usar una variable como operando de este operador.
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var numerol = 3; var numero2 - 5; // Suma con operador abreviado numerol += numero2;

// Mostramos el valor (numerol vale 8) alert(numerol); </SCRIPT>

3.1.3. Operador sobre cadenas


Este apartado ser bastante corto, puesto que slo existe un operador que acte sobre las cadenas con el que se consigue unir o concatenar dos cadenas. Se representa con el mismo smbolo del operador aritmtico de suma: ms (+). Esta coincidencia no supone un problema para JavaScript que realizar una operacin u otra en funcin del tipo de los operandos: suma si son nmeros y concatena si son cadenas. Tabla 3.7. Ejemplos del operador sobre cadenas.
| Ejemplo var miDato = "Java" + "Script"; var miDato = "Captulo " + "3"; var miDato = "Im " + "pre" + "sio" + "nante"; Resultado miDato vale "JavaScript" miDato vale "Captulo 3" miDato vale "Impresionante"

6 L ?_ 0 3

7 |2 1 3 M d u lo ^

Figura 3.2. Representacin del mdulo.


O peradores aritm ticos abreviados

Como le adelant al explicar el operador de asignacin, en JavaScript es posible escribir de form a abreviada el uso de cualquiera de estos operadores aritm ticos para hacer nuestro cdigo ms rpido de escribir. Solam ente interviene un nico operando, situado a la derecha. De este m odo po drem os hacer el clculo (suma, divisin, etc.) y su asignacin de un solo golpe obteniendo el m ism o resultado. En la tabla 3.6 podr ver estos operadores abreviados y su equivalencia en forma "larga". Tabla 3.6. Ejemplos de operadores aritmticos abreviados.
Ejemplo var miDato += 5; var miDato -= 5; var miDato *= 5; var miDato /= 5; var miDato %= 5; 56 Equivalencia var miDato = miDato + 5; var miDato = miDato - 5; var miDato = miDato * 5; var miDato = miDato / 5; var miDato = miDato % 5;

Si intentamos concatenar nmeros con cadenas, JavaScript in terpreta todos los operandos como si fuesen cadenas de texto.
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var x = 6; // Unin de nmero con cadena (resultado "10 metros") alert (10 + " metros"); // nin de cadena con nmero (resultado "Capitulo 3") alert("Capitulo " + 3); // Unin de cadena con variable nmero (resultado // "Capitulo 6") alert("Capitulo " + x ) ; </SCRIPT>

57

www.FreeLibros.com

3.1.4. Operadores lgicos


Estos operadores se u tilizan para realizar operaciones con dos nicos resultados posibles: verdadero (true) o falso (false). Esto nos ser muy til para tomar decisiones dentro de nuestros scripts. Los operandos que se utilicen junto con uno de estos opera dores sern evaluados siempre como un valor booleano, para as poder devolver otro valor del mismo tipo. Nota: Si tiene curiosidad desde ya por saber cmo se evala cualquier tipo de variable como un booleano, puede echar un vistazo a algunos ejemplos en la tabla 7.1 del captulo 7.______
O p erad o r NO o de negacin (NO T)

O p erad o r O (OR)

Este operador se representa con dos barra verticales ( I I) y devuelve un valor true si al menos uno de sus dos operandos lo son. En cualquier otro caso nos da un valor false. Tabla 3.10. Funcionamiento del operador lgico O.
Valor operando 1 var x = false; var x = true; var x = false; var x = true; Valor operando 2 var y = false; var y = false; var y = true; var y = true; Ejemplo Resultado

var z = x || y; var z = x || y; var z = x || y; v a rz = x || y;

z vale false z vale true z vale true z vale true

Este operador se representa con el smbolo de fin de excla macin ( ! ) y nos permite invertir el valor del operando que le acompae. Tabla 3.8. Funcionamiento del operador lgico NO o de negacin.
Valor operando var x = false; var x = true; O p erado r Y (AN D ) Ejemplo var y = !x; var y = !x; Resultado y vale true y vale false

3.1.5. Operadores condicionales o de comparacin


Los operadores condicionales nos servirn para comparar los valores de sus dos operandos, devolviendo un valor booleano (true o false). Junto con los operadores lgicos, son tambin muy tiles a la hora de tomar decisiones en nuestro cdigo.
O p erad o res de igualdad y d esig u aldad

Este operador se representa con dos smbolos ampersand (& &) y devuelve un valor true si sus dos operandos tambin lo son, o un valor f a l s e en otro caso. Tabla 3.9. Funcionamiento del operador lgico Y.
Valor operando 1 var x = false; var x = true; var x = false; var x = true; 58 Valor operando 2 var y = false; var y = false; var y = true; var y = true; Ejemplo Resultado

El operador de igualdad (==) y desigualdad (! =) nos per miten comprobar si los valores de dos operandos son iguales o no, independientemente del tipo que sean dichos operandos. El resultado obtenido es true cuando la igualdad o desigualdad se cumple y false en caso contrario. Advertencia; No confundir el operador de asignacin (=) con el de igualdad (==), ya que su funcin es bien distinta. Tabla 3.11. Funcionamiento de los operadores de igualdad
y desigualdad. Valor operando 1 var x = 5; var x = 5; var x = 9; Valor operando 2 var y = 5; var y = 5; var y = 5; Ejemplo Resultado

var z = x && y; var z = x && y; var z = x && y; var z = x && y;

z vale false z vale false z vale false z vale true

var z = x == y; var z = x != y; var z = x == y;

z vale true z vale false z vale false 59

www.FreeLibros.com

Valor operando 1 var x = 9; var x = "hola"; var x = "hola"; var x = "libro"; var x = "libro"; var x = 5; var x = 5;

Valor operando 2 var y = 5; var y = "hola"; var y = "hola"; var y = "hola"; var y = "hola"; var y = "5"; var y = "5";

Ejemplo

Resultado

var z = x != y; var z = x == y; var z = x != y; var z = x == y; var z = x != y; var z = x == y; var z = x != y;

z vale true z vale true z vale false z vale false z vale true z vale true z vale false

Conforme a la tabla 3.12, puede com probar cmo hemos obtenido los mismos resultados salvo en los dos ltimos ejem plos donde, con estos operadores estrictos, s se ha tenido en cuenta el tipo de datos para los valores 5 y "5" (nmero y ca dena respectivamente).

Operadores mayor y menor


El operador mayor (>) nos devuelve un valor true si el operando de la izquierda tiene un valor estrictamente mayor que el de la derecha. El operador m enor (<), por el contrario, nos devuelve true si el valor izquierdo es estrictamente menor que el derecho. Nota: Si ambos valores coincidiesen, se devolvera f a l s e y a que un valor no es estrictamente mayor o menor que el otro. En el caso de tener operandos numricos creo que el resul tado de la comparacin est claro, pero si tenemos cadenas la cosa no es tan obvia. Para determinar si una cadena es m ayor o menor que otra, se comparan letra a letra (empezando por la izquierda) hasta encontrar una diferencia entre las dos cadenas. Para comparar dos letras se siguen estas reglas: 1. Las maysculas son menores que las minsculas ("A" es menor que "a"). 2. Las primeras letras del abecedario son menores que las ltimas ("a" es menor que "c"). 3. Los nmeros (expresados como cadena) son menores que las letras ("6 " es menor que M A").
6 < A < a < C Menor --------------------- Mayor

En los dos ltimos ejemplos de la tabla 3.11 el nmero 5 y la cadena "5" tienen el mismo valor para JavaScript por la conversin de tipos que ste realiza (cosa que verem os ms adelante en este captulo). Por otro lado, tenemos los operadores de igualdad estricta (===, tres signos de igual) y desigualdad estricta (! ==), que funcionan de la m isma manera que los que acabamos de ex plicar, pero con la particularidad de que tambin comprueban si los tipos de sus operandos coinciden o no. Por tanto, se obtiene un valor true cuando el valor y el tipo cum plen la igualdad o desigualdad, y valor false en caso contrario. Veamos los mismos ejemplos que la tabla 3.11 pero aplicando estos nuevos operadores.
Tabla 3.12. Funcionamiento de los operadores de igualdad y desigualdad estricta. Valor operando 1 var x = 5; var x = 5; var x = 9; var x = 9; var x = "hola"; var x = "hola"; var x = "libro"; var x = "libro"; var x = 5; var x = 5; 60 Valor operando 2 var y = 5; var y = 5; var y = 5; var y = 5; var y = "hola"; var y = "hola"; var y = "hola"; var y = "hola"; var y = "5"; var y = "5"; Ejemplo Resultado

var z = x === y; var z = x !== y; var z = x === y; var z = x !== y; var z = x === y; v a rz = x !== y; var z = x === y; v a rz = x !== y; var z = x === y; var z = x !== y;

z vale true z vale false z vale false z vale true z vale true z vale false z vale false z vale true z vale false z vale true Valor operando 1 var x = 5; var x = 5; var x = 9;

Figura 3.3. Orden en la comparacin de cadenas. Tabla 3.13. Funcionamiento de los operadores mayor y menor. Valor operando 2 var y = 9; var y = 9; var y = 5; Ejemplo Resultado

var z = x > y; var z = x < y; var z = x > y;

z vale false z vale true z vale true 61

www.FreeLibros.com

Valor operando 1 var x = 9; var x = 5; v a rx = 5; var x = "hola"; i var x = "hola"; var x = "hola";

Valor operando 2 var y = 5; var y = 5; var y = 5; var y = "Hola";

Ejemplo

Resultado

Introduccin al sistem a binario

var z = x < y; var z = x > y; var z = x < y; var z = x > y;

z vale false z vale false z vale false zvale true("h" mayor que "H") zvale true ("h" mayor que "a") z va le fa ls e menor que

var y = "adis"; var z = x > y; var y = "adis"; var z = x < y; ("a" nh") var y = "hoy"; var y = "hoy"; var z = x > y; var z = x < y;

var x = "hola; var x = "hola";

zvale false ("I" menor que "y") z vale true y ("y" y mayor que "I")

Antes de comenzar a listar los operadores, creo que de bemos hacer esta pequea introduccin al mundo del sistema binario para que pueda comprender bien todas las operaciones y ejemplos. Por si le 'suena a chino', un bit (Binary diglT) es un dgito del sistema binario (base 2 ), que nicamente toma los valores cero (0) o uno ( 1 ). La agrupacin de bits representa un nmero. Para representar un nmero decimal en binario debemos dividir primeramente ese nmero entre la base (2 en este caso) y despus dividir repetidamente los cocientes resultantes entre la base (2 ), hasta que dicho cociente sea cero (no se pueden hacer ms divisiones). Los restos de todas estas divisiones sern los que formen los bits del nmero binario. Veamos un rpido ejemplo de cmo convertir el nmero decimal 13 en binario: _ 13 L_2_ 1 6 L_2__ 0 3 L2

Tam bin existe una variacin de estos operadores que aade la operacin de igualdad a la comparacin para el caso de encontram os con valores iguales. Con ellos podremos de terminar si un operando es mayor, o igual (>=), o menor, o igual (<=) que el otro.
Tabla 3.14. Funcionamiento de los operadores mayor, o igual y menor o igual. Valor operando 1 var x = 5; var x = 5; var x = 5; var x = 5; Valor operando 2 var y = 9; var y = 9; var y = 5; var y = 5; Ejemplo Resultado

Bits ~ 1

1 1
0

L_2

Figura 3.4. Conversin de decimal a binario.

Por tanto, el nmero 13 en binario se representa con los bits


1101 (se empieza por el ltimo resto obtenido).

var z = x >= y; var z = x <= y; var z = x >= y; var z = x <= y;

z vale false z vale true z vale true z vale true

Para realizar la conversin inversa (binario a decim al), debe ver la posicin de los bits com o exponentes de la base (2 ), siendo cero la posicin del bit situado ms a la derecha representando la potencia 2o. El nmero decimal se obtiene sumando todas las potencias mientras que el valor del bit (1 0 ) correspondiente indica si debe incluirse esa potencia en la suma. Veamos esto mejor con un ejemplo, convirtiendo a decimal el nm ero binario 1101 anterior:
Bits

1 1 0 1 3 2 1 0

3.1.6. Operadores sobre bits o binarios


En este apartado tratarem os los operadores que utilizan operandos expresados en sistema binario (unos y ceros). Si esto le "suena a chino', no se preocupe que por el mismo precio tambin incluimos una pequea explicacin de este sistema.
62

Posicin bit (exponente)

Potencia Valor potencia

23 22 - 2o 8 4 0 1

Figura 3.5. Conversin de binario a decimal. 63

www.FreeLibros.com

Si sumamos los valores de las potencias (8 + 4 + 0 + 1) obte nemos el nmero decimal equivalente, que es 13. La potencia 21 no se incluye ya que el valor del bit en esa posicin es 0 . Debe saber que para poder representar, tanto los nmeros negativos como positivos, se reserva el bit situado ms a la iz quierda para indicar el signo (0 para los positivos y 1 para los negativos). De modo que para el caso del nm ero binario 1101 (13 en decimal) su representacin con signo sera 01101. Desgraciadamente, tal y como maneja JavaScript los nmeros binarios, interpretar un nmero positivo o negativo no es tan sencillo como mirar el bit situado ms a la izquierda y calcular el decimal equivalente con los bits restantes (-13 no es 11101). Para convertir un positivo en negativo o lo contrario existen varios m todos, pero JavaScript utiliza el que se conoce como complemento a dos, que consiste en aplicar al nmero dos operaciones: 1. Invertir el valor de cada bit que form a el nmero, es decir, cambiar los unos por ceros y viceversa. Esta ope racin se conoce como negacin o com plem entacin y la veremos como un operador de JavaScript. 2. Se suma 1 al resultado de la operacin anterior. Procedamos a ver cmo se representa entonces el nmero decimal -13 a partir de su positivo en binario (01101): Bits Bits invertidos Nmero 1 Resultado suma

Por ltimo, los operadores binarios de JavaScript repre sentan cada nmero con 32 bits (31 para el nmero y 1 para el signo). En caso de que un nm ero no ocupe los 31 bits, se repite el bit de signo en esos bits n o usados para que el complemento a dos siga funcionando. De este modo el nmero decimal 13 (01101 en binario) tendr 28 bits a 0 a la izquierda (el bit de signo y 27 rplicas) quedando como 000000000000000000000 00000001101. En el caso del decim al -13 (10011) se tendrn 28 bits a 1 (signo y 27 rplicas) quedando expresado como 11111 111111111111111111111110011. Para darles ms claridad a los ejemplos, se omiten las r plicas del signo siempre que se pueda.

Operador de negacin o complementacin (NOT)


Este prim er operador b in ario , com o hem os avanzado hace unas lneas, nos perm ite invertir el valor de cada bit que forma un nmero, cam biando los unos por ceros y viceversa. El smbolo que lo representa es la tilde o virgulilla (~) y debe ir colocada delante del nm ero. Advertencia: Este operador no calcula el valor negativo de un nmero, sino su complemento (bits invertidos). Los nmeros negativos en JavaScript se obtienen mediante el complemento a dos. En el siguiente ejemplo, veremos cul es el resultado de complementar el nmero decim al 13:
Bit signo 0 1 Bit 3 1 0 Bit 2 1 0 Bit 1 0 1 Bit 0 1 0 Nmero decimal

0 0 11 1 10 0 1 1
0 0 1 1 0 0 11 |0 _____ + 0 0 0 0 00 0 1 1p 1|T~ 11 0 0 0 1 1

Figura 3.6. Conversin de nmero binario positivo en negativo. De este modo vemos que el nmero decim al -13 se repre senta en binario como 10011 en com plem ento a dos. Si va a utilizar los operadores binarios con frecuencia le aconsejo que se documente de forma ms amplia acerca del manejo de nmero binarios, puesto que aqu se ha expuesto lo ms bsico para que pueda comprender los ejemplos. Nota: Las operaciones con nmeros binarios se realizan bit a bit y no con nmeros completos, por lo que el resultado ser la combinacin de cada operacin individual a nivel de bit.
64

13 -14

Como puede ver, el valor obtenido no es -13 sino el com plemento de 13, que es -14. Ahora podr darse cuenta de por qu hay que sumar 1 al utilizar el com plem ento a dos para obtener el negativo de un nmero.

Operador Y (AND)
El comportamiento de este operador es el m ismo que el operador lgico Y (&&), salvo que ste se represente con un nico ampersand (&) y nos devuelva un 1 cuando los dos bits que se comparan son tam bin un 1 .
65

www.FreeLibros.com

Tabla 3.15. Funcionamiento del operador binario Y. 1 Valor bit 1 0 1 0 1 Valor bit 2 0 0 1 1 Resultado 0 0 0 1

Veam os como ejemplo el resultado que nos presenta la operacin 5 |3:


0 0 0 1 0 0 1 1 1 1 1 1

Figura 3.8. Ejemplo del operador binario O. Recuerde que las operaciones se hacen bit a bit y el resul tado de cada operacin individual se alm acena en la misma posicin. Veam os com o ejem plo el resultado que ofrece la operacin 5&3: 5 3 Esta vez, el resultado de la operacin nos ha dejado un 0 en la posicin de la izquierda y el resto con 1. Esto nos da el nmero decimal 7.

0 1 0 1 0 0 1 1 0 0 0 1

Operador O exclusivo (XOR)


Este operador se representa mediante el acento circunflejo (A) y nos devuelve un 1 cuando nicamente uno de los bits tambin es un 1 . Tabla 3.17. Funcionamiento del operador binario O exclusivo.
Valor bit 1 0 1 0 Valor bit 2 0 0 1 1 Resultado 0 1 1 0

Figura 3.7. Ejemplo del operador binario Y. Como ha podido observar, el resultado de aplicar el ope rador Y a los bits de la derecha ha dado como resultado un 1, mientras que en el resto ha sido m i 0. Esto nos ha dejado una secuencia nueva de bits que representa el nmero uno.

Operador O (OR)
Al igual que ocurre con el operador binario Y (&), este tam bin se comporta como su anlogo lgico ( I I ) , representndose con una barra vertical ( | ) y devolviendo un 1 cuando alguno de los dos bits que se comparan es tambin un 1 . Tabla 3.16. Funcionamiento del operador binario O.
Valor bit 1 0 1 0 1 66 Valor bit 2 0 0 1 1 Resultado 0 1

Veam os com o ejemplo el resultado que nos presenta la operacin 5 A3: 5 3


Resultado (6) 0 0 0 1 0 0 1 1 1 1

1 0

Figura 3.9. Ejemplo del operador binario O exclusivo. Tanto el bit de la izquierda como la derecha se han conver tido en un 0 , dejando un 1 en las posiciones intermedias dando lugar al nmero 6 .
67

1
1

www.FreeLibros.com

Habr notado que los resultados no tienen mucha lgica desde el punto de vista de nm eros decimales (5 |3 devuelve 7). No se preocupe ya que rara vez se analiza el resultado de esta forma. Normalmente se mira con detenimiento el resultado obtenido en las posiciones de los bits (por ejemplo, si hay un 1 en la posicin 3).
O p erad ores de d esplazam ien to

11 Resultado (44) 0

0 1 0

1 0 1

1 0

I 2

1 0

Relleno de ceros -11 Resultado (-44) 1 0 1 0 1 0 1 0 1 0 1 0 I 2

Estos operadores van acompaados de dos operandos: el nmero cuyos bits se van a desplazar y la cantidad de posi ciones que se quieren desplazar esos bits, representado por un nm ero entero. La direccin en la que debe realizarse el desplazamiento la indica el operador, de modo que tenemos los siguientes: Desplazamiento a la izquierda ( ) : se encarga de des plazar los bits hacia la izquierda el nmero de posiciones indicado, rellenando con ceros los espacios de la derecha resultantes de este desplazamiento. Desplazamiento a la derecha con propagacin de signo ( ) : desplaza los bits hacia la derecha tantas posiciones como hayamos indicado, descartando los bits que sobran por la derecha y conservando el signo. Para conservar el signo lo que se hace es repetir el bit de signo por la izquierda tantas veces como desplazamientos hayamos hecho. Desplazamiento a la derecha con relleno de ceros ( > ) : realiza la m ism a operacin que el anterior pero re llenando con ceros los espacios de la izquierda y sin conservar el signo. El resultado en los nmeros positivos es el mismo que con el operador . Veamos ahora unos ejemplos con cada operador, para com prender su funcionamiento::
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var numero = 11; // Desplazamiento a la izquierda alert(numero 2); // Asignacin de valor numero = -11; I I Desplazamiento a la izquierda alert(numero 2); <SCRIPT>

Relleno de ceros

Figura 3.10. Ejemplos de desplazamiento a la izquierda.


<SCRIPT TYPE="text/javascript"> // Declaracin de variable var numero = 11; // Desplazamiento a la derecha con propagacin / / d e signo alert(numero 2); // Asignacin de valor numero = -11; // Desplazamiento a la derecha con propagacin // de signo alert(numero 2); <SCRIPT>

11

0 1 0 1 1 1 2 0 0 0 1 0 1

Conservacin signo

1 0 1 0 1
2

1 1 1 0 1
Conservacin signo

Figura 3.11. Ejemplos de desplazamiento a la derecha


con propagacin de signo.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var numero = 11;

68

69

www.FreeLibros.com

II l>i*r|)l.r/.fiminto a la derecha con relleno


// de ceros
.ilert (numero > 2);

Tabla 3.18. Ejemplos de operadores sobre bits abreviados. 1 Ejemplo var a &= 5; var a |= 5; var a A= 5; var a = 2; var a = 2; var a > = 2; Equivalencia var a = a & 5; var a = a | 5; var a = a A 5; var a = a 2; var a = a 2; var a = a > 2;

I I Asignacin de valor
numero = -11; // Desplazamiento a la derecha con relleno // de ceros alert (numero > 2); <SCRIPT>

0 0

1 0

0 0

1 1

> 2
0

3.1.7. Operadores especiales


JavaScript posee una serie de operadores que no encajan en las categoras anteriores ya que no realizan un clculo sobre los datos.
O p e rad o r condicional

Relleno de ceros

-11
Resultado

111111111111111111111111111

( 1073741821)

0 0

111111111111111111111111111

1 0 1 0 1 > 2 1 0 1
I _ l

Relleno de ceros

Estamos frente al nico operador que tiene tres operandos escribindose de la siguiente forma:
<SCRIPT TYPE="text/javascript"> // Operador condicional operando_l? operando_2 : operando 3; </SCRIPT>

Figura 3.12. Ejemplos de desplazamiento a la derecha con relleno de ceros.

Puede que le choque esa fila de unos del ltim o ejem plo. La explicacin est en la breve introduccin al sistem a b i nario, escrita hace unas pginas, donde se dijo que estos operad ores m an ejan los n m eros com o con ju ntos de 32 bits y que se om itira la rplica del signo siem pre que fuera posible para que su lectura fuera m s fcil. En el ejem plo, el nm ero -11 representado con todos sus bits queda como 11111111111111111111111111110101 (27 rplicas de signo). Al desplazar los bits dos posiciones a la derecha y rellenar con ceros obtenem os el nm ero binario 001 1111 1 1 1 1 1 1 1 1 1 1111111111111101.
O peradores sobre bits abreviados

El operando 1 es en realidad una condicin que corresponde a una expresin que puede valer true o false. En base a l este operador devuelve el operando 2 si dicha condicin s cumple, o el operando 3 en caso contrario. Para aadir mayor claridad al cdigo, la expresin del ope rando 1 se suele encerrar entre parntesis. Veamos cmo utilizar este operador dentro de un script:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var edad = 16; var mayoriaEdad; // Uso operador condicional mayoriaEdad = (edad >= 18)? "s" : "no"; // Mostramos su valor alert(mayoriaEdad); </SCRIPT>

Com o ya ocurra con los operadores aritm ticos, existe tambin la posibilidad de escribir los operadores sobre bits de una forma abreviada, de modo que la operacin binaria y su asignacin pueden realizarse a travs de un solo operador de asignacin, como puede ver en la tabla 3.18 que mostram os a continuacin.
70

Si escribimos este cdigo, y lo ejecutamos en nuestro nave gador, veremos cmo la variable mayoriaEdad recibe el valor "no" ya que la expresin (edad >=18) toma valor false
71

www.FreeLibros.com

O p erad o r com a

Este operador ( , ) se coloca entre dos operandos con la nica finalidad de que ambos sean evaluados y que el valor del segundo sea devuelto por el operador. Veremos, en el siguiente captulo, su uso dentro de los bu cles for, ya que es el sitio donde se emplea principalmente.
O p e rad o r void

En la tabla 3.19 podremos ver los tipos que puede devolver este operador, junto a un pequeo ejemplo.
Tabla 3.19. Tipos devueltos por el operador typeof. Tipo devuelto "number" "boolean" "string" "function" "object" "undefined" Operando esperado Cualquier nmero (entero o real) Valor booleano Cadena de texto Funcin u objeto predefinido Objeto no predefinido Operando no inicializado Ejemplo typeof(5) o typeof(1 + 2) typeof(true) o typeof(1 < 2) typeoffhola") o typeof("ho" + "la") typeof(alert) typeof(miObjeto) typeof(miVariableNueva)

Cuando se usa este operador junto con una expresin, lo que se consigue es que dicha expresin sea ejecutada pero sin devolver ningn valor, es decir, la operacin se realiza pero el resultado no puede ser almacenado ya que se descarta. La expresin que evala este operador puede ser escrita a con tinuacin del mismo o usando parntesis, de manera que void miExpresion es lo mismo que void (miExpresion). Veamos qu pasa si lo utilizam os dentro de un script:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var suma; // Oso operador void suma = void(l + 2); // Mostramos su valor alert(suma); // so operador suma suma = 1 + 2; // Mostramos su valor alert(suma);
</SCRIPT>

Nota: Si quiere comprobar el tipo de un operando tenga en cuenta que est manejando cadenas. Por tanto debe escribir algo como t y p e o f (5 ) == "n u m ber".

Operadores sobre objetos


Por ltim o, existen otros operadores en JavaScript que se utilizan para manejar objetos. En este captulo simplemente los nombrarem os, ya que se explicarn con ms detalle en el captulo correspondiente a los objetos. El punto (.): Sirve para obtener el valor de una propiedad o ejecutar un mtodo del objeto que le precede. Los corchetes ( [ ] ): Sirven para acceder al valor de una propiedad o mtodo del objeto que le precede. new : Nos permite crear una instancia del objeto que indiquemos. delete : Se utiliza para borrar tina propiedad de una instancia. i n : Nos perm ite saber si una propiedad existe en el objeto que indiquemos. instanceof: N os dice si la instancia especificada corresponde al objeto que indiquemos. this: Sirve para referirse a un objeto como sustituto de su nombre.
73

El resultado de ejecutar este cdigo es que la expresin 1 +

2 es evaluada, pero su valor no es devuelto a la variable suma, por lo que en el prim er alert sta tiene valor undef ined
dado que todava no ha sido inicializada. Sin embargo, en el segundo alert vemos que tiene valor 3 como resultado de la operacin de suma realizada justo antes.
O p erad o r typ e o f

M ediante este operador podrem os conocer el tipo de dato del operando que pongam os a continuacin. Este operando corresponde a una expresin, que no es evaluada, y su tipo se devuelve como una cadena de texto. Al igual que ocurre con el operador void, el operando puede ir encerrado entre parntesis o no, siendo lo mismo typeof miOperando que typeof (miOperando).
72

www.FreeLibros.com

3.1.8. Precedencia de los operadores


Tod os los o p erad ores que h em os v isto h asta ahora pueden utilizarse conjuntam ente y las veces que se necesiten. Consecuentemente, es necesario establecer un orden de ejecu cin o precedencia entre ellos ya que, por ejemplo, la expresin 5 * 2 - 1 puede ser interpretada de distintas maneras: 1. Si consideramos que primero se ejecuta la resta (2 - 1 ) y, con ese resultado, se ejecuta despus la multiplicacin (5 * 1), entonces tenemos el valor 5 como resultado. 2. Si ejecutamos prim ero la multiplicacin (5 * 2 ) y a continuacin, con ese resultado, la resta (1 0 - 1 ), entonces tendremos como resultado el valor 9. Cul es la interpretacin vlida? Si miramos la tabla 3.20 nos daremos cuenta de que el resultado correcto es 9, ya que la multiplicacin tiene m ayor precedencia que la resta.
Tabla 3.20. Precedencia de operadores. Precedencia 11 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 74 Operadores () new ! (signo menos) + (signo ms) ++ - typeof void delete * /% + (suma) - (resta) > < < = > > = in instanceof == - === i== &
A

Aqu puede jugar un papel importante el uso de los parn tesis, ya que con ellos podremos alterar el orden de precedencia de los operadores. Por ejemplo, si escribimos la expresin (5 * 2) - 1 obtendrem os como resultado un 9, mientras que si dejamos la expresin como 5 * (2 - 1 ) tendremos un 5. Esto es as porque primero se ejecuta la parte que est entre parn tesis al tener m ayor precedencia que el resto de operadores.

3.2. Conversin entre tipos


Como habr podido ver en algunos de los ejemplos del apartado anterior, a veces es posible combinar dos operandos de distinto tipo sin obtener ningn tipo de error por ello. Cmo sabe JavaScript que, por ejemplo, la cadena "5" puede ser inter pretada de la misma manera que el nmero 5? Esto es posible gracias a la conversin interna entre tipos que posee JavaScript, pudiendo ser de dos tipos: implcita y explcita.

3.2.1. Conversin implcita


Esta conversin se realiza automticamente por JavaScript cuando detecta que los operandos que recibe un operador tienen distinto tipo. Esta conversin no siem pre es posible ("hola" no tiene equivalencia como nmero) as que en oca siones el resultado es impredecible (JavaScript hace lo que puede!). El nico operador que tiene un comportamiento m s es pecial es la suma (+) puesto que ya hemos visto que puede utilizarse tanto para sumar nmeros como para concatenar cadenas. Si en una m isma suma utilizam os valores n u m ricos y cadenas, JavaScript siempre lo va a interpretar como una concatenacin de cadenas. Pongamos como ejem plo el siguiente cdigo:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var cadena = "6; var numero = 4 ; // Primera operacin alert(cadena + numero); // Segunda operacin alert(numero + cadena); // Tercera operacin alert(numero + numero);

| && II ?;
=

+= -= *= /= %= &= A= |= = = >=

75

www.FreeLibros.com

// Cuarta operacin alert(cadena + cadena); </SCRIFT>

En las dos primeras operaciones, el resultado ser una ca dena ("64" y "46" respectivamente). En la tercera, como todos los operandos son nmeros, el resultado ser un nmero (8 ). Finalmente, en la ltima operacin, obtendremos de nuevo una cadena (" 6 6 "). En el resto de operaciones aritmticas, las cadenas inten tarn ser convertidas en un nmero para poder devolver un valor numrico. Por ejemplo:
<SCRIPT TYPE="text/j avascript"> // Declaracin de variables var cadena = "6"; var numero = 2; // Primera operacin alert(cadena - numero); // mostrar un 4 // Segunda operacin alert(numero * cadena); // mostrar un 12 // Tercera operacin alert(cadena / numero); // mostrar un 3 </SCRIPT>

En las dos operaciones, gracias a la intervencin de la con versin explcita, el resultado es el mismo: el nm ero 10. Si no utilizsemos estas funciones, JavaScript aplicara la conversin implcita explicada en el apartado anterior, dndonos como resultados las cadenas "64" y "46". Para terminar, me gustara recordarle que en JavaScript las variables no tienen un tipo definido, por lo que puede alm a cenar el resultado de una conversin en la m ism a variable sin provocar ningn error en su cdigo.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var cadena = "6"; // Conversin explcita cadena = parselnt(cadena); I I Mostramos el valor (nmero 6) alert(cadena); </SCRIPT>

Otro pequeo caso especial ocurre cuando se intenta trans formar un valor booleano en un nmero. Para este tipo de datos, los valores true se interpretan como el nmero 1 y los false como un 0 .

3.2.2. Conversin explcita


Dado que hay ocasiones en que la conversin implcita no ofrece un resultado predecible ni deseado, es preciso que inter venga la mano del programador para realizar estas conversiones cuando sea necesario. Para ello, dispone de las funciones prede finidas parselnt y parseFloat, las cuales estn detalladas en el captulo 5, dedicado a las funciones, aunque le dejar un pequeo ejemplo para que vea cmo influye en el resultado:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var cadena = "6"; var numero = 4; // Primera operacin alert(parselnt(cadena) + numero); // Segunda operacin alert(numero + parselnt(cadena)); </SCRIPT>

76

www.FreeLibros.com

77

Estructuras de control

Los ejemplos vistos hasta ahora han sido bastante "sosillos" ya que nos hem os limitado a ejecutar instrucciones en orden secuencial. No se desanime, JavaScript no nos va a decepcionar y por ello nos brinda una coleccin de estructuras de control con las que podrem os adaptar nuestro cdigo a las mltiples necesidades que nos vayan surgiendo, permitindonos ser un poco ms dueos de las instrucciones que se van a ejecutar mediante la toma de decisiones (por ejemplo, si una variable sobrepasa un valor) o repetir una operacin varias veces con la inclusin de bucles (realizar la suma de los nm eros que van del 1 al 30). Todas las instrucciones que se quieran ejecutar dentro de una estructura de control deben ir encerradas entre llaves ( { } ).
<SCRIPT TYPE="text/javascript"> estructura-de-control { // Mis instrucciones

}
</SCRIPT>

Truco: En JavaScript no es obligatorio usar las llaves si nuestro bloque consta de una nica instruccin. Adems, toda estructura de control puede ir anidada dentro de cualquier otra estructura, de forma que sera posible, por ejemplo, tomar una decisin dentro de un bucle o ejecutar un bucle dentro de otro (veremos que es til para recorrer los datos de una tabla). Pasemos ahora al detalle de cada una de estas estructuras, agrupadas por categoras: condicionales, de bucle y, por ltimo, de manipulacin de objetos.
79

www.FreeLibros.com

4.1. Estructuras condicionales


Este tipo de estructuras evalan una condicin que, de cum plirse, perm itirn que se ejecute su bloque de instruc ciones asociado. En caso de no cumplirse dicha condicin el bloque tampoco se ejecutar, por tanto es como si esa porcin de cdigo no existiera.

<SCRIPT TYPE="text/javascript"> // Declaracin de variable var edad = 19; // Sentencia if - else if (edad >=1 8 ) { alert("Soy mayor de edad"); 1 else { alertf'No soy mayor de edad");

}
</SCRIPT>

4.1.1. Sentencia if -else


La sentencia i f ejecuta su bloque de instrucciones si la condicin que la sigue se cumple, esto es, si la condicin es verdadera. La sintaxis bsica sera esta:
<SCRIPT TYPE="text/javascript"> // Sentencia if if (condicin) { // Mi bloque de instrucciones

}
</SCRIPT>

Si ejecutamos este script veremos en nuestra pantalla el men saje "Soy mayor de edad". Esto es as puesto que la condicin (edad >=18) se cumple, quedando descartado el bloq u e de la sentencia else. Si la edad fuese, por ejemplo, 13 entonces veramos el mensaje "No soy mayor de edad". Si recuerda el operador condicional explicado en el captulo anterior, ver que existe una gran similitud con esta estructura de control. Fjese cmo podra escribirse el ejem plo anterior usando solamente el operador condicional:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var edad = 19; var mensaje; // Operador condicional mensaje = (edad >= 18)? "Soy mayor de edad" mayor de edad"; // Mostrar el mensaje alert(mensaje); </SCRIPT>

Ilustrado con un pequeo ejemplo, quedara as:


<SCRIPT TYPE="text/javascript"> // Sentencia if con condicin verdadera if (5 > 2) { // Mi bloque de instrucciones

: "No soy

}
// Sentencia if con condicin falsa if (5 > 9) { / / M i bloque de instrucciones

}
</SCRIPT>

O pcionalm ente podrem os usar la sentencia e l s e com bi nada con una sentencia i f para ejecutar otro bloque en caso de que la condicin no se cumpla. El resultado de la unin de ambas es que siem pre se ejecute uno (y slo uno) de los dos bloques. Veam os la sintaxis si utilizam os ambas sentencias:
<SCRIPT TYPE="text/javascript"> // Sentencia if - else if (condicin) f / / M i bloque de instrucciones (condicin verdadera) } else { // Otro bloque de instrucciones (condicin falsa)

El resultado obtenido es exactamente el mismo. nicam ente necesitamos almacenar primero el texto que devuelve el operador dentro de una variable en vez de mostrarlo directam ente. Tambin es posible encadenar varias sentencias i f - else si necesitamos evaluar distintas condiciones.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var semforo = "verde"; // Sentencias if - else if (semforo == "rojo") { alert("Stop"); } else if (semforo == "mbar") alert("Precaucin"); } else if (semforo == "verde") alert("Adelante");

{ {

}
</SCRIPT>

}
</SCRIPT>

Quiz vea ms clara esta explicacin mediante un ejemplo:


80

81

www.FreeLibros.com

En este script se irn com probando una a una todas las condiciones hasta que se encuentre alguna que concuerde con el valor de la variable semforo. En nuestro caso se cum plir la ltima condicin haciendo que se m uestre el mensaje "Adelante". En estos casos la sentencia el se final tam bin es opcional, aunque es m uy til para ejecutar unas instrucciones por de fecto, es decir, cuando no se cumple ninguna de las condiciones previas.
<SCRIPT TYPE="text/javascript">
// Declaracin de variable var semforo = "blanco"; // Sentencias if - else if (semforo == "rojo") { alert("Stop"); } else if (semforo == "mbar") { alert("Precaucin"); ) else if (semforo = "verde") { alert("Adelante"); ) else { alert("Este color no es de un semforo!");

75, cosa que esta vez no se cumple. Por tanto, se ejecutar fi nalmente el bloque de la sentencia else anidada, dando como resultado el mensaje "Caro". El script seguira ejecutando el c digo que hubiese a continuacin del if-else principal dado que se ha entrado en un bloque de instrucciones.

4.1.2. Sentencia switch - case


Esta otra sentencia evala una expresin que puede tener mltiples valores (opciones) posibles. La sentencia principal es el switch, que va acompaada de la expresin a evaluar. Dentro de ella habr sub-bloques, identificados por la palabra reservada case, para cada uno de los posibles valores que puede tomar la expresin evaluada, y que contendrn las instrucciones a ejecutar si el valor de la expresin coincide con l. Cada uno de estos sub-bloques case no se delimita con las llaves que hemos visto hasta ahora, sino que se debe hacer con dos puntos ( : ) al comienzo y la sentencia break al final. Una vez ejecutadas las instrucciones de un case, se fi naliza la sentencia switch ignorando el resto de opciones. Recapitulando, la sintaxis queda as:
<SCRIPT TYPE="text/j avascript"> // Sentencia switch-case swicth (expresin) { case valorl: // Bloque de instrucciones para valorl break; case valor2: // Bloque de instrucciones para valor2 break;

}
</SCRIPT>

Tam bin sera posible anidar sentencias if-else dentro de otras:


<SCRIPT TYPE="text/javascript"> // Declaracin de variable var precio = 100; // Sentencias if - else anidadas if (precio > 5 0 ) { if (precio < 75) { alert("Normal"); ) else { alert("Caro");

}
</SCRIPT>

)
} else { alert("Barato");

}
// Resto del cdigo </SCRIPT>

Para aclarar el funcionamiento, veamos esta nueva sen tencia mediante el ejemplo del semforo que utilizamos an teriormente:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var semforo = "verde";
// Sentencia switch switch (semforo) { case "rojo": alert("Stop");

Ejecutando este cdigo, entraramos inicialmente dentro del bloque del primer i f, ya que la condicin se cumple (precio > 50), descartando por tanto el bloque de la sentencia else. Dentro de ese prim er i f , nos encontram os de nuevo con otro if que evala si el valor de la variable precio es menor que
82

83

www.FreeLibros.com

break; case "mbar": alert("Precaucin"); break; case "verde": alert("Adelante"); break;

)
</SCRIPT>

var semforo = "mbar"; // Sentencia switch switch (semforo) { case "rojo": alert("Stop"); case "mbar": alert("Precaucin"); case "verde": alert("Adelante");

Un poco ms claro, verdad? El resultado de ejecutar este cdigo es exactamente el mismo que con las sentencias i f else: se mostrara el m ensaje "Adelante". A l igual que ocurre con el if, tam bin es posible indicar un conjunto de instrucciones que se ejecuten por defecto cuando la expresin no coincide con ninguna de las opciones. Esta operacin se hace aadiendo un nuevo sub-bloque con la palabra reservada default que va norm alm ente en la ltima posicin.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var semforo = "blanco"; // Sentencia switch switch (semforo) { case "rojo": alert ("Stop"); break; case "mbar": alert("Precaucin"); break; case "verde": alert("Adelante"); break; default: alert("Este color no es de un semforo!"); break;

)
</SCRIPT>

Qu mensaje aparece en su pantalla? En principio espe ramos que slo aparezca el mensaje "Precaucin" correspon diente al valor "mbar" pero, sin embargo, tambin aparece tambin el mensaje "Adelante a pesar de que el valor de la variable no es "verde". Por tanto, debemos tener un poco de cuidado delimitando correctamente los bloques case si no queremos obtener un resultado que no es el esperado. No obstante, la omisin de la sentencia break puede tener sentido si en su cdigo necesita ejecutar las mismas instrucciones para un conjunto de valores. Veamos un caso prctico:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var mes = "mayo"; // Sentencia switch switch (mes) { case "enero": case "marzo": case "mayo": case "julio": case "agosto": case "octubre": case "diciembre": alert(mes + " tiene 31 das"); break; case "abril": case "junio": case "septiembre": case "noviembre": alert(mes + " tiene 30 das"); break; case "febrero": alert(mes + " tiene 28 o 29 das"); break;

}
</SCRIPT>

La sentencia break esconde un pequeo secreto: en rea lidad es opcional. Si la omitimos, estamos dejando sin delimitar el bloque case, por lo que el script se seguira ejecutando hacia abajo hasta que se llegue al final del switch o se encuentre una sentencia break, aunque eso implique "colarnos" dentro del bloque de otro case. Veam os qu pasa si omitimos los break en el ejemplo del semforo:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable

}
</SCRIPT>

84

www.FreeLibros.com

85

Fjese que los case que no llevan bloque de instrucciones dan la sensacin de estar agrupados, consiguiendo que al entrar en uno de ellos se llegue hasta la instruccin que hay antes del break correspondiente. Es como si dijramos: si la variable mes es igual a "abril", "junio", "septiembre" o "noviembre", en tonces el mensaje es "tiene 30 das". Por consiguiente, el mensaje que obtendremos en el ejemplo ser "mayo tiene 31 das".

Expresin actualizacin: Se utiliza para actualizar el valor del contador declarado en la expresin inicial, con el fin de hacer falsa la condicin en algn momento. Se puede usar cualquier tipo de expresin, aunque lo m s comn es hacer uso del operador de increm ento
(++)

Veamos un rpido ejemplo para aclarar el funcionamiento de esta estructura.


<SCRIPT TYPE="text/javascript"> // Sentencia for for (var x=l; x<10; x++) { alert(x);

4.2. Estructuras de bucle


Estas estructuras ejecutan un conjunto de instrucciones re petidamente mientras se cumpla una condicin. En el momento que deja de cum plirse, el bucle se da por terminado. A cada repeticin de un bucle se le denomina iteracin. Advertencia: Tenga especial cuidado en asegurarse de que en algn momento la condicin dejar de cumplirse o provocar un bucle infinito (ms conocido como "dejar el ordenador tostado").

}
</SCRIPT>

La mecnica que sigue la ejecucin de un bucle f o r es la siguiente: 1. La variable x se declara e inicializa con valor 1 (expresin inicial). Esto ser nuestro contador. 2. Se comprueba si se cumple la condicin (el valor de x es menor que 10). Si el resultado es f a l s e el bucle se da por terminado, en otro caso se entra en el bloque de instrucciones. 3. Se ejecuta el bloque de instrucciones, mostrando en nuestro ejemplo el valor de la variable x cada vez (desde 1 hasta 9). 4. Se incrementa el valor de la variable x en una unidad (expresin actualizacin) y se vuelve al paso 2 . Tam bin es posible utilizar dos o ms contadores dentro de un bucle f o r mediante el operador coma (,). Veamos un script que nos muestra la relacin, un tanto trivial, entre dos nmeros:
<SCRIPT TYPE="text/javascript"> // Sentencia for for (var x=l, y=2; x<=10; x++, y++) { alert(x + " es menor que " + y);

4.2.1. Sentencia for


Este tipo de bucle ejecuta las instrucciones de su bloque recorriendo un rango de valores de forma secuencial hasta que la condicin deja de cumplirse (valor falso). Su sintaxis es la siguiente:
<SCRIPT TYPE="text/javascript"> // Sentencia for for (expresin inicial; condicin; expresin actualizacin) ( / / M i bloque de instrucciones

}
</SCRIPT>

Expresin inicial: Se utiliza para inicializar una o varias variables que sirvan a m odo de contadores, aunque puede contener expresiones ms complejas. Representa el primer valor de todo el rango que se va a utilizar dentro del bucle. Condicin: Evala en cada iteracin si el valor de una variable (normalmente la usada como contador) cumple la expresin especificada. Si no lo hace (valor falso), significa que el bucle finaliza.
86

}
</SCRIPT>

Aqu hem os inicializado las dos variables con un valor distinto en la expresin inicial e incrementado sus respectivos valores en la expresin de actualizacin. Para recorrer los va lores del 1 al 9, slo hem os comprobado la variable x dentro de la condicin.
87

www.FreeLibros.com

Hemos mencionado que lo ms comn es una usar una de las "variables contador" para establecer cundo finaliza el bucle, pero esto no tiene por qu ser necesariamente as:
< SCRIPT TYPE="text/javas cript"> I I Declaracin de variable var seguir = true; I I Sentencia for for (var x=l; seguir; x++) { alert(x); if (x >= 9) { seguir = false;

4.2.2. Sentencia do - while


Esta sentencia ejecuta una serie de instrucciones, al menos una vez, hasta que la condicin que se evala tom a valor falso. La sintaxis es la siguiente:
<SCRIPT TYPE="text/javascript"> // Sentencia do-while do { // Mi bloque de instrucciones } while (condicin) </SCRIPT>

} }
</SCRIPT>

El resultado de este script es el mismo que vimos al principio de este apartado, pero esta vez estamos comprobando cundo finaliza el bucle en base al valor de la variable seguir, que cambia en el i f anidado dentro del bucle for. Si la variable es fa1 se ,el bucle termina, y en otro caso se contina ejecutando. La condicin de parada tambin se podra haber escrito como:

Como puede fijarse, no hay una condicin para ejecutar por primera vez el bloque de instrucciones, as que debe tener esto en cuenta a la hora de decidir cundo usar este tipo de bucles para no encontrarse con resultados inesperados. Vamos con un ejemplo de tom a de contacto:
<SCRIPT TYPE="text/j avascript"> // Declaracin de variable var x = 1; // Sentencia do-while do { alert(x); x++; } while (x < 10) </SCRIPT>

seguir == trueo seguir != false.


Nota: Si la condicin es falsa desde el principio el bloque de instrucciones no se ejecutar nunca. Por ejemplo: f o r ( v a r x = 1 0 ; x < 5 ; x + + ). Tal como com entam os acerca de la expresin de actualiza cin, se puede utilizar cualquier expresin siem pre y cuando haga cum plir la condicin de salida en algn m omento. El siguiente ejem plo es una variante del prim ero que vimos (m ostrar los nm eros del 1 al 9). En lugar de increm entar en una unidad el contador, vam os a hacer que se haga en 2 unidades, de m odo que m ostrar los nm eros im pares entre el 1 y el 9:
<SCRIPT TYPE="text/j avascript"> // Sentencia for for (var x=l; x<10; x=x+2) { alert (x);

La ejecucin de este tipo de estructura sigue estos pasos: 1. Se ejecuta el bloque de instrucciones, m ostrando el valor de la variable x (desde 1 hasta 9) y realizando un post-increm ento de la m isma para no crear un bucle infinito. 2. Se com prueba la condicin para determ inar si debe ejecutarse una nueva iteracin del bucle. En caso de no cumplirse (x vale 10 ) se da por finalizado y en otro caso se vuelve al paso 1 . A dvertencia : La expresin inicial ( v a r x = 1) debe escri birse antes de comenzar el bucle y la expresin de actualizacin (x++) debe ponerse dentro del bloque de instrucciones. Para acortar el cdigo una pizca, se podra realizar el postincremento dentro de la funcin alert, aunque esto puede restar claridad a nuestro cdigo.

}
</SCRIPT>

Como podr ver, hemos usado una expresin de suma para definir la forma de actualizar la variable que hace de contador (x). Tambin lo podramos haber escrito con el operador abre viado x+ = 2 .
88

www.FreeLibros.com

<SCRIPT TYPE="text/j avascript"> // Declaracin de variable var x = 1; // Sentencia do-while do { alert(x++); ) while (x < 10) </SCRIPT>

4.2.4. Sentencias break y continu


Estas dos sentencias tendrn utilidad nicamente dentro de los bucles y el switch. Veam os qu hace cada una de ellas.

Break
La sentencia break sirve para finalizar prematuramente un bucle o, como ya hem os visto, para,delimitar un bloque case dentro de una sentencia switch. Observem os ahora cmo influye su uso dentro de un bucle:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var x = 1; // Sentencia while while (x < 10) ( if (x == 5) { break;

4.2.3. Sentencia while


Esta ltima sentencia de bucle ejecuta un bloque de instruc ciones repetidamente mientras la condicin sea verdadera. A diferencia de la estructura do-while, aqu se comprueba la condicin antes de realizar la primera iteracin, por lo que no se ejecuta el bloque una primera vez antes de ello. Su sintaxis es esta:
<SCRIPT TYPE="text/javascript"> // Sentencia while while (condicin) { / / M i bloque de instrucciones

}
x++;

}
alert("La mano tiene " + x + " dedos."); </SCRIPT>

)
</SCRIPT>

Su funcionamiento es muy sim ilar al do-whi le, as que lo explicaremos a travs de un ejemplo:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var x = 1; // Sentencia while while (x < 10) { alert(x) ; x++;

En este script se interrumpe la repeticin del bucle while cuando la variable x toma el valor 5, de manera que el resto de instrucciones dentro del bloque son ignoradas y se contina la ejecucin por la instruccin que hay a continuacin del bucle, en este caso un alert.
C ontinu

}
</SCRIPT>

1. Se comprueba la condicin para saber si debe ejecutarse el bloque de instrucciones. Cuando no se cumpla (el valor de x es 10) se dar por finalizado el bucle. 2. El bloque de instrucciones es ejecutado, mostrando el valor de la variable x (desde 1 hasta 9) y realizando un post-incremento de la misma. Seguidamente se vuelve al paso 1. Tambin se deben escribir las expresiones de inicializacin y actualizacin en las mismas zonas que vimos con el do-whi le para que el bucle funcione correctamente.
90

Esta otra sentencia nos permitir saltar una iteracin de un bucle, ignorando adems todas las instrucciones que hu bieran por debajo. Tras ese salto, la expresin de actualizacin es ejecutada y la condicin de salida es comprobada antes de hacer la iteracin correspondiente. Vamos a comprender esto con un ejemplo:
<SCRIPT TYPE="text/javascript"> // Sentencia for for (var x=l; x < 10; x++) { if (x == 4) ( continu;

}
alert("La plaza de parking " + x + " est libre.");

}
</SCRIPT>

www.FreeLibros.com

El resultado que conseguimos es que se m uestren los dis tintos valores de la variable x desde el 1 hasta el 9 excepto el 4, ya que es el que provoca el salto en el bucle. Si el cdigo fuese este:
<SCRIPT TYPE="text/javascript"> // Sentencia for for (var x=l; x < 10; x++) { if (x == 9) { continu;

Funciones

}
alert("La plaza de parking " + x + " est libre.");

}
</SCRIPT>

Se nos mostraran m ensajes diciendo que las plazas de la 1 a la 8 estn libres, saltara a la 9 debido al continu y acto seguido saldra del bucle ya que tras actualizar x su valor no cumplira la condicin.

4.3. Estructuras de manipulacin de objetos


En este ltimo apartado verem os que JavaScript tambin nos ofrece algunas estructuras de control para acceder a las pro piedades y mtodos de un objeto de una forma ms cmoda. Como se le har difcil comprender su funcionamiento sin conocer cmo definir un objeto en JavaScript, aplazaremos la explicacin de estas estructuras hasta el captulo correspon diente. De todos modos, para que le vayan resultando fam i liares, se trata de las estructuras for-in y with.

Es muy comn a la hora de programar que nos surja la ne cesidad de ejecutar un conjunto de acciones de forma habitual o simplemente nos convenga que se ejecuten de forma indepen diente para dar mayor claridad al cdigo. Pues bien, la solucin a nuestro problema son las funciones, que se encargan de agrupar una serie de operaciones dentro de un mismo bloque para eje cutarlas cuando y cuantas veces queramos. De esta forma, po demos tener por ejemplo una funcin que se encargue siempre de sumar dos nmeros, con lo que nos evitaremos repetir esa operacin de suma en distintas partes del cdigo. Despus de leer este apartado sabr cmo crear sus pro pias funciones, pero debe saber que tambin existen muchas funciones que ya estn definidas en JavaScript y le sern de m ucha utilidad. A lo largo de los captulos irem os viendo muchas de ellas.

5.1. Declaracin de funciones


JavaScript tiene la palabra reservada function para poder identificar las funciones que creemos. Veamos mejor un sencillo ejemplo para explicar la sintaxis que debemos usar:
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin function sumar(){ var miSuraa = 9 + 2;

)
</SCRIPT>

Primero tenemos la palabra function (indispensable), des pus indicamos el nombre que queremos que tenga la funcin (sumar) seguida obligatoriamente de los parntesis y, final
92 93

www.FreeLibros.com

mente, escribimos las acciones que queremos que realice nuestra funcin (realizar una suma simple) encerradas entre llaves ( { } ) formando un bloque. Dentro de este bloque podemos declarar variables y realizar las operaciones que nos venga en gana. Para utilizar o llamar a una funcin que hayamos definido es suficiente con escribir su nombre seguido de los parntesis. Con esto conseguimos que se ejecuten las acciones que contenga:
<SCRIPT TYPE="text/javascript> // Llamada a la funcin sumar sumar(); </SCRIPT>

Las funciones pueden ser declaradas en cualquier parte del script, pero si tenemos varias etiquetas <SCRIPT> en nuestra pgina, deben estar en una anterior a la parte donde se hagan las llamadas. En los siguientes ejemplos verem os formas po sibles de definir y llamar correctamente una funcin:
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin en la misma etiqueta function sumar (){ // Mis acciones

}
// Llamada a la funcin de la misma etiqueta sumar(); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Llamada a la funcin de la misma etiqueta sumar(); I I Declaracin de funcin en la misma etiqueta function sumar()( // Mis acciones

En cuanto a la nomenclatura de las funciones, se siguen casi las mismas reglas y restricciones que en el caso de las variables: 1. Nombre en minsculas, excepto la primera letra de cada palabra siguiente a la primera. Esto es una recomenda cin que le hago, no es en absoluto obligatorio. 2. Se pueden utilizar caracteres alfanum ricos y algunos smbolos, como el guin bajo o subrayado (_). 3. El nom bre no puede coincidir con el de una palabra reservada, como function, ni con el de otro elemento que hayamos definido. Aunque pueda parecer que variables y funciones no se van a diferenciar a simple vista, las funciones se pueden identificar r pidamente por el uso de los parntesis. Tambin podemos hacer an mayor esta diferencia si al declarar funciones utilizamos nombres que representen acciones: sumar mejor que suma o sumarTresNumeros en vez de sumaTresNumeros. Nota.- Una vez ms, tenga especial cuidado con el uso de maysculas y minsculas, pues las llamadas a funciones como S u m ar o SUMAR no son lo mismo.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin con nombre corto function sumar (){ // Mis acciones

}
</SCRIPT> <SCRIPT TYPE="text/javascript"> I I Declaracin de funcin en otra etiqueta function sumar(){ // Mis acciones

}
</SCRIPT> <SCRIPT TYPE="text/javascript"> I I Llamada a la funcin de otra etiqueta anterior sumar(); </SCRIPT>

Ahora veremos un ejemplo en el que la definicin y la lla mada se hacen de forma incorrecta, haciendo que se llame a una funcin que para JavaScript no est definida:
<SCRIPT TYPE="text/javascript"> I I Llamada a la funcin de otra etiqueta posterior (error) sumar(); </SCRIPT> <SCRIPT TYPE=text/javascript" // Declaracin de funcin en otra etiqueta function sumar(){ // Mis acciones

)
// Declaracin de funcin con nombre largo function sumarTresNumeros(){ // Mis acciones

)
</SCRIPT>

}
</SCRIPT>

Dentro del bloque de una funcin (lo encerrado entre llaves) se pueden definir y usar variables de todo tipo e incluso llamar a otras funciones.

94

www.FreeLibros.com

<SCRIPT TYPE="text/j avascript"> // Declaracin de funcin function sumar(){ // Mis acciones

}
// Uso de variables y otra funcin ya definida function miFuncion()( var numerol = 5; var nombre = "Pepe"; var otroNumero = numerol; sumar ( );

Para pasar un parm etro a una funcin debemos colocar un valor entre los parntesis que se usa en las llamadas a fun ciones. Al hacer esto, el parmetro se inicializa con dicho valor. Vamos con un ejemplo de todo esto:
<SCRIPT TYPE="text/j avascript"> // Declaracin de variable var cinco = 5; // Declaracin de funcin con un parmetro function sumar(numero){ var miSuma = numero + 2;

}
</SCRIPT>

}
// Llamada a la funcin con un dato sumar(3); // El resultado seria 5 ( 3 + 2 ) // Llamada a la funcin con una variable sumar(cinco); // El resultado seria 7 ( 5 + 2 )

Truco: Para evitar errores en las llamadas a funciones es recomendable declarar todas al principio de nuestra pgina dentro de <HEAD>, bien una a una o todas de golpe a travs de un fichero externo (.js).

</SCRIPT>

5.2. Parmetros
Ahora que ya sabemos definir nuestras propias funciones, vamos a dar un paso ms. Como habr podido observar, la uti lidad de nuestras funciones hasta ahora no es que sea muy alta ya que las acciones que se realizan dentro usan variables con va lores fijos que no podemos variar al hacer la llamada (nos puede interesar sumar nmeros distintos en diferentes llamadas a la funcin sumar). Gracias a los parmetros le podremos indicar a una funcin los valores con los que queremos operar. A esto se le conoce como pasar o mandar parmetros.

Advertencia: El nombre de nuestros parmetros no puede coincidir con el de ninguna de las variables declaradas dentro de la funcin. Hay que resaltar que los parmetros de las funciones se pasan por valor, es decir, aunque usemos un parmetro dentro de la funcin para almacenar otro resultado, el valor de la variable original usada en la llamada no vara. Procedam os a ver esto con un ejemplo:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable var cinco = 5; // Declaracin de funcin con un parmetro function sumar(numero){ // Modificamos el parmetro numero = 4; // El resultado de la suma ser 6 var miSuma = numero + 2;

5.2.1. Definicin de parmetros


Para definir los parmetros de una funcin basta con poner el nombre que le identificar, dentro de los parntesis que usamos al definir una funcin. Los parmetros pueden inter pretarse como variables dentro de las funciones, pero no es necesario declararlas previamente ya que el hecho de que sea un parmetro implica su declaracin.
<SCRIPT TYPE="text/j avascript"> // Declaracin de funcin con un parmetro function sumar(numero){ var miSuma = numero + 2;

}
// Llamada a la funcin con una variable sumar(cinco); // El resultado sera 6 ( 4 + 2 ) // Otra llamada (cinco sigue valiendo 5) sumar(cinco); // El resultado sera 6 ( 4 + 2 ) </SCRIPT>

}
</SCRIPT>

Ahora ya podemos decirle a nuestra funcin qu nmero queremos sumar con el 2. Esto est bien pero, y si queremos decirle a la funcin que sume nuestro nmero con otro que no sea el 2? La solucin, a continuacin.
97

96

www.FreeLibros.com

5.2.2. Mltiples parmetros


Por suerte, JavaScript ha pensado en todo y nos permite de finir en ma funcin tantos parmetros como necesitemos sim plemente con separar cada nombre con una coma (,). Asimismo, la llamada y paso de parmetros a la funcin debe hacerse de forma anloga. Veamos un ejemplo, extensin del anterior:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var cinco = 5, diez = 10; // Declaracin de constante var MAXIMO = 25; // Declaracin de funcin con dos parmetros function sumar(numerol, numero2){ var miSuma = numerol + numero2;

Debo sealar que com o las variables o parm etros en JavaScript no tienen un tipo definido, es posible pasar un dato de un tipo que no se espera dentro de la funcin. Por ejemplo, podemos pasar una cadena como parmetro de la funcin sumar sin problem as aunque el resultado no sera el deseado.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin con dos parmetros function sumar(numerol, numero2){ var miSuma = numerol + numero2;

}
// Llamada a la funcin con tipo no esperado sumar("salu", 2); // El resultado sera la cadena // "salu2" </SCRIPT>

}
// Declaracin de funcin con tres parmetros function sumarTresNumeros(numl, num2, num3)( var miSuma = numl + num2 + num3;

5.2.3. Parmetros obligatorios y opcionales


Para terminar con este punto, me gustara ponerle al tanto de que es posible hacer funcionar los parmetros como obliga torios u opcionales. Esto es, si tenemos declarada una funcin con dos parmetros podemos prepararla para que no ejecute su bloque si no se le han pasado todos los parmetros (los hacemos obligatorios) o que lo ejecute tanto con dos parmetros, uno o incluso ninguno (los hacem os opcionales) pudiendo hasta asignarles valores por defecto. Desgraciadamente, y siento dejarle con la miel en los labios, a estas alturas del libro no es posible explicarle esta funciona lidad ya que se requiere el manejo de objetos (concretamente el objeto arguments), los cuales no hemos aprendido a manejar, pero prometo hacerlo ms adelante. De m omento, puedo de jarle unos ejemplos de cmo se hara este control, omitiendo el cdigo correspondiente a los objetos:
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin con dos parmetros // obligatorios function sumar(numerol, numero2){ // Hacemos obligatorios los parmetros if (no hemos recibido numero 1 && no hemos recibido numero2){ // No hago nada )else{ var miSuma = numerol + numero2;

}
// Llamadas a la funcin con dos valores sumar(3, 6); // El resultado sera 9 sumar(cinco, diez); // El resultado sera 15 // Llamada a la funcin con tres valores sumarTresNumeros(MAXIMO, 3, diez); // El resultado // sera 38 sumarTresNumeros(0, diez, cinco); / / E l resultado // sera 15 </SCRIPT>

La llam ada a una funcin con parm etros debe hacerse pasando tantos datos como parm etros tenga. Si se diese el caso de omitir alguno de los parmetros en la llamada a una funcin, stos se inicializarn con un valor indefinido (undefined) y el resultado de las acciones ser impredecible.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin con dos parmetros function sumar(numerol, numero2){ var miSuma = numerol + numero2; // Llamada a la funcin con un solo valor (error) sumar(7); </SCRIPT>

En este script, el parm etro numero2 tomar el valor undef ined, haciendo que el resultado de la suma ( 7 + unde fined) sea NaN.
98

}
} 99

www.FreeLibros.com

// Llamadas a la funcin sumar(2, 5); // El resultado seria 7 sumar(2); // La funcin no hara nada sumar(); // La funcin no hara nada

// Asignamos un valor por defecto if (no hemos recibido numero2){ numero2 = 7;

)
var miSuma = numerol + numero2;

</SCRIPT>
< SCRIPT TYPE="text/javascript"> // Declaracin de funcin con un parmetro opcional

)
</SCRIPT>

function s u m a r (numerol, numero2){

// Asignamos un valor por defecto if (no hemos recibido numero2)( numero2 = 7;


var miSuma = numerol + numero2;

No podrem os hacer que el parm etro numerol sea op cional y numero2 necesario, ya que la llam ada sumar (,3) provocara un error. En cambio, numerol puede ser necesario y numero2 opcional puesto que la llamada sumar (3) es com pletamente vlida.

// Llamadas a la funcin
sumar(2, 5); // El resultado sera 7 sumar(2); // El resultado sera 9 (usando valor por // defecto) sumar(); // El resultado sera NaN (numerol es // necesario)

5.3. Valores de retorno


Las funciones nos proporcionan una funcionalidad ms: la posibilidad de devolvernos un valor como resultado de las acciones ejecutadas en su bloque. Para ello se utiliza la palabra reservada r e t u r n junto con el valor que queremos devolver. Para recoger el valor devuelto por la funcin hay que es cribir una asignacin haciendo que el operando de la derecha sea una llamada a una funcin. Completemos un ejemplo anterior de la funcin sum ar, ha ciendo que nos devuelva el resultado de la suma y recogiendo su valor en una variable:
<SCRIPT TYPE="text/j avascript">
// Declaracin de variables var cinco = 5; var resultado; // Declaracin de funcin function sumar(numerol, numero2){ return numerol + numero2;

</SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de funcin con dos parmetros // opcionales function sumar(numerol, numero2){ // Asignamos varios valores por defecto if (no hemos recibido numerol){ numerol= 7;
if (no hemos recibido numero2)( numero2= 1; var miSuma = numerol + numero2;

// Llamadas a la funcin
sumar(2, 5); // El resultado sera 7 (ningn valor // por defecto) sumar(2); / / E l resultado sera 3 (usando valor por // defecto) sumar(); // El resultado sera 8 (usando valores por // defecto)

}
// Recogida de valores resultado = sumar(3, 6); alert(resultado); // Mostrar 9 resultado = sumar(cinco, 10); alert(resultado); // Mostrar 15 </SCRIPT>

</SCRIPT>

Cuando los parmetros son opcionales, slo pueden serlo aquellos situados a la derecha del ltimo parmetro que sea necesario para realizar las acciones del bloque. Me explico, bi tenemos la siguiente funcin:
<SCRIPT TYPE="text/j avascript"> // Declaracin de funcin con un parmetro opcional
function
s u m a r (numerol,

numero2){

En el momento en que se devuelve el valor la funcin ter minar su ejecucin (se sale de la funcin), ignorando todo el cdigo que hubiese por debajo.
101

100

www.FreeLibros.com

<SCRIPT TYPE="text/j avascript"> // Declaracin de variables var cinco = 5; var resultado; // Declaracin de funcin function sumar(numerol, n u m ero2){ return numerol + numero2; a l e r t ("Estoy en la funcin!");

<SCRIPT TYPE="text/javascript"> // Declaracin de variable var resultado; // Declaracin de funcin function n o D evolverValor(){ return;

)
// Llamada a la funcin resultado = noD e v o l v e r V a l o r (); alert(resultado); </SCRIPT>

)
// Llamadas a la funcin resultado = s u m a r (3, 6) ; alert(resultado); // Mostrar 9 </SCRIPT>

En este ejem plo inicamente verem os el m ensaje con el valor de la variable resultado dado que el otro m ensaje se encuentra despus del return, as que no se ejecutar por haber salido de la funcin. Tam bin es posible utilizar la sentencia r e t u r n sin ningn valor haciendo que la funcin termine sin devolver ningn resultado. Esto resulta til cuando queremos evitar ejecutar parte del bloque de instrucciones, por ejemplo, en funcin del valor de los parmetros recibidos.
<SCRIPT TYPE="text/j avascript"> // Declaracin de funcin function acelerar(velocidad){ if (velocidad <= 120) { return; alert(velocidad + "km/h: Ojo con el acelerador!");

Si ejecutamos este script veremos que resultado tiene un valor unde fined puesto que no se le ha asignado ningn valor con la llamada a la funcin noDevolverValor.

5.3.1. Mltiples valores de retorno


A veces, dentro del bloque de una funcin, nos puede in teresar tener ms de un valor posible de retorno, pero nica mente ser posible devolver uno de ellos ya que, recordemos, la sentencia return nos finaliza la funcin. Veamos el caso de querer devolver el mayor de dos nmeros.
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var resultado; // Declaracin de funcin function detectarMayor(numerol, if (numerol > n u m e r o 2 ) { return numerol; }e l s e { return numero2;

numero2){

1
// Llamada a la funcin a c e l e r a r (100); a c e l e r a r (120); a c e l e r a r (130); </SCRIPT>

) )
// Llamadas a la funcin resultado = d e t e c t a r M a y o r (3, 6); // resultado vale 6 alert(resultado); resultado = detectarMayor(10, 8); // resultado vale 10 alert(resultado); </SCRIPT>

Si analizam os detenidam ente la funcin acelerar del ejem plo, vem os que si la velocidad pasada com o parm etro es m enor o igual a 120 se ejecuta el return y, por tanto, la funcin finaliza sin realizar accin alguna. Sin em bargo, en cuanto la velocidad es m ayor a 120 se nos m uestra un mensaje. Al utilizar el return sin un valor para devolver dentro de una funcin, qu pasara si intentsemos recoger el resultado de la llamada de esa funcin? No hace falta abrir un debate, lo veremos en un ejemplo:
102

Enestescnpf la variable resultado almacena el m ayor de los dos nmeros que es devuelto por la funcin despus de realizar la comparacin entre ambos. Por ltimo, debe saber que no es obligatorio recoger el valor devuelto por una funcin, pudiendo hacer que sirva directa mente como valor de un parmetro o simplem ente se puede dejar que se pierda.
103

www.FreeLibros.com

<SCRIPT TYPE="text/javascript"> // Declaracin de variables var resultado; // Declaracin de funcin function sumar(numerol, n u m e r o 2 ) { return numerol + numero2;

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> // Llamadas
a l e r t ( N u m b e r ("1.95")); // 1.95 alert(Number(true)); // 1 a l e r t (Number("hola")); // NaN </SCRIPT>

}
// Recogida del valor de retorno en variable resultado = s u m a (3, 5); // resultado vale 8 a l e r t(resultado); // Recogida del valor de retorno como parmetro // directo sin almacenarlo a l e r t ( s u m a r (3, 5 ) ); // Prdida del valor de retorno s u m a r (3, 5); </SCRIPT>

5.4.2. Funcin String


Esta funcin permite convertir cualquier valor en una ca dena. Aqu siempre es posible la conversin por lo que el valor devuelto es una cadena en todos los casos.
Tabla 5.2. Ejemplos con la funcin String.

5.4. Funciones predefinidas


JavaScript incluye una serie de funciones ya definidas que pueden ser usadas con cualquier variable, valor directo u ob jeto. Gracias a muchas de estas funciones podrem os realizar una conversin explcita de tipos de datos.

Valor 5 -3 1.95 "1,95 true false "hola" NaN

Conversin "5" "-3" "1.95" "1,95" "true" "false" "hola" "NaN"

5.4.1. Funcin Number


Esta funcin permite expresar cualquier valor como un n mero. En caso de que la conversin no sea posible, se devuelve el valor NaN (Not a Number).
Tabla 5.1. Ejemplos con la funcin Number. I Valor 5 -3 1.95 "1.95" "1,95" true false "hola" Conversin 5 -3 1.95 1.95 NaN 1 0 NaN I

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> I I Llamadas alert(String(1.95)); // "1.95" alert(String(true)); I I "true" alert(String("hola")); I I "hola" </SCRIPT>

5.4.3. Funcin isNaN


Esta funcin comprueba si un valor no es un nmero, por lo que devolver false en caso de ser un nm ero y true en cualquier otro caso. Antes de comprobar el valor, se aplica automticamente la conversin implcita de tipos.
105

104

www.FreeLibros.com

Tabla 5.3. Ejemplos con la funcin isNaN. Valor 5 -3 1.95 "1.95" "1,95 true false "hola" NaN Resultado false false false false true false false true true

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> // Llamadas

alert(isFinite(1.95)); // true alert(isFinite(true)); // true alert(isFinite("hola")); // false


</ SCRIPT>

5.4.5. Funcin parselnt


Esta funcin permite transformar cualquier cadena en un nmero entero, siguiendo estas reglas: 1. Si la cadena contiene varios nm eros separados, slo se convierte el primero. 2. Los espacios al principio y final de la cadena son omitids, pero se tienen en cuenta los espacios intermedios, que actuarn como separadores de nmeros. 3. Si el primer carcter de la cadena o la cadena completa no se puede convertir, se devuelve NaN. Nota: Si intenta convertir un ntnero con decimales, stos se omitirn ya que la funcin slo convierte el valor a un entero.
Tabla 5.5. Ejemplos con la funcin parselnt. Valor "5 "-3" "1.95" "1,95" true" "false" "hola" "1 2 3" " 1.5 2 3" "1 b 3" "a 2 3" Conversin 5 -3 1 NaN (no convertible) NaN (no convertible) NaN (no convertible) NaN (no convertible) 1 1 1 NaN (primer carcter no convertible) 107

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> // Llamadas a l e r t ( i s N a N (1.95)); // false alert(isNaN(true)); // false alert(isNaN("hola")) ; // true </SCRIPT>

5.4.4. Funcin isFinite


Esta funcin comprueba si un valor es un nmero finito. Si el valor es NaN, Inf inity o -Inf inity se devolver false y en el resto de los casos se devolver true. Tambin se realiza la conversin implcita de tipos antes de comprobar el valor.
Tabla 5.4. Ejemplos con la fundn isFinite. Valor 5 1.95 "1.95" "1,95" true false "hola" NaN Infinity -Infinity 106 Resultado true true true false (NaN tras conversin implcita) true true false (NaN tras conversin implcita) false false false

www.FreeLibros.com

Ejemplos con un script:


<SCRIPT TYPE=" text/javascript"> // llamadas

5.4.6. Funcin parseFloat


Perm ite convertir cualquier cadena en un nm ero real, mediante las mismas reglas que sigue p a r s e l n t con un par metro (no hay segundo parmetro opcional en esta funcin). Nota: El separador decimal en JavaScript es el punto (.).
Tabla 5.7. Ejemplos con la funcin parseFloat. Valor "5" "-3" "1.95" "1,95" "true" "false" "hola" "1 2.5 3" " 1 2 3" "1.5 b 3" "a 2 3" Conversin 5 -3 1.95 NaN (no convertible) NaN (no convertible) NaN (no convertible) NaN (no convertible) 1 1 1.5 NaN (primer carcter no convertible)

alert(parselnt("1.95")); // 1 alert(parselnt("true")); // NaN alert(parselnt ("1 b 3")); // 1


</SCRIPT>

Esta funcin cuenta adems con un segundo parmetro op cional para indicar la base (entre 2 y 36) en la que se encuentra el valor de la cadena a convertir. El resultado de la conversin siempre estar expresado en base 10. Si no se especifica este parm etro se siguen los siguientes criterios: 1. Si la cadena empieza por "Ox", la base es 16. 2. Si la cadena empieza por "0", la base es 8 (en desuso). 3. Para el resto de valores, la base es 10.
Tabla 5.6. Ejemplos con la funcin parselnt especificando una base. Valor "9" n-j -j ii "1 A" 011" "9" "011" "0x1 A" "0x1 A" "OxHola" Base 10 8 16 2 10 16 Conversin en base 10 9 (decimal) 9 (octal) 26 (hexadecimal) 3 (binario) 9 (se asume base 10) 9 (se asume base 8) 26 (se asume base 16) NaN (no convertible en base 10) NaN (no convertible)

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> // Llamadas a lert(parseFloat("1.95")); // 1.95 alert(parseFloat("true")); // NaN a lert(parseFloat("1.5 b 3")); // 1.5 </SCRIPT>

5.4.7. Funcin escape


Esta funcin se encarga de codificar los caracteres especiales (espacio, acentos, signos de puntuacin...) de una cadena, de volvindola en formato UNICODE ( h t t p : / / u n ic o d e . org ). Cada carcter codificado ir con la forma %xx, siendo x x su equivalente hexadecimal. Esta funcin es til para que una ca dena pueda ser leda sin problem as, especialmente cuando se trata de transacciones HTTP (envos de formularios, cookies...) donde el espacio en blanco, por ejemplo, no puede transmitirse sin codificar ya que provocara un error.
109

Ejemplos con un script:


<SCRIPT TYPE=" text /javas cript ">
// Llamadas

alert(parselnt("9", 10)); // 9 alert(parselnt("l", 16)); // 26 alert(parselnt("9")); // 9 alert(parselnt("Oxl")); // 26 alert(parselnt("OxHola", 16)); // NaN


</SCRIPT>

108

www.FreeLibros.com

Tabla 5.8. Ejemplos con la funcin escape. Valor "dos palabras" "hola?" "Mi cdigo!" Codificacin "dos%20palabras" "%BFhola%3F" "%A1 Mi%20c%F3digo%21" | Valor

Tabla 5.9. Ejemplos con la funcin unescape. Descodificacin "dos palabras" "hola?" "Mi cdigo!"

"dos%20palabras" "%BFhola%3F" "%A1 Mi%20c%F3digo%21"

Ejemplos con un script:


<SCRIPT TYPE="text/javascript"> // Llamadas alert(escape("dos palabras")); // "dos%20palabras" alert(escape("hola?")); // "%BFhola%3F" alert(escape( Mi cdigo!")); // "%AlMi%20c%F3digo%21" </SCRIPT>

Ejemplos con un script:


<SCRIPT TYPE="text/j avascript"> / / Llamadas alert(unescape("dos%20palabras")); // "dos palabras" alert(unescape("%BFhola%3F")); // "hola?" alert(unescape("%AlMi%20c%F3digo%21")); // "Mi cdigo!" </SCRIPT>

S, es difcil descifrar a simple vista qu es lo que habamos escrito antes de codificar algunos de los caracteres. Pero mien tras JavaScript lo entienda no tiene por qu sufrir. La funcin e s c a p e no codifica los siguientes caracteres especiales, por lo que los deja tal cual estn: 1. 2. 3. 4. 5. 6. 7. Asterisco (*) Arroba (@) Signo de resta (-) Guin bajo o subrayado (_) Signo de suma (+) Punto ( . ) Barra o slash (/)

Al igual que ocurre con la funcin escape, est recom en dado el uso de las funciones decodeURI o decodeURICom-

ponent.

5.4.9. Funcin eval


Esta funcin, de gran utilidad en muchos casos, interpreta una cadena y la ejecuta como si se tratase de una porcin de cdigo JavaScript. En caso de que haya ms de una instruccin en la cadena, separadas por punto y coma ( ;) , eval ejecuta cada una de ellas por separado y en el orden que aparecen escritas.
Tabla 5.10. Ejemplos con la funcin eval. Valor "2+2" suma(2, 2);" "var num=3; suma(2, num);" Resultado 4 (devuelve la suma). 4 (devuelve la ejecucin de la funcin, que debe existir). 5 (declara la variable y devuelve la ejecucin de la funcin). Error (num no est definida). Error (num se define despus). Error (interpreta hola como una variable). 111

Dado que los caracteres especiales son m uy usados en el paso de parm etros entre pginas W eb (formularios, por ejemplo), est recomendado el uso de las funciones encodeU RI o encod eU R IC om pon en t en su lugar ya que funcionan de forma muy similar. Adems, como e s c a p e no trabaja apro piadamente con caracteres fuera del cdigo ASCII ( h t t p : / / www , a s c i i . c l / e s / ) s e recomienda usar esas funciones al ternativas desde JavaScript 1.5 en adelante.

5.4.8. Funcin unescape


Com o puede im aginar, esta funcin realiza el proceso inverso a la que acabamos de ver: descodifica los caracteres convertidos con la funcin e s c a p e , volvindolos a dejar como estaban.
110

"suma(2, num);" "suma(2, num); var num=3;" "hola"

www.FreeLibros.com

Ejemplos con un script:


<SCRIPT TYPE="text/javascript">

// Uso de variable local alert(vale); // Error, variable no definida </SCRIPT>

// Llamadas
alert(eval("2+2")); // 4 alert(eval("var num=3; sumar(2, num);")); 1 / 5 alert(eval("hola")); I I Error </SCRIPT>

En este ejemplo com probamos cmo el valor de la variable local v a l e es correcto slo si es utilizado dentro de la propia funcin, que es la nica que tiene acceso a ella, mientras que si intentamos obtener su valor directamente obtendremos un error al no estar definida fuera de la funcin. Nota: Los parmetros de una funcin son variables locales de la misma. Por otro lado, las variables definidas dentro de otro tipo de bloques (estructuras de control) tienen un comportamiento un tanto peculiar puesto que no son locales en el sentido estricto de la palabra. La variable estar definida en todo momento, por lo que es accesible desde fuera del bloque, pero pueden ocurrir dos cosas al intentar leer su valor: 1. Si el bloque es ejecutado (se cumple su condicin de entrada), entonces el valor que se asigne a la variable estar igualmente disponible fuera de l. 2. Si no se ejecuta nunca el bloque (la condicin no se cumple la primera vez), la variable es accesible pero con un valor u n d e f in e d .
<SCRIPT TYPE="text/javascript"> // Estructura con una variable local if (5 < 25) { var vale = true;

Nota: Use la funcin e v a l slo si est manejando cadenas. Tambin es capaz de interpretar cdigo JavaScript, pero estar haciendo un uso indebido. Por ejemplo: e v a l (2 + 2 ) ; o e v a l (s u m a r ( 2 , 2 ) ) ;

5.5. mbito o alcance de las variables


Se le llama mbito o alcance de una variable al lugar donde est disponible despus de haber sido declarada, cosa que ocurre en todos los lenguajes de programacin. En el caso de JavaScript, dado que se declaran las variables dentro de una pgina Web, su disponibilidad queda reducida a dicha pgina, no pudiendo acceder a las de otra pgina. Dentro de una pgina hay dos tipos de mbitos: local y global.

5.5.1. mbito local


Si declaramos una variable en el bloque de una funcin e intentamos usarla fuera de ella, obtendremos un error ya que es como si nunca hubiera sido declarada.
<SCRIPT TYPE="text /javascript "> I I Declaracin de una funcin con una variable local function validar(numero)( var vale; if (numero < 25) { vale = true; )else{ vale = false;

}
// so de variable local alert(vale); // true </SCRIPT>

En este prim er ejemplo, la variable v a l e es declarada de forma local dentro del bloque i f . Como la condicin de en trada se cumple (5 < 25) entonces su valor es accesible fuera del bloque. Veamos el caso contrario.
<SCRIPT TYPE="text/javascript"> // Estructura con una variable local if (30 < 25) { var vale = true;

}
return vale;

I I Llamadas a funcin
alert(validar(5)); // true alert(validar(30)); // false

}
// Uso de variable local alert(vale); // undefined </SCRIPT>

113

www.FreeLibros.com

En esta otra ocasin, como la condicin de entrada no se cumple (30 < 2 5 ) har que la variable local v a l e no tome el valor t r u e . Entonces, puesto que la variable s est definida para JavaScript, nos encontramos con un ejemplo con un valor no definido. Para evitar este tipo de situaciones "extraas", intentaremos declarar previamente todas las variables que se usen dentro de una estructura de control y, siempre que sea posible, asignarle un valor inicial por defecto.
<SCRIPT TYPE="text/javascript"> // Declaracin de variable con valor inicial var vale = false; // so de variable en estructura if (30 < 25) ( vale = true;

De este m odo conseguimos lo siguiente: 1. La constante global MAXIMO es accesible dentro de la funcin y la comparacin con el parmetro num ero se hace de forma correcta. 2. El valor de la variable local vale de la funcin validar es recogido correctamente en las llamadas a la misma. 3. Al intentar acceder directamente al valor de vale fuera de la funcin validar, obtenemos un error ya que es de mbito local y, por tanto, slo accesible dentro de la funcin. 4. El valor de la constante MAXIMO tam bin puede ser mostrado si la utilizamos en otra parte del cdigo. En el apartado anterior comentbamos las situaciones "ex traas" que se pueden crear al declarar una variable local dentro de una estructura de control y la forma de evitarlas:
<SCRIPT TYPE="text/j avas cript"> // Declaracin de variable con valor inicial var vale = false; // so de variable en estructura if (30 < 25){ vale = true;

)
// Uso de variable alert(vale); // false </SCRIPT>

5.5.2. mbito global


Cuando la variable est definida fuera de un bloque, la hacemos accesible desde cualquier parte del cdigo, incluso dentro de las funciones y estructuras de control. Veamos un ejemplo con variables tanto locales como glo bales para que el concepto de mbito quede ms claro:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable global var MAXIMO = 25; // Declaracin de una funcin con una variable local function validar(numero){ var vale; if (numero < MAXIMO){ vale = true; }else{ vale = false;

)
// so de variable alert(vale); // false </SCRIPT>

Si miramos de nuevo el cdigo y lo juntam os con el con cepto de mbito recin explicado, nos podremos dar cuenta de que lo que hicim os en realidad fue darle un mbito global a la variable vale.

5.5.3. Prioridad de las variables


Si dentro de una funcin se declara una variable local con el mismo nombre que una variable global, tiene preferencia la local a la hora de ser utilizada dentro de esa funcin. Veamos algunos ejemplos:
<SCRIPT TYPE="text/javascript"> // Declaracin de variable global var numero = 5; // Declaracin de una funcin con una variable local function darNumero(){ var numero = 10; return numero;

}
return vale;

}
// Oso de variables de distintos mbitos alert(validar(5)); // true alert(validar(30)); // false alert(vale); // Error, variable no definida alert(MAXIMO); // 25 </SCRIPT>

114

115

www.FreeLibros.com

}
// Oso de variables con mismo nombre alert (numero + \n + darNumeroO + "\n" + numero); </SCRIPT>
[Aplicacin JavaScript]

5
| Aceptar!

Figura 5.1. Ejemplo 1 de prioridad de variables.

Si observa la figura 5.1 ver que el resultado de nuestro ejemplo cumple la regla de prioridad: la llamada a la funcin d a r Numero no altera el valor de la variable global (5) ya que usa la local con el mismo nombre. Aunque ya tenemos la buena costumbre de declarar nues tras variables siempre con la sentencia v a r , tenga presente que el omitirla al declarar la variable local del ejemplo anterior har que s se modifique la variable global.
<SCRIPT TYPE="text/javascript"> I I Declaracin de variable global var numero = 5; // Declaracin de una funcin sin una variable local function darNumeroO { numero = 10; return numero;

}
// Oso de variables con mismo nombre alert (numero + \n" + darNumeroO + "\n" + numero); </SCRIPT>
[Aplicacin JavaScript]

h %
10 | Aceptar |

Figura 5.2. Ejemplo 2 de prioridad de variables.

La pequea diferencia respecto al cdigo anterior (omisin de la sentencia v a r ) provoca que no declaremos ninguna va riable local en la funcin, as que se utiliza la variable numero de mbito global a la hora de asignar el valor 10.

116

www.FreeLibros.com

6
Programacin orientada a objetos

La program acin estructurada (la que hemos visto hasta ahora) tiene los datos y las funciones separados sin una rela cin entre ellos, ya que lo nico que se busca es procesar una serie de datos para obtener un resultado. Bsicamente se podra decir que slo se escriben funciones que procesan datos, dado que con esta forma de program ar se tiende a pensar primero en la forma de funcionar de los procedim ientos o funciones, dejando en un segundo plano las estructuras de datos que se manejan dentro de esas funciones. La program acin orientada a objetos (POO) introduce una nueva estructura (los objetos) que contiene los datos y las funciones que manejan stos, estando as ambas partes relacionadas. Esto hace ms fcil equiparar los objetos a cmo son las cosas en la vida real ya que cualquier cosa o entidad se compone de distintas piezas o partes y form an un todo. Haciendo un smil, se dira que las piezas (objetos) tienen sus propias caractersticas (datos y funciones) y al juntarse con otras (escribir un cdigo) crean un elemento con una utilidad determinada (el programa o script). Los datos que contiene un objeto son conocidos como pro piedades o atributos, y las funciones como mtodos. Si hacemos memoria del apartado 2.2.4 del captulo 2, recor daremos que se explic un ejemplo de objeto con un coche. Las propiedades de ese objeto seran su conjunto de caractersticas (color, marca y modelo) y los m todos las distintas funciona lidades que ofrece el coche (arrancar, acelerar y frenar). Cada objeto puede diferenciarse de otro por su estructura (el objeto coche no se parece al objeto mesa) o simplemente por los valores de sus propiedades. Siguiendo con el ejemplo, no todos los coches son iguales en sus caractersticas (color rojo,
117

www.FreeLibros.com

azul, v erd e...) pero todos s ofrecen las m ismas funcionali dades (se entiende que hablamos de funcionalidades bsicas, no vamos a adentram os en el equipamiento extra). Con esta observacin aparece otro concepto importante: las instancias. Todas parten de la misma estructura base pero sus propiedades toman distintos valores.

en el ejemplo del constructor mediante llaves, ya que realmente se crea una instancia, mientras que function nos deja una estructura lista para crear instancias. En las secciones que siguen verem os cmo usar cada tipo de constructor.

6.1. Definicin de un objeto (constructor)


Cualquier lenguaje de program acin actual nos permitir crear y definir nuestros propios objetos para poder adaptar el cdigo a nuestras necesidades. Adems cada lenguaje ofrece una coleccin ms o menos amplia de objetos predefinidos que podremos usar igualm ente sin necesidad de quebrarnos la cabeza inventndolos por nuestra cuenta. Una vez que tenem os claro las propiedades y mtodos que van a form ar nuestro objeto, definiremos su constructor, cuyo objetivo es crear e inicializar las instancias que hagamos de l. Para conseguir esto disponem os de dos opciones en JavaScript: 1. Utilizar llaves ( { } ), dentro de las cuales definiremos todas las propiedades y mtodos. La sintaxis sera esta:
var miObjeto = {propiedades, mtodos};

6.2. Trabajar con objetos


Antes de m eternos ms en faena con los objetos, voy a presentarle los distintos operadores y sentencias que tiene JavaScript para poder acceder a los distintos elementos que constituyen los objetos. El punto ( . ): sirve para obtener el valor de una pro piedad o ejecutar un mtodo del objeto que le precede. Se utiliza como sigue:
var color = miCoche.color; miCoche.arrancar();

Los corchetes ( [ ] ): sirven para lo mismo que el punto, pero para acceder a una propiedad o mtodo debemos escribirlo como un string.
var color = miCoche["color"]; miCoche["arrancar"] ();

En realidad esto no es un constructor en el sentido estricto de la palabra puesto que no podrem os crear instancias a partir de esta estructura, sino que estaramos creando una instancia directamente. De modo que po dramos decir que actan como un constructor "de un solo uso". 2. U tilizar la sentencia function, definiendo dentro de ella las propiedades y mtodos. Se escribira de la siguiente manera:
function MiObjeto( ) { // Definicin de propiedades // Definicin de mtodos

new : este operador nos permite crear una instancia del objeto que indiquemos.
var miCoche = new Coche();

delete: se utiliza para borrar una propiedad de una instancia, dejando de estar accesible. Los mtodos no se pueden eliminar de una instancia.
delete miCoche.color;

in: nos permite saber si una propiedad existe en el obj eto que indiquemos, devolviendo un valor true si existe, y false si no. El nombre de la propiedad debe estar escrito como un string.
alert("color" in Coche);

> Como nom enclatura a seguir, le recom iendo que ponga en maysculas la primera letra de cada palabra, incluida la primera. De este modo ser ms fcil diferenciarlos de las fun ciones. Fjese que se ha seguido la nom enclatura de variables
118

instanceof: nos dice si la instancia especificada co


rresponde al objeto que indiquemos.
alert(miCoche instanceof Coche);

119

www.FreeLibros.com

this: este operador sirve para referirse a un objeto como sustituto de su nom bre. Su funcionam iento lo verem os a continuacin para que pueda comprenderlo totalmente.

function Coche(valorMarca, valorModelo, valorColor) // Definicin de propiedades this.marca = valorMarca; this.modelo = valorModelo; this.color = valorColor;

6.2.1. Definicin de propiedades en un objeto


Segn el tipo de constructor que hayamos empleado, las propiedades se definen de una manera u otra. Aqu veremos el procedimiento a seguir para cada uno de ellos. En el caso de haber usado las llaves, las propiedades se es criben como pares de la forma propiedad:valor y separando cada uno de esos pares con una coma.
var miCoche = {marca: "Fiat", modelo: "Punto", color: "Roj o " };

I I Definimos instancias
var miCochel = new Coche("Fiat", "Punto", "Rojo"); var miCoche2 = new Coche("Honda", "Civic", "Azul"); var miCoche3 = new Coche("Seat , "Ibiza", "Negro");

No habra ningn problema en caso de que los parm e tros tengan el mismo nombre que las propiedades, ya que la sentencia this ayuda a diferenciar cundo nos referimos a la propiedad propia del objeto y cundo al parmetro.
function Coche(marca, modelo, color) // Definicin de propiedades this.marca = marca; this.modelo = modelo; this.color = color; {

Si por el contrario hemos utilizado la sentencia function, entonces debemos hacer uso de la palabra reservada this para hacer referencia a elementos del propio objeto. La sintaxis bsica sera esta:
function CocheO { // Definicin de propiedades this.marca = "Fiat"; this.modelo = "Punto"; this.color = "Rojo";

}
// Definimos instancias var miCoche = new Coche("Fiat", "Punto", "Rojo"); var elCocheDeMiVida = new Coche("Lamborghini", "Murcilago", "Blanco");

6.2.2. Definicin de mtodos


De igual m odo que las propiedades, tam bin podem os definir los mtodos que tendr nuestro objeto y las acciones que ejecutar cuando sea llamado. Para esto tenemos dos op ciones: definir la funcin a la vez que el mtodo o asignarle una funcin ya existente.
D efin ir fun cio n es a la vez que un m todo

1 Esto est bien pero tiene un inconveniente: los valores que se asignan son fijos! Si cresemos instancias del objeto Coche todas tendran los mismos datos. En el prim er caso (uso de llaves) slo podremos solventarlo asignando distintos valores a cada instancia que creemos directamente con las llaves, pero tendremos que repetir una y otra vez todos los nom bres de las propiedades.
var miCochel = (marca: "Fiat", modelo: "Punto", color: "Rojo"); var miCoche2 = {marca: "Honda", modelo: "Civic", color: "Azul"}; var miCoche3 = {marca: "Seat", modelo: "Ibiza", color: "Negro"};

Esto lo haremos con la sentencia function, que ya cono cemos, pero sin asignar un nombre de funcin puesto que lo que haremos es almacenar el contenido de dicha funcin dentro de la propiedad que representa al mtodo. Vemoslo con ejemplos:
// Objeto definido con llaves var miCoche = {arrancar: function( ) { alert("brummm"); }}; // Objeto definido con function function CocheO { // Definicin de mtodos this.arrancar = function( ) { alert("brummm"); };

Sin em bargo, si u tilizam os la sentencia function lo tendrem os m ucho ms fcil puesto que podrem os usar los parm etros com o los valores que se asignarn a las propie dades.
120

} 121

www.FreeLibros.com

En am bos casos hem os definido el m todo arrancar de la m isma form a: asignando una funcin a la propiedad del objeto que sim boliza el m todo. Lo nico que cam bia es cmo realizam os esa asignacin: con dos puntos ( : ) en un caso y con el operador de asignacin (=) en el otro. Para llam ar a cualquiera de los m todos basta con acceder a l como una funcin, junto con el operador punto ( . ) por estar dentro de un objeto:
// Mtodo de objeto definido con llaves miCoche.arrancar(); // Mtodo de objeto definido con function var miCoche = new Coche(); miCoche.arrancar();

todo desde el punto de vista del m antenim iento del cdigo, ya que es m s fcil localizar las funciones para hacer alguna m odificacin.
// Definicin de funcin function arrancarCoche(){ alert("brummm");

)
// Asignar funcin a mtodo var miCoche = {arrancar: arrancarCoche}; function CocheO { // Definicin de mtodos this.arrancar = arrancarCoche;

} M ediante esta tcnica, cuando se haga una llamada al m todo arrancar del objeto, en realidad se estar ejecutando el cdigo correspondiente a la funcin arrancarCoche. Las llamadas a los mtodos no varan respecto a lo visto hasta ahora:
// Mtodo de objeto definido con llaves miCoche.arrancar(); // Mtodo de objeto definido con function var miCoche = new Coche(); miCoche.arrancar();

Fjese que para la segunda llamada es necesario crear pre viamente una instancia del objeto para poder acceder a las propiedades y mtodos. En el caso de que necesitsem os pasar parm etros a los m todos, tendrem os que declarar nuestros m todos de una form a casi idntica a com o lo h aram os con una funcin normal.
// Objeto definido con llaves var miCoche = {acelerar: function(velocidad) alert("acelerando hasta " + velocidad); }}; // Objeto definido con function function CocheO ( I I Definicin de mtodos this.acelerar = function(velocidad) { alert("acelerando hasta " + velocidad); }; {

Si necesitam os que nuestra funcin reciba parmetros tan slo habr que indicarlos cuando definamos la funcin externa. La asignacin al mtodo no vara respecto a una funcin sin parmetros, y el mtodo quedar preparado para recibir los mismos parmetros:
I I Definicin de funcin con parmetros
function acelerarCoche(velocidad){ alert("acelerando hasta " + velocidad);

} Las llamadas a mtodos con parmetros es exactamente igual que para una funcin normal.
// Mtodo de objeto definido con llaves miCoche.acelerar (100); I I Mtodo de objeto definido con function var miCoche = new CocheO; miCoche.acelerar(100);

>
// Asignar funcin a mtodo var miCoche = {acelerar: acelerarCoche}; function CocheO { I I Definicin de mtodos this.acelerar = acelerarCoche;

} Veamos cmo seran entonces las llamadas con parmetros:


I I Mtodo de objeto definido con llaves
miCoche.acelerar(lOO); // Mtodo de objeto definido con function var miCoche = new Coche(); miCoche.acelerar(100);

A sig n a r fun cio n es existen tes a un m todo

Este otro sistem a consigue el mismo resultado que el an terior, pero nicam ente se diferencia en que las funciones que se asignan a los m todos ya se encuentran definidas fuera del objeto. Esto puede resultar m s interesante, sobre
122

123

www.FreeLibros.com

Exactamente igual que con el prim er mtodo! Esto es lo bueno de la flexibilidad que nos ofrece JavaScript: podemos definir las cosas de distintas maneras, pero la forma de utili zarlas es la misma. Una caracterstica que debemos tener en cuenta de los m todos es que su cdigo podr acceder a todas las propiedades del objeto simplemente con utilizar la sentencia t h i s . Esto se puede hacer con cualquiera de los dos mtodos que acabamos de ver:
<SCRIPT TYPE="text/javascript"> // Definicin de funcin con acceso a propiedades function mostrarColorCoche( ) { alert("El color del coche es: + this.color);

6.3.1. Sentencia for - in


Gracias a esta sentencia podremos obtener todas las pro piedades y mtodos de una instancia de un objeto y tambin acceder a sus valores o ejecutarlos. Esto es til cuando no cono cemos sus nombres o queremos recorrer todas de principio a fin. La sintaxis que se debe seguir para utilizarla es la siguiente:
<SCRIPT TYPE="text/javascript"> // Sentencia for-in for (nombrePropiedad in instancia) I I Mi bloque de instrucciones

}
< / SCRIPT>

}
I I Definicin del objeto
function Coche(marca, modelo, color) { // Definicin de propiedades this.marca = marca; this.modelo = modelo; this.color = color; // Acceso a propiedades desde funcin definida dentro this.mostrarMiColor = function( ) { alert("Mi color es: " + this.color); }; // Acceso a propiedades desde funcin existente this.mostrarColor = mostrarColorCoche;

}
var miCoche = new Coche("Fiat", miCoche.mostrarMiColor(); miCoche.mostrarColor(); </SCRIPT>
[Aplicacin JavaScript]
Mi color os! Rojo

"Punto", "Rojo") ;

Si usamos esta estructura, el bloque de instrucciones que definamos ser ejecutado para cada una de las propiedades. El nombre de la propiedad queda almacenado en una variable (nombrePropiedad) que puede ser declarada en el momento de escribir la sentencia, como ya ocurra en los bucles for. Esta variable la usaremos dentro del bloque para realizar los accesos que necesitemos. Si el objeto no tuviese ninguna propiedad el bucle no se ejecutara, pasando directamente a la siguiente instruccin del script. Imaginemos que usamos dentro de esta sentencia una ins tancia del objeto Coche con las propiedades color, marca y modelo y el m todo arrancar:
<SCRIPT TYPE="text/javascript"> // Declaracin de la instancia var miCoche = new Coche("Fiat", "Punto", "Rojo"); I I Declaracin de variable var mensaje = "Contenido de \"miCoche\":\n"; // Sentencia for-in for (var miPropiedad in miCoche) { mensaje += "\t* " + miPropiedad + "\n";

| [Aplicacin JavaScript]
j f , El color del coche e s : Rojo

IR)

Aceptar

}
// Mostramos las propiedades alert(mensaje); </SCRIPT>
[Aplicacin JavaScript]
i *\ t-*.N Contenido de "miCoche',: * marca * modelo * color * arrancar f Aceptar ^

Figura 6.1. Acceso a propiedades desde un mtodo.

6.3. Estructuras de manipulacin de objetos


Como ya adelantamos en el captulo referente a las estruc turas de control, JavaScript nos ofrece algunas estructuras para acceder a las propiedades y mtodos de un objeto.
124

Figura 6.2. Sentencia for-in muestra las propiedades de la instancia. 125

www.FreeLibros.com

Como resultado de ejecutar este script veramos un mensaje con todos los nombres de las propiedades y mtodos de nuestra instancia: color, marca, modelo y arrancar. Tambin sera posible acceder al valor de dichas propiedades mediante el uso de los corchetes ( [ ]) como operador sobre objetos. Veamos cmo realizar esto con el ejemplo anterior:
<SCRIPT TYPE="text/javascript"> // Declaracin de la instancia var miCoche = new Coche("Fiat", "Punto", "Rojo"); // Declaracin de variable var mensaje = "Valores en \"miCoche\":\n"; // Sentencia for-in for (var miPropiedad in miCoche) { mensaje += "\t* V" + miPropiedad + "V tiene valor: " + miCoche[miPropiedad] + "\n";

<SCRIPT TYPE="text/javascript"> // Accesos consecutivos a propiedades y mtodos alert(miCoche.color); alert(miCoche.marca); alert(miCoche.modelo); miCoche.arrancar () ; </SCRIPT>

)
// Mostramos las propiedades y valores alert(mensaje); </SCRIPT>
[Aplicacin JavaScript]
i \ Valores en "miCoche": * 'marca1 tiene valor: Fiat * 'modelo' tiene valor: Punto * 'color'tiene valor: Rojo * 'arrancar' tiene valor: function 0 { alert("brurnmm");

Como ve, para mostrar los valores de estas tres propiedades y llamar al mtodo debemos escribir repetidamente el nombre del objeto al que queremos acceder (miCoche). Esto resultar an ms molesto cuantas ms operaciones necesitemos hacer sobre las propiedades o mtodos. Sin embargo, gracias a la sen tencia with, podrem os fijar el objeto al que vam os a acceder y escribir nicamente el nombre de la propiedad o mtodo para acceder a ellos. Veamos primero la sintaxis:
<SCRIPT TYPE="text/javascript">
// Sentencia with with (objeto) { // Bloque de instrucciones sobre las propiedades // y mtodos

>
</SCRIPT>

>

A hora usarem os esta nueva estructura con el ejemplo que vim os al principio del apartado para que pueda obsevar la diferencia:
<SCRIPT TYPE="text/javascript> // Sentencia with with (miCoche) { alert(color); alert(marca); alert(modelo); arrancar ( );

Figura 6.3. Sentencia for-n muestra las propiedades


de la instancia y sus valores.

Gracias a este cdigo obtendramos el resultado de la fi gura 6.3. Como curiosidad, puede ver que el "valor" del m todo arrancar se muestra en realidad como el cdigo que contiene. Quiz ha pasado desapercibido, pero dese cuenta de que hemos accedido a todas las propiedades de una instancia sin saber sus nombres ni cuntas haba. Esta es la gran ventaja de poder contar con esta estructura de control.

)
</SCRIPT>

6.3.2. Sentencia with


Notar que en algunas ocasiones necesitar acceder a las propiedades y m todos de un objeto de forma m uy consecu tiva, haciendo que su cdigo sea poco elegante y pesado de escribir. Por ejemplo:
126

Ha visto? Ya no es necesario escribir una y otra vez el nombre de la instancia, lo cual hace ms cmodo y limpio el acceder tanto a las propiedades como al mtodo. Note que tambin se ha eliminado el operador punto ( .) puesto que la sentencia w i t h hace ese trabajo por nosotros. Para terminar con esta sentencia, destacar que dentro del bloque de instrucciones tam bin podrem os usar variables y funciones ajenas al objeto, es decir, otras variables o fun ciones que tengamos definidas en cualquier parte de nuestro cdigo.
127

www.FreeLibros.com

<SCRIPT TYPE="text/javascript"> // Declaracin de variable var velocidad = 100; I I Declaracin de funcin function subirVelocidad( ) { velocidad += 20;

}
I I Sentencia with
with (miCoche) { alert(color); alert(marca); alert(modelo); acelerar(velocidad); subirVelocidadO; acelerar(velocidad);

}
</SCRIPT>

Tras ejecutar este script, se nos mostrarn mensajes con el color, marca y modelo de nuestra instancia miCoche. A con tinuacin se llama al mtodo acelerar de la instancia con la variable velocidad como parmetro, con valor 100. Acto seguido se ejecuta una funcin ajena al objeto que incrementa esa variable ve locidad y ,para terminar, se vuelve a llamar al mtodo acelerar con su parmetro mostrando el valor 120.

128

www.FreeLibros.com

Objetos de JavaScript

Dentro del ncleo de JavaScript existen varios objetos que ya estn definidos y tienen una serie de funcionalidades tre mendamente tiles en m uchos casos. De cada uno de estos objetos expondrem os el constructor, propiedades y m todos que tenga asociados, as como ejem plos de algunos de ellos para m ejorar su com prensin o utilidad. Todos los objetos predefinidos de JavaScript disponen del mtodo toStr ing (), que devuelve el objeto expresado como una cadena, realizando para ello conversiones implcitas si es necesario. Para hacer uso de l, basta con hacer la llamada desde el objeto que nos interese: miObj eto.toString ().

7.1. Objetos envoltorio


Los objetos que vamos a ver en este apartado se tratan en realidad de un envoltorio (wrapper) de los tipos de datos pre definidos (booleano, nmero y cadena o string), como ya ade lantamos en el captulo 2. Con esto queremos decir que crear una instancia de uno de estos objetos m ediante la sentencia new sera lo mismo que declarar una variable de esos tipos directamente con el valor, pudiendo por tanto stas ltimas acceder a la mayora de las propiedades y mtodos de su ob jeto envoltorio.

7.1.1. Objeto Boolean


Como puede imaginar, este objeto expresa un valor como un booleano, o lo que es lo mismo, como true o false.
129

www.FreeLibros.com

C o nstru cto r

7.1.2. Objeto Number


Este objeto nos permite crear instancias que tengan un valor numrico (entero o real).
C o nstru cto r

Para crear una instancia debe hacer lo siguiente:


<SCRIPT TYPE="text/javascript"> // Objeto Boolean var nombre__variable = new Boolean (valor) ; </SCRIPT>

Aqu debe tener cuidado puesto que la conversin al tipo booleano no se realiza de una forma intuitiva: Si el valor es omitido o es 0, -0, nuil, cadena vaca (" "), valor booleano false, valor undefined o valor NaN, entonces este objeto devuelve una instancia con valor

Su constructor es m uy simple:
<SCRIPT TYPE="text/javascript"> // Objeto Number var nombre_variable = new Number(valor); </SCRIPT>

false.
En cualquier otro caso, devuelve true. Advertencia: Tenga presente estas reglas porque casos como lacadena " f a l s e " no hacen que el objeto devuelva f a l s e como podram os pensar, sino que obtenemos un t r u e . Tabla 7.1. Ejemplos del constructor Boolean.
I Constructor new Boolean() new Boolean(1) new Boolean(O) new Boolean(65) new Boolean(false) new Boolean(true) new Booleanf") new BooleanfO") new Boolean('T') new Boolean("true") new Boolean(''false") P ropiedades y m todos Resultado false true false true false true false true true true true

Al igual que ocurre con el objeto Boolean, en funcin del valor que se reciba como parmetro en el constructor se ob tendrn distintos resultados: Si no recibe un valor, devuelve un 0. Si recibe un nmero (expresado como tal o en forma de string), entonces inicializa el objeto con ese valor. La cadena vaca equivale a un 0. En caso de que reciba un valor no numrico, devuelve

NaN.
El valor false se interpreta como un 0 y true como un 1. Tabla 7.2. Ejemplos del constructor Number.
Constructor new NumberQ new Number(1) new Number(O) new Number(65) new Number(false) new Number(true) new Number("") new Boolean("0") new Boolean('T') new Numberftrue") new Number("false) Resultado 0 1 0 65 0 1 0 0 1 NaN NaN

Este objeto no tiene ninguna propiedad o m todo. No hem os empezado por el ms completo, pero no se preocupe que los siguientes traern ms sorpresas.
130

131

www.FreeLibros.com

P rop ied ades y m todos

Este objeto (ahora s) tiene una serie de propiedades, que lis taremos a continuacin, con una peculiaridad: nicamente son accesibles desde el propio objeto y no desde sus instancias.

el valor de la instancia sino que devuelven el resultado de su operacin, por lo que si queremos usar ste en otra parte de nuestro cdigo hara falta almacenarlo previamente.
[Aplicacin JavaScript]

MAX VALUE: Indica el m ayor nm ero que se puede


representar en JavaScript.

MIN VALUE: Lo m ism o, pero con el m enor nm ero


representable. NaN (Not A Number ): Valor especial, que ya vimos junto con los tipos de datos, que indica que el valor no es un nmero. POSITIVE_INFINITY: Valor especial (Infinity) que indica que el nmero es mayor que el mximo represen table (MAX_VALUE). NEGATIVE_INFINITY: Valor especial (-Infinity) que indica que el nm ero es m enor que el m nim o representable (MIN_VALUE).
<SCRIPT TYPE="text/javascript"> // Instancia de Number var numero = new Number(5); // Propiedades del objeto Number alert("Propiedades de Number:" + "\n" + "\tMAX_VALUE: "+ Number.MAX VALUE +"\n"+ "\tMIN_VALUE: "+ Number.MIN_VALUE +"\n"+ "\tNaN: " + Number.NaN + "\n" + "\tPOSITIVE_INFINITY: " + Number.POSITIVE_ INFINITY + "\n" + "\tNEGATIVE_INFINITY: " + Number.NEGATIVE_ INFINITY); // Propiedades de la instancia alert("Propiedades de numero:" + "\n" + "\tMAX_VALUE: " + numero.MAX_VALUE +"\n"+ "\tMIN_VALUE: "+ numero.MIN_VALUE +"\n"+ "\tNaN: " + numero. NaN + "\n" + "\tPOSITIVE_INFINITY: " + numero.POSITIVE_ INFINITY + "\n" + "\tNEGATIVE_INFINITY: " + numero,NEGATIVE_ INFINITY); </SCRIPT>

_ Ilk

Propiedades de Number: MAX_VALUE: 1.7976931348623157e+308 MIN_VALUE: 5e-324 NaN: NaN POSITIVEJNFINITY: Infinity NEGATIVE_INFINITY: -Infinity Aceptar

[Aplicacin JavaScript]
Propiedades de numero: MAX_VALUE: undefined MIN_VALUE: undefined NaN: undefined POSITIVEJNFINITY: undefined NEGATIVEJNFINITY: undefined | Aceptar i

Figura 7.1. Propiedades del objeto Number y una instancia del mismo.

toExponential (decimales): Convierte un valor


en una expresin exponencial (e o E), con el nmero de posiciones decimales especificada por el parmetro

decimales. toFixed (decimales): Ajusta el nmero de posiciones decimales de un valor a las definidas por decimales,
redondeando si se reduce la cantidad de decim ales actual. toPrecision (dgitos): Ajusta el nmero de dgitos totales de un valor (parte entera y decimal) a los especi ficados por digitos. Aqu tambin se redondea si se eliminan decimales. El parmetro de estos mtodos debe ser siempre un n mero positivo. Si se utiliza un nmero real, se omitirn sus decimales. Nota: Recuerde que lina variable con un valor numrico escrito directamente se comporta igual que una instancia, adems es la form a ms comn de escribirlas. Por tanto: v a r x = n ew N u m ber (5 ) equivale a v a r x = 5.
133

Como puede ver en la figura 7.1, las propiedades no son ac cesibles desde las instancias creadas a partir del objeto. Pasamos ahora a ver los mtodos, donde ocurre justo lo contrario: slo pueden ser utilizados desde las instancias. Esto tiene sentido puesto que hace falta un valor sobre el que aplicar las operaciones que realizan. Los mtodos no modifican
132

www.FreeLibros.com

En la tabla 7.3 podr ver cmo funcionan los m todos de este objeto. Para los ejemplos se utilizar la variable numero con valor 53.27. Tabla 7.3. Ejemplos de los mtodos de Number.
Ejemplo numero.toExponential(1) numero.toExponential(3) numero.toFixed(l) numero.toFixed(2) numero.toFixed(4) numero.toPrecision(2) numero.toPrecision(3) numero.toPrecision(4) Resultado 5.3e+1 5.327e+1 53.3 (redondeando) 53.27 53.2700 53 53.3 (redondeando) 53.27

Constructor new String(false) new String(true) new String("") new String("0") new String('T') new StringC'true") new Strng("false") P ropiedades y m todos

Resultado "false" "true" "" (cadena vaca) "0" -j ii "true" "false"

Todas las propiedades y mtodos que se listan a conti nuacin se utilizan siempre sobre las instancias que hayamos creado de este objeto. La lista de propiedades es corta... slo una y fcil de en tender:

7.1.3. Objeto String


El objeto String nos permite realizar operaciones, bastante tiles, sobre cadenas de texto.
C o nstru cto r

1ength: indica el nmero de caracteres que contiene la


cadena.
<SCRIPT TYPE="text/javascript"> // Instancia de String var nombre = new String("Pepe"); alert(nombre.length); // veremos un 4 nombre = "Yolanda"; alert(nombre.length); // veremos un 7 nombre = alert(nombre.length); // veremos un 0 </SCRIPT>

Para crear una instancia de este objeto se debe escribir lo siguiente:


<SCRIPT TYPE="text/j avas cript"> I I Objeto String var nombre_variable = new String(valor); </SCRIPT>

El valor que le pasemos al constructor ser convertido a una cadena de texto en todos los casos. Si se omite, se crear una cadena vaca. Tabla 7.4. Ejemplos del constructor String.
Constructor new Strng() new String(1) new String(O) new String(65) 134 Resultado "" (cadena vaca) *r "0" "65"

Tras este "duro esfuerzo" vamos con los mtodos, que s son unos cuantos. No los voy a listar uno a uno ya que se pueden agrupar en cierta medida por su similitud funcional. Nota: El primer carcter de una cadena se considera que est en la posicin cero (0). Deberemos tener esto en cuenta en algunos de los mtodos del objeto S t r i n g .

anchor (nombre),link (direccin): Crean un ancla y un enlace HTML respectivam ente (etiqueta <A>). El prim ero coloca el valor del parmetro nombre dentro del atributo AME del ancla, y el segundo el valor de direccin en el atributo HREF. El valor de la cadena se coloca entre las etiquetas <A> y </A>.
135

www.FreeLibros.com

b i g ( ) , b l i n k (), b o l d ( ) , f i x e d ( ) , i t a l i c s (), s m a l l ( ) , s t r i k e ( ) , sub ( ) , s u p ( ) : Encierran el valor de la cadena entre las etiquetas H TM L de formato (en el mismo orden): <BIG>, <BLINK>, <B>, <TT>, <I>, <SMALL>, <STRIKE>, <SUB> y <SUP>. El valor de la cadena se coloca entre la etiqueta y su cierre, f o n t c o l o r ( c o l o r ) , f o n t s i z e ( t a m a o ) : Cambian el color y el tam ao de un texto HTM L a travs de los atributos COLOR y SIZE de la etiqueta <FONT>. El color puede expresarse com o una cadena ("Red"), un valor RGB (255,0,0) o un cdigo hexadecim al (#FF0000). Por otro lado, el tam ao del texto se define m ediante un nm ero del 1 al 7, siendo el 1 el tam ao ms pequeo y el 7 el mayor. El valor de la cadena se coloca entre las etiquetas <FONT> y </FONT>.

cadenas separadas. Si el parmetro opcional limite tiene un valor, entonces se devuelven tantas subcadenas como indique.

substring(inicio, fin),substr(inicio, lon gitud) ,slice (inicio, fin): Extrae y devuelve


la porcin de la cadena que se encuentra entre las posiciones inicio y fin o una cantidad de carac teres (longitud) a p artir de la posicin inicio. Si se om ite el segundo parm etro en estos m todos, entonces se devuelve la parte entre inicioyel final de la cadena.

charAt(posicion), charCodeAt(posicion) :
Devuelven el carcter y el cdigo UNICODE del ca rcter que se encuentre en la posicin indicada por su parmetro. El primer carcter est en la posicin cero
<>-

match(expresin),replace(expresin, reem plazo), search (expresin): Estos mtodos buscan una coincidencia de expresin dentro de la cadena o, en el caso de replace, sustituye la prim era ocurrencia por el valor de reemplazo. En todas ellas la bsqueda
es sensible a m aysculas y minsculas. El parmetro expresin puede ser una cadena o una expresin regular. Los valores devueltos son distintos en cada uno: match: devuelve el valor de expresin si lo en cuentra y nuil en caso contrario. replace: devuelve una cadena con los reemplazos realizados, si se encontraron coincidencias. Tenga en cuenta que slo se reemplazar la primera ocurrencia de la expresin especificada. search: este mtodo devuelve la posicin donde se encuentra la primera ocurrencia de la expresin, o -1 si no hay coincidencias. Es similar al mtodo

indexOf(texto, inicio lastlndexOf(texto, inicio): Devuelven la posicin de la primera y l tima coincidencia, respectivamente, de texto dentro
la cadena. Si no se encuentra entonces se devuelve el valor -1. El parmetro inicio es opcional e indica la posicin en la que se debe empezar a buscar. El mtodo indexOf busca desde inicio hacia el final de la cadena y lastlndexOf desde inicio hacia el com ienzo. Adems, ambos mtodos diferencian entre minsculas y mayculas. concat (cadenal, cadena2, . . . , cadenaN): Une el valor de la cadena con el de las cadenas pasadas como parmetros (se puede poner una o varias). Equivale a utilizar el operador sobre cadenas (+).

),

indexOf.
toLowerCase ( ) ,topperCase ( ) : Devuelve la cadena con todos los caracteres en minsculas o maysculas, # respectivamente. Truco: Los mtodos que trabajan con posiciones como par metro esperan un valor positivo pero en algunos es posible utilizar tambin negativos. En estos casos, el valor -1 repre senta la ltima posicin de la cadena, que equivale a escribir m iC a d e n a . l e n g t h - 1. En la tabla 7.5 veremos el funcionamiento de la mayora de estos mtodos. Para los ejemplos se utilizar la variable texto con valor "JavaScript mola".
137

fromCharCode (codigol, codigo2, . . . , codigoN): Construye una cadena a partir de una lista de
valores UNICODE. Este mtodo es exclusivo del objeto String y no puede ser utilizado desde una instancia del mismo. split (separador, limite): Divide la cadena en un subconjunto de cadenas tomando el parmetro se parador como delimitador de cadenas. En este caso se devuelve un objeto Array (aprenderemos a usar este objeto justo a continuacin de String) con todas las

www.FreeLibros.com

Tabla 7.5. Ejemplos de los mtodos de String. I Ejemplo texto.anchor("lista") texto.bold() texto.charAt(O) texto.charAt(2) texto.indexOf("a") texto.indexOf("a", 4) texto.indexOffz") texto. lastlndexOffa") texto.lastlndexOf ("a", 0) texto.concat" (" y mucho") texto.concat (" y mucho") String.fromCharCode (72, 79, 76, 65) te x to .s p litf") texto.substring(0, 4) texto.substring(4) texto.substr(4, 6) texto.substr(11) texto.substr(-4) texto, matchf'mo) texto.match("z") texto, replace ("JavaScript", "JS") texto.replace ("javascript", "JS") texto.searchfva") texto.search("z") texto.toLowerCase() texto.tollpperCaseQ 138 Resultado <A NAME="lista">JavaScript mola</A> <B>JavaScript mola</B> J v 1 14 (busca desde "S" en adelante) -1 (no existe) 14 -1 (no existe, busca desde "J" hacia atrs) JavaScript mola y mucho" "JavaScript mola y mucho" |

Recuerde que estos mtodos no m odifican la instancia, por lo que debe almacenar el valor en una variable si quiere usar el resultado posteriormente.
<SCRIPT TYPE="text/javascript"> // Instancia de String var texto = new String("JavaScript mola"); // Definicin de variable var textoMayusculas; // Uso de mtodos de String textoMayusculas = texto.toUpperCase(); texto = texto.concat(" y mucho"); alert(textoMayusculas + "\n" + texto); </SCRIPT>

Con el cdigo propuesto verem os un mensaje con el texto "JAVASCRIPT MOLA" seguido de "JavaScript mola y mucho" una lnea por debajo. Como puede observar, se puede utilizar la misma variable con la que creamos la instancia para alma cenar los resultados de los mtodos.

7.2. Objeto Array


"HOLA" (slo objeto String) Array con cadenas "JavaScript" y "mola" Java Script mola Script mola mola mo nuil JS mola JavaScript mola 2 -1 javascript mola JAVASCRIPT MOLA

Las variables de JavaScript norm alm ente alm acenan un nico valor, el cual podem os recuperar cuando utilizamos su nombre dentro de una expresin. Esto se nos puede quedar corto en determinadas ocasiones, como por ejemplo si que remos almacenar por separado los platos del men de un res taurante para despus mostrarlos en nuestra pgina. Gracias a los arrays podremos almacenar todos estos platos en una nica variable como si sta tuviera huecos o casillas que se rellenan con los valores, permitindonos acceder a cada plato indivi dual con tan slo indicar cul es su hueco, es decir, la posicin dentro del array. A esta posicin se le denomina ndice.

7.2.1. Constructor
Para crear un array tenemos varios constructores: 1. new A r r a y ( ) : crea un array vaco, sin huecos donde almacenar nuestros datos. Esto es til cuando no sa bem os la longitud inicial que tendr el array cuando lo utilicemos en nuestro cdigo. 2. new Array (longitud): en este caso el array se crea con tantos huecos como indique el parmetro longitud.
139

www.FreeLibros.com

3 . new Array (valorl, valor2,

valorN): con este constructor crearemos un array con tantos huecos o posiciones como valores hayamos pasado como pa rmetros y, adems, dichos huecos irn rellenos con el valor correspondiente.

que hace alert de forma automtica para poder representar el objeto como una cadena.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Arr a y ("Arroz", "Filete con patatas", "Flan"); // Visualizar contenido alert("El men de hoy es: " + men);
</SCRIPT>

El tipo de datos de los valores almacenados en un array puede ser cualquiera, incluso puede ser distinto en cada una de las posiciones. En otros lenguajes, los arrays estn forzados a que los datos sean siempre del mismo tipo (entero, booleano, etc).
Tabla 7.6. Ejemplos del constructor Array. Constructor new Array() new Array(5) new Array("5") new ArrayC'a", "b", "c") new Array(1, 2, 3) new Array("a, 2, false) Resultado Array vaco y sin posiciones. Array con 5 posiciones vacas. Array con 1 posicin y 1 valor de tipo cadena Array con 3 posiciones y 3 valores de tipo cadena. Array con 3 posiciones y 3 valores de tipo numrico. Array con 3 posiciones y 3 valores de tipos distintos.

[Aplicacin JavaScript]

Figura 7.2. Visualizacin del contenido de un array.

Ahora bien, si queremos acceder a cada posicin de un array, con el fin de obtener o modificar su contenido, tendremos que usar, a continuacin del nombre de la variable, los corchetes e indicar la posicin (ndice) sobre la que queremos trabajar. La primera posicin est representada por el ndice 0, como ocurre con las cadenas.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Arr a y ("Arroz", "Filete con patatas", "Flan"); // Acceso a los valores alert("El men de hoy es:\n" + "\t- " + menu[0] + "\n" + "\t- " + menu[l] + "\n" + "\t- " + m e n [2]);
</SCRIPT>

Tambin tenemos la posibilidad de crear un array mediante el uso de corchetes ( [ ] ), lo que equivaldra a crear ima instancia sin usar el constructor tal y como hemos visto en otros objetos.
<SCRIPT TYPE="text/javascript"> // Array con corchetes var nombre_variable = []; // Array vacio var nombre_variable = ["a", "b", "c"]; // Array con 3 // posiciones y 3 valores de tipo cadena var nombre_variable = [1, 2, 3]; // Array con 3 // posiciones y 3 valores de tipo numrico var nombre variable = ["a", 2, false]; I I Array con 3 I I posiciones y 3 valores de tipos distintos </SCRIPT>

[Aplicacin JavaScript]
El m en de hoy es: - Arroz - Filete con patatas - Flan

E a

*\

7.2.2. Trabajar con un array


Para ver el contenido de un array es suficiente con utili zarlo junto con un alert o ejecutar su mtodo toString ( ) quedando los valores separados por comas. Esto ltimo es lo
140

f Aceptar

Figura 7.3. Acceso al contenido de un array. 141

www.FreeLibros.com

Una forma ms cmoda de acceder a los valores es crear un bucle f o r , utilizando el contador como ndice del array. Veam os el ejemplo anterior escrito con un bucle:
<SCRIPT TYPE="text/javascript"> // Declaracin de variables var men = new Array("Arroz", "Filete con patatas", "Flan"); var mensaje = "El men de hoy es:\n"; // Acceso a los valores con un bucle for(var i=0; i<3; i++) { mensaje += "\t " + menu[i] + "\n";

// Modificacin de un valor alert("El men de hoy es: " + men); menu[0] = "Macarrones"; alert("El men de hoy es: " + men);

</SCRIPT>

[Aplicacin JavaScript]
El men de hoy es: Arroz,Rete con patatas,Flan

1
alert(mensaje); </SCRIPT>

Obtendrem os el mismo resultado, nos conviene cuando la longitud del array es alta o simplemente no la sabemos (ya veremos cmo controlar esto). Como ve, el contador comienza en 0, para acceder a la prim era posicin, y aumenta hasta el valor 2, que corresponde a la tercera y ltima. Nota: Si intentamos acceder a una posicin que no existe, entonces JavaScript nos devolver un valor u n d e f i n e d .
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Array("Arroz", "Filete con patatas", "Flan"); // Acceso un valor que no existe alert("El ltimo plato de hoy es: " + menu[3]);

Figura 7.5. Modificacin del contenido de un array.

Si el array tiene los huecos creados (se especific una lon gitud o nmero de elementos) se rellenarn con los nuevos va lores, pero si no es as entonces se crean sobre la marcha aunque superen la longitud inicialmente fijada. De este modo es posible tener un array vaco y asignarle tantos valores como queramos o tener un array de una longitud fijada y ampliarla.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Array("Arroz , "Filete con patatas", "Flan"); // Ampliacin de un valor alert("El men de hoy es: " + men); menu[3] = "Caf"; alert("El men de hoy es: " + men); </SCRIPT>

</SCRIPT>
[Aplicacin JavaScript]
El ltimo plato de hoy es: undefined

h
| Aceptar

Figura 7.4. Acceso a una posicin inexistente en el array.

Para modificar el contenido de una posicin basta con usar el operador de asignacin sobre una de las posiciones.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Array("Arroz", "Flan") ;

"Filete con patatas",

Figura 7.6. Ampliacin del contenido de un array con valores. 143

142

www.FreeLibros.com

<SCRIPT TYPE="text/j avas cript"> // Declaracin de array var men = new A rr a y (); // Ampliacin de valores alert("El men de hoy es: " + men); // vacio menu[0] = "Arroz"; menu[l] = "Filete con patatas"; m e n [2] = "Flan"; alert("El men de hoy es: " + men); </SCRIPT>

[Aplicacin JavaScript]

Figura 7.8. Array con dos posiciones libres.

7.2.3. Propiedades y mtodos


El objeto Array slo dispone de una propiedad: l e n g t h : nos indicar la longitud del array, en concreto la posicin del ltimo elemento. Aqu no influye el que los huecos tengan valor o no, sino que la posicin exista y sea accesible.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new ArrayO; // Visualizacin de la longitud alert("El men tiene " + men.length + " platos"); I I vacio men = new Array(3); alert("El men tiene " + men.length + " platos"); // 3 posiciones vacas men = new Array("Arroz", "Filete con patatas", "Flan"); alert("El men tiene " + men.length + " platos"); // array con valores m e n [4] = "Copa de licor"; // quinta posicin alert("El men tiene " + men.length + " platos"); // array con algunas posiciones vacas </SCRIPT>

Figura 7.7. Ampliacin del contenido de un array vaco.

Debe saber que si ha especificado una longitud, no es obli gatorio rellenar el array completo, aunque las posiciones libres estarn disponibles.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var men = new Arr a y (5); // Ampliacin de valores alert("El men de hoy es: " + men); // 5 posiciones I I vacias menu[0] = "Arroz"; menu[l] = "Filete con patatas"; menu[2] = "Flan"; alert("El men de hoy es: " + men); // dos posiciones I I libres
</SCRIPT>

Tambin hay que sealar que si, por ejemplo, dispone de un array de longitud 3 y aade un valor en la sexta posicin (creada automticamente), tendr como resultado un array de longitud 6 pero sin valores en los huecos cuarto y quinto. Nota: No podemos acceder a una posicin mayor a la longitud del array, pero s asignarle un valor y recuperarlo posterior mente, puesto que se crear automticamente.
144

A continuacin se explicarn los mtodos para este objeto: concat (arrayl, array2, . . . , arrayN): Une el array actual con los que se pasen como parm etros, devolviendo el resultado en un nico array. join (separador): Traslada todos los valores de un array a una cadena intercalando el carcter separador entre ellos. Si no se especifica un separador se utiliza la coma ( ,) por defecto.
145

www.FreeLibros.com

longitud_borrado: este mtodo nos dice cuntos


valores vamos a borrar (puede ser ninguno, poniendo un 0). valorl, valor2, . . . , valorN: son opcionales y representan los valores que se van a aadir en la posicin inicio, despus de borrar la cantidad longitud_borrado de elementos. Estos valores no sobrescriben los existentes, sino que se intercalan con ellos. reverse ( ) : Invierte el orden de todos los valores del array, de forma que el prim ero pasa a ser el ltimo y el ltimo el primero. No se devuelve un nuevo array sino que modifica el actual. sort (funcin): Ordena alfabticamente los valores del array, m odificndolo en lugar de devolver uno nuevo. Si se pasa una funcin como parmetro entonces es utilizada para determinar cmo deben ordenarse los valores. Esa funcin debe comparar valores de dos en dos y, para que el m todo sort pueda "comprenderla", tiene que devolver unos valores concretos: Si el primer valor se considera menor que el segundo, entonces hay que devolver -1 (o cualquier nmero negativo). Si el primer valor se considera mayor que el segundo, se devuelve un 1 (o cualquier nmero positivo). Si ambos valores se consideran equivalentes, debe devolver un 0. En la tabla 7.7 puede encontrar algunos ejemplos de estos mtodos. En ellos tendremos definido el array semana con los valores "lunes", "martes" y "jueves".
Tabla 7.7. Ejemplos de los mtodos de Array.

Figura 7.9. Longitud de distintos arrays.

pop ( ) : Devuelve y elimina el valor en la ltima posicin de un array. Al mismo tiempo se borra la posicin que ocupaba, reduciendo as la longitud del array. push(valorl, valor2, . . . , valorN): Aade uno o ms valores al final del array y devuelve la longitud del mismo. Si el array no dispone de posiciones suficientes para almacenar los valores se crearn nuevas autom ticamente. shift ( ) : Realiza la misma operacin que pop, pero con el prim er valor. unshift(valorl, valor2, . . . , valorN) : Se comporta igual que push, pero insertando uno o varios valores al principio del array. slice (inicio, fin): D evuelve un nuevo array que tiene nicam ente los valores que estn entre las posiciones inicio y fin sin incluir ste, es decir, el ltimo valor en aadirse ser el de la posicin fin-1. Si se omite el segundo parmetro entonces se toman todos los valores desde inicio hasta la ltim a posicin.

Ejemplo
semana.concat(new Arrayfviernes")) semana.join(''-") semana.pop()

Resultado
lunes, martes, jueves, viernes lunes-martes-mircoles Array semana: lunes, martes. Valor devuelto: jueves lunes, martes, jueves, viernes 147

splice(inicio, longitud_borrado, valorl, valor2, ... , valorN): Aade y/o elimina valores
de un array. Este m todo, a diferencia del resto, no devuelve un nuevo array sino que modifica el actual. La funcin de cada parmetro es la siguiente: i n i c i o : indica dnde vamos a comenzar a aadir / borrar valores.
146

semana, pushfviem es")

www.FreeLibros.com

Ejemplo semana.shift()

Resultado Array semana: martes, jueves. Valor devuelto: lunes domingo, lunes, martes, jueves lunes, martes martes, jueves lunes, martes, jueves Array semana: lunes, jueves Array semana: lunes, martes, mircoles, jueves Array semana: lunes, mircoles, jueves Array semana: jueves, martes, lunes Array semana: jueves, lunes, martes

7.2.4. Arrays multidimensionales


Los arrays con los que hemos trabajado hasta ahora eran bastante simples ya que nicamente contenan una lista de valores. Esto se conoce como array unidimensional. JavaScript nos permite almacenar en la posicin de un array otro array, o lo que es lo mismo, almacenar una lista de valores dentro de una nica posicin en lugar de tener un solo valor. A esto se le denomina array bidimensional, aunque probable mente le suene ms el trmino matriz o tabla. As mismo, dentro de la posicin de un array bidimensional podremos volver a almacenar otro array, y as sucesivamente hasta llegar al mimero de dimensiones que queramos. Como todo esto explicado con palabras resulta un tanto lioso, vamos a ir desarrollando un ejemplo hasta llegar a tener un array de tres dimensiones. Partiremos con unos arrays uni dimensionales que almacenan una lista de asignaturas:
<SCRIPT TYPE="text/javascript"> // Arrays unidimensionales var asignaturas_letras = new Array("Historia", "Latn, "Filosofa"); var asignaturas_ciencias = new Array("Fsica", "Qumica", "Matemticas"); // Mostramos los arrays unidimensionales alert(asignaturas_letras + "\n" + asignaturas_ciencias); </SCRIPT>

semana, unshiftf'domingo") semana.slice(0, 2) semana.slice(1, 3) semana.slice(O) semana.splice(1, 1) semana.splice(2, 0, "mircoles)

semana.splice(1, 1, "mircoles") semana.reverse() semana.sort()

Vamos a ver ahora un ejemplo del mtodo s o r t empleando una funcin que ordene las cadenas por su longitud en lugar de alfabticamente, como hace por defecto el mtodo.
<SCRIPT TYPE="text/javascript"> // Declaracin de array var semana = new Array("lunes", "mircoles", "jueves"); // Declaracin de funcin function compararLongitud(cadenal, cadena2) { if (cadenal.length > cadena2.length) return 1; else if (cadenal.length < cadena2.length) return -1; else return 0;

[Aplicacin JavaScript]

'l *_)

Historia, Latn, Filosofa Fsica,Qumica,Matemticas

Aceptar

Figura 7.10. Arrays unidimensionales.

}
// Ordenacin por defecto. Saldr "jueves, lunes, // mircoles" alert(semana.sort()) ; // Ordenacin con funcin. Saldr "lunes, jueves, // mircoles" alert(semana.sort(compararLongitud)); </SCRIPT>

Para acceder a cada uno de los valores de un array, ya hemos visto que es tan sencillo como escribir un ndice entre corchetes ( [ ] ):
<SCRIPT TYPE="text/javascript"> // Arrays unidimensionales var asignaturas_letras = new Array("Historia", "Latn", "Filosofa"); var asignaturas_ciencias = new Array("Fsica", "Qumica", "Matemticas");

148

149

www.FreeLibros.com

// Mostramos los primeros valores


a l e r t (asignaturas_letras[0] + "\nr +

a s i g n a t u ras_ciencias[0] ) ; </SCRIPT>
[Aplicacin JavaScript]
/ Historia Fsica | Aceptar j

i\\

Figura 7.11. Primer valor de los arrays unidimensionales.

por comas, as que como en este caso los valores son a su vez otro array JavaScript representa el prim er array, despus una com a y por ltimo el segundo array. Para acceder a los valores debemos escribir dos parejas de corchetes ([ ] [ ]), de manera que el primero sirve para ac ceder a las posiciones del array bidimensional (dos posiciones en nuestro ejemplo, que representan m aana y tarde) y el segundo para las del array unidim ensional contenido en la posicin anterior (tres y cuatro posiciones por cada posicin del bidimensional). Vamos a ver esto en forma de matriz, que seguro le ser ms fcil de visualizar.
Tabla 7.8. Array bidimensional aula_1 como una matriz. Turno Asignatural Asignatura2 Qumica Latin Asignatura 3 Asignatura4

H asta aqu no hay nada nuevo, as que vam os a subir de nivel. Vamos a crear unos arrays bidimensionales que represen tarn las asignaturas que se imparten en un aula. Cada uno de estos arrays (aulas) tendr dos posiciones que van a simbolizar las asignaturas que se dan por la maana y las que se dan poi la tarde. Vamos al lo!
<SCRIPT TYPE="text/javascript">

Maana Fsica Tarde Historia

Matemticas Biologa Filosofa

Tabla 7.9. Array bidimensional aula_2 como una matriz. Turno Maana Tarde Asignatural Historia Fsica Asignatura2 Asignatura3 Asignatura4 Latn Qumica Filosofa Matemticas Biologa

// Arrays unidimensionales var asignaturas_letras = new Array("Historia", "Latn", "Filosofa"); , , var asignaturas_ciencias = new Array("Fsica , "Qumica", "Matemticas", "Biologa"); // Arrays bidimensionales
var aula 1 = new Array(asignaturas_ciencias, asignaturas_letras); var aula_2 = new Array(asignaturas_letras, asignaturas_ciencias) ;

// Mostramos los arrays bidimensionales alert(aula_l + "\n" + aula_2);


</SCRIPT>
[Aplicacin JavaScript]
Fsica, Qumica, Matemticas, Historia, Latn, Filosofa Historia, Latn, Filosofa, Fsica, Qumica, Matematicas

Con las tablas 7.8 y 7.9 como apoyo, y suponiendo que tenemos ya definidos todos los arrays necesarios en nuestro cdigo, vamos a hacer las siguientes operaciones: 1. Las asignaturas que se imparten por la m aana en el aula 1.
<SCRIPT T Y P E = "text/j avascri p t "> // Mostramos los valores ale r t ( a u l a _ l [0]);

</SCRIPT>
[Aplicacin JavaScript]

Figura 7.12. Arrays bidimensionales.

Fsica, Qumica, Matemticas

La figura 7.12 puede dar la im presin de que seguimos tra bajando con arrays unidimensionales con 6 posiciones cada uno, pero eso es porque JavaScript muestra los valores separados
150

| Aceptar

Figura 7.13. Asignaturas de aula_1 por las maanas. 151

www.FreeLibros.com

2. Las asignaturas que se imparten por la maana y por la tarde en el aula 2.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert("Maanas: " + aula_2[0] + "\n" + "Tardes: " + aula_2[l]); </SCRIPT>
[Aplicacin JavaScript]

5. Nmero de asignaturas que se imparten por la tarde en el aula 2.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(aula_2[1].length); // Mostrar 4 asignatuas </SCRIPT>

y Maanas: Historia,Latn,Filosofa / \ Tardes: Fsica,Qumica,Matemticas


j Acepta? ~ ]

Figura 7.14. Asignaturas de aula_2 por las maanas y tardes.

3. La primera asignatura que se imparte por la maana en el aula 1.


<SCRIPT TYPE="text/j avascript> // Mostramos los valores alert(aula_l[0][0]); </SCRIPT>
[Aplicacin JavaScript]
Fsica

Bueno, qu tal se ha dado? S que es un poco duro al principio pero poco a poco estas operaciones le parecern ms sencillas de entender. Ahora vamos con un ltimo paso: arrays tridimensionales (suena a ttulo de pelcula, verdad?). Para hacer esto vamos a suponer que cada una de nuestras aulas estn en un piso de un edificio. Para ello vamos a definir un nuevo array con dos posiciones representando los pisos, por lo que cada posicin tendr un aula como valor.
<SCRIPT TYPE="text/javascript"> // Arrays unidimensionales var asignaturas_letras = new Array("Historia,

"Latn", "Filosofa");
var asignaturas_ciencias = new Array("Fsica", "Qumica", "Matemticas", "Biologa"); // Arrays bidimensionales var aula_l = new Array(asignaturas_ciencias, asignaturas_letras); var aula_2 = new Array(asignaturas_letras, asignaturas_ciencias); // Array tridimensional var plantas = new Array(aula_l, aula_2);

| Aceptar

| ]

Figura 7.15. Primera asignatura de aula_1 por las maanas.

// Mostramos los arrays tridimensionales alert(plantas);


</SC R IPT>

4. La segunda asignatura que se imparte por la maana en el aula 2.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(aula_2[0][1]); </SCRIPT>
[Aplicacin JavaScript]
fs

[Aplicacin JavaScript]

Figura 7.17. Arrays tridimensionales.

L a th
Aceptar jj

Figura 7.16. Segunda asignatura de aula_2 por las maanas. 152

Si se fija en la figura 7.17 ver que la representacin de este array es la unin de los dos arrays bidimensionales separados por tina coma. Vam os a ver tambin este array en forma de m a triz para que le sirva de ayuda en los ejemplos posteriores:
153

www.FreeLibros.com

Tabla 7.10. Array tridimensional plantas como una matriz. Planta Primera Segunda Turno maanas Fsica, Qumica, Biologa, Matemticas Historia, Latn, Filosofa Turno tardes Historia, Latn, Filosofa Fsica, Qumca, Matemticas, Biologa

3. La primera asignatura que se imparte por la maana en la primera planta.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(plantas[0][0][0]); </SCRIPT>
[Aplicacin JavaScript]

Entonces, para acceder ahora a un valor del array bidimensional (aulas) debemos escribir una pareja de corchetes ( [ ] [ ] ) pero para alcanzar el valor de un array unidimensional (asignaturas) hay que escribir tres parejas ( [ ] [ ] [ ] ). Veamos esto con ejemplos: 1. Las asignaturas que se imparten en la prim era planta.
<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(plantas[0]); </SCRIPT>

F s ic a
| Aceptar |

Figura 7.20. Primera asignatura de la planta 1 por la maana.

4. La tercera asignatura que se imparte por la tarde en la primera planta.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(plantas[0] [1] [2]) ; </SCRIPT>
[Aplicacin JavaScript]

[Aplicacin JavaScript]

jy

Filosofa

Aceptar

jj

Figura 7.18. Asignaturas de la planta 1. Figura 7.21. Tercera asignatura de la planta 1 por la tarde.

2. Las asignaturas que se imparten por la m aana en la primera planta.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert(plantas[0][0]); </SCRIPT>

5. Nmero de asignaturas que se imparten por la maana en la segunda planta.


<SCRIPT TYPE="text/javascript"> // Mostramos los valores alert (plantas [1] [0].length); </SCRIPT>

[Aplicacin JavaScript]

t3
| Aceptar ]

Figura 7.19. Asignaturas de la planta 1 por la maana. 154

Figura 7.22. Cantidad de asignaturas de la planta 2 por la maana. 155

www.FreeLibros.com

Espero que le haya quedado claro la forma de acceder a las distintas dimensiones en cada uno de los casos. De todas formas le recomiendo que practique con sus propios ejemplos para coger soltura en el manejo de arrays.

function mostrarNumeroParametrosO alert(arguments.length);

}
// Llamadas con distinto nmero de parmetros mostrarNumeroParametros(); // Mostrar 0 mostrarNumeroParametros(1); // Mostrar 1 mostrarNumeroParametros("a", "b", false); // Mostrar 3 </SCRIPT>

7.2.5. Arrays en elementos de JavaScript


Me gustara comentarle brevemente un par de casos es peciales dentro de JavaScript en los que ciertos elementos se comportan como arrays.
C adenas com o arrays

Para ver todos los argum entos que se han pasado a la funcin podemos recurrir al bucle f o r para mostrarlos ms cmodamente.
<SCRIPT TYPE="text/javascript"> // Declaramos una funcin function mostrarParametros( ) { var valores = "Parmetros:\n"; for(var i=0; i<arguments.length; valores += "\t- Parmetro " + arguments[i] + "\n";

En cierto modo podemos concebir una cadena como una lista de letras o caracteres, pudiendo obtener (pero no m odi ficar) cada uno de ellos de forma independiente, aunque no tendremos disponibles los m todos asociados al objeto Array puesto que se trata de una instancia del objeto String.
< SCRIPT TYPE="text/javascript"> // Declaramos una cadena var mensaje = "Bienvenido"; // Acceso a caracteres como un alert(mensaje[0]); // Mostrar alert(mensaje[4]); // Mostrar mensaje[0] = "b"; // No tendr alert(mensaje[0]); // Mostrar </SCRIPT>

i++) {

i + ":

}
alert(valores); // Llamadas con distinto nmero de parmetros mostrarParametros(); mostrarParametros(1); mostrarParametros("a", "b", false); </SCRIPT>
[Aplicacin JavaScript]

array "B"

"v"
efecto "B"

A rg u m en to s de una fun ci n com o un array

Crea que se m e haba olvidado? Soy despistado, pero cumplo con mi palabra. En el captulo referente a las funciones se dijo que se podra controlar que los parmetros fuesen obli gatorios u opcionales, gracias al objeto arguments que nos proporciona JavaScript, el cual almacena en cada posicin el valor del parmetro situado en la misma posicin. Adems, slo estar disponible dentro de cada funcin. No im porta si la funcin no tiene definido ningn par metro o tiene un nmero menor de los que se le hayan puesto. El objeto arguments albergar igualm ente todos los par m etros que se indiquen en la llam ada a la funcin. Este objeto tampoco tiene los m todos de Array, pero s su propiedad length, por lo que podrem os saber cuntos parmetros le llegan a una funcin.
<SCRIPT TYPE="text/j avascript"> // Declaramos una funcin

h
[Aplicacin JavaScript]

Parmetros: - Parmetro 0: 1

[Aplicacin JavaScript]
, i ' Parmetros: - Parmetro 0: a - Parmetro 1: b - Parmetro 2: false

l}\

Aceptar

Figura 7.23. Listado de parmetros mediante el objeto arguments.

Si queremos que todos los parmetros de nuestra funcin sean obligatorios para poder realizar las acciones, entonces debemos comprobar que el nmero de argumentos que nos llega es el mismo que esperamos.
157

156

www.FreeLibros.com

<SCRIPT TYPE="text/javascript">
// Funcin con parmetros obligatorios function sumar(numerol, numero2) { if (arguraents.length = = 2 ) { return numerol + numero2; } else { return "No hay dos nmeros";

}
if (arguments[1] == undefined) numero2 = 3; (

}
return numerol + numero2;

)
// Llamadas con distinto nmero de parmetros alert(sumar()); // Mostrar "Falta el primer nmero" alert(sumar(5)); // Mostrar 8 (valor por defecto) alert(sumar(5, 2)); // Mostrar 7

} }
// Llamadas con distinto nmero de parmetros alert(sumar()); // Mostrar "No hay dos nmeros" alert(sumar(5)); // Mostrar "No hay dos nmeros" alert(sumar(5, 2)); // Mostrar 7

</SCRIPT>

</SCRIPT>

7.3. Objeto Date


Dado que JavaScript no posee un tipo de dato especfico para m anejar fechas, com o ocurre en otros lenguajes, nos ofrece como alternativa este objeto que nos permite manipular informacin acerca del ao, mes, da, hora, minutos, segundos y milisegundos. La particularidad del objeto D ate es la forma que tiene de almacenar la fecha, ya que la representa como los milisegundos que han pasado desde una fecha base que es el 1 de enero de 1970 a las 00:00:00. An as, el rango de fechas que puede manejar es de -100000000 (-100 millones) hasta +100000000 (100 millones) de das relativos al 1 de enero de 1970 UTC (Universal Coordinated Tim). El UTC, o tiempo civil, es la zona horaria de referencia respecto a la cual se calculan todas las otras zonas del mundo y es sustituto del sistema GMT (Greenwich Mean Time). No se asuste puesto que no tendr que descifrar cada fecha a partir de los milisegundos. Este objeto tambin viene acompa ado de mtodos para hacernos esta tarea mucho ms sencilla. Los iremos viendo en este apartado. En la tabla 7.11 se listan los posibles valores que puede tomar cada campo de la fecha, que se expresan con nmeros enteros.
Tabla 7.11. Rango de valores para los campos de una fecha. Campo Milisegundos Segundos y minutos Horas Da de la semana Rango de valores 0-999 0-59 0-23 0 (domingo) - 6 (sbado) 159

Por otro lado, para hacer que un parmetro sea opcional, y poder darle un valor por defecto si queremos, tendremos que comprobar el valor de la posicin correspondiente en el objeto arguments. Si tiene un valor u n d e f i n e d significa que no lo hemos recibido. En el ejemplo, haremos opcional el segundo nmero de la suma.
<SCRIPT TYPE="text/javascript">
// Funcin con parmetros opcionales function sumar(numerol, numero2) { if (arguments[1] = undefined) { numero2 = 3;

}
return numerol + numero2;

}
// Llamadas con distinto nmero alert(sumar()); // Mostrar NaN // obligatorio alert(sumar(5)); // Mostrar 8 alert(sumar(5, 2)); // Mostrar de parmetros porque numerol no es (valor por defecto) 7

</SCRIPT>

Como ha visto, en caso de no pasar ninguno de los par metros, la suma se realizara pero nos dara un resultado no deseado (NaN), de m odo que tendram os que realizar una combinacin de ambas restricciones: comprobar que el primer parmetro nos ha llegado, no realizando la suma si no es as, y asignar un valor por defecto al segundo si tampoco lo hemos recibido.
<SCRIPT TYPE=text/javascript"> // Funcin con parmetros opcionales function sumar(numerol, numero2) ( if (arguments[0] = undefined) { return "Falta el primer nmero";

158

www.FreeLibros.com

Campo Da del mes Mes Ao

Rango de valores 1- 31 0 (enero) -11 (diciembre) Desde 1900

Constructor new Datef'Agosto 15, 2008") new Date(2008, 7, 15) new Date(2008, 7, 15, 13, 15, 34)

Resultado Fecha no vlida (mes en espaol). 15 de agosto de 2008. 15 de agosto de 2008 a las 13h 15min 34seg.

7.3.1. Constructor
La sintaxis para crear una instancia de este objeto es bas tante simple:
<SCRIPT TYPE="text/javascript"> // Objeto Date var nombre_variable = new Date(fecha); </SCRIPT>

7.3.2. Propiedades y mtodos


Este objeto no tiene ninguna propiedad por lo que pasa remos directamente a ver sus mtodos, que los agruparemos en tres tipos de funcionalidad: obtencin, asignacin y trans formacin.
M todos de obtencin

El parmetro f e c h a puede ser cualquiera de estas expre siones: Vaco: Si no se pasa este parmetro, entonces se crea una instancia con la fecha y hora actuales. Si le suena de otros lenguajes, sera el equivalente a la funcin now ( ) . Una cantidad de milisegundos: Se crea una fecha su mndolos a la fecha base. "Mes_en_letras da, ao horas:m inutos:segundos": El mes debe estar escrito en ingls. Si se omite la parte co rrespondiente a las horas, minutos o segundos, tomarn valor 00 por defecto. "Ao, m es, da": Estos valores deben ser num ricos enteros. "Ao, mes, da, hora, minuto, segundos": Exactamente igual que el anterior pero ampliado para incluir la hora.
Tabla 7.12. Ejemplos del constructor Date. Constructor new Date() La fecha y hora actuales. new Date(86400000) 2-enero-1970 a las OOh OOmin OOseg (milise gundos de un da) 15 de agosto de 2008 a las OOh OOmin OOseg. 15 de agosto de 2008 a las 13h 15min 34seg. Resultado I

new D atefAugust 15, 2008") i new DatefAugust 15, 2008 13:15:34")

g e t T i m e ( ) : Con esto obtenemos la fecha tal y como la guarda el objeto D a te , es decir, expresada como el nmero de milisegundos que han pasado desde la fecha base. g e t M i l l i s e c o n d s (), g e t S e c o n d s (), g e tM in u t e s ( ) , g e t H o u r s ( ) : Devuelven el campo corres pondiente a los m ilisegundos, segundos, m inutos u hora, respectivamente, de la instancia actual. g e t D a t e ( ) , g e t D a y ( ) , g et M o n t h ( ) : Nos permiten obtener el da del mes, el da de la semana y el mes de la instancia actual, representados siempre con un nmero entero de acuerdo a lo visto en la tabla 7.11. g e t Y e a r ( ) , g e t F u l l Y e a r ( ) : Devuelven el ao de la instancia actual. g e t F u l l Y e a r siempre lo har como un nmero de cuatro cifras mientras que g e t Y e a r , que caer en desuso, se comporta de diferente manera segn el navegador (se utilizan como ejemplo dos de los ms utilizados): Tanto en Internet Explorer como FireFox, si el ao est comprendido entre 1900 y 1999, lo devolver en forma de dos dgitos (00-99). En Internet Explorer, obtendremos un nmero de cuatro cifras en el resto de casos (1890 2012). En FireFox, si el ao es anterior a 1900 nos dar los aos de diferencia como un nm ero con signo negativo (-10 equivale a 1890).
161

160

www.FreeLibros.com

En FireFox, los aos a partir de 2000 nos dara un nmero a partir de 100 (112 equivale a 2012).

M todos de tran sfo rm aci n

getUTCMilliseconds( ) , getUTCSeconds( ) , getUTCMinutes (),getUTCHours( ) , getUTCDate( ) , getUTCDay (),getUTCMonth(),getUTCFullYear ():


Funcionan exactam ente igual que sus anlogos pero devolviendo el campo de acuerdo al UTC. qetTimezoneOf f set ( ) : Devuelve la cantidad de mi nutos de diferencia que existen entre el GM T y la fecha de la instancia actual. Esto nos ser til para averiguar la zona horaria en la que nos encontram os (pasando esos m inutos a horas). Si sale un valor negativo, -60 por ejemplo, estaremos en la zona horaria GM i-KL bin embargo, el mismo valor pero positivo (60), indicara que estam os en GMT-1.
M todos de asignacin

par se ( fecha_cadena): Recibe una fecha expresada como una cadena en ingls y devuelve el nmero de milisegundos que han pasado desde la fecha base. Si no es posible interpretar la cadena como una fecha se devuelve NaN. Este m todo slo puede ser llam ado desde el objeto Date y no desde sus instancias.

UTC(ao, mes, da, hora, minuto, segundo, milisegundo): Toma la fecha indicada por los parme
tros y halla el nmero de milisegundos que han pasado desde la fecha base de acuerdo al UTC. Los tres primeros parmetros son obligatorios para usar este mtodo (ao, mes, da) y el resto opcionales. Tambin es un mtodo exclusivo del objeto Date.

toDateString ( ) , toLocaleDateString ():


Devuelven la fecha sin inform acin sobre la hora, y en form a de texto. Adem s, toLocaleDateString ajusta los nom bres de los cam pos a la configuracin de idiom a de la m quina local sobre la que se ejecuta el cdigo. toTimeString ( ) ,toLocaleTimeString ( ) : Similar a los anteriores pero devuelven nicamente la parte correspondiente a la hora.

Los m todos que verem os a continuacin m odifican la instancia con el valor resultante de la operacin, asi que no devuelven ningn valor. setTime (milisegundos): E s t e mtodo crea una fecha aadiendo o restando los milisegundos indicados a la

setMilliseconds(mseg), setSeconds(seg, mseg),setMinutes(min, seg, m s e g ) ,setHours (hora, min, seg, mseg): Fija los campos corres
pondientes a los m ilisegundos (mseg), segundos (seg), minutos (min) y hora. En todos estos m todos el primer parmetro es obligatorio y el resto son opcionales.
setDate(da), setMonth(mes, da),setYear

fecha base.

toGMTString(), toUTCString(), toLocaleString ( ) : Expresan la fecha y la hora en base al GM T,


UTC y configuracin local respectivamente. Vamos a ver algunos ejemplos de estos mtodos, por lo que utilizaremos una instancia hoy que contiene la fecha 13 de enero de 2009 17:23:55 y 356 milisegundos.
Tabla 7.13. Ejemplos de los mtodos de Date. Ejemplo hoy.getTime() hoy.getMinutes() hoy.getDate() hoy.getDay() hoy.getYear() hoy.getFullYear() Resultado 1231863835256 23 13 2 (martes) 2009 (Internet Explorer) 109 (FireFox) 2009 163

ao), setFullYear (ao, mes, dia): Fija los campos


que corresponden al da del mes, el mes y el ano. Al igual que los mtodos anteriores, slo es obligatorio el primer parmetro. setYear sigue las mismas reglas sobre el ao que explicamos con getYear y adems esta cayendo en desuso, por lo que es recomendable utilizar set Fu HYear en su lugar. setUTCMilliseconds(mseg), s e t U T C S e c o n d s (

seg, mseg), setUTCMinutes(min, seg, mseg), s e t U T C H o u r s (hora, min, seg, mseg),setUTCDate da), setUTCMonth(mes, da), setUTCFullYear ao, mes, da): Realizan lo mismo que sus equiva
lentes pero ajustadas al UTC.
162

www.FreeLibros.com

Ejemplo hoy.getTimezoneOffset() hoy.setTme(1500089) hoy.setMonth(11) hoy = Date.parse ("April 30, 2007") hoy.toLocaleDateStringO hoy.toUTCString() Date.parse(Jan 2, 1970")

Resultado -120 (GMT +2) variable hoy: 1 de enero de 1970 01:25:00:089 variable hoy: 1260721435256 (13 diciembre 2009 17:23:55:356) 1177884000000 martes, 13 de enero de 2009 Tue, 13 Jan 200915:23:55 GMT (2h de diferencia) 86400000 (GMT+0)

var edad = parselnt(edadMilisegundos / 1000 / 60 / 60 / 24 / 365); // usamos parselnt para descartar // los decimales // Mostramos la edad alert(edadMilisegundos); // Mostrar 1114045200000 // mil isegundos alert(edad); // Mostrar 35 </SCRIPT>

Si ahora quisiramos realizar este clculo utilizando fun ciones del objeto fecha no basta con restar los aos (mtodo getFullYear) puesto que deberamos tener en cuenta si ya ha cumplido aos en la fecha actual o no. Para ello debemos seguir estos pasos: 1. Calculamos temporalm ente la edad mediante la resta de los aos de ambas fechas. 2. Si el m es actual (m todo getMonth) es posterior al de n acim iento sign ifica que ya ha cum plido aos, por lo que p od ram os d ev olver la edad calcu lad a en el paso anterior. En caso de que el m es actual sea m enor que el de nacim iento significara que no ha llegad o su cu m p lea os tod av a y ten d ram os que restar un ao a la edad obtenida en el paso anterior y devolverla. Por ltim o, si los m eses coinciden nos quedara por analizar la diferencia entre los das (en el paso siguiente). 3. Aqu analizaremos la diferencia entre los das correspon dientes al mismo mes. Si el da actual (mtodo getDate) es m enor al de nacimiento, restamos un ao a la edad del paso 1 y la devolvemos. Por otro lado, si el da es igual o mayor, la edad se quedara como est y podra devolverse. Ahora vamos a trasladar todos estos pasos a una funcin que usaremos despus en unos ejemplos:
<SCRIPT TYPE="text/javascript"> function calcularEdad(nacimiento) { var hoy = new Da t e (); var edad = hoy.getFullYear( ) - nacimiento. getFullYear(); // Comparamos los meses if (hoy.getMonth( ) > nacimiento.getMonth()) { / / N o hacemos nada porque ya es la correcta } else if (hoy.getMonth( ) < nacimiento.getMonth()){ edad--; // Restamos un ao porque no ha llegado // el cumpleaos

7.3.3. Trabajar con fechas


A la hora de realizar operaciones con fechas, JavaScript siem pre va a operar con los valores expresados en m ilise gundos aunque nosotros podrem os recuperar despus ese valor en el formato que m s nos convenga. En nuestros clculos usarem os normalmente alguno de los operadores aritmticos (suma y resta) y los comparadores. Vamos a ver un ejemplo suponiendo que queremos calcular la edad de una persona a partir de su fecha de nacimiento. Para ello tendremos que calcular la diferencia que existe entre el ao de su nacim iento y el actual usando el operador aritmtico de la resta (-). La pega que existe al trabajar con fechas es que vamos a tener los valores expresados como milisegundos, por lo que esta resta nos dar un valor en esas unidades y debe remos expresar en aos. Nota: Para pasar una fecha en milisegundos a otra unidad de tiempo debemos tener en cuenta lo siguiente: 1 ao son 365 das, 1 da son 24 horas, 1 hora son 60 minutos, 1 minuto son 60 segundos y 1 segundo 1000 milisegundos.
<SCRIPT TYPE="text/j avascript"> // Definimos las fechas
var nacimiento = new Date(1975, 8, 30); // 30 septiembre 1975 var hoy = new Date(); // 18 enero 2011 var edadMilisegundos = hoy - nacimiento;

164

165

www.FreeLibros.com

} else ( // Comparamos los dias if (hoy.getDate0 < nacimiento.getDate()) ( edad ; // Restamos un ao porque no ha // llegado el cumpleaos

7.4. Objeto Math


Hasta ahora podam os realizar operaciones matemticas sencillas en JavaScript gracias a los operadores aritmticos, pero en ocasiones necesitaremos hacer clculos ms complejos. El objeto M a t h nos proporciona un buen surtido de propie dades y mtodos que nos permitirn satisfacer la mayora de nuestras necesidades dentro del cdigo.

} }
return edad;

}
</SCRIPT>

Vamos ahora a comprobar el funcionamiento de nuestra funcin con un primer ejemplo en el que el cumpleaos todava no ha llegado (fecha actual 18 de enero de 2011):
<SCRIPT TYPE="text/j avascript"> // Definimos las fechas var nacimiento = new Date(1975, 8, 30); // 30 septiembre 1975 var miEdad = calcularEdad(nacimiento); I I Mostramos la edad alert(miEdad); // Mostrar un 35 </SCRIPT>

7.4.1. Constructor
Este objeto no tiene constructor, por lo que todas sus pro piedades y mtodos deben utilizarse directamente a travs del objeto Math. Truco: Recuerde que puede utilizar la sentencia wi t h (Ma t h ) para acceder ms cmodamente a los elementos de este objeto.

7.4.2.Propiedades y mtodos
Vamos a presentar ahora las propiedades de Math, que en realidad son un conjunto de constantes matemticas.

Bien! Todo ha funcionado como esperbamos. Veamos qu pasa ahora si nuestro cumpleaos ya ha pasado (fecha actual 18 de enero de 2011).
<SCRIPT TYPE="text/javascript"> // Definimos las fechas var nacimiento = new Date(1975, 0, 5); I I 5 enero 1975 var miEdad = calcularEdad(nacimiento); // Mostramos la edad alert(miEdad); I I Mostrar un 36 </SCRIPT>

Estamos en racha! Ahora queda la prueba de fuego. Y si el cumpleaos es hoy mismo? (fecha actual 18 de enero de

2011 ).
<SCRIPT TYPE="text/j avascript"> // Definimos las fechas var nacimiento = new Da t e (1975, 0, 18); I I 18 enero 1975 var miEdad = calcularEdad(nacimiento); // Mostramos la edad alert(miEdad); // Mostrar un 36 </SCRIPT>

E : Representa la constante de Euler ( 2 , 7 1 8 ) . P I: Nos da el nm ero Pi (3,14159). SQRT2: Con esta obtendramos la raz cuadrada de 2 ( 1 , 4 1 4 ) . SQRT1_2: La raz cuadrada de Vi ( 0 , 7 0 7 ) . LN2: Devuelve el logaritmo neperiano de 2 ( 0 , 6 9 3 ) . LN10: El logaritmo neperiano de 10 ( 2 , 3 0 2 ) . LOG2 E :Devuelve el resultado del logaritmo de E en base 2( 1 , 4 4 2 ) . LOG10E: Igual que el anterior, pero en base 10 ( 0 , 4 3 4 ) .
<SCRIPT TYPE="text/javascript"> // Propiedades del objeto Math with(Math) { alert("Propiedades de Math:" + "\n" + "\tE: " + E + "\n" + "\tPi: " + PI + "\n + "\tRaiz cuadrada de 2 : " + SQRT2 + "\n" + "\tRaiz cuadrada de 1/2: " + SQRT1_2 + "\n" + "\tLogaritmo neperiano de 2 : " + LN2 + "\n" + "\tLogaritmo neperiano de 10: " + LN10 + "\n" + "\tLogaritmo de E en base 2: " + LOG2E + "\n" +

Todo perfecto, as da gusto. Ahora ya sabemos manejar fechas un poquito ms.


166

167

www.FreeLibros.com

"\tLogaritmo de E en base 10: " + LOGIOE);

}
</SCRIPT>
[Aplicacin JavaScript]
Propiedades de Math: E; 2.718281828459045 Pi; 3.141592653589793 Raz cuadrada de 2: 1,4142135623730951 Raz cuadrada de 1/2: 0,7071067811865476 Logaritmo neperiano de 2: 0.6931471805599453 Logaritmo neperiano de 10: 2.302585092994046 Logaritmo de E en base 2: 1.4426950408889634 Logaritmo de E en base 10: 0.4342944819032518

Aceptar

Figura 7.24. Propiedades del objeto Math.

Los mtodos de Math nos servirn para realizar clculos matemticos ms complejos que los que podamos hacer hasta ahora con los operadores: abs (numero): Nos devuelve el valor absoluto de nu

floor (numero) : Igual que el anterior, pero devol viendo el entero inmediatamente inferior. min(numerol, numero 2 ), max(nu m e r o l , num e r o 2 ) : Nos proporcionan el m enor o mayor valor de sus dos parmetros. pow(base, exponente) : Nos calcula una potencia, es decir, devuelve el primer parmetro elevado al segundo (baseexp onm te). random ( ) : Nos dar un nmero real aleatorio entre 0 Y 1 round (numero): Redondea el parmetro al entero ms cercano. Si numero no tiene decimales, o el prim ero es menor o igual que 4, entonces el redondeo se hace hacia abajo. En otro caso, se redondea hacia el siguiente entero. sqrt ( nume r o ) : Nos calcula la raz cuadrada del par metro numero.
Tabla 7.14. Ejemplos de los mtodos de Math. | Ejemplo Math.abs(1) Math.abs(-3.5) Math.sin(5) Math.sin(Math.PI/2) Math.acos(0.5) Math.acos(2) Math.atan2(1, 3.2) Math.exp(O) Math.exp(1) Math.log(2) Math.log(O) Math.ceil(3) Math.ceil(3.2) Math.ceil(3.9) Math.floor(3) Math.floor(3.2) Math.floor(3.9) Math.min(2, 7) Resultado 1 3 -0.9589242746631385 1 1.0471975511965979 NaN (parmetro fuera de rango) 0.3028848683749714 1 2.718281828459045 (E) 0.6931471805599453 -Infinity (no se puede calcular) 3 4 4 3 3 3

mero. sin (ngulo),eos (ngulo),tan (ngulo) :Funciones trigonomtricas para calcular el seno, coseno y tangente.
Su parmetro debe estar expresado en radianes en lugar de en grados. Tenga en cuenta que el valor devuelto por estos mtodos ser un valor entre -1 y 1.

asin(numero), acos(numero), atan(numero):


Realizan los clculos trigonomtricos arcoseno, arcocoseno y arcotangente de su parmetro, el cual deber ser un valor entre -1 y 1 (salvo para atan). Si el parmetro est fuera de esos valores, se devuelve NaN. El valor del ngulo devuelto depende del m todo que usemos: acos devuelve un ngulo entre 0 y Pi radianes. asin y atan nos darn un ngulo entre -Pi/2 y Pi/2. atan2 (posicionY, posicionX): Nos devuelve el ngulo que forma, respecto al eje X, el punto situado en las coordenadas indicadas como parmetros. exp (numero), log (numero): D evuelven, respec tivam ente, el resultad o de E elevado al parm etro numero (En u m e r o ) y el logaritmo neperiano (base E) del parmetro. ceil (numero): Devuelve el entero inm ediatamente superior de numero si ste tiene decimales, o directa m ente numero si no es as.
168

.........................................................
169

www.FreeLibros.com

Ejemplo Math.max(2, 7) Math.pow(2, 3) Math.randomO Math.round(3) Math.round(3.2) Math.round(3.9) Math.sqrt(9) Math.sqrt(5)

Resultado 7 8 0.048257613864494786 3 3 4 3 2.23606797749979

Veamos algunos ejemplos de patrones: 1. Patrn que nos encuentre las coincidencias con "hol seguido de una o ms aes.
<SCRIPT TYPE="text/j avascript"> // Declaracin de patrn var miPatron = new RegExp("hola+"); </SCRIPT>

2. Patrn que nos encuentre las coincidencias con "hol" seguido de una o ms aes y sin distincin de maysculas y minsculas.
<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("hola+", </SCRIPT>

"i");

7.5. Objeto RegExp


Este objeto se utiliza para trabajar con las expresiones re gulares que definamos en nuestros scripts. En el apartado 2.3 del captulo 2 vimos cmo definir nuestras propias expresiones regulares o patrones.

3. Patrn que nos encuentre las coincidencias con las lneas que empiecen por "A".
<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("AA"); </SCRIPT>

7.5.1. Constructor
El constructor de este objeto nos permitir definir la ex presin regular que se aplicar sobre un texto y recoger los resultados. La sintaxis sera la que sigue:
<SCRIPT TYPE="text/javascript"> // Objeto RegExp var miPatron = new RegExp(patrn, modificadores); </SCRIPT>

4. Patrn que nos encuentre las coincidencias con un nmero de dos dgitos.
<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("\\d\\d"); </SCRIPT>

5. Patrn que nos encuentre las coincidencias con una fecha.


<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("\\d{2> \\d{2>\\d{4}"); </SCRIPT>

El patrn corresponde con un string que representa una ex presin regular vlida, sin incluir las barras (/), mientras que los m odificadores son los mismos que vim os en el captulo 2 y pueden especificarse de forma opcional. Por tanto, es posible definir un patrn y sus modificadores del mismo modo que si lo escribisemos como una cadena delimitada por barras (/), siendo ambas sentencias correctas y equivalentes. Advertencia: Si utiliza la barra invertida ( \) como parte del patrn, recuerde que al tratarse de una cadena debe utilizar el carcter de escape. Por tanto el carcter especial \d se deber escribir como \ \ d y la propia barra invertida como \ \ \ (quedando \ \ despus de procesar la cad en a). _______________
170

7.5.2. Propiedades y mtodos


Las propiedades de este objeto se centran principalmente en la activacin (con valor t r u e ) o desactivacin (con valor f a l s e ) de algunos modificadores del patrn que se especific en el cons tructor, aunque tambin hay otros con un fin diferente. g l o b a l : Sirve para fijar el modificador "g", para forzar que se sigan buscando coincidencias despus de encon trar la primera.
171

www.FreeLibros.com

ignoreCase: Fija el m odificador "i", que elimina la distincin entre m aysculas y minsculas, multiline: A ctiva el m odificador "m", para permi tim os usar varios caracteres de posicin (A y $) en el patrn que definamos. lastlndex: Representa la posicin (ndice) dentro del texto donde se empezar a buscar la prxim a coinci dencia.
<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("script", "g") ; // Mostramos los modificadores alert("global: " + miPatron.global + "\n" + "ignoreCase: " + miPatron.ignoreCase + "\n" "multiline: " + miPatron.multiline); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExp("script", 1gm") ; // Mostramos los modificadores alert("global: " + miPatron.global + "\n" + "ignoreCase: " + miPatron.ignoreCase + "\n" "multiline: " + miPatron.multiline); </SCRIPT>
[Aplicacin JavaScript]
global: true ignoreCase: false multiline: false

leftContext, rightContext: Nos permiten conocer los caracteres que estn a la izquierda o derecha de la ltima coincidencia. Por otro lado, los mtodos que contiene RegExp nos per mitirn aplicar el patrn con distintas finalidades. compile (patrn, modificadores ): Nos permite fijar un nuevo patrn en una instancia de RegExp y opcionalmente tambin sus modificadores. Si slo se especifica el patrn, se pierden los m odificadores que tuviera. exec (texto) : Aplica el patrn sobre el texto pasado como parm etro y devuelve la cadena encontrada o un valor nuil si no hubo coincidencias. Si se omite el parmetro se tomar como texto el especificado a travs de la propiedad input del objeto RegExp. test (texto) : Aplica el patrn sobre el parm etro texto pero nicam ente nos dir si se encontraron coincidencias (valor true) o no (valor false). Este mtodo es m uy rpido y se recomienda usarlo cuando no necesitemos los valores encontrados. Si se omite el parmetro, ocurre lo mismo que con el mtodo e x e c . Veamos algunos ejemplos utilizando /el/ como patrn y el pjaro salt del nido" como texto donde aplicarlo.
Tabla 7.15. Ejemplos de los mtodos de RegExp.

[Aplicacin JavaScript]
y global: true ignoreCase: false multiline: true Aceptar |

w m

Ejemplo miPatron.compile("del") miPatron.compile("del", "i")

Resultado Se cambia el patrn a aplicar de /el/ a /del/ sin modificadores. Se cambia el patrn a aplicar de /el/ a /del/ y se activa el modifi cador "i". Devuelve "el ya que se ha en contrado coincidencia. Devuelve true ya que se ha encontrado coincidencia.

/*\

Figura 7.25. Propiedades del objeto RegExp.

Las siguientes propiedades slo estn accesibles desde el ob jeto RegExp, aunque hace referencia a valores de la instancia. input: Nos permite fijar u obtener el texto sobre el que se aplica el patrn. lastMatch: Nos devuelve la ltima cadena encontrada mediante el patrn. lastParen: N os devuelve la ltima coincidencia que est encerrada entre parntesis.

miPatron.exec(texto) miPatron.test(texto)

<SCRIPT TYPE="text/javascript"> // Declaracin de patrn var miPatron = new RegExpC'el", "g") ; // Definimos el texto donde aplicar el patrn

www.FreeLibros.com

173

RegExp.input = "el pjaro salt del nido"; // Aplicamos el patrn miPatron.exec(); // Mostramos la ltima cadena encontrada ("el") alert(RegExp.lastMatch); <SCRIPT>

Com o ya se dijo en su m om ento, algunos m todos del objeto String pueden funcionar tam bin con expresiones regulares escritas como una cadena. La forma de usarlos sera la siguiente:
miTexto.nombre_metodo(/patrn/)

En concreto, los mtodos search (patrn),match (pa trn) ,replace (patrn, reemplazo) y split (patrn, limite) funcionan exactam ente igual recibiendo una ca dena o patrn com o parm etro. En la tabla 7.16 puede ver algunos ejem plos con "el pjaro salt del nido" com o valor de miTexto.
Tabla 7.16. Ejemplos de los mtodos de String con patrones. Ejemplo miTexto.search(/el/) miTexto.seach(/la/) miTexto.match(/el/) mTexto.match(/el/g) mTexto.replace(/el/, "El") miTexto.replace (le\lg, "El") miTexto.split(/del/) miTexto.split(/del/, 1) miTexto.split(/a/) miTexto.split(/a/, 2) Resultado Nos devuelve la posicin 0, que es donde est la primera ocurrencia. Nos devuelve -1, ya que no hay coincidencias. Nos devuelve un array con un valor (el primer "el"). Nos devuelve un array con dos valores (los correspondientes a "el" y "del"). Nos devuelve el texto modificando "el" por "El". Nos devuelve el texto modificando "el por "El" y "del" por "dEI". Obtenemos un array con los valores "el pjaro salt" y " nido" Obtenemos un array con el valor "el pjaro salt" Obtenemos un array con los valores "el pj", "ro s" y "It del nido" Obtenemos un array con los valores "el pj" y "ro s"

174

www.FreeLibros.com

8
Objetos del navegador (DOM)

Aunque ya comentamos algo en la introduccin del libro, no est m al refrescar un poco qu es esto del DOM. Cuando creamos una pgina Web nos limitamos a poner etiquetas que delimitan cada uno de los elementos que tendr la pgina: cabecera, cuerpo, prrafo, tabla, etc. Sin embargo, el navegador debe "pintar" esa pgina para que el usuario pueda conocer su contenido, interpretando todas las etiquetas y creando a la vez una jerarqua de objetos que representan los elementos que la componen. Esta jerarqua es el Modelo de Objetos del Documento, ms conocido como DOM (Document Object Model). Esto nos ser m uy til como programadores en JavaScript ya que gracias al DOM podrem os acceder a cada elemento de la pgina y obtener o modificar sus propiedades a nuestro antojo. Una vez que conozca la jerarqua de objetos, puede con sultar un grfico resumen en el apndice D, al final de esta gua.

8.1. Compatibilidad entre navegadores


A pesar de que el DOM sigue unos estndares definidos por el W3C ( World Wide Web Consortium h t t p : //www. w3 . o rg ), sus objetos no siempre estn definidos exactamente igual de un navegador a otro o incluso entre versiones del mismo na vegador. Se podra decir que aprovechan para implementar su propia interpretacin del DOM llegando hasta el extremo de aadir nuevos objetos que, obviamente, slo son reconocidos por ese navegador concreto. Por tanto, ser tarea del progra175

www.FreeLibros.com

mador tener que salvar esas posibles incompatibilidades o implementaciones distintas para asegurar que el script se ejecutar correctamente en el mayor nmero posible de navegadores. Lam entablem ente, todos estos esfuerzos no harn ms que complicar y "ensuciar nuestro cdigo. Pero veamos el lado bueno. No siempre se utilizan esas propiedades u objetos extra y, actualmente, la m ayor parte del DOM es com n a todos los navegadores. Slo necesitar tener algo de cuidado cuando est programando en DHTML (Dynamic HTM L ) ya que hace un uso intensivo del DOM. En los apartados siguientes veremos los objetos principales que form an el DOM. Si quiere conocer el detalle de los objetos de ms bajo nivel (capas, textos, tablas, etc.) podr encontrarlos en cualquier libro relacionado con DHTML.

8.2.2. Propiedades
A continuacin veremos la mayora de las propiedades que tenemos a mano con el objeto window, que no son pocas: l e n g t h : fija o devuelve el nm ero de marcos de la ventana actual. ame: fija o devuelve el nom bre de la ventana que nos servir para referimos a ella en el cdigo. No lo confunda con el ttulo de la pgina que aparece en la parte superior izquierda. m en ubar: Nos devuelve un objeto que representa la barra de men del navegador (ver figura 8.1). t o o l b a r : Nos devuelve un objeto que representa la barra de herramientas del navegador (ver figura 8.1). s t a t u s b a r : Igual que el anterior pero con la barra de estado (ver figura 8.1). d e f a u l t S t a t u s : N o s permite fij ar u obtener el mensaj e por defecto que se muestra en la barra de estado. Esta propiedad no es compatible en FireFox por defecto. s t a t u s : Nos permite modificar el texto de la barra de estado. Esta propiedad no es compatible en FireFox por defecto. s c r o l l b a r s : Nos devuelve el objeto que simboliza las barras de desplazamiento (ver figura 8.1).

8.2. Objeto window


Estam os ante el objeto estrella del DOM, puesto que es el ms alto dentro de toda la jerarqua y el encargado de repre sentar la ventana del navegador donde se est visualizando la pgina. Si utilizamos un navegador que maneje pestaas (como FireFox o Internet Explorer 8), cada una de ellas tendr su propio objeto window ya que en definitiva se trata de p ginas distintas. Para obtener sus colecciones de objetos, propiedades o m todos no es necesario hacer referencia siempre a window ya que JavaScript nos permite esta pequea comodidad al tratarse del ms alto de la jerarqua.

8.2.1. Colecciones de objetos


Como verem os en otros objetos de JavaScript, window contiene a su vez otros objetos. fr ame s : Se trata de un array con la coleccin de fram es o marcos (etiquetas < F R A M E > o < I F R A M E > ) que contenga la pgina. Podemos acceder a ellos a travs de su posi cin en el array o su nombre (atributo AME).
var miFrame = window.frames[0]; var miFrame = window.frames["men"];

En realidad un fram e es un objeto window, por lo que tendr las mismas propiedades y mtodos que l.
176

Figura 8.1. Barras de un navegador. 177

www.FreeLibros.com

. location, history, document: Nos devuelven os objetos location, history y document los cuales verem os ms adelante en este captulo de forma rndi. outi'erHeight, outerWidth: Establece o devuelve el tamao, en pixels, del espacio de toda la ventana en vertical u horizontal, respectivamente. Este valor incluye las barras de desplazam iento, de herram ientas, etc (ver . innrHeight, innerWidth: O btiene la altu ra o anchura, en p ixels, del espacio donde se visu aliza propiam ente la pgina (ver figura 8.2). Este valor tiene en cuenta las barras de desplazam iento, si hubiera, pero excluye todas las dem s (m en, herram ientas, estado, etc.).
ou terW id th

opener: Hace referencia a la ventana que abri la ac tual (ventana emergente o pop-up). Si la ventana no fue abierta por otra, obtendremos un valor undef ined. el o sed: Nos indica si la ventana est cerrada o no a travs de un valor booleano.
______________________________________________ outerW idth

ou terH e lg h t

Figura 8.3. Propiedades de espacio del objeto window con pestaas.

Truco: Para hacer que las propiedades d e f a u l t S t a t u s y s t a t us funcionen con FireFox, se debe modificar su configura cin accediendo al URL aboutxonfig y cambiando el valor de la clave d o m .d s a b l e _ w i n d o w _ s t a t u s _ c h a n g e a falso. El siguiente ejemplo nos permite cambiar el tamao de la ventana actual ajustando el nmero de pixels por el valor que queramos:
<SCRIPT TYPE="text/javascript"> // Redimensionamos la ventana window.outerWidth - 640; window.outerHeight = 480; </SCRIPT>

parent: Se refiere a la ventana donde esta situado el marco (<FRAMESET>) en el que estam os trabajando. En caso de no haber m arcos en la pgina, equivale a la . t c f !; evueWc^a ventana que se encuentra un nivel por encima del marco actual. Si no hay m arcos en la pagina, se devuelve la propia ventana. self : Se refiere a la ventana actual (es sim ilar sentencia this que vim os con los objetos).

8.2.3. Mtodos
Entre los mtodos del objeto window encontraremos mu chas funciones de utilidad para aportar m s dinam ism o a nuestras pginas.
179

178

www.FreeLibros.com

alert (mensa je): Le suena;)? Ahora sabe de dnde viene! Por si no lo recuerda, muestra un mensaje en un cuadro de dilogo con el botn Aceptar, conf irm (mensaje): Muestra un mensaje en un cuadro de dilogo pero, a diferencia de alert, m uestra los botones Aceptar y Cancelar. Adems, nos permite saber sobre qu botn se ha hecho clic, ya que devuelve un valor true para A ceptar y false para Cancelar, prompt (mensaj e , valor_por_defecto): Este mtodo es una extensin de conf irm, ya que incluye una caja de texto para recoger un valor escrito por el usuario, el cual adems es devuelto. Opcionalm ente podemos indicar un valor que ser mostrado por defecto en la caja de texto cuando se muestre el mensaje. Si el usuario hace clic sobre C ancelar obtendremos un valor nuil. focus ( ) ,blur ( ) : Establece o retira el foco de un objeto.
Se dice que un objeto tiene el foco cuando lo estamos utilizando (por ejemplo, escribiendo en un cuadro de texto) y lo pierde cuando dejamos de usarlo. Con estos mtodos podemos forzar estas situaciones. moveBy (x, y): Desplaza la ventana el nmero de pxeles indicados. La x indica el desplazamiento horizontal y la y el vertical. moveTo ( x y): M ueve la ventana a una posicin con creta. resizeBy(x, y): Redim ensiona la ventana tantos pxeles como indiquen los parmetros. La x se refiere a la anchura y la y a la altura. resizeTo (x, y): Establece una anchura y altura con cretas a la ventana. scrollBy (x, y): Realiza un desplazam iento hori zontal y/o vertical de tantos pxeles como m arquen los parmetros. scrollTo (x, y): Realiza un desplazamiento hori zontal y/o vertical hasta una posicin concreta, open (URL, nombre, parmetros): Crea una nueva ventana (normalmente un pop-up ) en la que se carga el URL especificado. Esta ventana recibe tam bin un nombre para identificarla y, opcionalmente, una serie de parmetros que se pasan como una cadena de pares "propiedad=valor" separados por comas, siendo yes o 1 valores positivos y no o 0 los negativos. Pasemos a ver cules podemos incluir:

toolbar:Nos permite indicar si la ventana tendr barra de herramientas o no. menubar: M uestra u oculta la barra de mens de la nueva ventana. location: Nos permite mostrar u ocultar la barra de direcciones en la nueva ventana. di rector i es: Nos deja decidir si la ventana tendr botones de direccin o no. scrollbars: Nos deja indicar si la nueva ventana tendr barras de desplazamiento o no. status: Nos permite controlar la visibilidad de la barra de estado. resizable: Permite establecer si la nueva ventana podr ser cambiada de tamao (con el ratn) o no. fullscreen: Nos deja indicar si la ventana se ver a pantalla completa o no. width, height: Con esto establecemos el ancho o alto que tendr la ventana, en pixels. top, lef t: Podemos indicar la distancia, en pixels, a la que estar la ventana respecto al lado superior o izquierdo de la pantalla. Este mtodo devuelve un identificador para la ventana que hemos abierto (para poder hacer referencia a ella despus) o un valor nul 1 si la ventana no pudo abrirse (por ejemplo a causa de un bloqueo de ventanas emer gentes). Se puede decir que el mtodo open crea una instancia del objeto window. cise ( ) : Cierra la ventana actual. pri n t ( ) : M anda im prim ir la pgina que estem os viendo. setlnterval(expresin, milisegundos) : Evala una expresin continuamente despus de que hayan pasado el nmero de milisegundos especificados. Este mtodo nos devuelve un identificador, que podr ser utilizado para detener su ejecucin. setTimeout(expresin, milisegundos ) : Evala una expresin una nica vez despus de esperar a que pasen el nmero de milisegundos indicados. Este m todo tambin nos devuelve un identificador para poder cancelar esta ejecucin antes de que ocurra. clearlnterval(identificador),clearTimeout identificador) : Cancelan respectivam ente la eje cucin de setlnterval y setTimeout a travs del identificador pasado como parmetro.
181

www.FreeLibros.com

ISoyunlert!

II
|-teWI
[ A p lic a c i n J a v a S c r ip t ] I

( J ) Sov un c n n t a

c a p ta s ?

Fft^tarl [C a n c e l a rJ

"width=500,height=300"); window.openCmi_pagina.html", height=300,top=5,left=5); window.openCmi_pagina.html", menubar=0,location=0"); </SCRIPT>

"ventana2", "ventanal",

"width=500, "toolbar=l,

Me conocen como prompt

Ahora usaremos los m todos que evalan una expresin pasado un plazo de tiempo.
<SCRIPT TYPE="text/javascript"> I I Muestra un mensaje cada 5 segundos setlnterval("alert(\"Riiiiiinggg\")", 5000); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Muestra un mensaje a los 5 segundos setTimeout("alert(\"Se acab el tiempo!\")", 5000); </SCRIPT>

j S o y un valor por defecto)


\ Aceptar

I
\

j | Cancelar

Figura 8.4. Ejemplos de los mtodos alert, confirm y prompt.

A continuacin veremos algunos scripts que utilizan los m todos del objeto window referentes a los cuadros de dilogo.
<SCRIPT TYPE="text/javascript"> // Capturamos el botn var boton = confirm("Quieres continuar? ), if (boton) { alert(" Adelante!") ; } else ( alert("Hasta pronto");

Tam bin es posible usar funciones que ya estuvieran defi nidas en nuestro script.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin function saltarAlarma( ) ( alert("Riiiiiinggg");

)
</SCRIPT> <SCRIPT TYPE="text/javascript"> // Capturamos el texto var texto = prompt("Qu navegador utilizas?"); if (texto == nuil) { alert ("Vale, slo era una pregunta..."); } else f alert("Utilizas: " + texto);

}
// Ejecuta una funcin cada 5 segundos setlnterval("saltarAlarma()", 5000); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensje( ) { alert("Se acab el tiempo!");

>
// Ejecuta una funcin a los 5 segundos setTimeout("mostrarMensaje()", 5000); </SCRIPT>

}
</SCRIPT>

Con los siguientes ejemplos podremos crear nuevas ven tanas con o sin parmetros adicionales.
<SCRIPT TYPE="text/j avascript"> // Ventana nueva con opciones por defecto var ventana = window.open("mi_pagina.html", "ventanal") ; if (ventana == nuil) { alert("No se pudo abrir la ventana");

El cdigo que sigue ejecutar la funcin mostrarCuentaAtras cada segundo hasta que la variable segundos valga cero, momento en el cual se cancelar la repeticin de setln terval automticamente.
<SCRIPT TYPE="text/javascript"> var segundos = 5; var temporizador; // Declaracin de funcin function mostrarCuentaAtras () { if (segundos > 0 ) { alert("Quedan " + segundos + " segundos para el lanzamiento");

}
</SCRIPT> <SCRIPT TYPE="text/javascript"> // Ventana nueva con opciones personalizadas w i n d o w . op e n ("mi_pagina.html", "ventanal".

182

183

www.FreeLibros.com

segundos ; 1 else { clearlnterval(temporizador); alert(" Ignicin!");

Otra manera de usar funciones con parmetros, es incluir una llamada normal dentro de un sentencia function.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensaje (mensaje) alert(mensaje);

} }
// Ejecuta una funcin cada segundo temporizador = setlnterval("mostrarCuentaAtras()",

1000);
</SCRIPT>

}
// Ejecuta una funcin cada 5 segundos setlnterval(function(){ mostrarMensaj e ("Riiiiiinggg") }, 5000); </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensaje(mensaje) { alert(mensaje);

Este otro cdigo ejecutar la funcin mostrarMensaje despus de 10 segundos, a menos que pulsemos sobre el botn A ceptar del cuadro de dilogo que se muestra.
<SCRIPT TYPE="text/javascript"> var temporizador; var boton; I I Declaracin de funcin function mostrarMensaje ( ) { alert("Ya estoy aqui! );

}
I I Ejecuta una funcin a los 5 segundos
setTimeout(function(){ mostrarMensaje("Riiiiiinggg") ), 5000); </SCRIPT>

}
// Ejecuta una funcin a los 10 segundos temporizador = setTimeout("mostrarMensaje()", 10000); // Controlamos la cancelacin del timeout boton = confirm("Cancelamos la espera?"); if (boton) { clearTimeout(temporizador);

}
</SCRIPT>

De esta forma, adems podrem os incluir m s lneas de cdigo que necesitemos ejecutar dentro de esas llamadas pro gramadas. Como ejemplo, haremos dos llamadas a la funcin mostrarMensaje con dos textos distintos. El efecto es que se m ostrarn ambos mensajes, tino a continuacin del otro, pasados 5 segundos.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensaje(mensaje) alert(mensaje);

As mismo, tambin podremos usar funciones con parme tros. Para ello podemos escribir como una cadena la llamada con sus correspondientes valores.
<SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensaje(mensaje) alert(mensaje);

}
// Ejecuta una funcin a los 5 segundos setTimeout(function(){ mostrarMensaje("Riiiiiinggg"); mostrarMensaje("Y ms riiiing!"); }, 5000); </SCRIPT>

}
// Ejecuta una funcin cada 5 segundos setlnterval ("mostrarMensaje (V'RiiiiiingggV) ", 5000) ; </SCRIPT> <SCRIPT TYPE="text/javascript"> // Declaracin de funcin function mostrarMensaje(mensaje) { alert(mensaje);

8.3. Objeto navigator


Con este objeto podremos acceder a informacin acerca del navegador que est utilizando el usuario para ver la pgina. Esto nos ser de utilidad para tomar decisiones dentro de nuestro cdigo ya que sabremos de antemano qu cosas po dran no funcionar en el navegador. Por ejemplo, si detectamos que el usuario est utilizando FireFox 1.0, haremos que nuestro cdigo no ejecute el mtodo resizeTo del objeto window ya
185

}
// Ejecuta una funcin a los 5 segundos setTimeout ("mostrarMensaje (V'RiiiiiingggV) ", 5000) ; </SCRIPT>

184

www.FreeLibros.com

que no lo reconocera, o si el navegador es Opera M ini es re comendable que nuestra ventana no tenga unas dimensiones muy grandes ya que el usuario estar usando un Smartphone, con una resolucin ms baja que un ordenador.

8.3.1. Propiedades
Gracias a esta lista de propiedades podemos obtener bas tante inform acin sobre el navegador del usuario, aunque puede que algunos valores le sorprendan por no ajustarse a lo que esperaba: appCodeName: Devuelve el nom bre del cdigo del navegador. appName: N os dice el nombre del navegador. appMinorVersion: Nos dice la versin de la ltima revisin del navegador. appVersion: Nos proporciona inform acin acerca de la versin del navegador. userAgent: D evuelve la cabecera com pleta del n a vegador que se enva en cada peticin H T T P . Esta propiedad contiene los valores de las propiedades appCodeName y appVersion. browserLanguage: Devuelve el idioma del navegador. systemLanguage: Nos dice el idiom a por defecto del sistema operativo del usuario. userLanguage: Indica el idioma preferido del usuario para el sistema operativo que est utilizando. language: Nos devuelve el idioma del navegador. cpuClass: Nos ofrece informacin acerca del tipo de procesador que tiene el usuario. platform: Indica la plataforma del sistema operativo. cookieEnabled: Perm ite saber si el navegador tiene activadas las cookies o no. Aunque tendremos un captulo dedicado a ello, una cookie es una inform acin que se guarda en el navegador en las visitas a pginas Web.
<SCRIPT TYPE="text/j avascript"> // Mostramos las propiedades alert("appCodeName: " + n a vigator.appCodeName +

"browserLanguage: " + navigator.browserLanguage + "\n" + "systemLanguage: " + navigator.systemLanguage + "\n" + "userLanguage: " + navigator.userLanguage + "\n" + "language: "+ navigator.language + "\n" + "cpuClass: "+ navigator.cpuClass + "\n" + "platform: "+ navigator.platform + "\n" + "cookieEnabled: " + navigator.cookieEnabled); </SCRIPT>
M ensaje de pagina w eb appCodeName: HoA appName: MKrosoft Internet Explorer appMnorVersIon: 0 appVersion: 4.0 (compatible,' M5IE 8.0; Windows fff 5.1; Trident/4.0; .NET CLR 2.0,50727; .NET CLR i, 1.4322; .NET CLR 3.0.4506.2152; .NET a R 3.5.30729) userAgent: Mo2*a/4.0 (compatible; MSIE 8.0; Windows N T S .l; Trident/4.0; .NET a R 2.0.50727; .NET a R 1.1.4322; .NET a R 3.0,4506.2152; .NET CLR 3.5,30729) browserLanguage: es syjternlanguage: es userLanguage: es language: undefned cpuClass: x86 patform: Wln32 cooteEnaMed: true

J \

Figura 8.5. Propiedades del objeto navigator en Internet Explorer 8.


[Aplicacin JavaScript]
I appCodeName: Moztfo . * appName: Netscape appMinorVersion: undefined appVersion: 5.0 (Windows; es-ES) userAgent: Mozia/5.0 (Windows; ; Windows NT 5.1; es-ES; rv:1.9.2.1B) Gecko/201106M Firefox/3.6.18 browserLanguage: undefined systemLanguage: undefined userLanguage: undefined language: es-ES cpuClass: undefined platform: Wm32 cookieEnabled: true

|x ]

| A cc-ptar j

Figura 8.6. Propiedades del objeto navigator en Firefox 3.6.


appCodeName: Mozilla appName: Opera appMinorVersion: appVersion: 9.80 (J2ME/MIDP;OperaMini/6.24093/25.729, U; es) userAgent 0pera/9.80 (J2M EM TDP; Opera Mrni/6.24093/25.729; U ; es) Presto/2.5.25 Version/10.5454 browserLanguage: es-ES systemLanguage undefined userLanguage: es-ES language: es-ES cpuClass: undefined platform: Pike v7.8 release 517 cookieEnabled: true

"\n" +
"appName: " + navigator. appName + "\n" + "appMinorVersion: " + navigator.appMinorVersion + "\n" + "appVersion: " + navigator.appVersion + "\n" + "userAgent: " + navigator.userAgent + "\n" +

Figura 8.7. Propiedades del objeto navigator en Opera Mini 6. 187

www.FreeLibros.com

Nota: No todas estas propiedades estn disponibles en todos los navegadores, por lo que debemos tener esto en cuenta si vamos a utilizarlas dentro de nuestro cdigo.

"availHeight: " + screen.availHeight "colorDepth: " + screen.colorDepth); </SCRIPT>


[ A p lic a c i n J a v a S c r ip t ] / ( * ^ width; 1680 height: 10S0 avaHWidth: 1600 avaHdght: 1020 colorDepth: 32 | Aceptar

+ "\n" +

8.3.2. Mtodos
La verdad que el nmero de mtodos de este objeto no es muy amplio ya que no podemos modificar ninguna de las ca ractersticas del navegador, de modo que nos tendremos que conformar con uno. javaEnabled ( ): Nos indica si el navegador tiene acti vado el soporte para Java (que no JavaScript) mediante un valor booleano.

Figura 8.8. Propiedades del objeto screen.

8.5. Objeto history


Este objeto, que es una propiedad de window, se encarga de almacenar el historial de visitas del navegador, es decir, una lista de las pginas por las que hem os estado navegando. Su principal utilidad reside en la posibilidad de movernos hacia delante o atrs dentro de esa lista.

8.4. Objeto screen


Mediante el objeto s c r e e n podremos obtener informacin acerca de la configuracin de pantalla del usuario que est viendo nuestra pgina. nicam ente tendrem os disponibles unas pocas propiedades y, desafortunadamente, ningn m todo.

8.5.1. Propiedades
Slo tendremos disponible una propiedad para el historial de pginas.

8.4.1. Propiedades
Podrem os conocer algo ms sobre la configuracin del usuario, por si necesitam os realizar algn ajuste en nuestro cdigo. width, height: Nos indican los pixels de ancho y alto que tiene la resolucin actual. availWidth, availHeight: Nos devuelve la anchura y altura que queda libre en el rea de trabajo del escri torio, es decir, resta al ancho o alto total el espacio que ocupan las barras de herram ientas que tengam os en nuestro sistema operativo. colorDepth: Nos permite conocer la profundidad de color, en bits, de la pantalla del usuario.
<SCRIPT TYPE="text/javascript"> // Mostramos las propiedades alert("width: " + screen.width + "\n" + "height: " + screen.height + "\n" + "availWidth: " + - screen.availWidth + "\n" +

length: Devuelve la cantidad de sitios que hay dentro


del historial.

8.5.2. Mtodos
Los mtodos de history son los que realm ente nos ayu darn a desplazarnos por las pginas del historial.

back () ,forward (): Carga la pgina inmediatamente


anterior o posterior a la actual. Esto equivale a hacer clic sobre el botn Atrs o Adelante de nuestro nave gador. go (posicion): Carga una pgina especfica que est en la posicin indicada dentro del historial. El parmetro posicion puede ser un entero (negativo para pginas anteriores, positivo para posteriores) o una cadena que represente un URL.
189

188

www.FreeLibros.com

Truco: El mtodo b a c k equivale a la llamada g o ( - 1 )


Pginas anteriores Pginas posteriores

hostname mediante dos puntos ( :) . El puerto por de


fecto para servidores Web es el 80 y no es comn verlo reflejado en el URL. host: Devuelve el nombre del servidor (hostname) y el nm ero del puerto (port). protocol: Nos indica el protocolo que se ha usado para acceder al servidor (normalmente HTTP).
<SCRIPT TYPE="text/javascript"> with(location) { alert("href: " + href + "hostname: " + hostname "pathname: " + pathname "hash: " + hash + "\n" + "search: " + search + "\n" + "port: " + port + "\n" + "host: " + host + "\n" + "protocol: " + protocol);

back()
go(-2)

forward()

go(-1)

go(1)

go(2)

Figura 8.9. Representacin de los mtodos de history.

"\n" + + "\n" + + \n" +

8.6. Objeto location


Este objeto est representado por una propiedad del objeto window y contiene el URL actual, del cual podremos obtener una serie de valores que nos pueden ser de utilidad en algunos de nuestros scripts.

}
</SCRIPT>
[Aplicacin JavaScript] fX |

8.6.1. Propiedades
Gracias a estas propiedades podrem os "destripar" el URL en varias partes para usar la que ms se ajuste a nuestras ne cesidades.

| href: http:/ / w w w .m iserv ld o r.com :8080/prueba.htm l?buscar=1#ancla j L / . hostnam e: w w w .m iserv id o r.com pathnam e; / p ru eb a.h tm l hash: #ancla search: ?buscar-l port: 8080
host: www.miserYidot.com:8080 protocol! http: | Aceptar ~~|

Figura 8.10. Propiedades del objeto location.


<SCRIPT TYPE="text/javascript"> // Redireccionamos a otra pgina del mismo // servidor location.href = "mi_pagina.html"; </SCRIPT> <SCRIPT TYPE="text/javascript"> // Redireccionamos a otra Web location.href = "http://www.miweb.com"; </SCRIPT>

href: Devuelve el URL completo. Tam bin podemos


reemplazarlo para dirigim os a otra pgina.

hostname: Nos devuelve nicamente la parte del URL


que hace referencia al nombre o direccin IP del servidor donde est alojada la pgina. pathname: Contiene la ruta que se sigue, dentro del servidor W eb, hasta alcanzar la pgina actual. h a sh : Nos devuelve la parte del URL que hay despus de la almohadilla (#). Esto representa un enlace o ancla (anchor). search: Nos devuelve la parte del URL que hay despus del signo de interrogacin (?). A esto se le conoce como consulta o query string, ya que es donde se pasan valores de una pgina a otra. port: Nos indica el puerto por el que hemos accedido al servidor. Esto viene indicado a continuacin del

8.6.2. Mtodos
Su funcin principal es la de interactuar con un URL. a s s i g n (U R L): Carga un nuevo URL. Se crear una nueva entrada en el objeto h i s t o r y .
191

190

www.FreeLibros.com

replace (URL): Reemplaza el URL actual por otro. No crea una nueva entrada en history sino que reemplaza la actual. reload ( ) : Recarga la pgina actual. Es lo mismo que pulsar F5 en el navegador.
<SCRIPT TYPE="text/javascript"> // Redireccionamos a otra pgina
lo c a t i o n . a s s i g n ("mi_pagina.html");

El acceso a cada objeto individual se realiza mediante su posicin en el array o nombre (atributo AME).
var var var var miAncla = d o c u m e n t .a n c h o r s [0]; miFormulario = d o c u m e n t .forms["formNuevoUsuario"]; milmagen = d o c u m e n t .images["logo"]; miEnlace = d o c u m e n t .l i n k [3];

</SCRIPT> <SCRIPT TYPE="text/javascript"> // Obtenemos la hora actual var ahora new Date() ; // Mostramos la hora alert(ahora); // Recargamos la pgina dentro de 5 segundos setTimeout("location.reload()", 5000) ; </SCRIPT>

Los objetos anchor, image y link los veremos en este ca ptulo, mientras que al objeto form le dedicaremos un captulo aparte ya que es ms complejo.

8.7.2. Propiedades
cookie: Nos devuelve en forma de cadena los valores de todas las cookies que tenga el documento. doma i n: Nos indica el nombre del servidor donde est alojado el documento. lastModif ied: Nos dice la fecha de la ltima modifi cacin del documento. referrer: Indica el URL del documento que llam al actual, a travs de un enlace. title: Se trata del ttulo del documento que aparece en la parte superior izquierda de la ventana del nave gador. URL: Devuelve el URL del docum ento actual. Es lo mismo que la propiedad location.href.
<SCRIPT TYPE="text/javascript"> with(document) { a l e r t (" cookie: " + cookie + "\n" + "domain: " + domain + "\n" + "lastModified: " + lastModified + "\n" + "referrer: " + referrer + "\n" + "title: " + title + "\n" + "URL: " + URL);

8.7. Objeto document


Cuando visualizamos una pgina W eb, todos sus elementos (texto, imgenes, enlaces, form ularios...) quedan representados y accesibles para nuestro cdigo dentro del objeto document. Por tanto, podremos aadir contenido a la pgina o modificarlo a nuestro antojo.

8.7.1. Colecciones de objetos


Al igual que window, este objeto contiene a su vez una coleccin de otros objetos.

anchors: Se trata de un array con todas las anclas


(ianchors ) del documento. Estos elementos se identifican por la etiqueta <A> y tienen definido el atributo AME. Esta coleccin de objetos se m antiene por tem as de compatibilidad con versiones anteriores. f orms: Contiene todas las referencias a los formularios (<F0RM>) de la pgina, dentro de un array. images: Aqu estn recopiladas todas las imgenes representadas con la etiqueta <IMG>. links: Contiene todos los enlaces de la pgina, como un array. Se identifican por la etiqueta <AREA> o <A> pero con el atributo HREF definido. N o los confunda con los anchor, que deben tener el atributo AME definido.
192

)
</SCRIPT>

[Aplicacin JavaScript]

|X

cookie: domain: www.mlserYldor.cofn lastModified: 0 5 /0 8 /20 11 1 3 :4 3 :5 7 referrer: title: Pgina de prueba URL: http ://www. mlservidor. cqm: 8080/prueba.htm l?buscarl #ancla | Aceptar

Figura 8.11. Propiedades del objeto document. 193

www.FreeLibros.com

8.7.3. Mtodos
write (texto), w r i t e l n (texto): Escribe texto HTM L en el documento. El m todo writeln aade adems un salto de lnea (<BR>) al final del texto que hayam os pasado como parmetro. open ( ) : Permite escribir sobre el documento mediante los m todos write o writeln una vez que el docu m ento ha sido cargado. cise ( ) : Finaliza la escritura sobre el docum ento, abierta mediante el mtodo open. getElementByld (identif icador) : Devuelve el primer elem ento del documento cuyo atributo ID coin cida con el parmetro identif icador. getElementsByName (nombre): Devuelve un array de elementos cuyo atributo AME coincida con el indicado. getElementsByTagName(etiqueta):Devuelve un array de elementos cuya etiqueta sea la misma que la especificada por el parmetro. Nota: Los mtodos w r i t e , w r i t e l n , o p e n y c i s e en ningn momento modificarn el fichero fsico sino cue solo cambiarn el texto visible en pantalla.___________ __________
<SCRIPT TYPE="text/javascript">
// Escribimos algo en la pgina

8.8. Objeto anchor


Este objeto engloba todas las propiedades y mtodos que tienen los enlaces internos al documento, tambin llamados anclas o anchor. Dentro de una pgina Web estn identificadas con la etiqueta <A> y tienen un valor en el atributo AME, sin importar el resto de atributos. Esto es as para poder mantener la compatibilidad con versiones antiguas de JavaScript.

8.8.1. Propiedades
Las propiedades de este objeto representan bsicamente todos los atributos HTML que puede tener. Salvo que se in dique lo contrario, podremos, por tanto, obtener cmo modi ficar el valor de los siguientes atributos: id : Identificador del ancla (atributo ID). ame: N ombre del ancla (atributo AME). t a r g e t : Ventana o marco donde se cargar el ancla (atributo TARGET). t e x t : Esta propiedad es nicamente de lectura, y nos permite saber el texto que contiene el ancla (lo que ve el usuario en la pgina). innerHTML: Es igual que el anterior, pero nos permite adems modificar ese texto. Veamos un ejemplo con un sencillo anchor:
<A ID="lstPropiedades" NAME="listado" TARGET="_self">Ver listado de propiedades</A> <SCRIPT TYPE="text/javascript"> with(document.anchors["listado"]) { alert("id: " + id + "\n" + "nombre: " + ame + "\n + "destino: " + target + "\n" + "texto (text): " + text + "\n" + "texto (innerHTML): " + innerHTML); t </SCRIPT>
La pgina en http://localhost dice:
/# ' *\ id: ^P ro p ied ad e s nombre: listado destino: _setf texto (text): Ver listado d e propiedades texto (InnerHTML): Ver listado de propiedades | Aceptar

document.write("Esto es un texto <B>en negrita </B>."); </SCRIPT>


<Div ID="capal" TITLE="CapaPrueba">Esto es una
capa HTML</DIV>

<DIV ID="capa2" TITLE="CapaFondo">Esto es otra capa ms</DIV> <SCRIPT TYPE="text/javascript">


// Recogemos un elemento de la pgina

var elemento = document.getElementById("capal");


// Mostramos su atributo title ("CapaPrueba )

alert(elemento.title); </SCRIPT> <SCRIPT TYPE="text/javascript">


// Recogemos una coleccin de objetos var elementos = d o c u m e n t .

1
'

getElementsByTagName("DIV"); // Mostramos cuntos hay (2) alert("Hay " + elementos.length + " elementos DIV"); </SCRIPT>

Figura 8.12. Propiedades del objeto anchor. 195

www.FreeLibros.com

8.8.2. Mtodos
Este objeto slo cuenta con dos mtodos referentes a la posesin del foco. focus ( ) ,blur ( ) : Hacen que reciba o pierda el foco, respectivamente.

text: Nos permite saber el texto del enlace (slo lec tura). innerHTML: Nos permite obtener y modificar el texto del enlace.
<A ID="lstPropiedades" HREF="#propiedades">Ver listado de propiedades</A> <SCRIPT TYPE="text/javascript"> with(document.links[0]) { alert("id: " + id + "\n" + "URL: " + href + "\n" + "destino: " + target + "\n" + "servidor: " + hostname + "\n" + "ruta: " + pathname + "\n" + "hash: " + hash + "\n" + "consulta: " + search + "\n" + "puerto: " + port + "\n" + "servidor y puerto: " + host + "\n" + "protocolo: " + protocol + "\n" + "texto (text): " + text + "\n" + "texto (innerHTML): " + innerHTML);

8.9. Objeto link


Mediante este objeto podrem os tener acceso a todos los enlaces externos al documento o pgina actual. Se consideran objetos l i n k todos los elementos HTML con etiquetas <AREA> y los <A> con el atributo HREF definido (aunque tengan tam bin valor en AME).

8.9.1. Propiedades
La lista de propiedades que tiene este tipo de objeto esrmuy similar a la que vim os para location pero aplicadas sobre el enlace, y tambin com parte algunas con anchor. id: Identificador del enlace (atributo ID). href: Devuelve el URL completo del enlace (atributo HREF). , target: Ventana o marco donde se cargara el enlace (atributo TARGET). hostname: Nos devuelve nicamente la parte del URL que hace referencia al nombre o direccin IP del servidor donde est alojada la pgina destino. pathname: Contiene la ruta que se sigue hasta alcanzar la pgina destino. hash: Nos devuelve la parte del URL que hay despus de la almohadilla (#). Esto representa un enlace o ancla (anchor). search: Nos devuelve la parte del URL que hay despues del signo de interrogacin (?), tambin llamado consulta o query string. port: Nos indica el puerto por el que vamos a acceder al servidor destino. host: Devuelve el nombre del servidor (hostname) y el nmero del puerto (port). protocol: N os indica el protocolo que vam os a usar para acceder al servidor (normalmente HTTP).
196

}
</SCRIPT>
[Aplicacin JavaScript]
| id: IstPropiedades URL: http://ww w.m iservidor.com :8080/prueba.hM ?buscar=l4!propledades destino: servidor: www.miservidor.cotn ruta: /prueba,html hash: p ropiedades consulta: ?buscar*l puerto: 8080 servidor y puerto: www.mtservdor.corn:8080 protocolo: http: texto (text): Ver listado d e propiedades texto (sinerHTML): Ver listado d e propiedades \ Aceptar ' j

Figura 8.13. Propiedades del objeto link.


<A ID="lnkHome" HREF="inicio.html'T >Ir a pgina principal</A> <SCRIPT TYPE="text/javascript"> with(document.links[0] ) { alert("id: " + id + "\n" + "URL: " + href + "\n" + "destino: " + target + "\n" + "servidor: " + hostname + "\n" + "ruta: " + pathname + "\n" + "hash: " + hash + "\n" + "consulta: " + search + "\n" + "puerto: " + port + "\n" + "servidor y puerto: " + host + "\n" +

197

www.FreeLibros.com

"protocolo: " + protocol + "\n" + "texto (text): " + text + "\n" + "texto (innerHTML): " + innerHTML);

</SCRIPT>
[Aplicacin JavaScript]
i. id: kikHome UW-: Wlp://www.mservidor.corn:8C)aD/inicio.html destino: servidor: www.mtservidor.com ruta: /irtdo.html

hash:

imagen, es decir, incluyendo el nom bre del servidor y la ruta hasta la imagen. w id th , h e i g h t : Como podr adivinar, nos permite conocer y cam biar la anchura y altura de la im agen (atributos WIDTH y HEIGHT). a l t : Corresponde con el texto alternativo que se muestra al usuario cuando la im agen no puede ser cargada (atributo ALT). t i t l e : Afecta al texto que se muestra sobre la imagen cuando ponem os el cursor sobre ella (atributo TITLE).
<IMG ID="imgLogo" NAME="logo" SRC="imagenes/logo. jpg" WIDTH="120" HEIGHT="45" ALT="Logo de la empresa" TITLE="Este es nuestro logo"X/IMG> <SCRIPT TYPE="text/javascript"> with(document.images[0]) { alert("id: " + id + "\n" + "nombre: " + name+ "\n" + "URL: " + src+ "\n" + "ancho: " + width+ "\n" + "alto: " + height + "\n" + "texto alternativo: " + alt + "\n" + "texto sobre imagen: " + title);

consulta: puerto: 8080 servidor y puerto: www.mservidor.com:8080 protocolo: http: texto (text): Ir a pgina principal texto (innerHTML): Ir a pgina principal

Figura 8.14. Propiedades del objeto link.

8.9.2. Mtodos
Dada la similitud de l i n k con el objeto a n c h o r , cuenta con los mismos mtodos que ste. f o c u s ( ) , b l u r ( ) : H acen que reciba o pierda el foco, respectivamente.

>
</SCRIPT>
[Aplicacin JavaScript]

8.10. Objeto image


A travs de este objeto seremos capaces de acceder y m a nipular ciertas caractersticas de una imagen contenida en la pgina. No se puede hacer gran cosa, pero siempre est bien contar con ello. Este objeto no cuenta con ningn m todo, as que veremos tnicamente sus propiedades.

id: imgLogo nombre: logo UU.: http://www.mlservidor.com:8080/magenes/logo.jpg ancho: 120 alto: 45 texto alternativo: Logo de la empresa texto sobre imagen: Este es nuestro logo

L..-c P t .; 1
Figura 8.15. Propiedades del objeto image.

8.10.1. Propiedades
id : Se corresponde con el identificador de la imagen (atributo ID). ame: Nos da acceso al nom bre del objeto (atributo AME). s r c : Con esta propiedad podrem os m anipular el URL de la imagen que se muestra (atributo SRC). Cuando se recupera su valor se muestra el URL completo de la
199

www.FreeLibros.com

9
Formularios

En este captulo ver una de las principales utilidades de JavaScript, al m enos teniendo en cuenta el alcance que tiene esta gua: la posibilidad de controlar los form ularios de una pgina. La aparicin de JavaScript en la program acin Web fue motivada, en parte, por la necesidad de incluir un mecanismo de control sobre los formularios directamente en el lado cliente para as evitar cargar en exceso el servidor, liberndolo adems de esas tareas. Un formulario HTM L permite recolectar inform acin pro porcionada directam ente por el usuario que visita nuestra pgina para despus utilizarla en nuestro sitio Web. El tipo de inform acin que se puede recoger es m uy variada, siendo desde datos personales hasta una lista de la compra.

9.1. Formularios en HTML


En este apartado se explicar cmo crear un formulario en nuestra pgina, as como los elementos que puede contener. No pretendo que sea un manual detallado, pero s veo acon sejable desarrollarlo para que conozca todas las partes y ca ractersticas de un formulario de cara a controlarlas despus con JavaScript.

9.1.1. Formulario
Dentro de una pgina W eb pueden existir m ultitud de elementos, y uno de ellos son los formularios. Para incluir un formulario en nuestra pgina debemos utilizar la etiqueta
201

www.FreeLibros.com

<FORM> al in d o y </FORM> al final. Esta etiqueta por si sola no es representada por el navegador, esto es, el usuario no ver nada en su pantalla, sino que simplemente le indica que a continuacin habr elementos de formulario (campos), los cuales s son mostrados al usuario para que pueda introducir la informacin pertinente. Como todo elemento HTML, esta etiqueta dispone de una serie de atributos que nos perm itirn amoldarla a nuestras necesidades: ID: Con l podremos dar al formulario un identificador nico como elemento de la pgina. AME: Nos permite asignarle un nombre al formulario para poder identificarlo dentro de la pgina. ACTION: Aqu debem os indicar a qu URL se van a enviar los datos que recoja el formulario. Por lo general, suele ser una pgina con un lenguaje de servidor, como PHP o ASP, que se encargar de recopilar los datos y tratarlos en el servidor Web. METHOD: Con este atributo podremos definir de qu ma nera se van a enviar los datos. Existen dos mtodos: g e t : Todos los valores del formulario se enviarn dentro del URL detrs del carcter de interrogacin (?), formando la cadena de consulta o Cjuery string. Este m todo no es aconsejable para tratar inform a cin confidencial, ya que todos los datos quedan a la vista del usuario en la barra de direcciones. p o s t : En este caso los datos van encapsulados en la peticin HTTP al servidor W eb haciendo que todos los datos estn ocultos de cara al usuario, lo cual le convierte en el candidato perfecto para manejar informacin sensible como contraseas o nmeros de identificacin. TARGET: Con esto indicamos en qu ventana se va a abrir el URL que recoger el formulario (atributo ACTION). Los posibles valores son: b la n k : El URL se abrir en una ventana nueva. _ s e l f : En este caso se abrir la ventana o marco actual. Es el valor por defecto. p a r e n t : La ventana que contenga los marcos ser la encargada de cargar el URL. Si no hubiera marcos entonces se abrir en la ventana actual. to p : El URL ser abierto en la ventana de nivel inm ediatamente superior o, en caso de no haberla, en la actual.

ENCTYPE: Nos permite especificar la codificacin que llevarn los datos que contenga el formulario: t e x t / p l a i n : Los caracteres que incluya cada campo del form ulario sern enviados tal cual. Debido a ello, si el formulario incluye el envo de ficheros, su contenido no ser tratado adecuadamente y tampoco podr ser recuperado en la pgina destino (atributo ACTION). Este valor se toma por defecto si no se especifica este atributo. m u l t i p a r t / f o r m - d a t a : Los caracteres tambin son enviados sin modificar, pero s perm ite incluir ficheros junto con el formulario. a p p lic a tio n / x -w w w -fo r m -u r le n c o d e d : En este caso, los caracteres de cada cam po del formulario sern codificados antes de ser enviados. Dicha codi ficacin consiste en sustituir los espacios por signos de suma (+) y convertir los caracteres especiales a un valor hexadecimal. No es obligatorio definir todos los atributos que acabamos de presentar, por lo que aquellos que no estn presentes to m arn su valor por defecto (si tuvieran). Por lo general, los campos ID, AME y ACTION se deben especificar para tener unos datos mnimos. Veamos algunos ejemplos, con funcionalidades inventadas, de cmo se incluira un formulario en nuestra pgina Web:
<HTML>

<BODY>
<H3>Formulario para dar de alta un usuario</H3> <FORM ID="forraulariol" NAME="formRegistro" ACTION="registrar.php" METHOD="get"> </FORM> <H3>Formulario para subir ficheros al servidor</H3> <FORM ID="formulario2" NAME="formFicheros" ACTION="guardar_ficheros.php" METHOD="post" ENCTYPE="multipart/form-data"> </FORM> <H3>Formulario para confirmar una compra</H3> <FORM ID="formulario3" NAME="formCompra" ACTION="confirmar_compra.php" TARGET="_blank"> </FORM> </BODY> </HTML>

Como ya hemos dicho, si cargamos una pgina con este c digo no se ver nada en la pantalla ni sern de utilidad puesto que deberem os incluir adem s alguno de los cam pos que
203

www.FreeLibros.com

vam os a ver a continuacin. En los prxim os ejemplos vamos a usar estos mismos formularios para ir com pletndolos y, finalmente, aplicarles controles mediante JavaScript.

9.1.2. Campos de entrada de datos


Estos campos son unos de los ms importantes dentro de un formulario, ya que nos permiten tomar datos que el usuario escribe directamente "de su puo y letra . El navegador^ os representa como un cuadro de texto (de distintos tamaos) y seguro que los ha visto ms de una vez en m uchas de las pginas que visita frecuentem ente, com o el correo W eb, la cuenta del banco o un foro. Los campos de entrada de datos van identificados por las etiquetas <INPUT> y <TEXTAREA>. Cada una de ellas tiene una serie de atributos, aunque tienen en comn los siguientes: AME: Como ocurre en todos los elementos HTML, este atributo nos permite asignar un nombre al campo para que pueda ser identificado. DI SABLED: Nos permite desactivar un campo de forma que no pueda ser utilizado por el usuario. La inform a cin que contenga ser visible, pero el cam po aparecer sombreado. No necesita ir acom paado de un valor como, por ejemplo, el atributo AME sino que el campo se desactivar simplemente con tener este atributo presente en su etiqueta HTML. READONLY: Es similar a DISABLED, salvo que no som brea el campo totalmente. Nota: Los campos con l atributo DISABLED presente no sern enviados junto con el resto del form ulario. Si desea enviar un campo que no deba ser manipulado por el usual io,
Utilice READONLY.________

la pantalla. A la hora de trabajar con este cam po, el texto se recupera tal y como se escribi. h id d e n : Crea una caja de texto que estar oculta a la vista del usuario, de modo que no estar represen tada en la pantalla. Su utilidad reside en transportar valores temporales o de estado. f i l e : N os m ostrar un cuadro preparado para poder buscar un fichero en el ordenador del usuario y adjuntarlo al formulario. MAXLENGTH: Nos permite limitar el nmero mximo de caracteres que se pueden escribir en un cuadro de texto. SIZE: Con este atributo establecem os el nm ero de caracteres que se vern al mismo tiempo en el cuadro de texto. No impone un lmite en la longitud del texto sino nicamente en la cantidad de caracteres que podremos ver en nuestra pantalla dentro de ese cuadro. Si le resulta ms fcil, se podra definir como el ancho que tendr el cuadro. Obviamente este valor no tiene efecto sobre los campos ocultos (h id d en ). VALUE: Este atributo representa el texto que contiene el cuadro correspondiente. En caso de tener un campo de tipo f i l e este atributo no tiene utilidad. Finalmente veremos los atributos que podremos aplicar nicamente en los campos <TEXTAREA>, que no son ms que unos cuadros de texto en los que es posible escribir varias lneas: COLS, ROWS: Seran el equivalente al atributo SIZE de las cajas simples. Con ellos podremos establecer, res pectivamente, el ancho y el alto que tendr esta caja de texto, siendo ROWS el nmero de filas y COLS el nmero de caracteres visibles por fila.

Veamos ahora los atributos propios de la etiqueta <INPUT>, que en este caso representa las cajas de texto simples. TYPE: Posibilita definir el tipo de la caja de texto m e diante uno de estos valores: t e x t : Hace que se muestre una caja para introducir texto genrico. p a ssw o rd : M uestra una caja de texto con la pecu liaridad de que los caracteres escritos se representan como asteriscos (*) para que no queden visibles en
204

Nota: Si no se especifica un tamao para los cuadros de texto (atributos S IZ E , COLS o ROWS), cada navegador asignar unos valores por defecto. Veamos ahora cmo insertar este tipo de campos en nues tros formularios de ejemplo.
<HTML> <BODY> <H3>Formulario para dar de alta un usuario</H3> <FORM ID="formulariol" NAME="foriaRegistro" ACTION="regi strar.php" METHOD="get"> Tu nombre: CINPUT TYPE="text" ID="entradal"

205

www.FreeLibros.com

NAME="nombreUsuario" MAXLENGTH-"8" /> (Mximo 8 c a r a c t e r e s ) <BR /> Tu c o n t r a s e a : CINPUT T Y P E = " p a s s w o r d " ID- e n t r a d a / NAME="clave" / X B R /> Tu email: <INPUT TYPE="text" ID="entrada3" NME="email" SIZE=40" />

Formulario para confirmar ma compra


Tu usuario: Importe total: 54.75 j euros

</FORM>

Figura 9.3. Formulario de compra.

Fonnulario para dar de alta iin usuario


Tu nombre: | (Mximo 8 caracteres)

9.1.3.Campos de seleccin de datos


Aparte de la entrada de datos mediante teclado, el usuario tam bin podr aportar inform acin escogiendo un valor dentro de una serie de opciones que se le ofrece. Para incluir este tipo de cam pos en un form ulario deben utilizarse las etiquetas <INPUT> o <SELECT>. La prim era ya la conoce, aunque en este caso hay que definirla de form a que no co rresponda con una caja de texto, y la segunda m uestra una lista desplegable o drop-dozvn para poder seleccionar un valor de esa lista. Ambas etiquetas tienen una serie de atributos comunes: AME: Representa el nombre con el que se identifica el campo. DI SABLED: Permite deshabilitar el campo, de forma que el usuario no podr interactuar con l. La etiqueta <INPUT> representa en este caso unos campos o datos que son opcionales en nuestro formulario (por ejemplo, si se desea recibir publicidad en el email), aunque tambin se utiliza para poder elegir una opcin entre varias disponibles (puntuacin entre 1 y 10 en un test, por ejemplo). No almacenan un valor escrito por el usuario sino que nicamente pueden estar seleccionados o no. Cuando la etiqueta <INPUT> adopta esta funcionalidad dispone de tres atributos: TYPE: Nos permite definir el tipo del elemento con uno de estos valores: r a d i o : M ostrar un botn de radio, es decir, un crculo vaco cuando no est seleccionado y relleno cuando lo est. Se utilizan cuando querem os que el usuario elija un nico valor entre una serie de opciones (puntuacin entre 1 y 10). c h e c k b o x : Este tipo representa una caja de valida cin que estar vaca cuando no est seleccionada, y rellena con un aspa cuando s lo est. Sirven para que el usuario pueda activar o desactivar las opciones
207

Tu contrasea: f Tu email: 1 -------------------- 1

Figura 9.1. Formulario de registro.


<H3>Formulario para subir ficheros al servidor</H3> <FORM ID="formulario2" NAME="formFicheros' ACTION="gua rda r_fi che ro s.php" METHOD="post" ENCTYPE="multipart/form-data">
NAME="fichero"

Fichero: <INPT TYPE="file" I D = " e n t r a d a 4 " / X B R /> Descripcin: <TEXTAREA ID="entrada5" N A M E COLS="40" R0WS="3"X/TEXTAREA>

descripcin

</FORM>

Formulario para subir ficheros al servidor


Fichero: Examinar...

Descripcin: ___________ _________________

Figura 9.2. Formulario de ficheros.


<H3>Formulario para confirmar una compra</H > <FORM ID=formulario3" NAME="formCompra ACTION="confirmar_compra.php" TARGET- _blank >

<i campo oculto con la fase del proceso de compra > <INPUT TYPE="hidden" ID="entrada6" AME "fase"

VALUE="confirmacion">

Tu usuario: CINPUT TYPE="text" ID="entrada7 NAME="usuario" MAXLENGTH=" 8 " X B R /> Importe total: <INPUT TYPE="text" ID="entrada8 NAME="importe" SIZE="10" VALE="54,75" READONLY> euros

</FORM> </BODY> </HTML>

206

www.FreeLibros.com

que representen, como por ejem plo si desea recibir un boletn sem anal en su correo electrnico. CHECKED: Hace que el elemento est seleccionado desde un principio. Si el usuario lo deselecciona, este atributo no tendr efecto a la hora de mandar el formulario. Al igual que los atributos DISABLED o READONLY, no es necesario un valor a continuacin. VALUE: Representa el valor que tiene asignado el campo. Este valor no ser mostrado junto al elemento de selec cin sino que ser el valor que se enve con el formulario, siempre y cuando el campo est seleccionado. Sin em bargo, si el elemento no est seleccionado el valor que enviaremos ser una cadena vaca. Por otro lado, la etiqueta <SELECT> mostrar una lista desplegable con varias opciones entre las cuales el usuario podr seleccionar una o varias. Un ejemplo de su uso sera que mostrase al usuario una lista de los meses del ao haciendo que elija aquel que corresponda con su fecha de nacimiento. Esta etiqueta tam bin dispone de atributos adicionales: SIZE: Nos permite definir cuntos elementos de la lista se mostrarn al mismo tiempo. El valor por defecto es 1, y el elemento se representa como una lista desplegable. Si este atributo tiene un valor superior, entonces se mostrar como un cuadro de texto con una barra de desplazamiento vertical tomando una apariencia similar a un TEXTAREA. MULTIPLE: Indica que se podr seleccionar ms de un valor de la lista. Para ello, hay que mantener presionado el botn Control mientras se hace clic sobre las opciones que se quiera. Este atributo no necesita un valor aso ciado, de modo que con estar presente ya se activa esta funcionalidad.

SELECTED: Hace que la opcin aparezca como seleccio


nada en la lista desde un principio. Si el usuario cambia la seleccin se anula el efecto de este atributo. Veamos ahora cmo incluir estos nuevos campos a nues tros formularios.
<HTML> <BODY> <H3>Formulario para dar de alta un usuario</H3> <FORM ID="formulariol" NAME="formRegistro" ACTION="registrar.php" METHOD="get"> Tu nombre: <INPT TYPE="text" ID="entradal" NAME="nombreUsuario" MXLENGTH="8" /> (Mximo 8 caracteres)<BR /> Tu contrasea: <INPT TYPE="password" ID="entrada2" NAME="clave" /><BR /> Tu email: CINPUT TYPE="text" ID="entrada3" NAME="email" SIZE="40, T /> Tu pais: <SELECT ID="seleccionl" NAME="pais"> <OPTION ID="opcionl" VALUE="AND">Andorra</OPTION> <OPTION ID="opcion2" VALUE="ESP" SELECTED>Espaa</OPTION> <OPTION ID="opcion3" VALUE="POR" >Portugal </OPTION> </SELECT> </FORM>

Fonnulario para lar (le alta im usuario


Tu nombre: Tu contrasea: | Tu email: Tupis: |Espaa vil 1 |(Mximo 8 caracteres)

Para definir cada una de las opciones, que contienen las listas desplegables, hay que usar otra etiqueta, <OPTION>, que contiene los atributos com unes de <SELECT> (AME y DISABLED) junto con otros dos:

Figura 9.4. Formulario de registro.


<H3>Formulario para subir ficheros al servidor</H3> <FORM ID="formulario2" NAME="formFicheros" ACTION="guardar_ficheros.php" METHOD="post" ENCTYPE="multipart/form-data"> Fichero: <INPT TYPE="file" ID="entrada4" NAME="fichero" / X B R /> Descripcin: -CTEXTAREA ID="entrada5" NAME="descripcion" COLS="40" ROWS "3"X / T E X T A R E A X B R /> CINPUT TYPE="checkbox" ID="seleccion2" NAME="comprimir" /> Comprimir en ZIP </FORM>

VALUE: Representa el valor que tiene asignada la opcin.


Este valor no se muestra junto al elemento, sino que es enviando dentro del formulario. Para asociarle un texto visible al usuario slo hay que escribirlo al lado de la etiqueta <OPTION>, y no tiene por qu coincidir con el valor que se va a mandar. Podemos tener una opcin con el valor 1 y el texto "Enero".
208

209

www.FreeLibros.com

Formulario para subir ficheros al servidor


Fichero: | Examinar... ]

Descripcin:

Comprimir en ZIP

Figura 9.5. Formulario de ficheros.


<H3>Formulario para confirmar una compra</H3>

<FORM ID="formulario3" NAME="formCompra" ACTION="confirmar_compra.php" TARGET="_blank"> < i Campo oculto con la fase del proceso de compra --> CINPUT TYPE="hidden" ID="entrada6" NAME="fase" VALUE="confirmacion">
Tu usuario: CINPT TYPE="text" ID="entrada7" NAME-"usuario MAXLENGTH="8"X B R /> Importe total: CINPUT TYPE="text" ID="entrada8" NAME="importe" SIZE="10" VALUE="54,75" READ0NLY> euros<BR /> Pago: CINPUT TYPE="radio" ID="seleccion3" NAME="pago" VALUE="Tarjeta"> Tarjeta VISA/MASTERCARD <INPUT TYPE="radio" ID="seleccion4" NAME="pago" VALUE="Paypal > Paypal <INPUT TYPE="radio" ID="seleccion5" NAME="pago" VALUE="Efectivo" CHECKED> En efectivo

</FORM> </BODY>
C/HTML>

AME: Indica el nombre del campo, mediante el cual es posible identificarlo. TYPE: N os perm ite especificar el tipo de botn que vamos a incluir en el formulario: b u t t o n : Describe un botn de uso genrico, al que podremos asignar la accin que debe realizar al ser pulsado, que normalmente se trata de una funcin JavaScript. submit: Es un tipo especial de botn que enva automticamente toda la informacin del formulario cuando es pulsado. reset: Se trata de otro botn especial que, cuando es pulsado, vuelve a dejar todo el formulario tal y como estaba al cargar la pgina, borrando toda la inform acin que hubiese introducido el usuario y eliminando sus selecciones. VALUE: Al contrario que otros campos, el valor de este atributo corresponde con el texto que se muestra dentro del botn para as informar al usuario de la funcin que desempea. Por ejemplo, se puede crear un botn con valor "Registrarse" o "Calcular". Si no se aade este atri buto, el texto mostrado por defecto es una cadena vaca, excepto para los de tipo submit que ser "Enviar con sulta", y para el tipo reset que mostrar "Reestablecer". Estos textos por defecto dependen tambin del idioma del sistema y pueden variar de un navegador a otro, pero sern similares. Finalm ente, podremos com pletar nuestros tres form ula rios de ejemplo, aadiendo los botones correspondientes que determinarn las acciones que se llevarn a cabo en cada uno de ellos.
<HTML> <B0DY> <H3>Formulario para dar de alta un usuario</H3> <F0RM ID="formulariol" NAME="formRegistro" ACTI0N="registrar.php" METHOD="get"> Tu nombre: CINPUT TYPE="text" ID="entradal" NAME="nombreUsuario" MAXLENGTH="8" /> (Mximo 8 caracteres)CBR /> Tu contrasea: CINPUT TYPE="password" ID="entrada2" NAME="clave" />CBR /> Tu email: CINPT TYPE="text ID="entrada3" NAME="email" SIZE="40" /> Tu pas: CSELECT ID="seleccionl" NAME="pais">

Formulario para confirmar ima compra


Tu usuario: [________ ________] [ euros

Importe total: [54.75 Pago:

O Tarjeta VISA/M ASTERCAKD O Paypal En efectivo

Figura 9.6. Formulario de compra.

9.1.4. Botones
Por ltimo verem os otros elementos de gran importancia dentro de un form ulario: los botones. Con ellos podremos ejecutar una serie de operaciones con los datos introducidos en el formulario. Todos los botones se definen, de nuevo, con la etiqueta <INPUT> y los siguientes atributos:
210

211

www.FreeLibros.com

COPTION ID="opcionl" VALUE="AND">Andorra</OPTION> <OPTION ID="opcion2" VALUE="ESP" SELECTED>Espaa</ OPTION> COPTION ID="opcion3" VALUE="POR" >PortugalC/ OPTION>

</SELECTXBR /><BR />


CINPUT TYPE="reset" ID="botonl" NAME="limpiar" /> < INPUT TYPE="submit" ID="boton2" NAME="enviar" />

</FORM>

Figura 9.7. Formulario de registro.


<H3>Formulario para subir ficheros al servidor</H3> CFORM ID="formulario2" NAME="formFicheros" ACTION="guardar_ficheros.php" METH0D="post" ENCTYPE="multipart/form-data"> Fichero: CINPUT TYPE="file" ID="entrada4" NAME="fichero" / X B R /> Descripcin: CTEXTAREA ID="entrada5" NAME="descripcion" COLS="40" ROWS = "3"></TEXTAREAXBR /> <INPUT TYPE="checkbox" ID="seleccion2" NAME="comprimir" /> Comprimir en ZIP<BR /> <INPUT TYPE="reset" ID="boton3" NAME="limpiar" VALUE="Cambiar fichero"/> <INPUT TYPE="submit" ID="boton4" NAME="enviar" VALUE="Subir fichero"/> </FORM>

<H3>Formulario para confirmar una compra</H3> <FORM ID="formulario3" NAME="formCompra" ACTION="confirmar_compra.php" TARGET="_blank"> <! Campo oculto con la fase del proceso de compra > <INPUT TYPE="hidden" ID="entrada6" NAME="fase" VALUE="confirmacion"> Tu usuario: CINPUT TYPE="text" ID="entrada7" NAME="usuario" MAXLENGTH="8"X B R /> Importe total: CINPUT TYPE="text" ID="entrada8" NAME="importe" SIZE="10" VALUE="54,75" READONLY> euros<BR /> Pago: -CINPUT TYPE="radio" ID="seleccion3" NAME="pago" VALUE="Tarjeta"> Tarjeta VISA/MASTERCARD <INPUT TYPE="radio" ID="seleccion4" NAME="pago" VALUE="Paypal"> Paypal <INPUT TYPE="radio" XD="seleccion5" NAME="pago" VALUE="Efectivo" CHECKED> En efectivo<BR / X B R /> <INPUT TYPE="button" ID="boton5 NAME="confirmar" VALUE="Confirmar y seguir >" /> </FORM> </BODY> </HTML>

Foimiilaiio pai'a coiifinnar ima compra


Tu usuario: j_________ |euros |

Importe total: [54,75 Pago:

O Tarjeta VISA/M ASTERCARD O Paypal En efectivo

| Confirmar y seguir ]

Figura 9.9. Formulario de compra.

9.1.5. Resumen de tipos de elementos <INPUT>


Para que no tenga que repasar de arriba abajo este cap tulo en busca de los posibles valores del atributo T Y P E para los campos < I N P U T >, le incluyo a continuacin una pequea tabla resum en que espero le sea de ayuda.
Tabla 9.1. Valores del atributo TYPE en campos <INPUT>.

Fonmilaiio pni si subii' ficheros al servidor


Fichero:

Exam inar,.Elemento Entrada de datos Seleccin de datos Botones Valores TYPE text, password, file, hidden radio, checkbox button, submit, reset 213

Descripcin:

Comprimir en ZIP Cambiar fichero | [ Subir fichero

Figura 9.8. Formulario de ficheros. 212

www.FreeLibros.com

9.2. Formularios en JavaScript


Una vez que ya conocemos los formularios HTM L y todo lo que pueden incluir vamos con lo que nos interesa: cmo acceder y trabajar con esos formularios desde nuestro cdigo JavaScript.

<SCRIPT TYPE="text/javascript"> // Acceso a un campo var primerCampo = document.forms[0]. elements[0 ]; var unCampo = document.forms[0]. elements["nombre"]; </SCRIPT>

9.2.1. Formulario
Como dijimos en el captulo dedicado al DOM, el objeto docu m ent nos perm ite un acceso directo a todos los form u larios de la pgina a travs de la coleccin fo rm s . De este modo, acceder a un formulario resulta tan sencillo como usar esta coleccin j un to con ion ndice o el nombre de uno de los formularios existentes (atributo AME).
<SCRIPT TYPE="text/j avascript"> // Acceso a un formulario var miForm = document.forms[0]; var miForm = document.forms["formRegistro"]; </SCRIPT>

Tambin se puede usar directamente los nombres del formulario y/o el campo:
<SCRIPT TYPE="text/javascript"> // Acceso a un campo var primerCampo = document.formRegistro. elements[0]; var unCampo = document.forms[0].nombresuario; var otroCampo = document.formRegistro.clave; </SCRIPT>

A travs de esta coleccin de elem entos podremos conocer el nmero de campos que contiene cada formulario:
<SCRIPT TYPE="text/javascript"> // Cantidad de campos en cada formulario for(var i=0; i<document.forms.length; i++) { alert("El formulario " + i + " tiene + document. forms[i].elements.length + " campos");

Aunque esta es la forma ms correcta, tambin es posible acceder directamente con el nombre de la siguiente manera:
<SCRIPT TYPE=" text/javascript"> // Acceso a un formulario con el nombre var miForm document.formRegistro; </SCRIPT>

)
</SCRIPT>

Nota: El tercer form ulario contiene 7 campos puesto que tambin se contabilizan los campos ocultos ( h id d e n ) .
........ ..................... La pgina en http://localhos1 dice: | X |
|

Tomando como base los tres formularios que hemos defi nido en el apartado anterior, veam os cmo obtener el nmero de formularios que contiene la pgina:
<SCRIPT TYPE="text/javascript"> // Cantidad de formularios en la pgina alert("Hay " + document.forms.length + " formularios en esta pgina"); // Hay 3 formularios </SCRIPT>

^/j

El formulario 0 tiene 6 campos

La pgina en http://localhost dice:

|X |

h 1

El formulario 1 tiene 5 campos

A continuacin verem os todos los elementos a los que po demos acceder dentro de un formulario.

La pgina en http://localhost dice:


^j ^ El formulario 2 tiene 7 campos

| X
i

Colecciones de objetos
e l e m e n ts : Se trata de una arraij con todos y cada uno de los campos que componen el formulario. Se puede ac ceder a cada campo m ediante un ndice o su nombre.

| Aceptar

Figura 9.10. Informacin del nmero de campos de los distintos


formularios. 215

214

www.FreeLibros.com

Propiedades

Bsicamente podrem os obtener y m odificar todos los atri butos HTM L del formulario id : Representa el identificador del formulario (atributo ID). ame, action, method, target, enctype: Representan cada uno de los atributos que hemos descrito en el apar tado anterior. length: Nos dir el nmero de campos que tiene el formulario. Es lo mismo que elements .length. Gracias a estas propiedades podremos obtener algo ms de informacin de los formularios para usarlo en nuestros scripts:
<SCRIPT TYPE="text/javascript"> var formulario; // Cantidad de campos en cada formulario for(var i=0; i<document.forms.length; i++) { formulario = document.forms[i]; alert("El formulario " + i + " (" + formulario ame + ") tiene " + formulario.length + " campos que va a enviar al URL " + formulario.action + " utilizando el mtodo " + formulario.method);

reset () :D eja el formulario en blanco, tal ycom ocsl.ikt al cargar la pgina. Realiza la misma accin que un botn de tipo reset. A modo de ejemplo de estos mtodos, crearemos un pe queo script que nos lim pie el primer formulario pasados 10 segundos. Para ver su efecto escriba algo en alguno de sus campos antes de que pase ese tiempo.
<SCRIPT TYPE="text/javascript"> // Funcin que limpia un formulario function limpiarForm(formulario) { formulario.reset();

)
// Inicializacin de temporizador setTimeout("limpiarForm(document.forms[0])", 10000) ; </SCRIPT>

9.2.2. Campos de entrada de datos


JavaScript tambin nos permite acceder a estos campos para manejarlos desde nuestros scripts.
Propiedades

}
</SCRIPT>

Al igual que los elementos HTM L que representan estos campos, hay una serie de propiedades comunes para todos ellos: id: Representa el identificador del formulario (atributo ID). disabled, ame, readOnly, type, valu: Devuelven el valor del atributo HTM L correspondiente. form : Nos indica el objeto de formulario donde est contenido el campo actual. Las cajas de texto, definidas con <INPUT>, tienen adems estas propiedades: maxLength: Nos permite obtener y modificar la lon gitud mxima del campo. Si no se ha especificado esta propiedad, se devuelve -1. size: Devuelve el nmero de caracteres visibles en el campo. Tambin podremos cambiarlo directamente en nuestro cdigo. Como no poda ser de otra manera, los <TEXTAREA> tam bin tienen algunas propiedades suyas:
217

Figura 9.11. Informacin de los distintos formularios. M todos

s ubmi t ( ) : Enva el formulario con toda la informacin que haya introducido el usuario en l. Equivale a un botn de tipo su b m it.
216

www.FreeLibros.com

c o i s , ro w s: Nos dejan obtener o modificar el ancho o el alto del cuadro de texto. Si alguna de estas propiedades no ha sido definida, se obtiene un valor -1. Veam os cmo usar todas estas propiedades con nuestro ejemplo, tomando algunos campos cuya propiedad ty p e sea de uno de estos tipos.
<SCRIPT TYPE="text/javascript"> var formulariol = document -forms [0] ; var formulario2 = document.forms[1]; var formulario3 = document.forms[21; // Muestra las propiedades de un campo de entrada de datos function mostrarPropiedades(campo) { var datos = "El campo " + campo.ame + " est en el formulario " + campo.form.ame + y sus propiedades son:\n"; datos += "\t- ID: " + campo, id + "\n"; datos += "\t Nombre: " + campo.ame + "\n"; datos += "\t- Tipo: " + campo.type + "\n"; datos += "\t- Valor: " + campo.valu + "\n; datos += "\t- Deshabilitado: " + c a m p o .disabled + "\n"; datos += "\t- Slo lectura: " + campo.readOnly + \n ; // Aadir los campos especficos del tipo de campo if (campo.type == "textarea") { datos += "\t- Ancho: " + campo.cois + "\n"; datos += "\t- Alto: " + campo.rows+ "\n"; } else { datos += "\t- Longitud mxima: " + campo. maxLength + "\n"; datos += "\t- Ancho: " + campo.size + "\n"; // Mostrar las propiedades alert(datos);

[Aplicacin JavaScript]
El campo nombreUsuario est en d formularlo formRegistro y sus propiedades son: - ID: entradal -Nombre: nombreUsuario - Tipo: text -Valor: - Deshabilitado: false -Slo lectura: false - Longitud mxima: 8 -Ancho: 0 | Aceptar

Figura 9.12. Informacin del campo nombreUsuario.


[Aplicacin JavaScript] (x"|

El campo clave est en el formulario formRegistro y sus propiedades son: -ID: entrada2 -Nombre: clave - Tipo: password -Valor: -Deshabilitado: false - Soto lectura: false -Longitud mxima: -1 - Ancho: 0 [ Aceptar

Figura 9.13. Informacin del campo clave.


[Aplicacin JavaScript]
El campo fichero est en el formulario formFicheros y sus propiedades son: - ID: entrada4 -Nombre: fichero - Tipo: file - Valor: - Deshabilitado: false -Slo lectura: false -Longftud mxima: 1 -Ancho: 0

}
// Mostramos algunos campos mostrarPropiedades(formulariol. elements["nombreUsuario"]); mostrarPropiedades (formulariol .elements ["clave"] ) ^ ; mostrarPropiedades(formulario2.elements["fichero"]); mostrarPropiedades(formulario2.elements["descripcin"]); mostrarPropiedades(formulario3.elements["fase"]); mostrarPropiedades(formulario3.elements["importe"]); </SCRIPT>

Figura 9.14. Informacin del campo fichero.


[Aplicacin JavaScript] | X I

El campo descripcin est en el formulario formFicheros y sus propiedades son: -ID: entrada5 -Nombre: descripcin -Tipo: textarea - Valor: - Deshabilitado: false - Slo lectura: false -Ancho: 40 -Alto; 3 | Aceptar

Truco: A travs de JavaScript, la propiedad t y p e no es exclusiva de los campos <INPUT>, sino que nos dice el tipo _______ _ _ _ _______ ____ de cualquier campo.
218

Figura 9.15. Informacin del campo descripcin. 219

www.FreeLibros.com

[A plicacin Ja v a S c rip t]
. . I . B campo fase est en el formulario formCompra y sus propiedades son: -ID:entrada6 -Nombre: fase - Tipo: hidden -Valor: confirmacin -Deshabilitado: false - Slo lectura: false -Longitud mxima: 1 -Ancho: 0 Aceptar |

Con un sencillo cdigo podremos hacer que el rm v n , site en cualquiera de las cajas (establecer el foco) n.ul.i iim , cargarse la pgina. De este modo forzamos un poco n pie m sea el primer campo que rellene usuario cuando eni|'iri < .i escribir.
<SCRIPT TYPE="text/javascript"> var formulariol = document.forms[0]; // Ponemos el foco en el email formulariol.elements["email"].focus(); </SCRIPT>

Figura 9.16. Informacin del campo fase.


[Aplicacin Ja v a S c rip t]
El campo importe est en el formularlo formCompra y sus propiedades son: -ID: entrada8 -Nombre: importe -Tipo: text - Valor: 54;75 -Deshabitada: false -Slo lectura: true - Longitud mxima: 1 -Ancho: 10 | Aceptar

Mediante este otro script, seleccionaremos todo el texto mu* haya en el <TEXTAREA> una vez hayan pasado 10 segundos desde que se carg la pgina. Si escribimos algo en l antes de que ocurra, veremos el efecto.
<SCRIPT TYPE="text/j avascript"> // Funcin que selecciona un campo function seleccionarCampo(campo) { campo, select ( );

}
// Inicializacin de temporizador setTimeout("seleccionarCampo(document.forms[1]. elements['descripcin'])", 10000); </SCRIPT>

Figura 9.17. Informacin del campo importe.

Recuerde que tambin es vlido acceder a un campo o for mulario directamente a travs de su nombre:
<SCRIPT TYPE="text/javascript"> // Mostramos algunos campos mostrarPropiedades(formulariol.nombreUsuario); mostrarPropiedades(document.formRegistro.clave) ; mostrarPropiedades(formulario2.fichero); mostrarPropiedades(formulario2.descripcin); mostrarPropiedades(formulario3.fase); mostrarPropiedades(formulario3.importe); </SCRIPT>

Nota: A qu se han utilizado las comillas simples para indicar el nombre del campo simplemente por comodidad y evitar poner la comilla doble con el carcter de escape. Sera igual mente vlido escribirlo como [ \ " d e s c r i p c i n \ "].

9.2.3. Campos de seleccin de datos


Estos campos pueden ser controlados directamente desde el cdigo, lo cual nos aportar una gran flexibilidad a la hora de validar nuestros formularios.

Se habr dado cuenta de que hemos distinguido los dife rentes tipos de campos a travs de la propiedad ty p e . En el apartado 9.2.5 podr encontrar una lista de todos los valores posibles de esta propiedad. Veam os ahora los mtodos disponibles para los campos de entrada de datos.
M todos

Colecciones de objetos
Como viene ocurriendo con algunos objetos, aqu tenemos uno ms que contiene a su vez un conjunto de otros objetos. Se trata de una coleccin que representa los elementos <OPTION> que, obviamente, slo estar presente en los <SELECT>. o p t i o n s : Contiene un array todas las opciones que m uestra la lista desplegable. nicam ente se puede acceder a cada opcin a travs de un ndice.
221

f o c u s ( ) , b l u r ( ) : Establece o retira el foco de la caja. s e l e c t ( ): Selecciona todo el texto que est escrito dentro de la caja de texto.
220

www.FreeLibros.com

<SCRIPT TYPE="text/javascript"> // Acceso a la coleccin de opciones de una // lista desplegable var campoSelect = document.forms[0].elements[3], var unaOpcion = c a m p o S e l e c t .o p t i o n s [0]; </SCRIPT>

Adems de obtener cada opcin por separado, podremos saber el nmero de todas ellas, ya que se trata de un a r r a y .
<SCRIPT TYPE=text/javascript">
// Cantidad de opciones en el campo select var campoSelect = d o c u m e n t . forms[0].elements[3]; alert("El campo select " + c a m p o S e l e c t .ame + " tiene " + campoSelect.options.length + opciones // Mostrar 3 opciones </SCRIPT>

size: Nos devuelve el valor del atributo I : ,K, tiiir viene a ser el nmero de opciones visibles < il mismo tiempo en la lista desplegable. length: Nos indica el nmero de opciones de l.is pic dispone. Este valor equivale a la longitud de su co lea k > ii de datos, es decir, options .length. selectedlndex: Nos permite obtener o establecer la opcin que est seleccionada, a travs de un ndice que corresponde a su posicin dentro de la lista. Iil ndice 0 representa la primera opcin en el orden que estn de finidas en la pgina HTML. La ltima posicin se puede calcular restando 1 a su longitud (nmero de opciones). Esta propiedad toma el valor especial -1 cuando no hay ninguna opcin seleccionada. Por ltimo, no nos olvidamos de los elementos <OPTION>, que son muy envidiosos y tambin tienen sus propiedades aparte:

propiedades
Todos los elem entos HTML de seleccin que tenemos a nuestra disposicin (<INPUT>, <SELECT> y <OPTION>) dis ponen de unas cuantas propiedades comunes. id : Equivale al identificador del cam po (atributo ID). ame, ty p e: Representan el nombre y el tipo del elemen o (atributos AM E y TYPE), excepto para los <OPTION>, que no disponen de estos atributos. v a lu - Nos devuelve el valor que tenga asociado el campo en su atributo VALUE. En el caso de los <SELECT> nos devolver el valor de la opcin que este seleccio d i s a b l e d : N os perm ite h abilitar o deshabilitar el campo, m odificando el atributo DISABLED. . f orm: Nos devuelve el objeto de formulario en el que se encuentra el campo. Adicionalmente, los dos tipos de elementos < I N P U T > que pueden existir en un formulario ( r a d io y c h e c k b o x ) tienen estas propiedades: c h e c k e d : Perm ite saber y establecer cundo est selec cionado el campo. Por otro lado, las listas desplegables (<SELECT>) tambin nos ofrecen un puado ms de propiedades, que ademas son bastante tiles: m l t i p l e : Nos permite conocer y establecer cundo la lista admite seleccin mltiple.

selected: Nos permite saber o fijar cundo la opcin


estar seleccionada.

text: Obtiene el texto que se encuentra junto a la eti


queta <OPTION> y tambin nos deja modificarlo. index: Devuelve la posicin que ocupa la opcin dentro de la lista desplegable. A continuacin dispone de un script que mostrar todas estas propiedades:
<SCRIPT TYPE="text/javascript"> var fonmilariol = document.forms[0]; var formulario2 = document.forms[1]; var formulario3 = document.forms[2]; // Muestra las propiedades de un campo de seleccin // de datos function mostrarPropiedades(campo) { var datos = "El campo " + campo.ame + est en el formulario " + campo.form.ame + " y sus propiedades son:\n"; datos += "\t- ID: " + campo.id + "\n"; // Los option no tienen estas propiedades if (typeof(campo.type) != "undefined") { datos += "\t- Nombre: " + campo.ame + "\n"; datos += "\t Tipo: " + campo.type + "\n";

}
datos += "\t- Deshabilitado: " + campo.disabled + "\n"; // Aadir los campos especficos del tipo de campo

223

www.FreeLibros.com

if (campo.type = "select-one" II campo.type "select-multiple") { datos += "\t- Opciones visibles: " + campo.size + "\n"; datos += "\t- Opciones totales: " + campo.length + \n";
datos += "\t- Mltiple: " + campo.mltiple +

[Aplicacin JavaScrip t]

El campo undefined est en el formulario formRegistro y sus propiedades son: -ID: opdonl -Deshabitado: false -Texto: Andorra -Posicin: 0 -Seleccionado: false j Aceptar j

"\n"; datos += "\t- Opcin seleccionada: " + campo, selectedlndex + "\n"; } else if (campo.type -= "radio" || campo.type "checkbox") { datos += "\t- Valor: " + campo.valu + "\n"; datos += "\t Seleccionado: " + campo.checked + "\n"; } else { datos += "\t- Texto: " + campo.text + "\n"; datos += "\t- Posicin: " + campo.index + "\n"; datos += "\t- Seleccionado: " + campo.selected + "\n" ;

Figura 9.19. Informacin de una opcin.

}
// Mostrar las propiedades alert(datos);

}
// Mostramos algunos campos mostrarPropiedades(formulariol.elements["pais'M ); mostrarPropiedades(formulariol.elements["pais ] . options[0]); ^ m mostrarPropiedades(formulariol.elements["pas ]. options[l]); . , mostrarPropiedades(formulario2.elements["comprimir J), mostrarPropiedades(formulario3.elements["pago"][0]); mostrarPropiedades(formulario3.elements["pago ] [2]); </SCRIPT

Nota: Fjese que la propiedad am e para una opcin devuelve el valor u n d e f i n e d al no tenerla disponible. ______ ______
[A plica cin JavaS cript] I WI_ , ! e l I

El campo pais est en el formulario formRegistro y sus propiedades son: -ID: seleccin1 - Nombre: pais -Tipo: select-one - Deshabilitado: false -Opciones visibles: 0 -Opciones totales: 3 -Mltiple: false -Opcin seleccionada: 1

Aceptar

j |

Figura 9.18. Informacin de una lista desplegable. 224

Figura 9.23. Informacin de un campo radio.

www.FreeLibros.com

M todos

Todos los cam pos de seleccin tiene estos dos mtodos definidos: f o c u s ( ) , b l u r ( ) : Nos dejan establecer o retirar el foco del campo. Los <INPUT> disponen adems de otro adicional: c l i c k ( ) : Simula un clic de ratn sobre el campo, de form a que lo dejar seleccionado o deseleccionado dependiendo de su estado anterior. Ahora sim ularem os un clic sobre la caja de validacin (checkbox) del segundo formulario y el primer boton de radio del tercero, pasados 5 y 10 segundos, respectivamente, desde la carga de la pgina:
<SCRIPT TYPE="text/javascript"> // Funcin que simula un clic sobre un campo function clicCampo(campo) { campo.click(); // Inicializacin de temporizador setTimeout("clicCampo(document.forms[1]. elements['comprimir' ]) ", 5000) ; setTimeout("clicCampo(document.forms[2]. elements[ 'pago'] [0])", 10000), </SCRIPT>

SCRIPT TYPE="text/javascript"> var formulariol = document.forms[0]; var formulario2 = document.forms[1]; var formulario3 = document.forms[2]; // Muestra las propiedades de un campo botn function mostrarPropiedades(campo) { var datos = "El campo " + campo.ame + " est en el formulario " + campo.form.ame + " y sus propiedades son:\n"; datos += "\t- ID: " + campo.id + "\n"; datos += "\t- Nombre: " + campo.ame + "\n"; datos += "\t- Tipo: " + campo.type + "\n"; datos += "\t- Deshabilitado: " + campo.disabled +

"\n";

datos += "\t Valor: " + campo.valu + "\n"; // Mostrar las propiedades alert(datos);

}
// Mostramos algunos campos mostrarPropiedades(formulariol.elements["limpiar"]); mostrarPropiedades(formulariol.elements["enviar"]); mostrarPropiedades(formulario2.elements["limpiar"]); mostrarPropiedades(formulario2.elements["enviar]); mostrarPropiedades(formulario3.elements["confirmar"] ) ; </SCRIPT>
La pgina en h ttp ://localho st dice:

El campo enviar est en el formulario formReglstro y sus propiedades son: - ID: boton2 -Nombre: enviar - Tipo: submlt -Deshabilitado! false - Valor: | Aceptar |

9.2.4. Botones
Como ocurre con el resto de campos de formulario, los b o tones son otra parte que puede ser controlada por JavaScript.

Figura 9.24. Informacin de un botn. M todos

propiedades
Por una vez, todos estos elem entos tienen las m ismas propiedades! i d , d i s a b l e d , am e, t y p e , v a l u : Nos perm iten manipular los atributos que representan con el mismo nombre. f o rm: Nos indica el formulario en el que se encuentran los botones. Y como venim os haciendo con cada tipo de campo, vamos a utilizarlas dentro de un script:
226

En cuanto a los mtodos que podrem os utilizar con los botones, no hay ninguno nuevo, as que ya le empezarn a resultar incluso familiares. f o c u s ( ) , b l u r ( ) : Efectivamente, sirven para colocar o quitar el foco del botn. c l i c k ( ) : Simula un clic de ratn sobre el botn como si lo hubiera hecho el usuario. El m todo que ms nos interesa es c l i c k , y su uso es igual que el que vimos para los campos de seleccin. Con el siguiente cdigo conseguiremos que se simule un clic sobre el
227

www.FreeLibros.com

botn R eestablecer del primer formulario a los 10 segundos de haberse cargado la pgina. Esto har que se borre toda la inform acin que hubiram os escrito en l, por lo que nueva mente tendremos que rellenar algunos campos previamente para poder ver su efecto.
<SCRIPT TYPE="text/javascript"> // Funcin que simula un clic sobre un campo botn function clicCampo(campo) { campo.click( ); // Inicializacin de temporizador setTimeout{clicCampo(document.forms[0]. elements['limpiar'])", 10000); </SCRIPT>

9.3.1. Definir formulario


Para ir poco a poco con este ejemplo, vamos a definir pri mero un formulario que requiera registrarse como usuario, ya que es uno de los ms tpicos con los que nos podemos encon trar en una Web. Los datos que se piden norm alm ente son N ombre de usuario, con el cual nos identificaremos en la pagina. Contrasea, que junto con el nombre de usuario nos permitir acceder a nuestra cuenta. Email, para recibir noticias o mensajes. idiomas ^ ^ ^ pgina est disP onible en varios

9.2.5. Resumen de tipos de campos


Al igual que se hizo para los valores del atributo TYPE, la tabla 9.2 le permitir tener a mano los valores que utiliza JavaScript para identificar todos los posibles valores de la propiedad t y p e de los campos de un formulario. Tenga en cuenta que los elementos <INPUT> no son los nicos que dis ponen de esta propiedad, por lo que tendremos ms valores que en la tabla 9.1.
Tabla 9.2. Valores de la propiedad type. r "ampo Entrada de datos Seleccin de datos Valores type text, password, file, hidden, textarea radio, checkbox, select-one (sin atributo MULTIPLE), select-multiple (con atributo MULTIPLE) button, submit, reset i

Una caja de validacin para autorizar al sitio Web a mandarnos publicidad mensual a nuestro email. a estoC dlS H L COn todos esos camP s quedara similar
<HTML> <BODY> <H3>Formulario para darse de alta como usuario en nuestra Web</H3> <FORM ID=formulario" NAME="formRegistro" ACTION-"registrar.php" METHOD="post"> Nombre de usuario: -CINPUT TYPE="text" ID-"entradal" NAME="usuario" MAXLENGTH="8" /> (Mximo 8 caracteres)<BR /> MAMFrT a:.,^NPT TYPE=Passrd ID="entrada2 " NME="clave" /><BR /> Repetir contrasea: <INPT TYPE="password" ID="entrada 3 " AME "claveRepe" /> (Deben coincidir)<BR /> SIZE="4 0"^/><BR^/>= "teXt" ID="entrada4 NAME="email" tdioma: <SELECT ID="seleccionl" NAME="idioma"> <OPTION ID="opcionl" VALE="EN">Ingls</OPTION> 0PTION>PTION ID="PCOn2" VA1E=ES" SELECTED>Espaol</ </SELECT><BRN />D="OPC1n3" VLUE="DE" >Alemn</OPTION> .INPOT TYPE="checkbox" ID="seleccion 2 " NAME="publicidad" </FORM>r reC1 Publicidad mensual en mi email </BODY> </HTML>

Botones

9.3. Validar datos de un formulario


Ahora que ya hem os visto cm o se crea un form ulario HTML y cmo acceder a todos sus elementos y propiedades a travs de JavaScript, vam os a aplicar todo esto en un caso real y de los ms comunes: la validacin de un formulario para detectar posibles errores en los datos antes de mandarlos al servidor.
228

Opcionalmente, este formulario se puede complementar S r d e dp" o los campos, es decir, un

229

www.FreeLibros.com

Para com probar que los campos del form ulario no con tienen errores, vam os a crear una funcin JavaScript por cada uno de ellos.
Formulario para darse de alta como usuario en nuestra Web
Nombre de usuario: Contrasea: Repetir contrasea: Email: Idioma:
Espaol ,**1

Esto no es im portante ahora. Sim plem ente quera m os trarle las distintas formas que tenemos de realizar la misma operacin.

9.3.3. Validacin de la contrasea


Este campo habr dos comprobaciones: 1. El valor de los dos campos contrasea no estn vacos. 2. Los valores de ambos campos coinciden. Vamos a plasmar estas validaciones en forma de cdigo JavaScript:
<SCRIPT TYPE="text/javascript"> // Funcin que comprueba la contrasea function comprobarClave(clave, claveRepetida) if (clave != "" && claveRepetida != "") { return (clave == claveRepetida); } else { return false;

|(Mximo 8 caracteres)

1 (Deben coincidir)

Quiero recibir publicidad mensual en mi email

Figura 9.25. Formulario de ejemplo.

9.3.2. Validacin del nombre de usuario


Para confirm ar que este cam po es vlido, sim plem ente vamos a mirar que su valor no est vaco. No sera necesario comprobar que la longitud es correcta (mximo 8 caracteres) puesto que esa lim itacin la hace el propio formulario al in cluir el atributo MAXLENGTH en este campo. Por tanto, nuestra funcin devolver un valor t r u e si el campo no es vacio y f a l s e en caso contrario.
< S C R IP T T Y P E = " te x t/ja v a s c r ip t" >

1 }
</SCRIPT>

// Funcin que comprueba el nombre de usuario function comprobarUsuario(nombreUsuario) { if (nombreUsuario != " ) ( return true; ) else ( return false;

Como puede ver, en primer lugar se comprueba que nin guno de los dos campos est vaco, devolviendo f a l s e si esto no fuese as, y a continuacin se comparan sus valores devol vindose como resultado. Tanto para el nom bre de usuario como para la contra sea se pueden aplicar m uchas m s validaciones, que se dejan a eleccin del desarrollador de la pgina. Por ejemplo, se podra restringir que el nom bre de usuario slo pudiera contener nm eros y letras m ediante una expresin regular, o que la contrasea deba contener m aysculas y m insculas obligatoriam ente. Las posibilidades con JavaScript son muy amplias.

</SCRIPT>

Una forma ms abreviada de definir esta funcin sera utilizar el valor devuelto por la propia com paracin con la cadena vaca:
<SCRIPT TYPE="text/javascriptn> // Funcin que comprueba el nombre de usuario function c o m p r o b a r U s u a r i o (nombreUsuario) return (nombreUsuario != "") !

9.3.4. Validacin del email


Con este campo vamos a ir un poco ms all y utilizaremos cosas que ya hemos visto en esta gua. Aparte de comprobar si el campo est vaco, validaremos tambin su formato a travs de una expresin regular, por lo que usaremos uno de los pa trones que expusimos en su momento. Con esto evitaremos que un usuario introduzca un texto que no corresponda a una d ireccin de correo electrnico.
231

)
</SCRIPT>

www.FreeLibros.com

<SCRIPT TYPE="text/javascriptf '>


// Funcin que comprueba el email function comprobarEmail (email) { . var patrn = new RegExp(-\\w+@\\w+\ \ .\\w{2,3)$ ), if (email ! = " " ) { return (patrn.test(email)) ; } else { return false;

9.3.6. Validacin del envo de publicidad


En este caso no hace falta comprobar si la caja est selec cionada o no porque se trata de un campo opcional (el usuario acepta o no recibir publicidad). Por tanto, para hacer algo ms interesante este ejemplo y aplicar los conocimientos adquiridos, vamos a hacer que aparezca un cuadro de dilogo dndole una segunda oportunidad para que acepte la publicidad si el usuario no lo ha hecho antes. Como siempre, esta funcin se puede programar de mil formas distintas. Nosotros vamos a crearla de forma que de volver un valor t r u e o f a l s e que nos servir ms adelante para fijar la propiedad c h e c k e d , haciendo que se acepte o no el envo de publicidad.
<SCRIPT TYPE="text/j avascript"> // Funcin que comprueba la publicidad function comprobarPublicidad(aceptaPublicidad) { if (aceptaPublicidad) { return confirm("Nuestra publicidad le mantendr informado sobre las ofertas y novedades. \nDesea recibirla en su email?"); ) else { return true;

} }
</SCRIPT>

9.3.5. Validacin del idioma


Dado que en este cam po los valores siem pre van a ser correctos ya que se seleccionan de una lista, tan solo de bem os com probar que se ha escogido una de esas opciones disponibles. La form a m s sencilla de com probar esto es consultar directam ente la propiedad s e l e c t e d l n c t e * de cam po <SELECT>. Si es distinto de -1 entonces lo darem por vlido.
<SCRIPT TYPE="text/javascript > // Funcin que comprueba el idioma function comprobarldioma(indiceldioma) return (indiceldioma != -1 ) !

} }
</SCRIPT>

}
</SCRIPT>

Como ha podido observar, esta funcin resulta bastante Senofra forma de ver esto es mirar todas las opciones y buscar alguna que tenga su propiedad s e l e c t e d con valor t r u e . S quisiramos hacerlo a s , tendramos que pasar directamente el campo <SELECT> como parmetro y recorrer su coleccion de opciones:
<SCRIPT TYPE="text/javascript"> // Funcin que comprueba el idioma function c o m p r o b a r l d i o m a (campoldioma) { for (var i=0; K c a m p o l d i o m a .length; x++) if (campoldioma.options[i].selected) return true;

9.3.7. Funcin principal de validacin


Bueno, llega la hora de juntar todas estas funciones en una sola para validar nuestro formulario. Como hem os definido las funciones para que devuelvan un valor booleano, utilizarlas ser bastante fcil. Basta con comprobar su resultado y m ostrar un mensaje de advertencia solamente cuando el cam po no sea vlido. Para darle un loque ms profesional a nuestra funcin, adems del m en saje, situarem os el foco sobre el cam po que lo ha provocado, con lo que ayudarem os al usuario a subsanar el error ms rpidamente. Dicho esto, vamos con la funcin:
SCRIPT TYPS="text/javascript"> // Funcin que valida el formulario de registro function validarRegistro() { with(document.formRegistro) { // Comprobar campos obligatorios

i l

} }
return false;

)
</SCRIPT>

233

www.FreeLibros.com

if (!comprobarUsuario(usuario.valu)) { alert("El nombre de usuario est vacio."); usuario.focus(); } else if (comprobarClave(clave.valu, claveRepe.valu)) { alert("La contrasea est vacia o no esta bien repetida."); clave.valu = claveRepe.valu = ""; clave .focus ( );
} else if (!comprobarEmail(email.valu)) {

Para hacer esto debemos utilizar el atribulo liri i jimln con una funcin en lugar de un URL, anteponiendi l.i. .ulni.i "javascript:" a la llamada de la funcin. La funcin til i Ii ,1 exactamente igual que dentro de un bloque <S('K II " r | > < i1 < > que podr incluir parmetros o llamadas a otr.is ftun u>n< -. Veamos un ejemplo, utilizando nuestra funcin p.ir.i v.ilul.ir el form ulario completo:
<A HREF="javascript:validarRegistro()">Va1M.n formulario</A>

alert("El email est vacio o no es vlido."); email.select (); email, focus ( );


} else if (!comprobarIdioma(idioma. selectedlndex)) {

alert("No hay un idioma seleccionado.'); idioma.focus(); // Comprobar campo opcional publicidad.checked = comprobarPublicidad(publicidad.checked);

Sencillo, verdad? El resultado de hacer clic sobre este en lace ser la ejecucin de la funcin v a lid a r R e g i :it r o. Tam bin podem os aadir otros enlaces que utilicen las funciones de validacin de cada campo a modo de prueba. In estos casos, pasaremos el valor de un campo del formulario o uno escrito directamente (para que vea cmo se hace el paso de parmetros).
<A HREF="javascript:alert (comprobarUsuario (w ) )"I-Validar usuario vacio</A> <A HREF="javascript:alert(comprobarUsuario(document. formRegistro.usuario.valu))">Validar usuario del formulario</A> <A HREF="javascript:alert(comprobarClave('aa', \"bb\"))">Validar contraseas "aa" y "bb"</A> <A HREF="javascript:alert(comprobarClave(document. formRegistro.clave.valu, document.formRegistro. claveRepe.valu))">Validar contrasea del formulario</A> <A HREF="javascript:alert(comprobarEmail('nombre@ dominio'))">Validar email "nombre@dominio"</A> <A HREF="javascript:alert(comprobarEmail('nombregdominio. com'))">Validar email "nombre@dominio.com"</A> <A HREF="javascript:alert(comprobarEmail(document. formRegistro.email.valu))">Validar email del formulario</A> <A HREF="javascript:alert(comprobarPublicidad(false))"> Validar publicidad false</A> <A HREF="javascript:alert(comprobarPublicidad(document. formRegistro.publicidad.checked))">Validar publicidad del formulario</A>

} }
</SCRIPT>

Notar que el cam po p u b l i c i d a d se trata de m anera distinta al resto. Esto es porque se trata de un dato opcional y no requiere validacin. Simplemente intentamos convencer al usuario para que seleccione esa casilla por lo que, tanto si nuestro mensaje surte efecto como si no, la propiedad c h e ck e d se ver modificada con un nuevo valor booleano proveniente de la funcin c o m p r o b a r P u b l i c i d a d (ahora comprender mejor por qu hicim os as la funcin).

9.3.8. Ejecutar la validacin


La manera ms com n de ejecutar una accin sobre un formulario es a travs de alguno de sus botones, detectando cundo se hace clic sobre l. Lam entablem ente an no hemos explicado cmo detectar estas acciones, que se conocen como eventos, aunque lo harem os en el captulo siguiente como complemento de este. De todas formas no se preocupe que en JavaScript hay solucin para (casi) todo. Vamos a solventar esta pequea falta de conocim ientos actual con algo que tambin le resultar til: ejecutar funciones JavaScript desde hipervinculos o enlaces HTML.
234

Ahora es cuando le animo, si no lo ha hecho ya, a escribir todo este ejem plo com pleto en su ordenador y probarlo. Tambin puede aadir otros campos o m odificar los arriba expuestos. Todo lo que practique ahora le vendr bien para despus hacer sus scripts mucho ms completos y fiables.

235

www.FreeLibros.com

10
Eventos

Un evento es una accin que realiza el usuario sobre .1l> \ i ni elemento de nuestra pgina al interactuar con l, como por ejemplo pasar el puntero del ratn por encima de una imagen o hacer clic sobre un botn. Gracias a los eventos, la interactividad de nuestra pagina .umenta considerablemente ya que podremos hacer que ie accione ante las acciones del usuario. Esta caracterstica e% especialmente explotada por DHTM L (Dynamic I l'l'MI.) p.u .i crear variedad de efectos y situaciones. JavaScript es capaz de detectar estos eventos y a la ve/ nos permite asociarles imas instrucciones que se ejecutarn cumulo se produzcan.

10.1. Eventos en JavaScript


En JavaScript existe una amplia variedad de eventos que podremos utilizar a nuestro antojo para crear las situaciones que queramos o conseguir un efecto concreto. La tabla 10.1 le mostrar todos los eventos y la accin que los genera.
Tabla 10.1. Lista de eventos en JavaScript. Evento Abort Origen La carga de una imagen es interrumpida (detenemos la carga de la pgina, nos vamos a otra...). El navegador termina de cargar una pgina. 237

Load

www.FreeLibros.com

Evento Un load Error Resize Blur Focus Change

Origen Se abandona la pgina actual (cerramos el navegador o nos vamos a otra). Se produce un error durante la carga de un documento o imagen. Se modifica el tamao de una ventana o marco. Un elemento de la pgina pierde el foco. Un elemento recibe el foco. El estado o valor de un elemento cambia. Normalmente se origina despus de que el elemento haya perdido el foco (Blur). Se selecciona un elemento de la pgina. Una tecla es pulsada sin soltarla. Una tecla que estaba pulsada es soltada. Una tecla es pulsada. Se genera despus de KeyDown. Se hace clic sobre un elemento. Se hace doble clic sobre un elemento. Se pulsa un botn cualquiera del ratn. Se libera un botn del ratn que estaba pulsado. Se mueve el puntero por la pantalla. El puntero entra en el rea que ocupa un elemento (se pasa por encima). El puntero sale del rea que ocupa un elemento (se quita de encima). Un formulario est a punto de ser enviado. Un formulario es limpiado o reiniciado.

Tabla 10.2. Elementos HTML que generan evmiln'. Evento abort load unload error resize blur focus change select keydown keyup keypress click dblclick mousedown mouseup mousemove mouseover mouseout submit reset Elementos <img> <body> <body> <body>, <img> <body> <body>, <input>, <select>, ctextan-.i <body>, <input>, <select>, <textir'.i <input>, <select>, <textarea> <input>, <textarea> Elementos de entrada de datos d i lumiul.irin. Elementos de entrada de datos de fui mu; irlo. Elementos de entrada de datos de formulnrlo. Elementos de seleccin de datos y botonos de formulario, <a>, <mg> Elementos de seleccin de datos y botonas de formulario, <a>, <img> Elementos de seleccin de datos y botones de formulario, <a>, <img> Elementos de seleccin de datos y botones de formulario, <a>, <img> Elementos de formulario, <a>, <img> Elementos de formulario, <a>, <img> Elementos de formulario, <a>, <img> <form> <form>

Select KeyDown KeyUp KeyPress Click DbIClick MouseDown MouseUp MouseMove MouseOver MouseOut Submit Reset

10.2. Eventos en una pgina HTML


De momento ya conocem os los eventos que tenemos dis ponibles pero, dnde puedo usar cada uno de ellos? Esto es lo que vam os a desvelar con la tabla 10.2, donde estn indi cados los principales elem entos H TM L que desencadenan cada evento.
238

10.3. Trabajar con eventos


Un evento como tal, carece de utilidad por s mismo, as que se hace necesario asociarles una funcin o cdigo JavaScript que se ejecutar cuando se produzca dicho evento. A estas fun ciones o cdigo se les conoce como manejadores de eventos, ya que realizan una accin especfica para ese evento. Los nombres i)e los manejadores se definen anteponiendo la palabra "on"
239

www.FreeLibros.com

al nombre del evento. De esta forma, el manejador del evento C l P a i a T i l a r t e manejadores a lo , evento disponemos de v a r i a s opciones, gracias L la flexibilidad de JavaScr.pt.

2.

representa el elemento.

del obeto que

Ahora verem os con detalle cada una de estas opciones.

en otras publicaciones que utilizan en HREF e lc t i r . n Iri 1 1 .i| mohadilla( # ) a m o d o de ancla al inicio de la pgin.i, ambin podremos utilizar en el manejador l.i s rn lrn . I.i t h i s , con la que accederemos a las propiedades del ohjrlo mi.contiene ese manejador y as usarlas en nuestro cdiu I . 1, , es mas bien un atajo para acceder al objeto, ya que l.mil>i<n podramos obtenerlo mediante e l mtodo getElerm -i,l m- i.i del objeto document (apartado 8.7.3 para los olvidadizo* como yo), pero asi nos ahorramos esa bsqueda y hmvmoN que nuestro cdigo resulte un poco ms ptimo.
<HTML>
<BODY> <H3>Formulario que muestra propiedades</H3> <F0RM ID="formularol" NAME="formMensaje"> sINPOT TYPE="button" ID="botonl" NAME="botonId" VALUE="Ver mi ID" ONCLICK="alert('Mi ID es ' + this

10 3 1. Manejadoras como atributos HTML

id);" / X B S />

cuando hacemos

clic sobre un botn genrico.


<HTML>
<H3>Formulario que muestra un mensaje</H3>

VALE- Ver nombre formulario" ONCLICK="alert('Mi formulario se llama ' + this.form.ame);" / > </FORM> </B0DY> </HTML>

ua, np-M,T , Y P E = "bUttn " 1D="b o t n 2 " NAME="botonName"

S K -S E F
</FORM> </BODY> </HTML>

................. ...
_______________ ,

| [A plicacin Ja v a S c rip t]
| y M i ID es botonl

[x |

| | Aceptar

Nota: El nombre del manejador se puede escribir- usando indistintamente maysculas y minsculas y q HTM L no hace distincin entre a m b a s . ____________

[A plicacin Ja v a S c rip t]
f M i formulario se llama formMensaje

| Aceptar

Figura 10.1. Acceso al objeto que contiene el manejador.


<h t m l >

<BODY> H (0 1 " ONCLICK="alert('Mensaje <A HREF="javascript. void(U)


g e n e r a d o ! ' ) ; " > V e r rtiensaje</A>

</BODY>
</HTML>

Con estos ejemplos podemos referirnos a los objetos que tiene asociado el manejador y acceder a sus propiedades o m todos. Si quisiramos acceder a otro objeto debemos escribir e l codigo de una forma normal. Veamos la manera de acceder a DotonName desde botonld.
<HTML> <B0DY> <H3>Formulario que muestra propiedades</H3>

En este caso hemos incluido el cdigo en el m ^ a d o r . y n oh ace'n ad a.


240

241

www.FreeLibros.com

<FORM ID="formulariol AME MformMensaje"> <INPUT TYPE=nbutton" ID="botonl" NAME=f , botonId VLOE="Ver mi ID" ONCLICK="alert('El ID del otro boton es ' + d o c u m e n t . formMensaje.botonName.id);" /><BR /> CINPT TYPE=button" ID="boton2" NAME="botonName" VALUE="Ver nombre formulario" /> </FORM> </BODY> </HTML>

<FORM ID "formulariol" NAME="formMensaje"> <INPUT TYPE="button" ID="boton" NAME="mensaje" VALUE Pasa por encima" ONMOUSEOVER="mostrarMensajo( ) </FORM> </BODY> </HTML>

En este caso se m ostrar el ID del botonName, que es "boton2". Accediendo a los objetos de esta manera, no solo podremos usar sus propiedades sino tambin sus mtodos. Por ejemplo, en este caso vamos a simular que hacem os clic sobre el mismo botn.
<HTML> <BODY> <H3>Formulario que muestra propiedades</H3> <FORM ID="formulariol" NAME="formMensaje"> <INPUT TYPE=button" ID="botonl" NAME="botonId VALUE="Ver mi ID" ONCLICK="document.formMensaje. botonName.click();" /><BR /> <INPUT TYPE="button" ID="boton2" NAME="botonName VALOE="Ver nombre formulario" ONCLICK="alert( Mi formulario se llama ' + this.form.ame);" /> </FORM> </BODY> </HTML>

Con este ejemplo conseguimos que se ejecute la funcin mos tr a r M e n s a j e cuando se pulse el enlace y tambin cuando se pase el puntero del ratn por encima del botn. Por supuesto, tambin es posible utilizar funciones con pa rmetros y asignarles valores usando la sentencia t h i s .
<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> // Funcin que muestra un texto function mostrarTexto(texto) { alert(texto);

}
</SCRIPT> </HEAD> <BODY> <H3>Formulario que muestra propiedades</H3> <FORM ID="formulariol" NAME="formMensaje"> <INPUT TYPE="button" ID="botonl" NAME="botonId" VALUE="Sumar" ONCLICK=" mostrarTexto(2+3);" / X B R /> CINPT TYPE="button" ID="boton2" NAME="botonName" VALUE="Ver nombre formulario" ONCLICK="mostrarTexto('Mi formulario se llama ' + this.form.ame);" /> </FORM> </BODY> </HTML>

Si pulsamos ahora sobre botonld entonces se ejecutar el cdigo asociado al manejador ONCLICK de botonName. Tendiendo esto com o base, ejecutar una funcin al origi narse un evento es tan sencillo com o definirla previam ente y despus escribir su llam ada en el m anejador que qu e ramos.
<HTML> <HEAD> <SCRIPT TYPE="text/j avascript"> // Funcin que muestra un mensaje function mostrarMensajeO { alert("Mensaje generado!");

Ahora veremos algunos ejemplos con situaciones tpicas en las que se utilizan los manejadores de eventos.

Acciones al cargar la pgina


Este ejem plo trata de ejecu tar una funcin cuando se com plete la carga de la pgina que estam os viendo. Por tanto, el evento que nos interesa es lo a d , siendo ONLOAD su manejador. Nuestra pgina constar de un pequeo formulario y la func . ion que asociaremos al manejador har que dicho formulario se rucialice con unos valores por defecto. Es cierto que esto lo podramos hacer directamente mediante atributos HTML, pero la finalidad de este ejemplo es que conozca el funcionamiento de los manejadores.
243

}
</SCRIPT> </HEAD> <BODY> . <A HREF="javascript:v o i d (0)" ONCLICK="mostrarMensaje ( ), Plsame</A>

242

www.FreeLibros.com

El formulario inicial sera este:


<H3>Formulario de conversin de moneda</H3>

F o i m u l i i i o d e c o n v e r s i n d e m o n e d a 1 1 Dlares | Enviar consulta ] v il => Dlares lv l| 1

<FORM ID="formulariol" AME="fo rmConver sion"> CINPUT TYPE="text" ID="entradal" NAME="cantidad" /> <SELECT ID="seleccionl" NAME="monedal"> <OPTION VALUE="USD">Dlares</OPTION> <OPTION VALUE="EUR">Euros</OPTION> <OPTION VALUE="GBP">Libras esterlinas</OPTION> </SELECT> =>
<SELECT ID="seleccion2" NAME="moneda2>

Figura 10.2. Formulario sin manejador onload. Formulario de conversin de moneda

<OPTION VALUE="USD">Dlares</OPTION> <OPTION VALUE="ER>Euros</OPTION> <OPTION VALUE="GBP">Libras esterlinas</OPTION> </SELECT>


<INPUT TYPE="text" ID=entrada2" NAME="resultado" />

1 1Euros
( Convertir > ]

v'| >j Libras esterlinas

.v .jj

Figura 10.3. Formulario con manejador onload.

<BR / X B R /> <INPUT TYPE=submit" ID="botonl" NAME="botonConvertir" /> </FORM>

Cambiar imagen al pasar por encima de ella (rollover)


Ahora veremos cmo crear un pequeo efecto que le da ni un toque de profesionalidad a nuestra pgina. El efecto rollover consiste en que al pasar el puntero del ratn por encima de una imagen sta cambie y que despus vuelva a aparecer la original al retirar el puntero. Esto es algo ms propio de DHTM L que de JavaScript, pero as puede ir viendo todo el potencial truc tiene por delante. En este caso, nuestra pgina mostrar sim plemente una imagen que incluye dos manejadores: 1 . ONMO USE OVE R, que cambiar la imagen por otra alojada en e l mismo servidor al poner el puntero encima de e l l a . 2. ONMOUSEOUT, que volver a mostrar la imagen que es taba al cargar la pgina, una vez quitemos el puntero. Para realizar este ejem plo vam os a trabajar con las si guientes imgenes:

Despus escribiremos la funcin JavaScript que se asociar posteriormente al manejador que nos interesa. Para evitar pro blem as, lo m ejor es situarla dentro de <HEAD>.
<HEAD>

<SCRIPT TYPE="text/javascript">
// Funcin que inicializa un formulario function inicializarFormulario( ) { with(document.formConversion) { monedal.selectedlndex = 1; moneda2.selectedlndex = 2; resultado.readOnly = true; botonConvertir.valu = "Convertir >";

} >
</SCRIPT> </HEAD>

Por ltimo, gracias al manejador ONLOAD colocado en la etiqueta <BODY> conseguirem os que: 1. Nuestras listas desplegables tengan unos valores con cretos seleccionados. 2. La segunda caja de texto sea nicamente de lectura. 3. El botn de envo tenga el texto que nosotros que ramos.
<BODY O N L O A D="inicializarFormulario ();">
d e r e c h a .g if lz q u ie rd a .g if

Figura 10.4. Imgenes de ejemplo.

Al principio mostraremos una de ellas, quedando as el cdigo HTML:


:H3>Mueve el puntero sobre la imagen</H3> <IMG ID="imagen1" NAME="flecha" SRC="derecha.gif" />

En las siguientes figuras puede ver la diferencia que existira entre los formularios aplicando o no esta funcin.
244

www.FreeLibros.com

245

A continuacin declaramos, en el <HEAD>, las funciones que cambiarn la imagen cuando se provoque el evento co rrespondiente. Para ello, debemos utilizar la propiedad s r c del objeto de la imagen.
<HEAD> <SCRIPT
TYPE="text/javascript">

imagen.src = "derecha.gif";

}
I I Funcin que cambia la imagen original
function cambiarOriginal(imagen) imagen.src = "izquierda.gif"; {

}
</SCRIPT> </HEAD>

// Funcin que muestra la imagen original function m o s t r a r O r i g i n a l ( ) document.flecha.src = "derecha.gif"; // Funcin que cambia la imagen original function c a m b i arOriginal( ) { document.flecha.src = "izquierda.gif";

Por supuesto, tam bin debem os cam biar Invntenle ln?. manejadores:
<IMG ID="imagenl" NAME="flecha" SRC="derechd , i | II" ONMOUSEOVER="cambiarOriginal (this) ; " 0NM0USE01IT " n i . . Ii.n Original(this);" />

}
</SCRIPT> </HEAD>

Y ahora ya podemos aadir este rollover todas l.is vives que queramos en la m isma pgina:
<IMG ID="imagen2" NAME="otraFlecha" SRC="derei:h.i.i ji ( " ONMOUSEOVER="cambiarOriginal (this) ;" 0NM0U5K0UT " n n > : . l i. 11 Original(this);" /> <IMG ID="imagen3" NAME="flechita" SRC="derecha.q I (" ONMOUSEOVER="cambiarOriginal (this) ; " ONMOUSEOUT- "mOMt 1 . i t Original(this);" />

Para terminar, asociaremos estas funciones a los manejadores de la imagen:


<IMG ID="imagenl" NAME=" flecha" SRC="derecha.
gif" 0NM00SE0VER="cambiarOriginal(>;"

ONMOOSEOUT="mostrarOriginal();" />

Si cargamos esta pgina y pasamos el puntero por encima de la imagen verem os cmo se produce el efecto deseado. Como puede ver, no es en absoluto complicado y sin embargo eleva la categora de nuestra pgina. Por aplicar un poco lo que hem os ido aprendiendo, me voy a poner un poco quisquilloso y voy a preguntarle que pasara si en nuestra pgina necesitsem os hacer este rollover en varias partes. Tal y com o tenem os escritas las fun ciones, necesitaram os crearlas para cada im agen ya que su cdigo apunta a una en concreto (en el ejem plo, la que tiene el nom bre f l e c h a ) . No cree que existe una m anera mas ptim a de escribir estas funciones para que nos valgan en cualquiera de las im genes? Acert! (Y si no, no se preocupe que no m e voy a en tera r...) Tenem os algo trem endam ente til para solucionar esto: la sentencia t h i s . Com o esta sen tencia hace referencia al objeto que contiene el m anejador, no tenem os m s que trasladarla com o parm etro a las fun ciones que cam bian la im agen para poder u sarlas tantas veces com o queram os.
<HEAD> <SCRIPT TYPE="text/ javascript" >
// Funcin que muestra la imagen original function mostrarOriginal(imagen) {

Operaciones sobre formularios


El incluir manejadores en elementos de un formulario es uno de las usos ms comunes de JavaScript ya que nos ofrece un control sobre ellos que es impensable a travs de cdigo HTML. Para empezar por algo sencillo, vam os a imaginar que te nemos un formulario con varios tipos de campos y queremos validarlos antes de enviar la informacin al servidor.
<H3>Formulario de acceso</H3> <FORM ID="formulariol" NAME="formLogin" ACTION="login.php" METHOD="post"> Usuario <INPUT TYPE="text" ID="entradal" NAME="usuario" MAXLENGTH= "8 " / X B R /> Contrasea CINPUT TYPE="password" ID="entrada2" MAME="clave" / X B R /> -INPUT TYPE="button" ID="botonl" NAME="botonValidar" VALUE="Validar" /> <INPUT TYPE="submit" ID="boton2" NAME="botonEnviar"/> /FORM>

Despus tendremos nuestra funcin que validar el for mulario comprobando que sus dos campos tienen un valor asociado, es decir, no estn vacos:
247

www.FreeLibros.com

)
<HEAD> <SCRIPT TYPE="text/javascript"> // Funcin que valida el formulario function validarFormulario 0 {
// Operaciones de validacin w i t h (document.formLogin) { if (usuario.valu == "") u s u a r i o .fo c u s (); } else if (clave.valu == "") clave, focus ( );

} 0alert("Todo correcto! Puedes enviar el formulario.");

} } }
</SCRIPT>
</HEAD>

</SCRIPT> </HEAD> <BODY> <H3>Formulario de acceso</H3> <FORM ID="formulariol" NAME="formLogin" ACTION="login.php" METHOD="post"> Usuario CINPUT TYPE="text" ID="entradal" NAME="usuario" MAXLENGTH="8" / X B R /> Contrasea <INPT TYPE="password" ID="entrada2" NAME="clave" / X B R /> CINPT TYPE="button" ID="botonl" NAME="botonEnviar" VALUE="Validar y enviar" ONCLICK="validarYEnviarFormulario();" /> </FORM> </BODY> </HTML>

Hasta ahora habamos visto cmo salir del paso utilizando un pervnculo y su atributo HREF para lanzar la validacin, pero para hacerlo a travs de un botn debemos usar el m a nejador ONCLICK. De este modo, nuestro codigo quedara tan simple como:
<INPOT
TYPE="button"

ID="botonl" NAME="botonValidar"

VALUE="Validar" ONCLICK="validarFormular10(),

De esta forma obligamos al usuario a pulsar dos botones nara enviar la informacin: uno para validar y otro para enviar. Entonces como extensin de este ejemplo, podramos unificar S S o n e s de los dos botones, en ^ , ^ ^ 0 ^ enve el formulario nicamente si la val dacion ha sido ss factora Para ello debemos hacer uso del mtodo s u b m it de formulario dentro de la funcin que comprueba los campos.
<HTML>
<HEAD>
S C R IP T

Con esta funcin conseguimos que slo se enve el formulario si los dos campos tienen algn texto escrito. En otro caso, se fija el foco en el campo que est vaco para que el usuario lo rellene. Otro lugar tpico del formulario donde incluir un manejad o r de eventos, en concreto ONCHANGE, es en las listas de seleccin. Con esto podremos ejecutar unas acciones cuando se seleccione una de sus opciones. En estos casos se hace bastante uso de la sentencia t h i s , sobre todo para obtener el ndice o el valor de la opcin seleccionada. Suponiendo este pequeo formulario:
<H3>Adivina la mezcla de colores</H3> <FORM ID="formulariol" NAME="formColores"> Rojo + <SELECT ID="seleccionl" NAME="color"> <OPTION VALUE="Verde">Verde</OPTION> COPTION VALUE="Azul">Azul</OPTION> <OPTION VALUE="Amarilio">Amaril1o</OPTI0N> </SELECT> Naranja </FORM>

TYPE="text/javascript >

// Funcin que valida y envia el formulario


function v a l i d a r Y E n v i a r F o r m u l a n o

// Operaciones de validacin with(document.formLogin) {


if (usuario.valu == "") u s u a r i o .f o c u s (); (

Y creando esta funcin que comprueba si hem os seleccio nado la opcin correcta, mostrando un m ensaje al usuario:
<HEAD> '.SCRIPT TYPE="text/javascript"> // Funcin que comprueba la opcin seleccionada function comprobarMezcla(indiceColor) { if (indiceColor == 2) { alert("Muy bien!"); ) else {

} else if (clave.valu == "") clave.focus ( ); } else ( submit ( );

) )

249 248

www.FreeLibros.com

alert("Lo siento, no es este colorintntalo de nuevo.");

} )
</SCRIPT>
C/HEAD>

Podremos finalmente asociarla al manejador ONCHANGE para dotar de "inteligencia" a nuestro formulario:
<SELECT ID="seleccionl NAME="color" ONCHANGE="comprobarMezcla(this.selectedlndex) >

Ms profesional as, verdad? Gracias a la sentencia i l . ! hemos podido acceder al array de opciones d e ln lisia v , ,il mismo tiempo, hemos obtenido el ndice seleccionado paia usarlo como ndice de ese array y as conseguir la opcin i o rrespondiente. Es un poco ms complejo de escribir, pero en algunas situaciones es una de las mejores elecciones.

10.3.2. Trabajar con eventos en JavaScript


Adem s de incluir m anejadores de la manera que aca bamos de ver, tam bin es posible hacerlo directam ente en nuestros scripts sin aadir atributos adicionales a los elementos HTML. Los manejadores de cada objeto se utilizan como una pro piedad ms de ste, por lo que a estas alturas no le ser muy difcil de comprender. En este caso, al manejador se le debe asignar siem pre una funcin ya que si ponemos directamente una porcin de cdigo el resultado no ser el esperado puesto que se ejecutar como parte del script. Veamos un ejemplo con el evento c l i c k .
SCRIPT TYPE="text/javascript"> // Funcin que muestra un mensaje function mostrarMensaje( ) { alert("Hola!");

Si el usuario elije la opcin correcta (Amarillo, opcin con ndice 2) se le mostrar un mensaje de enhorabuena. En otro caso, se le anima a intentarlo otra vez. Para ir un paso ms all con este ejemplo, podramos pasar a la funcin comprobarMezcla directamente el objeto que representa la opcin, para as poder obtener tanto su ndice como su valor y as mostrar un mensaje ms completo. El script nos quedara algo similar a esto:
<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> // Funcin que comprueba la opcin seleccionada function comprobarMezcla(color) { if (color.index = = 2 ) { alert("Muy bien!"); } else ( alert("Lo siento, no es " + color.valu Intntalo de nuevo.");

}
// Asignacin incorrecta de manejador objeto.onclick = alert("Hola!"); // Asignaciones correctas de manejador objeto.onclick = mostrarMensaje; objeto.onclick = function mostrarMensaje( ) { alert ("Hola!"); } :/SCRIPT>

} }
</SCRIPT> </HEAD> <BODY> <H3>Adivina la mezcla de colores</H3> <FORM ID="formulariol" NAME="formColores"> Rojo + <SELECT ID="seleccionl" NAME="color ONCHANGE="comprobarMezcla(this.options[this. selectedlndex])"> COPTION VALE="Verde">Verde</OPTION>

<0PTI0N VALUE="Azul>Azulc/OPTION>
COPTION V A L E = " A m a r i l l o " > A m a r i l l o C / O P T I O N > c/SELECT> = Naranja c/FORM> C/B0DY> C/HTML>

En el cdigo que acabamos de escribir ver que si asignamos directamente una llamada al mtodo a l e r t , el manejador no contendr dicha instruccin sino su resultado (u n d e fin e d para el caso de a l e r t ) . Sin embargo, si asignamos una fun cin o la definimos directamente sobre la marcha, ser algo completamente vlido y el manejador har su papel tal y como esperamos. Nota: Los nombres de los manejadores deben estar escritos siempre en minsculas para trabajar con ellos desde cdigo JavaScript.
251

250

www.FreeLibros.com

Algo que debe tener en cuenta al utilizar los manejadores de este modo es que las asignaciones deben hacerse al final de la pgina o despus de que se haya cargado, para que los ele mentos HTM L a los que hagamos referencia estn definidos.
<HTML>

s s H
<HTML> <HEAD>

r n , ' tal y como curra ai .............................. ..

CHEAD>
<SCRIPT TYPE=" text /j avascript "> // Funcin que muestra un mensaje function mostrarMensaje ( ) { alert("Clic!");

CSCRIPT TYPE="text/javascript"> // Funcin que muestra un ID function mostrarID() { alert("Mi ID es " + this.id); C/SCRIPT> C/HEAD> CBODY> -H3>Pulsa en los botonesC/H3> CFORM ID="formulariol" NAME="formBotones"> VALUET "MYPE~"bUttn " ID="botonl" NAME="botonIdl" VALUE="Mira mi ID" /> VALUET"MYPE="bUttn" VALUE="Mira mi ID" /> ID="boton2" NAME="botonId2" </FORM> <SCRIPT TYPE="text/javascript"> document.formBotones.botomd!.onclick = mostrarID; </sSl P T > n Vb o d y > </HTML> rmB0t0neS-b0t0nId2-nClCk " mostrarID;

}
document.formBotones.botonAntes.onclick = mostrarMensaje; </SCRIPT> </HEAD> <BODY> <H3>Pulsa en los botones</H3> <FORM ID="formulariol" NAME="formBotones"> <INPUT TYPE="button" ID="botonl" NAME="botonAntes" VALDE="Manejador errneo" /> CINPUT TYPE="button" ID="boton2" NAME="botonDespues" VALUE=Manejador vlido" /> C/F0RM> CSCRIPT TYPE="text/javascript"> document.formBotones.botonDespues.onclick = mostrarMensaj e; C/SCRIPT> C/BODY>

haSte ahor!r Pl mU6Stra 1111poco todo Io c lue se ha ido diciendo p g m T ,n SS aS Ca al maneador en la Parte final de la La funcin hace referencia al objeto que provoca el evento y no siempre alude al mismo. Para que vea m ejor el contraste de incluir manejadores de a, vamos a utilizar los mismos ejemplos que con los manejadores por HTML. 4 n ,os

C/HTML>

Si escribe este cdigo y trata de pulsar en cada uno de los botones, comprobar que el prim ero no realiza ninguna ac cin, mientras que el segundo s muestra el m ensaje previsto. Esto es porque la asignacin de la funcin m o stra rM e n sa j e al manejador o n c l i c k de b o to n A n te s se hace al principio de la pgina donde, ni el botn ni el formulario estaban an definidos en ella. Nota: Un inconveniente que presenta esta manera de usar los manejadores, es que no podremos pasar parmetros a las funciones. La alternativa que nos queda es utilizar variables de mbito global para poder recoger su valor dentro de las funciones asignadas a los eventos. Para utilizar la sentencia t h i s , tendremos que hacer re ferencia a ella dentro de las funciones que asociemos al ma nejador de m odo que t h i s representar al objeto que ha
252

Acciones al cargar la pgina


Para refrescarle la memoria, aqu tratamos de ejecutar una *'^ m m ejadoronloY r con
IITML> HEAD> /SCRIPT TYPE="text/javascript">

Ca^a

actual, utilizando
y a fmCtn

253

www.FreeLibros.com

// Funcin que inicializa un formulario function inicializarFormulario( ) { with(document.formConversion) { monedal.selectedlndex = 1;


m o n e d a 2 .s e l e c t e d l n d e x = 2;

1 . onmouseover, para cambiar la imagen por otra al poner


el puntero encima de ella. 2. onmouseout, para volver a m ostrar la im agen que estaba, una vez quitemos el puntero.
<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> // Funcin que muestra la imagen original function mostrarOriginal() { this.src = "derecha.gif";

resultado.readOnly = true; botonConvertir.valu = "Convertir >";

} }
</SCRIPT> </HEAD> <BODY> <H3>Formulario de conversin de moneda</H3> <FORM lD="formulariol" NAME="formConversion > <INPUT TYPE "text" ID="entradal" NAME="cantidad <SELECT ID="seleccionl" NAME="monedal"> <OPTION VALUE="SD">Dlares</OPTION>
COPTION VALUE="EUR">Euros</OPTION>

}
/>
// Funcin que cambia la imagen original function cambiarOriginal( ) { this.src = "izquierda.gif";

}
</SCRIPT> </HEAD> <BODY> <H3>Mueve el puntero sobre la imagen</H3> <IMG ID="imagenl" NAME="flecha" SRC="derecha.gif" /> <SCRIPT TYPE="text/javascript"> // Asignamos los manejadores document.flecha.onmouseover = cambiarOriginal; document.flecha.onmouseout = mostrarOriginal; </SCRIPT> </BODY> </HTML>

<OPTION VALOE="GBP">Libras esterlinas</OPTION> </SELECT> => <SELECT ID="seleccion2" NAME="moneda2"> COPTION VALUE="OSD">Dlares</OPTION>
<OPTION VALUE="EUR">EuroS</OPTION>

<OPTION VALE="GBP">Libras esterlinas</OPTION> </SELECT> CINPT TYPE="text" XD= "entrada2, ? NAME="resultado /> .

<BR /><BR /> <INPUT TYPE="subrait" ID="botonl" NAME="botonConvertir </FORM> <SCRIPT TYPE="text/javascript"> // Asignamos el manejador window.onload = inicializarFormulario; </SCRIPT> </BODY> </HTML>

Como ve, nos quedan unas funciones bastante simples si utilizamos la sentencia thi s ya que, al provocarse los eventos, las funciones la enlazan con el objeto de imagen. Tam bin po dramos haber escrito la ruta completa (document.flecha. src) pero no estaramos aprovechando el potencial de asignar los manejadores m ediante cdigo JavaScript.
O peraciones sob re form u lario s

Para que la funcin se ejecute despus de la carga de la p gina, debem os usar el m anejador onload del objeto window y no de document como se podra pensar. En realidad po dram os haber asignado este m anejador en el <HEAD> puesto que el objeto window ya existe en ese m om ento, pero es un caso excepcional y le recom iendo hacer estas asignaciones siem pre al final para m antener una hom ogeneidad en su cdigo.
C am biar im agen al pasar por encim a de ella (rollover)

El primer manejador que vamos a ver, en los ejemplos re lacionados con los formularios, ser onclick a travs de un botn. Este manejador ejecutar una funcin que validar los campos existentes en el formulario.
IITML> MEAD> SCRIPT TYPE="text/javascript"> // Funcin que valida el formulario function validarFormulario( ) ( // Operaciones de validacin

Aqu se pretende crear un efecto de rollover mediante el uso de dos manejadores de un objeto de imagen:
254

255

www.FreeLibros.com

with(document.formLogin) { if (usuario.valu == "") ( usuario.focus( ); ) else if (clave.valu == "") 1 clave, focus ( ); } else { alert("i Todo correcto! Puedes enviar el formulario.1 1 )l

<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> // Funcin que comprueba la opcin seleccionada function comprobarMezcla( ) { if (this.selectedlndex == 2) { alert(" Muy b i e n !"); ) else { aJ ert ("Lo siento, no es este color... Intntalo de nuevo.");

) } }
</SCRIPT>
</HEAD> <BODY>

1 }
</SCRIPT>
</H EA D > <BODY>

<H3>Formulario de acceso</H3> <FORM ID="formulariol" NAME="formLogin" ACTION-"login.php METHOD="post"> . . . Usuario <INPUT TYPE="text" ID="entradal" AME- usuario
MAXLENGTH="8" / X B R />

<H3>Adivina la mezcla de colores</H3> <FORM ID="formulariol" NAME="formColores"> Roj o + <SELECT ID="seleccionl" NAME="color"> <OPTION VALUE="Verde">Verde</OPTION> <OPTION VALUE="Azul">Azul</OPTION> <OPTION VALUE="Amarillo">Amarillo</OPTION>
</SELEC T>

Contrasea <INPUT TYPE="password" ID="entrada2


NAME="clave" / X B R /> VALUE="Validar" /> <SCRIPT TYPE="text/javascript', > . .

CINPUT TYPE="button" ID="botonl" NAME="botonValidar <INPUT TYPE=submit ID="boton2" NAME-"botonEnviar // Asignamos el manejador
document.formLogin.botonValidar.onclick validarFormulario;

/>

Naranja
< / FO RM >

:SCRIPT TYPE="text/j avascript"> I I Asignamos el manejador document.formColores.color.onchange = comprobarMezcla; :/SCRIPT>


:/ BO D Y >

</SCRIPT> </BODY> </HTML>

:/HTML>

N ada complicado, como puede comprobar. nicamente cambia la forma de asignar el manejador respecto al mtodo por HTML. En la versin extendida del ejemplo, donde uni ficamos las acciones de los dos botones en uno slo (envo y validacin), sera exactamente igual pero utilizando el mane jador del botn correspondiente.
<SCRIPT TYPE="text/javascript"> // Asignamos el manejador
document.formLogin.botonEnviar.onclick validarYEnviarFormulario; </SCRIPT>

Ocurre lo mismo cuando queremos acceder al objeto que representa la opcin seleccionada para obtener su ndice y valor, siempre dentro de la funcin.
MTML>

Ahora es el turno del manejador o n c h a n g e de las listas desplegables. El uso de la sentencia t h i s es casi el pan nuestro de cada da, pero recuerde que aqu siem pre se debe usar dentro de las funciones y no como un parm etro de la misma, de modo que nos quedara as:
256

IIEAD> CRIPT TYPE="text/javascript"> // Funcin que comprueba la opcin seleccionada function comprobarMezcla( ) { // Obtenemos la opcin seleccionada var opcionSeleccionada = this.options[this. selectedlndex]; if (opcionSeleccionada.index = = 2 ) ( alert(" Muy b i e n !"); } else { alert("Lo siento, no es " + opcionSeleccionada. valu + " . . . Intntalo de nuevo.");

257

www.FreeLibros.com

</SCRIPT> </HEAD> <BODY> <H3>Adivina la mezcla de colores</H3> <FORM ID="formulariol" NAME="formColores"> Rojo + <SELECT ID="seleccionl" NAME="color"> <OPTION VALUE="Verde">Verde</OPTION>
<OPTION VALE="Azul">Azul</OPTION> < O P T I O N V A L U E = A m a r i l l o " > A m a r i l l o < / O P T I O N >

<SCRIPT TYPE="text/javascript"> // Funcin que muestra un mensaje function mostrarEvento(evento) { alert (evento) ;

}
// Asignaciones al document.onclick = // Asignaciones al document.onclick = alert(evento); } </SCRIPT> manejador (forma 1) mostrarEvento; manejador (forma 2) function mostrarEvento(evento)

</SELECT> = Naranja </FORM> <SCRIPT TYPE="text/javascript"> // Asignamos el manejador d o c u m e n t .formColores.color.onchange = comprobarMezcla; </SCRIPT> </BODY> </HTML>

Com o ya no podem os usar parm etros, lo que hem os hecho ha sido obtener la opcin seleccionada directam ente dentro de la funcin gracias a que tenem os acceso completo al objeto que representa la lista desplegable, m ediante la sentencia t h i s .

Si observamos el cdigo, vemos que hemos puesto un par metro a la funcin usada en el manejador. Cmo es posible si habamos dicho que esto no se poda hacer? Esto es as porque en realidad no estam os pasando un parmetro sino dando un nombre al objeto e v e n t que JavaScript est creando automI icamente. Tambin se puede omitir ese nombre y recuperar el objeto con a rg u m e n ts [ 0 ] dentro de la funcin. La asignacin se puede hacer de las dos maneras mostradas, ya que consiguen el mismo resultado. A dvertencia: Estas son la form as estndar de recuperar el objeto e v e n t. En Internet Explorer tambin se puede acceder a l desde w indow . e v e n t. Si utilizsemos el cdigo anterior, conseguiramos un men saje como el de la figura 10.5 al hacer clic sobre cualquier parte de la ventana de nuestro navegador. No nos dice mucho de momento, pero ahora veremos cmo sonsacarle la informacin i|ue tiene guardada.
[Aplicacin Ja v a S c rip t] y [object MouseEvent]

10.4. El objeto event


An despus de todo lo explicado, JavaScript nos tiene preparado un as ms bajo la manga. Cuando se produce un evento, se crea automticamente un objeto (e v e n t) que contiene un conjunto de informacin acerca de ese evento. Este objeto podr ser utilizado mientras se produce ese evento, de modo que desaparecer cuando fi nalice, tambin de manera automtica. Siendo estrictos, este objeto tiene un m ayor protagonism o en cdigos relacionados con D H TM L pero quiero presen trselo ya que creo que es im portante conocerlo, aunque sea un poco, para tener una buena base de los eventos de JavaScript. Ahora se estar preguntando cmo y dnde podemos usar este nuevo objeto. Bien, vam os a ello. El objeto e v e n t es ac cesible dentro de las funciones asignadas en los manejadores. Cmo lo recuperamos? Veam os m ejor un sencillo ejemplo con el evento c l i c k .
258

(SI

j Aceptar |

Figura 10.5. Recuperacin del objeto event.

10.4.1. Propiedades
En la tabla 10.3 se mostrar un listado de las principales propiedades estndar que contiene el objeto e v e n t . Existen tlgunas ms pero, al ser propias de algunos navegadores o muy especficas de DHTML, no las vamos a tratar en este libro.
259

www.FreeLibros.com

Tabla 10.3. Propiedades del objeto event Tipo altKey button clientX Booleano Entero Entero Descripcin Devuelve true cuando se ha presionado la tecla Alt. Indica el botn del ratn que ha sido pulsado. Ver tabla 10.4. Indica la posicin horizontal del cursor donde se ha hecho clic, dentro del rea disponible en el documento. Indica la posicin vertical del cursor donde se ha hecho clic, dentro del rea disponible en el documento. Devuelve true cuando se ha presionado la tecla Ctrl. Indica el tipo de evento que se ha producido (click, mouseover, etc.). Indica la posicin horizontal del cursor donde se ha hecho clic, dentro de la resolucin de pantalla del usuario. Indica la posicin vertical del cursor donde se ha hecho clic, dentro de la resolucin de pantalla del usuario. Devuelve true cuando se ha presionado la tecla Shift.

[Aplicacin Ja va S c rip t]
y altKey: false ! _ button: 0 dlentX: 278 dientY: 21 ctrlKey: false type: click screenX: 567 screenY: 260 shtftKey: false

del documento, segn el cdigo que vimos en el apartado an terior.


Figura 10.6. Propiedades de un evento.

clienteY

Entero

ctrlKey type screenX

Booleano String Entero

screenY

Entero

Para terminar con este objeto, tenga siem pre presente que en una pgina pueden lanzarse varios eventos al realizar una accin. Un caso muy claro es el que hemos estado viendo con c l i c k . Cuando pulsamos sobre una parte del documento, no slo estamos provocando dicho evento sino que, en est caso, ademas se producen otros dos: mousedown y mouseup. Aunque no tengam os un m anejador asociado a ellos, los eventos siempre van a producirse. Ahora la duda que nos queda es en qu orden aparecen? Para esta accin los eventos siguen esta secuencia:

1 . mousedown: al hacer la pulsacin sobre el botn del


ratn. 2. mouseup: al soltar el botn. 3. c l i c k : al soltar ei botn tam bin, pero despus de

shiftKey

Booleano

mouseup.
Tabla 10.4. Valores de la propiedad button I Valor 0 1 2 1 2 4 Navegador Estndar Estndar Estndar Internet Explorer Internet Explorer Internet Explorer Descripcin Botn izquierdo del ratn Botn central del ratn Botn derecho del ratn Botn izquierdo del ratn Botn derecho del ratn Botn central del ratn

Si nos construimos un sencillo cdigo podremos ver esta secuencia.


FORM NAME="formEventos"> <TEXTAREA NAME="eventos" ROWS="9"></TEXTAREA> /FORM> SCRIPT TYPE="text/javascript"> // Funcin que aade un evento en el textarea function pintarEvento(evento) { document.formEventos.eventos.valu += evento.type + "\n";

}
// Asignamos los manejadores (no importa el orden) document.onclick = pintarEvento; document.onmousedown = pintarEvento; document.onmouseup = pintarEvento; </SCRIPT>

La figura 10.6 muestra un ejemplo de la informacin con tenida en el objeto event cuando se hace clic en alguna parte

260

261

www.FreeLibros.com

yy
Cookies

Una cookie no es ms que una porcin de inform acin que se alm acena tem poralm ente en el ordenador del usuario con la finalidad de poder recuperarla en cada visita una misma pgina y as evitar tener que introducirla una y otra vez. listo hace que la navegacin del usuario sea m s cm oda y pueda ir directam ente a la seccin que le interese de nuestra pgina. La inform acin que se suele guardar en las cookies es inIroducida por el usuario cuando entra por primera vez a la pgina, para poder mostrarle unos datos ms personalizados o simplemente para ahorrarle tiempo en su prxim a visita. Algunos ejemplos de la utilidad de las cookies son: Nombre de usuario. Crea la sensacin de que la pgina "recuerda" nuestro nombre de usuario cuando volvemos a visitarla. Fecha ltima visita. Esto puede tener utilidad sobre todo en los foros para saber el tiem po que llevas sin entrar, por ejemplo. Colores de la pgina. Si la pgina nos perm ite perso nalizar el aspecto que puede tener, es de gran ayuda almacenar esas preferencias para que el usuario no tenga que volver a configurarlo una y otra vez. Tienda ms cercana. A las pginas que muestren ofertas de productos les puede ser til alm acenar este dato para ofrecer al usuario una inform acin ms persona lizada. I lace tiempo, las cookies se usaban para almacenar los pro Indos que se iban seleccionando en una W eb de ventas, al f*lilo de un carrito de la compra, pero con el aumento del uso
263

www.FreeLibros.com

de lenguajes de lado servidor, como PHP o ASP, esto ha cado en desuso y ahora se utiliza la sesin que mantiene el usuario con el servidor como medio para guardar esa cesta. Advertencia: A la hora de crear nuestras propias cookies debemos evitar guardar en ellas informacin confidencial del usuario, como pueden ser contraseas, nwnet o de DNI, nmero de tarjetas de crdito, etc. Hacerlo supondra un alto riesgo puesto que esos datos podran ser recuperados por una pgina creada para tal propsito. _________ ________ _ _ Como hemos dicho, las cookies se almacenan en el ordenador de usuario, pero dnde exactamente? Al igual que muchas otras cosas, cada navegador tiene definido un sitio y una m a nera de guardarlas: Internet Explorer: Para sistemas Windows, la ruta tpica e s " C : \Documents and Settings\<su_usuario>\ Cook i e s ", donde cada cookie se almacena en un fichero distinto. FireFox: Tam bin para W indows, en la carpeta C : \
Documents and Settings\<su_usuario>\Datos
de p r o g r a m a \ M o z i l l a \ F i r e f o x \ P r o f i l e s \ < s u _

C onfigu ra cin a v a n zad a de privacidad I I 1 ! Cookies 0nY3![da la administracin atomatca de cookie^ Cookies de origen ceptar O Bloquear O Preguntar i E!i|a la forma de administrar las cookiej en U rtwu ! (m o t* Esto invalida la administracin automtica .1^ ( I

Cookies de tercero Aceptar O BJoquear O Preguntar j

D Aceptar siempre las cookies de sesin

Aceptar

J [ 1

| 1

Figura 11.1. Administracin de cookies en Interna! I xplorm

Historial Firefox eodr: j Usar una configuracin personalizada para el historial v |

Abrir automticamente Firefox en una sesin de navegacin privada 0 0 Recordar el historial de bsqueda al menos Recordar el historial de descargas I 9 * I das

p e r f i 1>". Ah podrem os encontrar los archivos " c o ok i e s . txt" y " h o s t p e r m . l " que almacenan todas

las cookies juntas. JavaScript guarda todas las cookies dentro de la propiedad c o o k i e del objeto d ocument. Hay que sealar que las cookies no permanecen en nuestro ordenador hasta la eternidad sino que tienen una fectm de expiracin o caducidad, que puede ser de unos segundos, horas, das o simplem ente hasta cuando cerremos la ventana del navegador. . Opcionalmente, es posible activar o desactivar el almace namiento de cookies desde las opciones del navegador, aunque por defecto suele venir activada. En Internet Explorer debemos pasar por H erram ientas> O pciones de lnternet>P rivacidad>A vanzada. Una vez ah tenemos la posibilidad de cambiar la administracin de las cookies. Ver figura 11.1. En FireFox es ms sencillo. Si vam os a H erram ientas> Opciones>Privacdad veremos una seccin dedicada a las cookies. Ver figura 11.2.
264

Aceptar cookies 0 Incluso las de terceros vj

I Excepciones...

Mantener hasta que: [caduquen U Limpiar el historial cuando Firefox se cierre

|Mostrar cookies... ] . Corifhtfjtqtion

cuando se use la barra de direcciones, sugerir: [Historial y marcadores

wl

\ Aceptar

| Cancelar

| | Ayyda

Figura 11.2. Administracin de cookies en FireFox.

11.1. Trabajar con cookies


11.1.1. Estructura de una cookie
La manera de almacenar las cookies en JavaScript es en forma

1I1' pares campo=valor, separando cada par por un punto v


coma ( ;) . '
265

www.FreeLibros.com

La informacin m nim a y obligatoria que debe contener cada cookie es un campo para el dato que queremos guardar (nombre de usuario, fecha de ltima v isita...) y su valor co rrespondiente. Este valor no puede contener los caracteres punto ( . ) , punto y coma ( ; ) y el espacio en blanco, pe caso de que estuvieran habra que reemplazarlos por valores UNICODE mediante la funcin e s c a p e . A partir de aqu, se pueden aadir otros campos opcionales como son: . expires: Indica la fecha de caducidad de la cookie slo cuando no queremos que desaparezca al cerrar e navegador. Esta fecha debe estar expresada en formato GMT, por lo que aqu nos ser de mucha ayuda el m todo toGMTString del objeto Date. _ doma i n: Indica a qu servidor debe ser enviada la cookie. Si no se incluye este campo, entonces se toma el dominio que ha creado la cookie. Al especificar un dominio, la co okie puede ser enviada tambin a todos sus subdommios si no se pone explcitamente: Si el dominio es m i p a g i n a .com, la cookie tambie se enviar, por ejemplo, a buscador .mipagina. com, f o r o .m i p agina.com y, por supuesto, a mipagina.com. Si el dominio es w w w .m i p agina.com, la cookie no se m andar a los subdomiruos. p a t t r Funciona de m anera sim ilar a d o m a in , pero especificando la ruta dentro del servidor donde sera enviada la cookie. Si no se aade este campo, se toma la ruta de la pgina actual. Si el dominio es mi p a g i n a .com y la ruta es /ca pitulos, la cookie tam bin se enviar, por ejemplo, a b u s cador.mipagina.com/capitulos,mipag i n a .com/capitulos o m i p a g i n a .com/capi tulos/JavaScript/. Si el dominio es w w w .m i p a g i n a .com y la ruta / capitulos, la cookie se mandar a www .mipagina^ com/capitulos o www.mipagina.com/capi tulos/JavaScript. , , Si la ruta es / entonces la cookie se enva por todo el dominio. , . ___ secure: Si este cam po est incluido en la c o o k i e en tonces sta slo se enva al servidor si la conexion se ha establecido a travs de un protocolo seguro, como

puede ser HTTPS (HTTP Secure). Este el nico campo que no lleva un valor asociado ya que est representado por si mismo. Si no se especifica, entonces la cookie se manda independientemente del protocolo que se est utilizando. Dicho todo esto, una cookie que almacenase el nombre de usuario tendra este aspecto sin campos opcionales:
usuario=Pepe

Y este otro con algn campo opcional:


usuario=Pepe;expires=Tue, 3 Mar 2009 18:24:41 GMT;secure

Dado que todos los cam pos, obligatorios u opcionales, van separados por punto y coma ( ;) , se hace difcil delimitar dnde acaba cada cookie. Una regla que se suele utilizar es la de insertar un espacio en blanco despus del punto y coma de los campos opcionales. De esta forma podremos saber que una cookie comienza por aquel campo que no tenga ese espacio en blanco.
usuario=Pepe; expires=Tue, 3 Mar 2009 18:24:41 GMT; secure
;c o m p r a = l e c h e ,p a n ,m a n z a n a s ; s e c u r e

Esta delimitacin slo va a ser visual para nosotros a la hora de escribir varias cookies seguidas. JavaScript puede manejar cada cookie de forma independiente aunque vayan todos los campos seguidos sin ese espacio en blanco, ya que es capaz de detectar las palabras especiales pertenecientes a campos opcionales.

11.1.2. Almacenar una cookie


Como ya hemos avanzado, JavaScript almacena las cookies dentro del objeto document, concretamente en su propiedad cookie. Por tanto, lo nico que tendremos que hacer es cons truir una cadena que contenga un estructura de cookie, es decir, pares campo=valor y separados por punto y coma ( ;) . Para facilitamos este trabajo, nos crearemos una funcin que luego podremos reutilizar donde queramos. Esta funcin recibir como parmetros cada uno de los posibles campos que pueden formar la cookie y los ir concatenando si es necesario.
SCRIPT TYPE="text/javascript ">

function almacenarCookie(nombre, valor, caducidad, dominio, ruta, segura) { var cookie;

267

www.FreeLibros.com

// Aadimos el nombre de Xa cookie y su valor cookie = nombre + "=" + escape(valor); // Comprobamos si hemos recibido caducidad if (arguments[2] != undefined) { cookie += expires= + caducidad.toGMTString0 ;
// Comprobamos si hemos recibido dominio

[Aplicacin Ja va S c rip t]

if (arguments[3] != undefined) { cookie += "; domain=" + dominio; // Comprobamos si hemos recibido ruta if (arguments[4] != undefined) ( cookie += "; path=" + ruta; // Comprobamos si hemos recibido segura y si hay // que aadirla if (arguments[51 != undefined && segura) cookie += "; secure";

Figura 11.3. Coleccin de cookies almacenadas en JavaScript. Ha visto? Slo puede ver los pares nom bre=valor de cada cookie que haya almacenada (dos en nuestro caso). Esto no nos supone ningn problema, puesto que los otros campos los gestionar el navegador para detectar cundo caduca, y por tanto borrar la cookie, o saber a qu dominio o ruta pertenecen. Adems puede ver sustituido el carcter coma ( , ) por su equi valente UNICODE (% 2 C) ya que ese carcter no est permitido como valor de la cookie. Recapitulando, para leer el valor de una cookie en con creto tendrem os que encontrar el par nom bre=valor que nos interese dentro de la propiedad d o c u m e n t. c o o k i e , la cual verem os com o una nica cadena con todas las cookies concatenadas, as que necesitarem os usar las funciones de bsqueda de las cadenas. Lo m ejor en este caso, al igual que para alm acenar una cookie, ser crearnos una funcin que nos perm ita obtener cualquier cookie indicando nicam ente su nombre. Lo primero que debemos com probar es si tenemos alguna cookie almacenada para evitar lanzar una bsqueda que sa bemos que no va a devolver nada.
// Comprobar si hay cookies If (document.cookies.length > 0 ) { // Buscar y devolver el valor de la cookie I else { // Devolver un valor vaco
return

}
// Aadimos la cookie document.cookie = cookie;

}
</SCRIPT>

Viendo este cdigo podra pensar que al guardar una cookie se sobrescribe el contenido completo de la propiedad c o o k ie ya que no se aade el valor (operadores + o +=), sino que di rectamente se realiza una asignacin (operador =). El ejemplo es correcto y no debe preocuparse puesto que JavaScript es el que se encarga de concatenar cada una de las cookies que aa damos a la propiedad de docum ent. Nota: Si el nombre de una cookie ya existe, no se crea una nueva sino que se reemplaza su valor con el nuevo.___________

11.1.3. Recuperar una cookie


Al contrario de lo que pueda pensar, cuando obtenemos la informacin de una cookie que est almacenada en el objeto d o cu m en t, nicam ente podrem os extraer su valor, por lo que todo lo referente a los campos opcionales quedar oculto. Esto lo puede comprobar rpidam ente si intenta mostrar las cookies guardadas:
<SCRIPT TYPE="text/j avascript"> // Mostramos las cookies
a l e r t ( d o c u m e n t.c ookie);

I En caso de tener alguna cookie almacenada, debemos locaIi/ar en qu posicin de la concatenacin de cookies se encuentra 1 .1 que nos interesa. Esto lo harmos buscando por el nombre de la misma. Adems comprobaremos si hemos encontrado esa posicin uno, para detener de nuevo la bsqueda. Si hemos encontrado 1 .1 cookie entonces calculamos la posicin dnde com ienza el valor de la misma, que ser a continuacin del carcter = del par nombre=valor.
269

</SCRIPT>

268

www.FreeLibros.com

/ / S i hemos encontrado la posicin if (posicionCookie != _D f ... air // calculamos la posicin de inicio del valor posicin!nicio = posicionCookie + nombreCookie. length + 1 ; // Obtener valor de la cookie

de la ms D ^ em o s t o e r ^ n ^ m t a la posibilidad de que no

^ S

^ pS 2 S S S ^ ^ - j *

inicio hasta el final del string que forma d o cu m en t. c o o k ie .


// Buscar la posicin del punto y c o m a ms prximo posicionPuntoComa = document.cookie.indexO , ,

r .t c '

i. a -

o - 1* ' > >

1 co

if (posicionPuntoComa D i // Leemos hasta el final de la cadena posicionFin = document.cookie.length, / / E n otro caso, leemos hasta el punto y coma posicionFin = posicionPuntoComa;

SCRIPT TYPE="text/javascript"> function recuperarCookie(nombreCookie) { // Definicin de variables var posicionCookie, posicionPuntoComa; var posicionlnicio, posicionFin; var valorCookie = // Comprobamos si hay cookies if (document.cookie.length > 0 ) { // Buscamos la posicin de la cookie posicionCookie = document.cookie. indexOf(nombreCookie + "="); / / S i hemos encontrado la posicin if (posicionCookie != -1) { // Calculamos la posicin de inicio // del valor posicionlnicio = posicionCookie + nombreCookie.length + 1 ; // Buscamos la posicin del punto y // coma ms prximo posicionPuntoComa = document.cookie. indexOf(";", posicionCookie); / / S i estamos en la ltima cookie (no h i // punto y coma) if (posicionPuntoComa == -1) { // Leemos hasta el final de la cadena posicionFin document.cookie.length; ) else { // En otro caso, leemos hasta el punt / / y coma posicionFin = posicionPuntoComa;

}
// Obtenemos el valor de la cookie valorCookie = document.cookie. substring(posicionlnicio, posicionFin);

Nos est quedando bien la funcin... Vamos con el ultimo oaso devolver e? valor de la cookie que buscamos! Esto , recuitar bastante sencillo a todo el trabajo previo que suitara bastante sencu gracias g de la cadena que 1

} }
// Devolvemos el valor de la cookie return unescape(valorCookie);
i/ : ; cript>

tuimos al almacenar la cookie.


// Devolver el valor de la cookie return unescape(document.cookie. substring(posicionlnicio, posicionFin)),

[A p licaci n Ja v a S c r ip t ]
^usuarjo=Pepei_compra=leGhe%2Cpan%2Cman2anas

posicionCook^''|

posicionPuntoCom a

Ahora queyahemosexphcadotodoslos pasos,veam ostodo

posicionlnicio

necesario para lograr nuestro objetivo.


270

Figura 11.4. Representacin visual de las posiciones de una cookie.

www.FreeLibros.com

11.1.4. Modificar una cookie


Aunque ya avanzam os algo hace un par de apartados, modificar los campos de una cookie resulta bastante sencillo puesto que no necesitamos buscarla previamente dentro de la coleccin sino que ser suficiente con volver a almacenarla con los nuevos valores. El nico requisito, lgicamente, es que la cookie ya exista en la coleccin. , ., Esto quiere decir que con volver a usar nuestra funcin a l m a c e n a r C o o k i e , junto con los nuevos valores y el mismo nombre de cookie, habrem os modificado todos los campos que hayam os indicado. Cuidado con esto porque en caso de usar un nombre de cookie que no est en la coleccion almacena remos una nueva.
<SCRIPT TYPE="text/javascript"> // Creamos una cookie almacenarCookie("compra", "leche,pan,manzanas ); // Modificamos la cookie almacenarCookie("compra", "leche,pan,manzanas,queso"); </SCRIPT>

11.2. Ejemplos prcticos


Para comprender todas estas funciones y acciones que se han explicado, vamos a desarrollar unos pequeos ejemplos utilizando formularios y cdigo JavaScript para que sean ms cmodos de probar.

11.2.1. Almacenar y recuperar una cookie


Estas son las acciones ms bsicas y comunes que se pueden apkcar sobre las cookies. Para comprobarlo por nosotros mismos, crearemos un sencillo formulario que nos permita aadir co okies que constar de varias cajas de texto para introducir los valores y un botn para aadirla a la coleccin de cookies del navegador.
<HTML> <BODY> <H3>Formulario para aadir cookies</H3> <FORM ID="formulariol" NAME="formCookie"> Nombre de la cookie: <INPUT TYPE="text" ID="entradal" NAME="nombre" /> <B> (obligatorio) < / B X B R /> Valor: <INPT TYPE="text" ID=entrada2" NAME="valor" /> <B> (obligatorio) < / B X B R /> <INPUT TYPE="button" ID="botonl" NAME="botonAgregar" VALUE="Agregar" ONCLICK="agregarCookie()" /> <INPUT TYPE="button" ID="boton2" NAME="botonLeer" VALUE="Leer" ONCLICK="leerCookie()" / > </FORM> :/BODY> :/HTML>

As da gusto, verdad? Las funciones que estamos creando nos van a ser de mucha utilidad para dar una claridad tre menda a nuestro cdigo.

11.1.5. Borrar una cookie


Por suerte para nosotros, borrar una cookie resulta tan sen cillo como modificarla. En concreto tendremos que cambiar su fecha de caducidad haciendo que no sea valida a partir del m omento actual. La fecha que debemos fijar tiene que ser igual o anterior a la fecha y hora actuales. Lo mas sencillo es usar la hora actual, ya que la cookie se invalidara en el siguiente milisegundo.
<SCRIPT TYPE="text/ javascript"> // Creamos una cookie almacenarCookie("usuario", "Pepe"); // Borramos la cookie almacenarCookie("usuario", "Pepe", new Da t e ()); </SCRIPT>

Formulario para aadir cookies


Nombre de la cookie: [ Valor: | Agregar |[ Leer |

J (obligatorio)
] (obligatorio)

Figura 11.5. Formulario para administrar cookies.

Tras hacer esto, el navegador detectar que la cookie ha ca ducado, la borrar de la coleccin y ya no ser recuperable.

Por supuesto, tambin tendremos que definir la funcin .isociada al manejador ONCLICK del botn Agregar, que no luir otra cosa que leer los datos que hemos escrito en el for mulario y llamar a la funcin almacenarCookie que hemos creado en el apartado anterior.
273

www.FreeLibros.com

<SCRIPT TYPE="text/javascript"> function agregarCookie( ) { // obtenemos los campos with (document.formCookie) { // Comprobamos si hemos indicado el nombre // y valor if (nombre.valu == "" I I valor.valu alert("Debe escribir el nombre y valor ) {

valorCookie = recuperarCookie(nombreCookie);

}
// Mostramos el valor de la cookie if (valorCookie != "") { alert("El valor de la cookie " + nombreCookie + " es:\n" + valorCookie); } else { alert("No se ha encontrado la cookie " + nombreCookie);

de la cookie.") ; nombre.focus (); return; } else { . // llamamos a la funcin que crea la cookie a l m a c e n a r C o o k i e (nombre.valu, valor.valu); alert("Cookie " + nombre.valu + " almacenada.");

} }
</SCRIPT>

Bueno, pues despus de tanto cdigo llega el momento de probarlo (cruce los dedos). Le invito a recrear los siguientes casos en su ordenador: 1. Recuperar una cookie sin haber alm acenado ninguna. D ebe aparecer un m ensaje indicando que no se ha encontrado una cookie con ese nombre. 2. Alm acenar una cookie con un nom bre de usuario. La cookie se almacenar en la coleccin. 3. Recuperar la cookie con el nom bre de usuario. Debe aparecer un mensaje con el valor de la cookie. 4. Modificar el valor de la cookie con el nombre de usuario. La cookie se almacenar en la coleccin. 5. Recuperar la cookie con el nom bre de usuario. Debe aparecer un mensaje con el nuevo valor de la cookie.

) }
</SCRIPT>

C om o ve, esta funcin no tiene m ucha com plicacin. Solamente hem os ido comprobando cada vino de los campos del formulario para saber si teman algo escrito y mostrar mensaje al usuario en caso contrario, dejando el foco en la caja de texto correspondiente al nombre de la cookie. En cuanto a recuperar los valores de las cookies nos ten dremos que construir otra funcin (leerCookie), para aso ciarla al manejador ONCLICK del botn Leer, que se encargara de mostrarnos el valor de la cookie cuyo nombre coincida con el que est escrito en el formulario. Aqu usaremos nuestra magnfica funcin r e c u p e r a r C o o k i e .
CSCRIPT TYPE="text/javascript"> function leerCookie0 { var nombreCookie; var valorCookie = "" ,* // Obtenemos el nombre with ( d o c u m e n t . formCookie) l // Comprobamos si hemos indicado el no if (nombre .valu == ' "') ( alert("Debe escribir el nombre de la cookie."); nombre.focus(); return; } else { . // Guardamos el nombre de la cookie nombreCookie = nombre.valu;

11.2.2. Expiracin de cookies


Tomando com o base el caso anterior, vam os a aadir un campo m s al form ulario para poder indicar cundo que remos que caduque o expire nuestra cookie, expresado en segundos.
MTML> BODY> H3>Formulario para expiracin de cookies</H3> FORM ID="formulariol" NAME="formCookie"> Nombre de la cookie: CINPUT TYPE="text" ID="entradal" MAME="nombre" /> <B> (obligatorio) C / B X B R /> Valor: <INPUT TYPE="text" ID="entrada2" NAME="valor" /> B> (obligatorio) C / B X B R /> Caducidad: CINPUT TYPE="text" ID="entrada3" NAME="caducidad" /> (segundos)CBR /> INPUT TYPE="button" ID=botonl" NAME="botonAgregar" VALUE="Agregar" ONCLICK="agregarCookie()" />

re

) / Llamamos a la funcin que recupera la cookie

274

275

www.FreeLibros.com

<INPUT T Y P E = " b u t t o n " ID-"boton2" AME botonleer VALUE="Leer" ONCLICK="leerCookie()" />

</FORM>
</BODY>
</HTML>

Formulario para aadir cookies


Nombre de la cookie.

Caducidad: [ Aqregar

I | 1

|(obligatorio) "H (obligatorio) |(segundos) ----------------------

En el clculo de la fecha de caducidad hay un pequeo detalle que explicar ya que es posible que le resulte extraa esa m ultiplicacin por mil. En realidad lo que se ha hecho es guardar la fecha en forma de m ilisegundos. Para ello, hemos transformado la fecha y hora actuales en esa unidad mediante el mtodo getTime y le hemos sumado el nmero de segundos indicados en el formulario, tambin expresado en milisegundos (de ah la multiplicacin). Con este ejemplo podremos intentar crear dos cookies con distintas fechas de caducidad: 1. Para la primera (de nombre cookie_sesion) no indi caremos una cantidad de segundos como caducidad, por lo que expirar cuando cerremos la ventana del nave gador. Esto significa que seremos capaces de recuperar su valor siempre y cuando no cerremos el navegador. Una vez que lo hagamos, la cookie habr expirado y no permanecer en la coleccin. 2. A la segunda (de nom bre cookie_minuto) le pon dremos 60 segundos como tiempo de expiracin, as que podremos obtener su valor durante el siguiente minuto aunque cerremos el navegador. Pasado ese tiempo la cookie expirar.

1 1Leer j

Figura 11.6. Formulario para administrar cookies.

Del mismo modo, debemos aadir unas lneas a la funcin del manejador ONCLICK del botn A gregar para poder a m t ^ T c o o k i e con la caducidad que hayam os indicado en el formulario.
<SCRIPT TYPE="text/javascr ipt"> function agregarCookie( ) { var expiracin; var hoy = new Date() ; // Obtenemos los campos with ( d o c u m e n t . formCookie)

Por ltimo, slo destacar que aunque nicamente calcu lemos la fecha de caducidad cuando se ha introducido un valor // comprobamos si hemos indicado el nombre en el formulario, siempre se pasa la variable expiracin // y valor ____ " "I I valor.valu == "")( como parmetro a la funcin almacenarCookie ya que, si no if (nombre.valu I I Ilemos realizado el clculo, su valor ser undefined y proven a alert("Debe escribir el nombre y valor i|ue no se aada ese parmetro opcional a la cookie. de la cookie.");
{ b nombre.focus(); return; // comprobamos si hemos indicado caducidad if (caducidad.valu != "") expiracin = new Date(), expiracin.setTime(hoy.getTime( ) +
( c a d u c i d a d .v a l u * 1 0 0 0 ) ) ;

11.2.3. Modificar una cookie


Para probar esta funcionalidad podemos utilizar el formu lario y las funciones JavaScript asociadas a l de los ejemplos .interiores, puesto que la m odificacin de una cookie equivale .i volver a almacenarla y el procedimiento de recuperacin de mi valor no vara. Realizaremos las siguientes operaciones para ver cmo funciona la modificacin de una cookie: 1. Creamos una cookie y a continuacin recuperam os su valor. A hora m odificarem os su valor ("cream os" la misma cookie con el nuevo valor) y volvem os a recu perarla para com probar que el cam bio se ha hecho efectivo.
277

// Llamamos a la funcin que crea la cookie

almacenarCookie(nombre.valu, valor.valu, expiracin); alert("Cookie " + nombre.valu +


" a l m a cenada.") ;

}
</SCRIPT>

276

www.FreeLibros.com

2. C ream os una cookie sin indicar fecha de caducidad (expirar al cerrar el navegador). Seguidam ente m o dificamos su fecha de caducidad a 60 segundos, por ejemplo. Entonces si cerramos el navegador e intentamos recuperar la cookie veremos su valor. Pasado ese tiempo, la cookie no debera seguir estando accesible.

11.2.4. Borrar una cookie


Por ltimo, vamos a comprobar lo fcil que resulta eliminar una cookie de la coleccin usando el mismo formulario y cdigo JavaScript que hasta ahora. Para refrescarle la memoria, una cookie se borrar cuando haya expirado, es decir, cuando su fecha de caducidad sea anterior a la fecha actual. Como en nuestro formulario no in dicamos una fecha concreta sino un plazo en segundos, bastar con poner un valor igual o menor a cero. El cero representa la hora actual (la cookie expira en el siguiente m ilisegundo) y los negativos indican una hora anterior a la actual (hace 3 ,1 0 60 segundos por ejemplo). Por tanto, el ejemplo que nos ocupa consistir en crear una nueva cookie y, tras comprobar que podemos recuperar su valor, modificaremos su caducidad con un valor -5 (o el primero que piense, pero siempre menor o igual que cero). Si a continuacin intentamos recuperar el valor de esta cookie nos encontraremos con que sta ha sido borrada. Si queremos rizar el rizo, podramos hacer una pequea variacin en la funcin agregarCookie para que nos in dique cundo borramos una cookie. Esto se puede hacer muy rpidamente si nos fijamos en el valor del cam po caducidad del formulario: si no es vaco, y su valor es menor o igual a cero, entonces estamos borrando. En otro caso, la cookie se est almacenando.
// Llamamos a la funcin que crea la cookie almacenarCookie(nombre.valu, valor.valu, expiracin); I if (caducidad.valu != "" && caducidad.valu <= 0) {
alert("Cookie " + nombre.valu + " borrada."); } else { alert("Cookie " + nombre. valu + " almacenada.");

) Como ve, rpido, sencillo y para toda la familia.

278

www.FreeLibros.com

12
Ejemplos prcticos

Este captulo presenta una serie de ejercicios que intentan poner en prctica los diversos conocimientos que habr ad quirido con este libro. Aunque todos estos scripts vienen expli cados y con su solucin (que no la nica, ya que siempre hay varias formas de llegar a lo mismo), le recomiendo que antes de mirarla intente pensar por su cuenta cm o lo resolvera, o al menos qu funciones u objetos haran falta para conseguir llegar al objetivo. Sin ms, le dejo que disfrute de nueve tiles ejemplos.

12.1. Mostrar un texto rotativo


Como primer ejemplo prctico vamos a simular el efecto de la etiqueta HTML <MARQUEE> (bastante obsoleta, por cierto) que consiste en mostrar un texto desplazndolo horizontal mente hacia la izquierda a modo de letrero informativo. Los elementos que vamos a utilizar para crear este efecto son: 1. Una capa HTML que contendr el mensaje. 2. Una funcin JavaScript que har rotar el texto. La capa HTML ser muy sencilla y nicamente le fijaremos una anchura y un borde. El motivo de fijar estos dos atributos ser para que el efecto se aprecie aunque el texto a rotar sea corto. Adems, tambin centraremos el texto en la capa para i|ue quede ms bonito. No se preocupe si no conoce el len guaje HTM L a fondo, aqu va una ayuda de cmo debe estar definida la capa:

www.FreeLibros.com

279

<DIV ID="capaTexto" STYLE="border: Ipx solid #000000; width: 250px; text-align: center">El texto que queramos desplazar</DIV>

Para que el texto comience a desplazarse nada ms cargar la pgina, asociarem os esta funcin al manejador NLOAI) del documento.
<BODY ONLOAD="arrancarRotativo()">

Seguidamente definiremos la funcin JavaScript que crear el efecto rotativo, cuyo m ecanismo ser el siguiente: Recoger el texto que hay dentro de la capa para saber cul es. Esto es posible gracias a la propiedad inner HTML, que ya hemos explicado para objetos como an chor (ancla). Para acceder a la capa nos apoyaremos en el m todo getElementByld del objeto document. Trasladar el prim er carcter del texto al final, para sim ular que se ha desplazado una posicin a la iz quierda. Escribir el nuevo texto en la capa. Con todo esto escribiremos la funcin que "dar vida a nuestro texto.
function d e s p l a z a r Texto( ) {

P u es b ien , ya ten em o s p re p arad o n u estro p rim er ejemplo!


[ H tent que queramos desplazar || - - - - - - - - j^ > [ o qut g u a m o s desplazara text |l ^ >| ~ despkarEI texto que g ro m o s |

Figura 12.1. Efecto de texto rotativo.

// Obtenemos el texto de la capa var texto = d o c u m e n t .getElementByld("capaTexto") .


innerHTML;

// Trasladamos el primer carcter al final texto = texto.substring(1, texto.length) + texto. substring(0, 1) ; // Escribimos el nuevo texto document.getElementByld("capaTexto").innerHTML texto,

Para hacer un poco ms til este texto rotativo, vamos a hacer que el efecto cese cuando pongamos el ratn encima de la capa, para poder leer el texto ms cm odamente, y se reanude cuando lo quitemos. Le suena difcil? En absoluto! Ya ver que con cuatro pinceladas vamos a aumentar la funcionalidad de este rotativo. Lo primero es escribir una funcin que detenga el tem porizador que lanza continuam ente el desplazam iento del texto. Para ello nos hace falta conocer su identificador, as que tendremos que crear una variable global y guardar en ella el resultado de la ejecucin de setlnterval.
// Variable global

var temporizador;
function a r r a n c arRotativo( ) { // Fijamos el temporizador temporizador = setln t e r v a l ("despla z a r T e x t o ()", 150);

} Por ltimo, necesitam os fijar un temporizador que ejecute repetidamente la funcin anterior para as crear el efecto de seado. Tenemos dos opciones: setTimeout: Nos ejecutar una nica vez la expresin que le indiquemos. setlnterval: Nos ejecutar continuamente la expre sin indicada. Lo vemos claro, no? Nos conviene usar la funcin setln terval para arrancar de una sola vez el efecto del rotativo. En funcin del intervalo de tiempo que fijemos, el texto parecer que se mueve ms lento o ms deprisa. Un valor medio pueden ser 150 milisegundos.
function a r r a n c a r Rotativo( ) { I I Fijamos el temporizador setlnterval("desplazarTexto 0 ", 150);

Ahora que ya tenemos lo necesario para detener el efecto, vamos a escribir la funcin de parada.
function detenerR o t a t i v o () ( // Detenemos el temporizador clearlnterval(temporizador);

} Le parece que falta algo? Efectivamente, ya slo queda incluir en la capa los manejadores correspondientes a los movi mientos del ratn para que se lancen las funciones oportunas y tendremos todo listo para probar!
<DIV ID="capaTexto" STYLE="border : lpx solid #000000; width: 250px; text-align: center" ONMOUSEOVER= "detenerRotativo()" ONMOUSEOUT="arrancarRotativo()">E 1 texto que queramos desplazar</DIV>

)
280

281

www.FreeLibros.com

12.2. Calcular la letra del DNI


Gracias a este ejemplo seremos capaces de calcular automa ticamente la letra de un DNI. Si utilizamos esto dentro de un formulario, podrem os saber si el usuario ha introducido bien su DNI o si le hem os cazado mintiendo. Primeramente nos crearemos un pequeo formulario, par recoger elvalor escrito por el usuario, que constara de una caja de texto y un botn que lanzar la operacion de validacin.
<H3>Formulario para validar un DNI</H3>

// Extraemos la letra calculada letra = letrasDNI.substr(posicion, 1); // Devolvemos la letra return letra;

} Puesto que este clculo se realizar cuando presionemos el botn V alidar del formulario, debemos crear otra funcin para asociarla a su manejador ONCLICK. Esta funcin recoger el valor introducido en la caja de texto, que le eliminar la letra y llamar a la funcin calcularLetra con el valor resultante. Vayamos paso a paso. Crearemos dos funciones: una para comprobar el formato del DNI introducido mediante un patrn y a la vez desechar la letra que contenga, y otra funcin, para asociarla al manejador, que nos dir si la letra es correcta. La prim era funcin com probar antes de nada que el DNI tiene un form ato vlido. Para realizar este proceso usarem os uno de los patrones que m ostram os en el apartado 2.4 del captulo 2: / \ d {8 } [a-zA-Z] /. Si se supera esta pequea prueba, entonces separarem os la letra del DN I (que est justo al final del todo) y devolverem os el resto del nmero para su posterior validacin. En otro caso, m ostrarem os un mensaje al usuario para advertirle que el DNI introducido no es vlido.
function comprobarFormato(numeroDNI) { // Declaracin de variables var patronDNI = new RegExp("\\d(8)[a-zA-Z]"); // Comprobamos el formato if (patronDNI.test(numeroDNI)) { // Devolvemos los 8 nmeros del DNI return numeroDNI.substr(0, 8); } else { I I Mostramos un mensaje al usuario alert("El DNI " + numeroDNI + " no tiene un formato vlido"); return "";

<FORM ID="forraulariol" NAME="formDNI"> DNI: <INPT TYPE="text" ID="entradal" AME- d m MAXLENGTH="9" /> <INPUT TYPE="button" ID="botonl" AME- botonValidar VALUE="Validar" />
</FORM>

Formulario pai'a validar un DNI


DHtl |r VadarJ

Figura 12.2. Formulario para validar un DNI.

Ahora definimos la funcin que calcula la letra que le co rresponde a un nmero de DNI. Esta funcin es publica asi que no crea que acabo de piratear nada:). Su funcionamiento es m u y simple: . Se dispone de una lista de 24 letras (de la A a la Z) almacenadas en un string. , , _ . Para saber qu letra le corresponde a cada numero, se calcula una posicin a partir del numero de DNI apli cando el m dulo sobre 23 ( nmer o _d ni % 2. 3 ). Se extrae la letra que est en la posicin calculada ante riormente. Veam o s esto ahora expresado en forma de codigo JavaScript:
function calcularLetra(numeroDNI) {

} ) Ahora vamos con la funcin que vamos a asociar al manejador del botn Validar. Lo que tendr que hacer es comprobar i|ue el DNI introducido es vlido, mediante la funcin comprobarFormato, y despus comparar la letra introducida con l.i calculada en la funcin calcularLetra. Si ambas coinciden entonces se informa al usuario de que su DNI es correcto, y de lo contrario si no coinciden.
283

// Declaracin de variables
var posicion, letra; var letrasDNI = "TRWAGMYFPDXBNJZSQVHLCKET ;

// Calculamos la posicin posicion numeroDNI % 23,

282

www.FreeLibros.com

function v a l i d a r D N I O { // Declaracin de variables var DNIUsuario, numeroDNI, letraUsuario, letraCalculada, // Recogemos el valor del formulario DNIsuario = d o c u m e n t .formDNI.dni.valu; // Comprobamos el formato y guardamos el nmero // sin la letra numeroDNI = comprobarFormato(DNIUsuario); // Si el formato es correcto if (numeroDNI != "") { // Guardamos la letra introducida por el usuario letraUsuario = DNIUsuario.substr( 1); I I Calculamos la letra por nuestra cuenta letraCalculada calcularLetra(numeroDNI); // Comparamos ambas letras mostrando un mensaje if (letraUsuario.toUpperCase( ) == letraCalculada) { alert("El DNI " + DNIUsuario + " es correcto"); ) else { alert ("La letra del DNI " + DNIUsuario + " no es correcta");

<H3>Hora actual</H3> <FORM ID= "formulariol" NAME="formHor.i" CINPUT TYPE="text" ID="entradal" NAMK "I... i ,. i SIZE="2" READONLY /> : <INPUT TYPE="text" ID="entrada2" NAME-"ml nA< i 114 I" SIZE="2" READONLY /> : CINPUT TYPE="text" ID="entrada3" NAMU " ini" SIZE="2" READONLY /> C/FORM>CBR /> CH3>AlarmaC/H3> CFORM ID="formulario2" NAME="formAlarm.i" CINPUT TYPE="text" ID="entrada4 " NAME~"hui .iA 1 .11111.1" SIZE="2" /> : CINPUT TYPE="text" ID="entrada5" AME-"mi t i AI < 1 1111. 1" SIZE="2" /> CINPUT TYPE= "button" ID="botonl" NAME-"bot 011 A 1 I l - n " VALUE="Activar" />

CINPUT TYPE= "button" ID="boton2" NAME="botaiiln-,.i, l |


VALUE="Desactivar" /> c/FORM> /

("

} } ) Para terminar este ejemplo tan slo queda asociar la funcin v a l i d a r D N I al manejador O N C L I C K del botn del formulario y ya habremos terminado todo el trabajo.
<INPUT TYPE="button" ID="botonl" NAME="botonValidar VALUE="Validar" ONCLICK="validarDNI ()"/>

Hora actual

Alaima
| | | | Activar 11 Desactivar 1

12.3. Un reloj despertador


Creo que todos conocemos estos simpticos artilugios que se encargan de recordarnos todas las m aanas (de mejor o peor manera) que tenem os que resoplar y hacer un esfuerzo por salir de esa mullida "prisin" en forma de cama (qu po tico ha quedado, no?). En resumidas cuentas, el reloj desper tador que nos vamos a construir en JavaScript se encargara de hacer saltar una alarma (silenciosa, por suerte para nosotros) cuando la hora actual sea la misma que la que hayamos fijado para tal fin. . Para hacer las cosas paso a paso, vam os a incluir primero un par de formularios en la pgina: uno para mostrar la hora actual y as saber cundo va a llegar el m omento que todos tememos, y otro para fijar la hora de la alarm a y activarla o desactivarla.
284

Figura 12.3. Aspecto de nuestro reloj despertador.

Tambin incluiremos una simptica imagen (alarma.jpg) que slo ser mostrada cuando salte la alarma, de forma que quedar algo ms vistoso que con un simple mensaje. En el momento de cargar la pgina no mostrarem os nada para no revelar lo que est por llegar;).
<IMG ID="imagenl" NAME="imagenAlarma" SRC="" />

A continuacin vamos a crearnos una funcin JavaScript que muestre la hora actual en su formulario correspondiente, para lo cual tendremos rellenar los tres campos con las horas, minutos y segundos respectivamente.
lunction m o s t r a r H o r a ( ) { // Obtenemos la fecha y hora actuales var ahora = new D a t e ();

285

www.FreeLibros.com

// Colocamos los valores necesarios en el formularlo with(document.formHora){


horaActual.valu = a h o r a .getHours(); minActual.valu = a h o r a . getMinutes(); segActual.valu = a h o r a .g e t S e c o n d s (),

} } Adem s, com o querem os que la hora se actualice para tener siem pre la referencia en la pantalla, incluirem os un temporizador ( s e t l n t e r v a l ) que se ejecute continuamente cada segundo. Esta sentencia la podemos situar bien dentro del manejador ONLOAD del documento o simplemente dentro de una etiqueta <SCRIPT> al final del todo. En este ejemplo seguiremos la primera opcin por comodidad:
<BODY ONLOAD="setlnterval('mostrarHora()', 1000), >

if (alarma != undefined) { // Si coincide la hora actual con la alarma if (ahora.getHours ( ) == alarma.getHours( ) && ahora.getMinutes( ) == alarma.getMinutes()) { // Mostramos la imagen document.imagenAlarma.src = "alarma.jpg"; } else { // En otro caso, volvemos a comprobar en 1 minuto idComprobarAlarma = setTimeout("comprobarAlarma()", 60000);

} } Ahora llega el tum o de crear la funcin que fija la alarma con la hora y minutos que digamos. Como la alarma debe saltar justo cuando se cambia de minuto (pasamos del segundo 59 al 00) no podemos hacer la primera comprobacin para dentro de un minuto a partir de la hora actual, ya que tenemos pocas pro babilidades de estar en el segundo 00. Para Solucionar esto, lo que haremos es calcular la diferencia entre los segundos actuales y 60 (que representa el comienzo del siguiente minuto). De este modo programaremos la primera comprobacin para dentro de esa cantidad de segundos pero expresada en milisegundos, ya que es la unidad que maneja s e t T i m e o u t . Y ya que estamos, para rematar la funcin, dejaremos vaco el atributo SRC de la imagen de alarma, despus de fijar la hora y minutos, para evitar que est visible despus de haber saltado una alarma anterior.
function fijarAlarma(hora, minutos) { // Declaracin de variables var ahora, primeraComprobacion; // Fijamos la alarma alarma = new Da t e (); alarma.setHours(hora, minutos); // Preparamos la primera comprobacin de alarma ahora = new Date(); primeraComprobacion = (60 - ahora.getSeconds()) * 1000; idComprobarAlarma = setTimeout("comprobarAlarma()", primeraComprobacion); // Dejamos de mostrar la imagen de alarma document.imagenAlarma.src =

Antes de almacenar y activar la alarma, le quiero comentar que en nuestro cdigo tendremos declarada una variable de mbito global ( a l a r m a ) que se encargar de guardar la hora a la que debe saltar la alarma. Dicho esto, sigamos declarando fUnAhora es el tum o de crear una que compruebe si debe saltar la alarma, es decir, si la hora actual coincide con la fijada como alarma. Esta com probacin puede hacerse de varias maneras, pero dos de ellas seran: 1. Obtener la hora actual mediante el objeto D a t e y com pararla con la fijada en la variable a l a r m a . 2. Obtener la hora actual desde el formulario for mHora y compararla con la fijada en a l a r m a . Ambas son vlidas y las diferencias en el cdigo no son muy grandes. N osotros seguiremos la prim era opcion, por decir alguna. Si la hora actual hace que salte la alarma, entonces mos traremos nuestra imagen sorpresa al usuario modificando el atributo SRC de imagenAlarma. En otro caso, debemos forzar que se vuelva a realizar la comprobacin un minuto despues (60 segundos = 60000 milisegundos) mediante el uso del mtodo s e t T i m e o u t , del que guardaremos su identificador en otra va riable global (idComprobarAlama). Veamos todo esto ]unto:
function comprobarAlarma( ) { // Obtenemos la hora actual var ahora = new DateO; / / S i hay una alarma fijada

} Nota: Recuerde que el mtodo s e t H o u r s acepta hasta cuatro parmetros (horas, minutos, segundos y milisegundos), pero slo es obligatorio el primero.
287

286

www.FreeLibros.com

Seguid am ente nos ponem os 'm a n o s a la o b ra ' con la funcin que activa la alarma recogiendo los valores introdu cidos en el formulario para fijar la alarma. Adems, antes de hacerlo, podem os aprovechar para establecer unos valores por defecto a los dos campos del formulario por si alguno no tuviese valor.
function a c t i v a r A l a r m a ( ) { // Fijamos valores por defecto var hora = 12, minutos = 00; // Comprobamos los valores del formulario w i t h ( d o c u m e n t .f ormAlarma){ // Guardamos el valor de la hora, si est escrito if (horaAlarma.valu != "") { hora = horaAlarma.valu; //Guardamos el valor de los minutos, if (minAlarma.valu != "") { minutos = m i n A l a r m a .v a l u ; si est escrito

<INPUT TYPE="button" ID="botonl" NAMK "|. .. i . . , , ,,n VALUE="Activar" ONCLICK="activarAlarm()" CINPUT TYPE="button" ID="boton2" AME "I> ,1 . . 1, 1 i VALUE="Desactivar" ONCLICK="desactiv;i iA I. .iiim (l"

Hora actual
jl7 |: [37 |: 44

Alalina
I ~1:| 3 9 __ 11 A c t ivar 1| Desactivar 1

Figura 12.4. Nuestra alarma fijada para dentro de poco.


Hora actual
[17 |; [39 |; [0 |

}
// Fijamos la alarma fijarAlarma(hora, minutos);

} ) Como hemos incluido en nuestro reloj despertador un botn para poder desactivar la alarma antes de que sta haya saltado, debemos crear otra funcin para tal tarea. No nos resultar muy complicada puesto que tan slo debemos impedir que se siga comprobando la alarma, utilizando el mtodo c l e a r T i m e o u t junto con el identificador i d C o m pr o ba rA l a rm a que hemos ido guardando en las otras funciones. Asim ismo, debemos borrar la hora fijada en la variable a l a r m a asignndole un valor nulo (nuil). Aqu tam bin sera conveniente ocultar la imagen de alarma puesto que no tiene sentido que aparezca si no hay una alarma fijada.
function d e s a c t i v a r A l a r m a ( ) { // Dejamos de comprobar la alarma clearTimeout(idComprobarAlarma); // Borramos la hora fijada alarma = nuil; // Dejamos de mostrar la imagen de alarma d o c u m e n t .i m a g e nAlarma.src = "";

Alanna
1:! 39 i I Activar || Desactivar |

Figura 12.5. La alarma ha saltado!.


Ya tenemos nuestro reloj despertador funcionando, pero todava lo podemos hacer ms real. Si le nombro la palabra miooze, le suena de algo? A los madrugadores quiz no, pero
289

} Para terminar ya con este ejemplo, slo nos queda asociar las funciones de activacin y desactivacin de la alarma al m a nejador ONCLICK de los botones correspondientes.
288

www.FreeLibros.com

para el resto es el botn ms utilizado de todo el despertador y casi siempre va asociado a la frase "bueno, un ratito ms y me levanto". Efectivamente, se trata del botn que aplaza la alarma para que suene unos minutos ms tarde sin tener que fijar una nueva hora. Le parece si creamos esta nueva funcionalidad en nuestro script ? Aunque no lo crea, resultar bastante sencillo gracias a todo lo que ya tenem os hecho. Esta nueva opcin en nuestro despertador debe pregun tam os si queremos aplazar la alarma justo cuando sta salte a la hora program ada, por lo que slo tendremos que modificar la funcin c o m p r o b a r A l a r m a . Este cambio consistir en lanzar al usuario la propuesta de aplazar la alarma, a la que podra responder afirmativa o negativamente. Si decide no aplazar la alarma, entonces desactivaremos la actual, pero si pretiere dormir un poco ms entonces reprogramaremos la alarma au tomticamente para dentro de un minuto (s, soy consciente de que es poco pero es slo para probar el cdigo). Para recoger la respuesta del usuario usarem os el m todo c o n f i r m para despus analizar el botn pulsado y actuar en consecuencia. All vamos:
function comprobarAlarma( ) { // Obtenemos la hora actual var ahora = new DateO; / / S i hay una alarma fijada if (alarma != undefined) { / / S i coincide la hora actual con la alarma if { ahora.getHoursO == alarma.getHours ( ) && ahora.getMinutes( ) == alarma.getMinutes0 ) ( // Mostramos la imagen d o c u m e n t . imagenAlarma.src = "alarma.jpg";
/ / S i quiere aplazar la alarma if (confirmeQuiere dormir un rato ms?")) // Damos un minuto de tregua fijarAlarma(alarma.getHours(), alarma. getMinutes ( ) + 1) ; } else { / / E n otro caso, desactivamos la alarma desactivarAlarma(); {

Hora actual

Alalina
[Aplicacin J o v a S i t l|l | _ j : l 46 liz _ ] [ Activar | [ Desactivar ]

i c i nt l I K

| ~ - >

Figura 12.6. Pregunta para aplazar la alarma

Despus de todo lo expuesto, le dejo como e jm u in | m t s c mi.i I que intente implementar un nmero mximo di'.ipl.iz.imienlos ile la alarma, es decir, que podamos hacer i|iu> sig.i sal,indo Ja alarma durante una cantidad de minutos oxtr.i mediante "snoozes".

12.4. Calcular los caracteres restantes de un SMS


Estamos a punto de desarrollar un script cuya funciona lidad le ser muy fam iliar a muchos: calcular y m ostrar los caracteres restantes de un texto, centrndonos en el caso de un SMS. H oy en da esto est presente en todos los mviles, maque a veces muestran la cantidad restante cuando estamos llegando al lmite. Comenzaremos por simular, sin ningn tipo de alardes, la pantalla del mvil mediante una caja de texto (<TEXTAREA>) i|ue sea lo suficientemente grande para ver el texto completo; | > < > rejemplo, tres filas (atributo ROWS) y unos sesenta caracteres
291

}
} else { // En otro caso, volvemos a comprobar // en 1 minuto idComprobarAlarma = setTimeout("comprobarAlarma()", 60000);

> } }
290

www.FreeLibros.com

de ancho (atributo COLS). Debajo de ella situaremos otra caja de texto (<INPUT>) en la que iremos actualizando la cantidad de caracteres que podemos incluir an en nuestro mensaje. Este cam po m ostrar inicialm ente el nm ero m xim o de caracteres permitidos en un SM S, que es 160. Por supuesto, ambas cajas deben ir dentro de un formulario para poder tra bajar con ellas.
N ota: A modo de curiosidad , los SMS tienen esta limitacin

// Declaracin de constante var LONGITUD_MAX = 160; function calcularRestantea ( I i. . i | // Calculamos los caractei c i var resto = LONGITUD_MAX - t > i i i . . i l | i j // Escribimos el resultado km . I i . n t document.formSMS .longitud.v . i Iu > < iU

} Bien, ya tenemos todo casi prepai...I.. ...I............ . , i , ,.| pequeo" detalle de saber cundo ll.iin.u | . i............ .,

de longitud porque inicialmente se pensaron como mensajes de control y no como un servicio aadido para el usuario final. Siguiendo con nuestro ejemplo. El formulario nos quedar bastante sencillo:
<H3>Escriba su SMS</H3> <FORM ID="formulariol" NAME="formSMS"> CTEXTAREA ID="entradal" NAME="sms" ROWS="3" COLS= "60 "></TEXTAREAXBR /> Quedan CINPUT TYPE="text" ID="entrada2" NAME="longitud" SIZE="3" VALUE="160" READONLY> caracteres </FORM>

cularRestantesparaquenosactu.ili.r.'l.........

,(,

caso, el mejor lugar sin duda es dentro del in.tn. |.i. I............. mi de la caja de texto sms. Gracias a esto, si* n .di h ( , |. ,i, ,,|M cada vez que se suelte una tecla, bien sc.i p.u.i m ..I .. . ,, teres o para borrarlos. Como tenemos ipiiMl....... , |, i,....... .. sobre qu texto debe realizar la operacin, rn ........... | ., sentencia t h i s para pasar el contenido de l.i. ,i |.i ii>i.r i. ,|.| valu) como parmetro.
<TEXTAREA ID="entradal" NAME="sms" R O W . ' i "l " ..i |
ONKEYUP="calcularRestantes(this. valu)" /TI > I ii

"..

Escriba su SMS

Escriba su SMS
H ola, e s t o y e s c r ib ie n d o un s c r i p t muy c h u lo . LueH n ir e n se o . h,

Quedan 160

caracteres

Quedan [96

caracteres

Figura 12.7. Formulario para calcular los caracteres restantes de un SMS.

Figura 12.8. Clculo de los caracteres restantes de un SMS.

En cuanto al cdigo JavaScript, tendremos declarada una constante (LONGITUDJV1AX) con el nmero mximo de ca racteres que se adm iten en la caja de texto. Si un da cambiase esa longitud, no nos costara nada reflejarlo en nuestro cdigo puesto que slo habra que cambiar el valor de esta constante, siendo el resto de cdigo totalmente vlido. Tambin existir en nuestro script una funcin que calcular los caracteres restantes en la caja de texto antes de llegar al l mite, por tanto, para hacer ese clculo se apoyar directamente sobre la constante declarada. El resultado de la operacin se escribir en la caja de texto l o n g i t u d del formulario para que el usuario tenga constancia del espacio que le queda.
292

Llegados a este punto, si nos ponemos a pensar por un mo mento nos daremos cuenta de que este script est incompleto ya que se muestra el nm ero de caracteres restantes, que est muy bien, pero no limitamos de ninguna manera que el usuario pueda escribir ms de 160. Horror! Bueno, buen o... calma la cosa no es tan complicada de solventar. Est claro que slo hay que modificar la ruca funcin que tenemos ( c a l c u l a r R e s t a n t e s por si no lo recuerda) para que detecte cundo liemos llegado al lmite de caracteres y no nos deje escribir mas. Para impedir que el usuario introduzca caracteres extra recurriremos a un truco muy tonto: sustituir el valor de la caja de texto con los prim eros 160 caracteres (o los que marque la constante LONGITUD_max ).
293

www.FreeLibros.com

// Declaracin de constante var LONGITUD_MAX = 160; function calcularRestantes(texto) { // Calculamos los caracteres restantes var resto = LONGITUD_MAX - texto.length; // Detectamos si hemos llegado al limite if (resto < 0) { // Sustituimos el texto actual d o c u m e n t . formSMS.sms.valu = texto. substr(0, LONGITUD_MAX); // Forzamos la llegada al limite resto = 0 ; // Escribimos el resultado en el formulario document.formSMS.longitud.valu = resto;

el puntero para hacer clic sobre un boton ,|, ella, pero se encontrar con una sorprivs.i: ,i h > . .1 , ., ,|. hacerlo! M uahahaahaa (risa malvola). I ,.i vi-iil.m.i. . M ,, ,, i, l y cambiar de sitio. Ahora veremos cmo onm p m , i., m ediante JavaScript. Lo prim ero es crear la pgina HTML que se ni. >-,li ,ti .t m I., nueva ventana (premio.html) y que tendr el boln .1 |<nl ,11
<HTML> <BODY> <H3>Quieres ganar un coche?</H3> <F0RM ID="formulariol" NAME="formPremio"> <INPUT TYPE="button" ID="botonl" NAME="botonS i . " VAI.UK " : . i" <INPUT TYPE="button" ID="boton2" NAME="botonNo" VAI.UK "Ni." </FORM> </BODY> </HTML>

) Si quisiramos evitar hacer referencia a la caja de texto del mensaje dentro de la funcin, tan slo tendremos que pasar como parmetro la referencia directa al objeto (this, a secas) en lugar de su valor. Los cam bios en la funcin serian mnimos.
<TEXTAREA ID="entradal" NAME="sms" RC S = " 3 ' " COLS="60" 0NKEYUP="calcularRestantes(this) ></TEXTAREA> // Declaracin de constante var LONGITUD_MAX = 160; function calcularRestantes(cajaTexto) { // Calculamos los caracteres restantes var resto = L0KGITGD_MAX - cajaTexto.valu.length, // Detectamos si hemos llegado al limite if (resto < 0) { // Sustituimos el texto actual cajaTexto.valu = cajaTexto.valu. substr (0, LONGITUD_MAX) ; // Forzamos la llegada al limite resto = 0; // Escribimos el resultado en el formulario document.formSMS.longitud.valu = resto;

De acuerdo, es un mensaje de lo ms traicionero... pero lo que queremos es divertir al usuario. Para im pedir que se pueda hacer clic sobre el botn S crearemos una pequea funcin que desplace la ventana en tera, haciendo uso del m todo moveTo del objeto window. Para determinar a qu nueva posicin debe dirigirse vamos a utilizar los milisegundos de la hora actual de m odo que las coordenadas salgan un poco aleatorias ya que podemos obtener un valor entre 0 y 999. Dado que las resoluciones de pantalla suelen tener ms pxeles a lo ancho que a lo alto, podramos correr el riesgo de desplazar nuestra ventana demasiado en vertical (una resolucin muy tpica hoy por hoy es 1280x800 pixels), as que para evitarlo de un m odo sencillo dividiremos los milisegundos entre 2, obteniendo un valor entre 0 y 500 (redondeando). Esta funcin tambin ira dentro de la pgina p r e m i o . h tml ", preferiblemente dentro de <HEAD>.
: head> SCRIPT TYPE="text/javascript"> Iunction esquivarsuario ( ) { // Obtenemos la hora actual var ahora = new Date(); // Calculamos las nuevas coordenadas var x = ahora.getMilliseconds(); var y = x/2; // Desplazamos la ventana window.moveTo(x, y);

12.5. La ventana que escapa


El efecto que se consigue con este ejercicio me resulta particularmente gracioso ya que puede ser origen de alguna pequea brom a en nuestra pgina, dndole asi un toque de hum or. La finalidad del cdigo ser crear una nueva ven tana (a modo de pop-up) sobre la que el usuario debe situar
294

I
/CRIPT> /HEAD>

295

www.FreeLibros.com

En cuanto al botn No, tam bin crearemos una sencilla funcin, tam bin dentro de <HEAD>, que muestre un mensaje y seguidamente cierre la ventana:
function mostrarMensaje( ) { // Mostramos un mensaje alert("Nos sorprende su respuesta!"); // Cerramos la ventana window.cise ( );

open ("premio.html", "concui "width=250,height=80, status; c/SCRIPT> </HEAD>

ii" i

} Para terminar con esta pgina, queda asociar estas funciones a los manejadores ONMOUSEOVER del botn trampa, y al m a nejador ONCLICK del otro botn del formulario.
CINPT TYPE="button" ID="botonl" ="botonSi VALUE=S" ONMOUSEOVER="esquivarUsuario()"> CINPT TYPE="button" ID="boton2" NAME="botonNo" VALE="No" ONCLICK=" mostrarMensaje()">

En este ejemplo no necesitamos ilm .i.. i,., i , |i,|H illlli de la ventana devuelto por el m tod o,.| i.. , |)(Mll ............. se realizam ed ian teelb o t n N o in clu id ,,,,, i , i or ultimo, para poder comenzar la b rom .i,.. .... i,........ .. cion al atributo H REF del enlace:
Haga clic c a HREF=" javascript:abrirPr.mlu()" para descubrir el gran premio que le enpi.i, *

Listos para ver la reaccin de los usuarios

Con esto tendremos preparada la pgina lista para ser tra viesa con el usuario. Vam os entonces con la pgina que abrir este pop-np ( c o n c u r s o . html). En este caso, se mostrar en la pantalla un atractivo enlace que nos invitar a participar en un concurso. Cuando hagamos clic sobre l, se abrir una nueva ventana que nos revelar el premio al que optamos. De este modo, prim eram ente tenemos el enlace:
CHTML> CBODY> CH3>Concurso del dac/H3> Haga clic CA HREF="">aquic/A> para descubrir el gran premio que le espera. </BODY> C/HTML>

No hemos puesto una pgina destino en el enlace ya que queremos abrirla mediante JavaScript para poder fijar algunos atributos como el tamao o la posicin inicial. Ahora vamos con la funcin que abrir una ventana y cargar la pgina " p r e m i o . ht ml " en ella. Esta nueva ventana tendr unas di mensiones concretas y ocultaremos la barra de estado (par metro opcional s t a t u s ) .
CHEAD> CSCRIPT TYPE="text/javascript"> function abrirPremio( ) { // Abrimos una ventana con la pgina del premio

12.6. Acceso restringido mediante una contrasea


Alguna vez ha deseado que slo un grupo de personas pueda ver ciertas pginas de su W eb? Este ejercicio podr lodo^falible31* 6 ^ necesidad' aunque no se trate de un m-

296

www.FreeLibros.com

297

Lo que queremos conseguir es que las personas que entrena nuestra Web tengan que introducir una contrasena (previamente proporcionada) para poder acceder a secciones concre . Vam os a imaginar que tenemos un enlace por cada seccin oue o n S t , o sitio Web y que la mayora de e los nos dirigen directamente a la pgina correspondiente, salvojuno Solicita primero una contrasea para comprobar si tenemos noP a seccidn. Un conjunto posible de enlaces podra ser el siguiente:
<H3>Lista de secciones de mi Web</^ > _ <A HREF="fotos.html">Mis fotos</AXBR /> - <A H R E F = " c a n c i o n e s ,html">Mis c a n c i o n e s preferidas -/<A<HREF="cosas,html">Cosas que me gustan</A><BR />
- <A
H R E F = "

texto = prompt ("Por favor, int .. I n . . i, t f Q U l M f h " 1 // Si ha pulsado Cancelar o no l i . t nillw if (texto == nuil | | texto | // No hacemos nada return;

}
// Comparamos si la contrasea i ,|i. | if (texto == "ChachiQueSi") ( // Redirigimos a la zona priv.nl.i location.href = "zonaprivada .I i lmi " i } else ( // En otro caso, mostramos un mnn i| alert ("Lo siento, la contran(*n tm .... i i . i . "i

} } Ahora que ya tenemos todo el sistema de iil.ul iimn tado, slo queda com pletar el enlace de l.i .......i |niv,id.i asociando esta funcin a su manejador ON(' 1.1' i (Lmihicii funcionara si lo ponem os en el atributo HKI-ll'). |
- <A HREF=, f javascript:void (0) " ONCLICK comprobarAcceso ( ) ">Zona privada</A> ( l ' u i i it i i i l 1.1 i h . i )
[A plicacin JavaScript] Por favor, introduce la contrasea

J a v a S c r ipt:voi d (0) ">Zona p n v a d a < / A >

(con contrasea)

ILista de secciones (le ini Web


- Mis fotos _ M<; ranclones preferidas - Cosas que me gustan - Zona privada (con contrasea)

Figura 12.10. Lista de secciones.


Aceptar | Cancelar

Com o podr deducir, los tres prim eros enlaces nos llevan directos a la seccin que representan, mientras que el ultim corresponde a una zona privada donde mostramos informacin a je r io queremos que vea todo el mundo. Hemos rellenado de momento su atributo HREF con una llamada a la funcin v o id T m e v ^ a r revelar la pgina de destino y as solicitar la contra t a al Dulsar ese enlace antes de redirigirnos a la seccin. P a r a co m p ro b si el visitante actual conoce la contrasena, au e le otorra el paso libre a la zona privada, vamos a construir una funcin JavaScript (no se lo esperaba, v ^ d a jO q u e re c o g _ p 1 texto introducido p o el usuario y lo com para con la co ^ trasea d T acceso v id a . S i coincide, entonces; se le red rn g ra hacia la pgina que alberga nuestro g n secreto. En otro caso, le mostraremos un m ensaje advirtiendole del erro .
function com p r o b arAcceso( ) { // Declaracin de variables var texto; // Pedimos la contrasea al usuario

Figura 12.11. Peticin de contrasea para entrar en la zona privada.

Opcionalmente, podemos darle un toque ms profesional a esta restriccin de acceso si le damos al usuario un nmero mximo de intentos para escribir la contrasea correcta, y as evitar que pruebe todas las que quiera y acabe dando con la buena. Vamos a aadir esta nueva condicin a la funcin com p r o b a r A c c e s o , dando hasta tres intentos para m eter la con trasea. Para ello debemos tener una variable de mbito global iiue nos sirva como contador de los intentos que se llevan.
.SCRIPT TYPE="text/javascript"> I I Declaracin de variable global var numerolntentos = 0; function comprobarAcceso( ) { // Declaracin de variables var texto;

/ / S i hemos llegado al mximo de intentos

298

299

www.FreeLibros.com

if (numerolntentos 3) { / / N o hacemos nada return;


// Pedimos la contrasea al usuario texto = prompt("Por favor, introduce la contrasea ); // Si ha pulsado Cancelar o no ha escrito nada

c u p e r a r C o o k i e que creamos en el capitulo H . I .. 11 , i.l.t.il.i-, cookies, para facilitarnos la tarea de manfj.u l.c. \ n ih n tareas adicionales en la funcin compri>h.i i / \ * . i. 1. Comprobar que no tiene creada n u r s li.i , , m i. , .le solicitarle la contrasea. 2. Crear nuestra cookie al agotar todos lo*, m lniln |.,u,i entrar. Veamos cmo integrar la comprobacin ili- I.i
<SCRIPT TYPE="text/javascript"> // Declaracin de variable global var numerolntentos = 0; function comprobarAcceso( ) ( // Declaracin de variables var texto; // Si est creada la cookie if (recuperarCookie("intentosAgotado") / / N o hacemos nada ^ return;

if (texto == nuil

I I texto == / / N o hacemos nada return;

i<

// Comparamos si la contrasea es vlida if (texto == "ChachiQueSi") { // Redirigimos a la zona privada location.href = "zona_privada.html";

} "/'incrementamos el nmero de intentos que lleva numeroIntentos++; // Mostramos un mensaje alert("Lo siento, la contrasena no es correcta.\n" + "Te quedan " + (3 - numerolntentos) " intentos.");

I- "")

)
I I Pedimos la contrasea al usuario
texto = prompt("Por favor, introduola contrasea"); // Si ha pulsado Cancelar o no ha escrito nnda if (texto == nuil | | texto == "") ( // No hacemos nada return;

> }
</SCRIPT>
[Aplicacin Ja va S c rip t]
Lo siento, la contrasea no es correcta. Te quedan 2 intentos,

}
// Comparamos si la contrasea es vlida if (texto == "ChachiQueSi") { // Redirigimos a la zona privada location.href = "zona_privada.html"; } else { // Incrementamos el nmero de intentos que lleva numeroIntentos++; // Mostramos un mensaje alert("Lo siento, la contrasea no es correcta.\n" + "Te quedan " + (3 - numerolntentos) + " intentos."); / / S i hemos llegado al mximo de intentos if (numerolntentos = 3) { // Creamos la cookie almacenarCookie("intentosAgotados", 1);

_L

Figura 12.12. Mensaje con informacin del nmero de intentos restantes.

Esto tiene mejor p in ta... Aunque se p o d r a mejorar un poco ms para hacer m s efectiva nuestra restriccin. Ahora mismo el usuario tiene tres intentos y una vez agotados todos ya no se le pedir ms veces la contrasena, pero si eu su a rio ^ s un poco picaro y recarga la pgina volver a tenerotros tres intentos puesto que se carga de nuevo todo el cdigo y el contador se reinicia (ouch!). Una forma de controlar m ejor si el usuario ha agotado sus intentos P^ra en t a en la zona privada es crear una cookie que nos permita marcarle V as poder evitar concederle ms oportunidades Para esto debemos recurrir a las funciones a l m a c e n a r C o o k i e y r
300

} } }
/SCRIPT>

301

www.FreeLibros.com

A hora la cookie se crea con una caducidad de sesin, es decir hasta que cerrem os la ventana del navegador. Por lo tanto', si el usuario accede despus a la pagina volvera a tener tres intentos. Esto se puede solucionar am pliando el tie P de duracin de la cookie m ediante el tercer param etro de la fiincin a l m a c e n a r C o o k i e , donde podem os decir que la cookie se m antenga durante dos horas, cinco das, etc.
// Duracin de 2 horas var caducidad = new Da t e (); caducidad. setHours(hoy.getHourst) + 2); a l m a c e n a r C o o k i e ("intentosAgotados", 1, caducidad), // Duracin de 5 das var caducidad = new Date O ; caducidad. setDate(hoy.getDate( ) +5); .h =h \a l m a c e n a r C o o k i e ("intentosAgotados", 1, caduci

Cada celda se identificar mediante la concatenacin de su nmero de fila y su nmero de columna, por lo que la casilla situada arriba a la izquierda es la "00", la de su derecha la "01" y la siguiente la "02".
<H3>Juego de las 3 en raya</H3>
CTABLE BORDER="l"> <TR>

<TD ID="casillaOO STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla01" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla02" STYLE="width: 50px; height: 50px"x/TD> </TR>
<TR>

12.7. Las tres en raya


En este ltimo ejercicio vamos a recrear el famoso juego de las tres en raya o tic-tac-toe utilizando un poco de HTML y JavaScript S m o bien sabr, la finalidad de este juego para dos personas es situar tres figuras en lnea de forma vertical, horizontal o incluso diagonal dentro de un tablero cuadrado de tees casillas de anch por tees de alto (haciendo un total de nueve). O b v i a m e n t e el primer jugador que lo consiga ser el vencedor, aunque puede darse la posibilidad de que ninguno de ellos lo haga por estar todas las casillas rellenas sin haber logrado una^ U na vez claras las reglas, lo prim ero de todo es dibujar cl tablero en nuestra pgina, para lo que recurriremos allom as sencillo: una tabla de tres filas por tres columnas. T am b en aprovecharem os para identificar cada celda (que haran de casillas del tablero) de acuerdo al siguiente esquema:
COLUMNAS

<TD ID="casillalO" STYLE="width: 50px; height: 50px"X/TD> <TD ID="casillall" STYLE="width: 50px; height: 50px"X/TD> <TD ID="casillal2" STYLE="width: 50px; height: 50px"X/TD>
</TR> <TR>

<TD ID="casilla20" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla21" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla22" STYlE="width: 50px; height: 50px"x/TD>
</TR>

</TABLE>

Juego de las 3 en raya

Figura 12.14. Nuestro tablero de juego.

Figura 12.13. Esquema de nombrado de celdas.

Una buena forma de representar este tablero en nuestro script sera crear un objeto con sus propiedades y mtodos especficos, de m anera que podrem os aplicar todo lo que
303

www.FreeLibros.com

propiedades: . c a s i l l a s : Representarn, obviamente, todas las posiciones en las se puede situar una f i g u r a ' o g r a el obietivo del juego. La forma de recrearlo sera a travs de un array bidim ensional que verem os mas adelante. En cada posicin se almacenar la figura que la ocup . t u r n o : Indica cul de las dos figuras P O ^ e n e ^l turno actual. Las representaremos mediante los carac ^ M o v i m i e n t o s : E s un c o n t a t o del nm ero do m ovimientos o figuras que ya se han sitado sobre e tablero Esto nos ayudar a determmar cuando ha ter minado la partida por no quedar huecos libres. Ademas, X p r o b a L s t a propiedad ser ms rpido que recorrer el tablero entero en busca del nmero de casillas sm utilizar. En cuanto a los m todos, tambin tendrem os los mismos que en la vida real: . i n i c i a l i z a r T a b l e r o : Deja el tablero vaco listo para empezar una nueva partida y tambin establece a que figura corresponde el primer turno. Asimismo, establece que el nmero de movimientos realizados es cero puesto aue vamos a comenzar a jugar. . d e t e c t a r L i n e a : Este m todo se encarga de analizar la situacin actual del tablero para com probar si hay una jugada vencedora, es decir, alguien ha consegu las tres en raya. Para ello debe exam inar las casillas en horizontal, vertical y diagonal en busca de tres figura iguales seguidas. Con el fin de sim phficarlaapariencia del cdigo crearemos tres pequeos mtodos auxiliares para cada uno de los posibles tipos d e detec tarLineaHorizontal, d e t e c t a r L m e a V e r t ic a l . L ^ a r M o v i m i e n t o : ' t o r d a una ju gada sobre el tablero fijando en la casilla indicada la figura del turno ' e I n c r e m e n t a n d o el nm ero de m ovim ientos realizados en la partida. Aqu tam bin definiremos un mtodo auxiliar ( c o n t i n u a r P a r t i d a ) que: se e^ a r a ra de comprobar si este movimiento causa la victoria dei r u g a d X c tu a l mediante el m todo d e t e c t a r L i n e a , as:

dando por finalizada la partida. Si no es as, entonces debe cambiar el tum o a la otra figura, siempre y cuando haya posiciones libres donde ponerla. Despus de este anlisis, nuestro objeto quedara formado

Objeto tablero
Propiedades casillas turno numMovimientos inicializarTablero detectarLineaHorizontal detectarLineaVertical detectarLineaDiagonal detectarLinea marca rMovimi^nto

Mtodos

Figura 12.15. Nuestro objeto tablero.

Ahora ya podemos comenzar a trasladar todas estas pa labras a cdigo JavaScript. Empezaremos por lo ms bsico, crear la estructura del objeto T a b l e r o :
function Tablero( ) { // Lista de propiedades // Lista de mtodos

} Despus vendrn las propiedades que, recuerde, deben ir junto con la sentencia t h i s .
// Lista de propiedades this.casillas; this.turno; this.numMovimientos;

Como dijimos al definir la propiedad c a s i l l a s , el tablero estar representado mediante un array bidimensional de 3x3 posiciones. Para conseguir esto debemos crear primero un array unidimensional de tres posiciones para despus convertir cada una de ellas en otro array unidimensional de tres posiciones, con lo que obtenemos un total de nueve posiciones.
Iliis .casillas = new rray(3); tur(var i=0; i<3; i++) { this.casillas[i] = new Array(3);

I
305

www.FreeLibros.com

Hecho. No es necesario inicializar las otras propiedades ya que lo harem os desde su mtodo i n i c i a l i z a r T a b l e r o , el cual debe vaciar el tablero primeramente, accin que com prender dos fases: 1. Dejar el array c a s i l l a s sin figuras en todas las posi ciones, sustituyndolas por una cadena vaca 2. L im piar la tabla H TM L que rep resen ta el tablero para que los jugadores puedan volver a colocar sus figuras. Com o am bas fases estn directam ente relacionadas, las realizaremos en un nico paso. Lo harem os definiendo dos bucles f or: uno para recorrer las filas y otro para las columnas, de manera que pasaremos por todas las posiciones posibles. Adems, como hem os creado el identificador de cada casilla de la tabla HTML como la com binacin del nmero de fila y de columna, nos ser realmente fcil acceder a ellos mediante estos bucles y el mtodo g e t E l e m e n t B y l d . Para borrar la figura de la celda usarem os su propiedad innerHTML y el espacio en blanco de HTML (&nbsp).
// Limpiamos las casillas for(var fila=0; fila<3; fila++) { for(var col=0; col<3; col++) { this.casillas[fila][col] =
document.getElementByld("casilla" + fila + col) .

Por ultimo, el mtodo tambin iguala .i ......... de movimientos en la jugada actual. Esto cn l, i !
/ / R e m i d a m o s el nmero de movimientos this.numMovimientos = 0;

,,

Veamos entonces la construccin completa di'l que tenga una visin global del mismo.

..........

this.inicializarTablero = function (){ // Declaramos las variables var azar = Math.round(Math.random()); // Limpiamos las casillas for(var fila=0; fila<3; fila++) { for(var col=0; col<3; col++) { this.casillas[fila][col] = ""; document.getElementByld("casilla" + fila + col).innerHTML = "finbsp;";

}
// Establecemos el turno if (azar == 0) { this.turno = "O"; } else { this.turno = "X";

'''

) }
// R e m i d a m o s el nmero de movimientos this.numMovimientos = O -

innerHTML = "&nbsp;";

} } Adicionalmente, dentro de este mtodo tenem os que esta blecer a qu figura corresponde el prim er turno. Para hacerlo de una forma original recurriremos al azar gracias al mtodo random del objeto Math, de modo que, una vez redondeado el nmero aleatorio (mtodo round), establecerem os el turno para la figura "O" si sale un cero, o por el contrario a la figura "X" si sale un uno. Slo podremos obtener esos dos valores puesto que random da un nmero real comprendido entre ellos que adems rendondearemos.
II Establecemos el turno
var azar = Math.round(Math.random()) ;
if (azar == 0) (

Los siguientes mtodos que implementaremos sern los relacionados con la comprobacin de una jugada ganadora Empezaremos por la ms sencilla: detectarLineaDiagonal" ara saber si existe una jugada en diagonal que finalice la partida m eeHabSlero- C mpr bar las dos l cas A g o n a le s que existen 1. La que va desde la casilla superior izquierda (fila 0 y columna 0) hasta la inferior derecha (fila 2 y columna 2 . La que va desde la casilla superior derecha (fila 0 v columna 2) hasta la inferior izquierda (fila 2 y columna

this.turno = "O"; } else ( this.turno = "X";

l i e v a i& o n La a a ,T b a )" h a b r **1 " r


www.FreeLibros.com

Como es indiferente el sentido dentro de la diagonal (arriba

}
306

quet una lugada sea vlida en diagonal, sus casillas t deben estar vacias y adems contener la misma figura en elIas- En realidad nos basta con com probar si la primera
307

casilla no est vaca para despus comprobar que todas tienen la misma figura, ya que si contienen una figura no estaremos comparando con el valor vaco.
this.detectarLineaDiagonal = function ( ) { // Comprobamos la diagonal hacia la derecha if (this.casillas[0][0] != "" && this.casillas[0][0] == this.casillas[1][1] && this.casillas[1][1] == this.casillas[2][2]) { return true;

this.casillas[1 ] [col] return true;

this.casi]In|j ,[tml., ,

} I
I I En otro caso, no hemos encontrado una Urina return false;

} Con todos estos mtodos auxiliares definidos, el nilenlo d e t e c t a r L in e a nos queda la mar de sencillo de implenn-ntai puesto que bastara con comprobar cada uno de los tres p<.sibl.-s tipos de lmeas (horizontales, verticales y diagonales).
this.detectarLinea = function ( ) { return this.detectarLineaHorizontal( ) | | this.detectarLineaVertical( ) | | this.detectarLineaDiagonal( );

I I Comprobamos la diagonal hacia la izquierda


if (this.casillas[0][2] != "" && this.casillas[0][2] = this.casillas[1][1] && this.casillas[1][1] == this.casillas[2][0]) ( return true;

I I En otro caso, no hemos encontrado una linea


return false;

) Ahora nos iremos en las que realizan esta comprobacin, pero de forma horizontal o vertical, cuyo funcionamiento es muy similar. El mtodo detectarLineaHorizontal debe recorrer cada fila para comprobar si la figura de todas las co lumnas es la misma, mientras que detectarLineaVertical recorrer cada columna comprobando las figuras en cada fila. En ambas tambin nos aseguraremos de que la primera casilla no est vaca, tal y como hicimos al escribir detectarLinea Diagonal. Estos mtodos quedaran entonces as:
this.detectarLineaHorizontal = function ( ) { I I Comprobamos cada fila for(var fila=0; fila<3; fila++) ( if (this.casillas[fila][0] != "" && this.casillas[fila][0] == this.casillas[fila]

Escrito de esta forma, en cuanto haya una jugada vlida en alguna de las tres situaciones, el mtodo detectarLinea revelara que existe. tal P r ah ra? Esper que bien Vamos entonces con e l mtodo co n t m u arPartida que comprueba si el ltimo m ovim iento otorga la victoria al ju gad or actual (m todo detectarLinea), mostrando un mensaje de enhorabuena a l ganador y dando por finalizada la partida. En otro caso cambiara el turno si quedan posiciones libres en el tablero (o lo que es lo mismo, no hemos hecho el mximo nmero de movmuentos) o muestra un mensaje indicando que la partida ha terminado si no es as.
this.continuarPartida = function ( ) { I I Si hay tres en raya if (this.detectarLinea()) { // Finalizamos la partida this.numMovimientos = 9; // Damos la enhorabuena alert("Tres en raya! Enhorabuena ") ) else (
pI

[1] SS
this.casillas[fila][1] == this.casillas[fila]

[2]) (
return true;

} )
/ / E n otro caso, no hemos encontrado una linea return false;

}
this.detectarLineaVertical = function ( ) ( // Comprobamos cada columna for(var col=0; col<3; col++) ( if (this.casillas[0][col] != "" && this.casillas[0][col] = this.casillas[l][col] &&

I I I Si no ha terminado la partida if (this.numMovimientos < 9) { // Cambiamos el turno if (this.turno == "O") { this.turno = "X"; ) else { this.turno = "O";

}
} else { // En otro caso, avisamos del final de la partida

308

www.FreeLibros.com

309

alertC'La partida ha terminado sin vencedor.");

//

In icia liz a m o s

el

ta b le ro

) ) ) Escribamos finalmente el ltimo mtodo que nos queda por incluir: marcarMovimiento. Aqu debem os registrar la jugada realizada sobre el tablero, guardando la figura del tum o actual en la casilla que reciba como parmetro (si no est ocupada y no ha terminado la partida, claro) y tambin sumando el movimiento al contador general (propiedad numMovimientos). Inm ediatamente despus hay que mirar si la partida sigue o no, que lo dejaremos en manos del mtodo continuarPartida.
this.marcarMovimiento = function (fila, col) { // Si no ha terminado la partida if (this .numMovimientos < 9) ( // Si la casilla no est ocupada if (this.casillas[fila][col] == "") ( // La ocupamos this.casillas[fila][col] = this. turno; document.getElementByld("casilla" + fila + col).innerHTML = this.turno; I I Incrementamos el nmero de movimientos this.numMovimientos++; // Comprobar si sigue la partida this.continuarPartida( );

tresE n P aya.i n i c i a l i zarT ab lero ();

)
</SCRIPT>

</HEAD>
<BODY ONLOAD=" c i e a r T a b 1e r o ( ) " >

Seguidamente, y ya para terminar, hay ( , | u . i,n .iliu m . c l i c k de cada una de las celdas (etiquetas TI> ) nli,* | Ui> cin que registre el movimiento realizado, ya ipu - 1 .1.....I. .i usuario va a pulsar para situar las figuras. Sin rin l'.ii}............ vez no sern manejadores a travs de HTML, sinml. | .> ........... i (,i puesto que vamos a asociar la misma funcin a Un l . <II.. , ...... futura modificacin, por ligera que sea, nos obll>,,.. i.i ......... biar los nueve manejadores. Hacindolo a travs il. |. r . podemos asignar de 'un plum azo' la misma f u n c i m i ,i i . <<I , . evitando que una modificacin en su cdigo no ulr. Ir ......... funciones sino a una sola. De este modo, veamos qu debe hacer la funi mu .|ii. ... gistra el movimiento: Obtener la fila y la columna a la que co n v .p .m .lr I.. celda actual a travs de su identificador, d.nln i|ii. . i., informacin corresponde a sus dos ltimos u im . leu Llam ar al m todo m a r c a r M o v im ie n t o ilel oh|rU T a b l e r o para que el movimiento quede re^isli.uln pasando como parmetros la fila y columna ol>lcm. I... en el paso anterior. Antes de ver estos pasos transformados en cdigo vamos .i explicar cmo ser su asignacin a los manejadores. Despus veremos ambas operaciones juntas. Como todos los elementos HTML a los que tenemos que incluir un manejador son celdas de una tabla, podemos aprove chamos del mtodo getElementsByTagName que nos ofrece el objeto document gracias al cual podremos agrupar en un ai my todas las celdas para despus asignarles el manejador una a una dentro de un bucle for. La nica restriccin que supone hacer esto es que en la pgina no puede haber ms celdas que no correspondan al tablero, puesto que les asignaramos el mismo manejador errneamente. Si eso fuese inevitable podramos solucionarlo haciendo un pequeo filtro a la hora de asignar el manejador, comprobando si el identificador de la celda comienza por "casilla" por ejemplo (es una idea de tantas). Vamos, ahora s, a escribir el cdigo que dotar de vida al tablero de nuestra pgina:
311

} } 1 Bueno, pues nuestro objeto Tablero ya est por fin com pleto. Tan slo nos quedara preparar la tabla HTML (que hace de tablero) para que el usuario pueda interactuar con l y echarse una partidita con alguien. Primeramente hay que crear un nuevo tablero en una va riable global (tresEnRaya) e implementar una funcin que se encargar de inicializarlo. Esta funcin la asociaremos al evento ONLOAD del documento para que realice las operaciones al cargar la pgina.
<HEAD> <SCRIPT TYPE="text/javascript"> I I Declaramos una variable global var tresEnRaya; function crearTablero( ) ( H Creamos una instancia del tablero tresEnRaya = new Tablero();

310

www.FreeLibros.com

// Obtenemos todas las celdas de la tabla var celdas = document.getElementsByTagName("TD"); // Asignamos el manejador a todas las celdas for(var i=0; icceldas.length; i++) { // Asignamos el manejador celdas[i].onclick = function ()( // Obtenemos la fila (penltimo carcter) var fila = this.id.substr(-2, 1); // Obtenemos la columna (ltimo carcter) var columna = this.id.substr(-1); // Registramos la jugada en el tablero tresEnRaya.marcarMovimiento(fila, columna);

ITres en raya! Enhorabuena.

) > Slo destacar que este ltimo cdigo debe situarse al final de la pgina ya que necesita que exista la tabla para poder asignarle un manejador. Si lo pusiramos al principio no encon trara ningn elemento de celda puesto que se definiran justo a continuacin. Otra opcin sera incluirlo como parte del cdigo que se ejecuta con el manejador O N L O A D del documento. Pues dicho esto, ya estara todo listo para jugar. Qu, una partidita:)?
Figura 12.18. Final de partida con vencedor.

Me gustara adems aprovechar este ejemplo para mostrarle cmo puede reutilizar fcilmente el objeto tablero en otras pginas, sin tener que copiar el cdigo en ella. Si recuerda del captulo de introduccin se coment que se poda realizar esto utilizando el atributo SRC de la etiqueta <SCRIPT> junto con un fichero de extensin .js". Para este ejemplo, el fichero podra llamarse objeto_tablero.js" que incluira el siguiente cdigo (as de paso puede ver todo agrupado, en lugar de desperdigado):
I I Declaracin del objeto tablero function Tablero() { // Lista de propiedades this.casillas = new Array(3); for(var i=0; i<3; i++) { this.casillas[i] = new Arr ay(3);

Figura 12.16. Transcurso de una partida.

)
t h i s .turno;

0 X X

X X o

0 0 X
m

this.numMovimientos; // Lista de mtodos this.inicializarTablero function (){ // Declaramos las variables


var azar = Math.round(Math. r a n d o m ());

1 [A p lic a c i n J a v a S c r ip t] La partida ha terminado sin vencedor.

&
| Aceptar |

I I Limpiamos las casillas for(var fila=0; fila<3; fila++) { for(var col=0; col<3; col++) { this.casillas[fila][col] = document.getElementByld("casilla" + fila + col).innerHTML = "Snbsp;";

)
Figura 12.17. Final de partida sin vencedor. 312

)
// Establecemos el turno

313

www.FreeLibros.com

if (azar == 0) { this.turno = "0"; } else ( this.turno = "X";

)
// Reiniciaraos el nmero de movimientos this.numMovimientos = 0;

this.detectarLinea = function ( ) { return this.detectarLineaHorizontal( ) | | this.detectarLineaVertical( ) | | this.detectarLineaDiagonal();

>
this.continuarPartida = function ( ) ( / / S i hay tres en raya if (this.detectarLinea()) ( // Finalizamos la partida this.numMovimientos = 9; // Damos la enhorabuena alert("Tres en raya! Enhorabuena."); } else ( I I I Si no ha terminado la partida if (this.numMovimientos < 9) ( // Cambiamos el turno if (this.turno == "O") ( this.turno = "X"; ) else ( this.turno = "O";

}
this.detectarLineaDiagonal = // Comprobamos la diagonal if (this.casillas[0][0] != this.casillas[0] [0] == this.casillas[1][1] = return true; function ( ) { hacia la derecha "" && this .casillas[1][1]&& this.casillas[2] [2]) {

}
// Comprobamos la diagonal if (this.casillas[0][2] != this.casillas[0][2] == this.casillas[1][1] == return true; hacia la izquierda "" && this.casillas[1][1]&& this.casillas[2][0]) {

)
/ / E n otro caso, no hemos encontrado una linea return false;

}
t else ( / / E n otro caso, avisamos del final // de la partida alert("La partida ha terminado sin vencedor.");

this.detectarLineaHorizontal = function ( ) { // Comprobamos cada fila for(var fila=0; fila<3; fila++) { if (this.casillas[fila][0] != "" && this.casillas[fila][0] == this. casillas[fila][1] S& this.casillas[fila][1] == this. casillas[fila][2]) { return true;

) )

) }
/ / E n otro caso, no hemos encontrado una linea return false; this.detectarLineaVertical = function ( ) ( // Comprobamos cada columna fo r (var col=0; col<3; col++) ( if (this.casillas[0][col] != "" && this.casillas[0] [col] == this.casillas[1] [col] & & this.casillas[1][col] == this.casillas[2] [col]) I return true;

this.marcarMovimiento = function (fila, col) ( // Si no ha terminado la partida if (this.numMovimientos < 9) { // Si la casilla no est ocupada if (this.casillas[fila][col] = "") { // La ocupamos this.casillas[fila][col] = this.turno; document.getElementByld("casilla" + fila + col).innerHTML = this.turno; // Incrementamos el nmero de movimientos this.numMovimientos++; // Comprobar si sigue la partida this.continuarPartida();

) }
f

I Gracias a esto, el cdigo de la pgina quedar ms despejado puesto que sustituiramos todo lo anterior por esta nica lnea, dentro de < H E A D > , quedando la pgina completa como sigue:'
315

}
// En otro caso, no hemos encontrado una lnea return false;

314

www.FreeLibros.com

<HTML> <HEAD> <SCRIPT TYPE="text/javascript" SRC="objeto_tablero. js"X/SCRIPT> <SCRIPT TYPE="text/javascript"> I I Declaramos una variable global var tresEnRaya; function crearTablero( ) { I I Creamos una instancia del tablero tresEnRaya = new tablero(); I I Inicializamos el tablero tresEnRaya.inicializarTablero();

I I Obtenemos la fila (penltimo carcter) var fila = this.id.substr(-2 , 1); // Obtenemos la columna (ltimo carcter) var columna = this.id.substr(-1 ); I I Registramos la jugada en el tablero tresEnRaya.marcarMovimiento(fila, columna);

)
</SCRIPT> </BODY> </HTML>

}
</SCRIPT> </HEAD> <BODY ONLOAD="crearTablero()"> <H3>Juego de las 3 en raya</H3> <TABLE B0RDER="1"> <TR> <TD ID="casillaOO" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla01" STYLE="width: 50px; height: 50px"X/TD> <TD ID="casilla02" STYLE=width: 50px; height: 50px''x/TD> </TR> <TR> <TD ID="casillalO" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casillall" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casillal2" STYLE="width: 50px; height: 50px"x/TD> </TR> <TR> <TD ID="casilla20" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla21" STYLE="width: 50px; height: 50px"x/TD> <TD ID="casilla22" STYLE="width: 50px; height: 50px"x/TD> </TR> </TABLE> <SCRIPT TYPE="text/javascript"> I I Obtenemos todas las celdas de la tabla var celdas = document.getElementsByTagName(TD"); I I Asignamos el manejador a todas las celdas for (var i=0; K c e l d a s .length; i++) { // Asignamos el manejador celdas[i].onclick = function ()(

No quiero resultarle pesado, ya que este ejemplo ha sido bastante largo, pero no me gustara despedirme sin antes darle otra pequea idea que mejorara a nivel visual nuestro mara villoso script: poner en negrita la jugada ganadora;). Si lo piensa detenidamente y analizando el cdigo que te nemos, seguro que encuentra un sitio donde se puede incluir este cambio sin mucho esfuerzo: las funciones que detectan si hay una jugada ganadora. Dentro de ellas podemos aprove char para saber la combinacin ganadora y ponerla en negrita ni mismo tiempo. Y pensar cmo lo ponem os en negrita? Pues muy fcilmente, sustituyendo el contenido de las celdas correspondiente con la misma figura pasando por el mtodo bold del objeto String.
this.detectarLineaDiagonal = function ( ) ( // Comprobamos la diagonal hacia la derecha if (this.casillas[0 ][0 ] != "" && this.casillas[0 ] [0 ] == this.casillas[1 ][1 ] s this.casillas[l][1 ] == this.casillas[2 ][2 ]) { // Ponemos las celdas en negrita document.getElementByld("casillaOO"). innerHTML = this.casillas[0][0].bold(); document.getElementByld("casillall"). innerHTML = this.casillas[1][1],bold();

document.getElementById("casilla22") . innerHTML = this.casillas[2][2],bold();


return true;

)
// Comprobamos la diagonal hacia la izquierda if (this.casillas [0 ] [2 ] != && this.casillas[0 ][2 ] == this.casillas[1 ][ 1 ] && this.casillas[l][1 ] == this.casillas[2 ][0 ]) { // Ponemos las celdas en negrita document.getElementByld("casilla02"). innerHTML = this.casillas[0][2].bold(); document.getElementByld("casillall") innerHTML = this.casillas[1][1],bold();

316

317

www.FreeLibros.com

document. getElementByld("casilla20"). innerHTML = this.casillas[2][0].bold(); return true;

}
// En otro caso, no hemos encontrado una lnea return false;

)
this.detectarLineaHorizontal = function ( ) { // Comprobamos cada fila for(var fila=0; fila<3; fila++) { if (this.casillas[fila][0] != "" SS this.casillas[fila][0] == this.casillas[fila]

[1] & &


this.casillas[fila][1] = this.casillas[fila]

[2]) {
// Ponemos las celdas en negrita document.getElementByld("casilla" + fila + "0").innerHTML = this.casillas[fila][0]. bold ( ); document.getElementById("casilla" + fila + "1").innerHTML = this.casillas[fila][1]. bold ( ); document.getElementByld("casilla" + fila + "2").innerHTML = this.casillas[fila][2]. bold();
return true;

)
I I En otro caso, no hemos encontrado una lnea
return false;

)
this.detectarLineaVertical = function ( ) ( I I Comprobamos cada columna for(var col=0; col<3; col++) { if (this.casillas[0][col] != "" &&

this.casillas[0][col] = this.casillas[1][col] && this.casillas[1][col] == this.casillas[2][col]) ( I I Ponemos las celdas en negrita document.getElementById("casillaO" + col). innerHTML = this.casillas[0][col].bold(); document.getElementByld("casillal" + col). innerHTML = this.casillas[1][col].bold(); document.getElementByld("casilla2" + col). innerHTML = this.casillas[2][col].bold(); return true;

} )
// En otro caso, no hemos encontrado una lnea return false;

)
318

www.FreeLibros.com

13
Un paso ms all de JavaScript

Con todo lo que ha visto en esta gua, tengo la conviccin de que est preparado para enfrentarse a m uchos retos e in cluso seguir avanzando en el dominio de JavaScript porque, aunque no lo crea, esto es casi slo la punta de iceberg. Pero no tema puesto que ya tiene unos buenos cim ientos para comprender rpidam ente las mltiples tcnicas que se basan en este lenguaje. En este captulo pretendo m ostrarle las ms inmediatas cuando se quiere subir el nivel de nuestras pginas Web.

13.1. DHTML
Seguro que le suena haberlo ledo alguna vez por est gua, junto a otro montn de palabros del mismo calibre. DHTML, o HTML Dinmico, es una poderosa combinacin de HTML, hojas de estilo CSS y JavaScript que nos va a permitir incor porar variedad de efectos en nuestras pginas, as como la posibilidad de aumentar la interaccin con el usuario que la visita. Por tanto, nuestras pginas dejarn de ser un simple y aburrido conjunto de texto, imgenes, tablas y otros elementos estticos. Adems, se suele hacer un uso muy intensivo del DOM (es amplsimo) llegando a poder manipular el contenido de una pgina casi por completo. Voy a exponer un ejemplo sin adentrarme mucho, que para eso hay libros especficos muy buenos, con el objetivo de que vea un poco el potencial de DHTML. No creo que le suponga problema el com prender la gran mayora del cdigo.

www.FreeLibros.com

319

Partiremos con una pgina en la que habr varias capas con palabras en ingls que, al pulsar sobre ellas, aparecer otro re cuadro con la traduccin al espaol. Estas traducciones estaran previamente cargadas en nuestra pgina como capas ocultas, de modo que la pulsacin sobre una caja en ingls hara visible su correspondiente traduccin.

</STYLE> </HEAD> <BODY> <DIV ID="traducconl" CLASS="traduccion oculto">Perro</DIV> <DIV ID="traduccion2" CLASS="traduccion oculto">Casa</DIV> <DIV ID="traduccion3" CLASS="traduccion oculto">Silla</DIV> <DIV CLASS="caja">Dog</DIVXbr> <DIV CLASS="caja">House</DIVXbr> <DIV CLASS="caja">Chair</DIV> </BODY> </HTML>

Dog

Le paso a comentar brevemente cada estilo que se ha in cluido, por si no conoce estas definiciones.
House

Chair

Figura 13.1. Pgina inicial.

Tambin estar presente algo que no hemos utilizado en este libro: estilos CSS. Sern muy sencillos para no complicar el ejemplo.
<HTML> <HEAD> <STYLE> .visible { display: block;

visible: Como puede imaginar, nos permite hacer visible una capa. oculto: Muy obvia tambin, nos permite ocultar una capa. caja: Es el estilo que aplicaremos a las cajas con el texto en ingls. Se ajustarn sus dimensiones, se pondr un borde de color rojo y haremos que aparezca el cursor en forma de mano cuando nos pongamos sobre una de estas cajas. traduccin: Muy similar al anterior, pero aplicada a las traducciones en espaol. Como aadido, se colorea el fondo de la capa con un gris claro (#F0 FOFO) y se fija su posicin como absoluta, es decir, nos permitir cambiar su posicin respecto al documento. Por lo dems, nada raro excepto el uso del atributo CLASS que sirve para asignar estilos a un elemento de la pgina. Pero vamos a la "chicha"! Tendrem os que crear dos fun ciones para m ostrar u ocultar las traducciones. Para ello tendremos que cam biar la propiedad className de la capa (nueva para nosotros) con los estilos que correspondan en i ada caso. Adems, para darle un poco de estilo, vamos a hacer que la capa aparezca cerca de la posicin del cursor cuando se hace clic. Si recuerda un poco el captulo 10 refe rente a los eventos, se m encion que exista un objeto event que almacena informacin acerca del evento que se acababa ile producir. Pues bien, aqu s lo usarem os para saber la posicin del cursor y colocar nuestra traduccin muy cerca con las propiedades top y left, que pertenecen a su vez < i style (as que el acceso sera m ediante style.top y ntyle.left)
321

}
.oculto { display: none;

)
.caja { border: lpx solid red; width: 150px; height: 60px; cursor: pointer;

)
.traduccin ( position: absolute; border: 2px solid green; background-color: #F0F0F0; width: 150px; height: 60px;

www.FreeLibros.com

<SCRIPT TYPE="text/javascript"> function mostrarTraduccion(evento, idCapa) ( I I Obtenemos la posicin del cursor var topCapa = e v e n t o .clientY; var leftCapa = evento.clientX + 20; // Hacemos visible la capa d o c u m e n t .getElementByld(idCapa).className = "traduccin visible"; // Colocamos la capa d o c u m e n t .g e t E l e m e n t B y l d (idCapa).style.top = topCapa; d o c u m e n t .g e t E l e m e n t B y l d (idCapa).style.left = leftCapa;

Dog

House

H !>
C asa

>
function ocultarTraduccion(idCapa) { I I Ocultamos la capa d o c u m e n t .getElementByld(idCapa).className = "traduccin oculto";

Figura 13.3. Otra traduccin mostrada junto al cursor.

a tenerlas tradlu^rVen8nte

eS,e eiemP ' es

" s obliga
oup

)
</SCRIPT>

No es demasiado difcil, verdad? Ya slo queda el rematr final, asignando manejadores de eventos a las cajas con textos en ingls. Usaremos el evento MOUSEDOWN en lugar del clsico CLICK para poder capturar el objeto event.
<DIV CLASS="caja" ONMOUSEDOWN="mostrarTraduccion(e vent, 'traduccionl')" ONMOUSEOUT="ocultarTraduccion ('traduccionl' ) " > D o g < / D I V X b r > <DIV CLASS="caja" ONMOUSEDOWN="mostrarTraduccion(e vent, 'traduccion2')" ONMOUSEOUT="ocultarTraduccion ('traduccion2' ) " > H o u s e < / D I V X b r > <DIV CLASS="caja" ONMOUSEDOWN="mostrarTraduccion(e vent, 'traduccion3')" 0NM0SE0UT="ocultarTraduccion ('traduccion3')">Chair</DIV>

oras, resulta muy laborioso de mantener. Lo ideal sera

13.2. AJAX
equipo de f t b T S fUn/ roducto de Empieza ni de un

v e Z ^ r S u n o S b rer ^

G ' C f go JavaScript, entre otras


l3S SglaS de

l'waslript L T w l
P oto

P r Viene ^

^chronous

Qu es eso de comunicamos con el servidor? A estas a ltu ra lodos conocemos los enlaces de una pgina Web v sabemos que, cuando pinchamos sobre ellos e l ' h Y sabf mos

House

Chair

AJAX permite cargar una pgina o una serie de datos Hi i'i lamente sobre un elemento existente de n u e"fra n ^ a t

Figura 13.2. Traduccin mostrada junto al cursor. 322

www.FreeLibros.com

323

es muy til para evitar la recarga continua de una pgina, a la vez que aumentamos la sensacin de velocidad de nuestra pgina. Imagine que tiene una serie de listas desplegables para elegir la poblacin donde vive: pas, provincia y municipio. Al seleccionar un valor de la primera lista (pas), se preguntara al servidor por las provincias correspondientes a la opcin elegida y se rellenara la siguiente lista. Con la ltima lista se procedera de igual forma. En una W eb normal, necesitaramos refrescar o repintar la misma pgina por cada seleccin, nicamente para mostrar las opciones de las listas y sin que cambie nada ms. Como comprender, esto es una prdida de eficiencia muy grande ya que nos estamos trayendo datos de ms desde el servidor en cada recarga. Con AJAX, podemos actualizar cada una de las listas desplegables de forma independiente al resto de la pgina, con lo que slo estam os obteniendo los datos justos y necesarios.
Seleccin p a s E sp a a"
Pas: Espaa Lista de provincias

13.3. jQuery
En realidad no es una tcnica basada en JavaScript sino que se trata de una librera o biblioteca (de tantas), no obs tante me apetece que la conozca porque le ser de gran ayuda cuando quiera m anejar rpidam ente el DOM o crear vistosas anim aciones y, adem s, consiguiendo un cdigo com pai e con la practica totalidad de los navegadores, as que ya solo por los dolores de cabeza que nos ahorrar merece
nHTUT nOS p e r m i t e r e a l i z a r a c c i o n e s p r o p i a s d e J ? l v S l n 0 q U 8 t a m b ie n o c l u y e f u n c i o n e s p a r a t r a b a ja r con A JA X .

m f r de todo es 9 ue es gratuita y con licencia GNU (ht t p : / / w w w . g n u . o r g ) por lo que podr u tilizarla en su proyecto Web. No use "m uas" ni "torrentes", la tiene com pletam ente disponible en su sitio Web http ://www ] q u e r y . com junto a una extensa docum entacin y varios ejem plos. y Nota: No me llevo comisin, lo prometo. Slo soy un fan de esta librera J

Seleccin provincia. "Madrid"


Pas: Espaa

USUARIO

Provincia: Madrid Lista de municipios

v y

SERVIDOR WEB

Figura 13.4. Peticin de datos tradicional.


Seleccin p a s E sp a a"

J o una versin especifica para dispositivos mviles Ha lada jQuery Mobile ( h t t p : //www. j q u e r y m o b ile . com) y mantiene una gran similitud con su "hermana mayor". Por que se la recom iendo? Vem oslo con un ejem plo Imaginemos que tenemos una tabla de 3 columnas por 3 filas por ejemplo, con los atributos ID y CLASS asignados.
<TABLE ID="tabla"> <TR> <TD ID="celdal " CLASS="importante">Texto 1</TD> <TD ID="celda2" CLASS="normal">Texto 2</TD> <TD ID="celda3" CLASS="normal">Texto 3</TD> </TR> [<TR>

l
Lista de provincias

Seleccin provincia: Madrid"

USUARIO

Figura 13.5. Peticin de datos mediante AJAX.

Lista de municipios

SERVIWEB

<TD ID="celda4" CLASS="normal">Texto 4</TD> <TD ID="celda5" CLASS="importante">Texto 5</TD> <TD ID="celda6" CLASS="normal">Texto 6</TD> </TR> <TR>
<TD ID="celda7" CLASS="importante">Texto 7</TD> <TD ID="celda8" CLASS="norinal">Texto 8</TD> <TD ID="celda9" CLASS="importante">Texto 9</TD> </TR> 1/TABLE>

Como puede apreciar en las figuras 13.4 y 13.5, la diferencia es bastante grande en cuanto a volumen de datos que se trans fieren entre nuestro ordenador y el servidor Web.
324

www.FreeLibros.com

325

Ahora supongamos que queremos obtener una de las celdas para cambiarle el texto. Con DHTML tendremos que buscar la celda por su identificador m ediante getElementByld para despus modificar el texto a travs de la propiedad inner HTML.
<SCRIPT TYPE="text/javascript"> // Obtenemos la celda var celda = document.getElementByld("celda4"); // Modificamos el texto celda.innerHTML = "Texto 4 modificado"; </SCRIPT>

<SCRIPT TYPE="text/javascript"> // Obtenemos la celda y modificamos el texto 5 ("#celda4").html("Texto 4 modificado"); </SCRIPT>

Tam bin lo podem os sim plificar en una nica lnea sin utilizar la variable.
<SCRIPT TYPE="text/javascript"> // Obtenemos la celda y modificamos el texto document.getElementByld("celda4").innerHTML = "Texto 4 modificado" ; </SCRIPT>

Quiz est un poco desilusionado porque no es un cambio tan radical como se lo haba vendido. Bueno, esto es de lo ms bsico que se puede hacer:). Vamos a subir de nivel para que vea el potencial real de esta librera. Pongamos que queremos poner en negrita los textos de todas as celdas que tengan aplicado el estilo importante en su atri buto CLASS. Con DHTML, primero buscaremos todas las celdas (mtodo getElementsByTagName) para despus recorrerlas una a una en busca de las que contengan el estilo importante (propiedad className). A las que cumplan esa condicin les modificaremos la propiedad CSS fontWeight, dentro de la propiedad style, que cambia la densidad o grosor del texto. En nuestro ejemplo, lo fijaremos como bold o negrita.
<SCRIPT TYPE="text/javascript"> // Obtenemos todas las celdas var celdas = document.getElementsByTagName("TD"); for(var i = 0; i < celdas.length; i++) ( // Comprobamos si contiene el estilo if (celdas[i].className == "importante") { // Ponemos su texto en negrita celdas[i].style.fontWeight = "bold"

Antes de mostrarle el equivalente usando jQuery voy a comentarle muy brevem ente el manejo bsico. Para buscar un elemento en el documento tendremos que usar el carcter de dlar $ seguido del identificador que deseemos, precedido por una almohadilla (#). Esto nos permite tener acceso a las propiedades y mtodos del elemento que coincida con ese identificador. Esta librera aade varias propiedades y mtodos nuevos a todos los elementos para aumentar la funcionalidad y hacer el i cdigo ms sencillo. Por tanto, para modificar el texto v amos I a usar uno de esos mtodos, concretamente html que es muy fcil de utilizar: Si no lleva parmetros, nos devuelve el texto que tiene I el elemento. I Si le pasamos una cadena, sustituye el texto del ele- I ment. A dvertencia: No olvide incluir la librera en el HEAD de su pgina, indicando la ruta hasta el fichero <S CRI PT
TY P E = "text/javascript" SR C = "libreras/ __________ __________ jq u e r y . j s"x/SCR IPT>

1
</SCRIPT>

Parece bastante sencillo. Y cm o se podr h acer con iQuery? Antes, una pequea explicacin ms. Con jQ uery tambin podemos obtener todas las celdas usando el dlar ($) y el nombre de la etiqueta de celda (TD en este caso)
var celdas = $("TD");

I ero podemos ir an ms all y seleccionar de un plumazo lodos los elementos que tengan un estilo determinado usando n nombre precedido por un punto ( .) .
Var importantes = $(".importante");

Vamos, ahora s, a saber cmo se hara la misma accin usando la librera.

V por ltimo, podemos combinar ambas condiciones- celdas que contengan el estilo importante. De este modo evitam os obtener otro tipo de elementos que tambin tengan aplicado rl mismo estilo (una capa, una imagen, etc.)
Vtr celdasImportantes = $("TD.importante");

www.FreeLibros.com

327

Va viendo cmo se simplifica el cdigo? Demos ahora ol paso final. Para cambiar el texto a negrita tan slo debemos fijar la propiedad f o n t W e ig h t a b o ld com o hicim os con DHTML, pero usando el mtodo css, que se encarga de alterar cualquier propiedad CSS del elemento. Para deleite de los pro gramadores, incluso podremos aplicar este cambio a todas las celdas a la vez sin usar un bucle (se hace internamente) y, por tanto, prescindiendo tambin de una variable que almacene el conjunto de celdas.
<SCRIPT TYPE="text/javascript"> // Ponemos en negrita todas las celdas con el estilo $ ("TD.importante").css("font-weight", "bold"); </SCRIPT>

No s qu efecto le habr causado, pero le puedo asegurar que cuando lo descubr qued fascinado por su potencial y simplicidad. Por supuesto, hay mucho ms detrs de jQuery y se pueden conseguir unos efectos muy llamativos dignos de Flash o PowerPoint. Esta es slo una de todas las libreras que existen para JavaScript, as que le animo a descubrir y utilizar la que ms sea de su agrado. Una pequea pista: h t t p : //w w w .m o o to o ls. n e t (muy sim ilar a jQuery).
confirm("Esto se acab. Nos vemos en la prxima?");

328

www.FreeLibros.com

Palabras reservadas

En todo lenguaje de program acin existen una serie de palabras que no pueden ser utilizadas por el programador para nombrar sus variables, funciones, objetos o cualquier otro elemento, puesto que estn reservadas por el propio lenguaje para nombrar sus sentencias u operadores. Si se permitiese emplear estas palabras, el lenguaje no sabra diferenciar el uso que queremos darle.
Tabla A.1. Lista de palabras reservadas de JavaScript (I). Palabra break case catch continu default delete do else false finally for function if in instanceof new nuil return switch this throw true try typeof var void while with

Aparte de la lista de la tabla A. 1, JavaScript reserv de forma anticipada otra buena lista de palabras puesto que se prevea su uso en posteriores versiones.
Tabla A.2. Lista de palabras reservadas por JavaScript (II). Palabra abstract boolean enum export int interface short static 329

www.FreeLibros.com

Palabra byte char class const debugger double extends final float goto implements import long native package private protected public super synchronized throws transient volatile

Precedencia de operadores

Todos los operadores de JavaScript pueden combinarse entre ellos y utilizarse cuantas veces se quiera por lo que se hace necesario establecer un orden de ejecucin o precedencia entre ellos, el cual puede consultar en la tabla B .l.
Tabla B.1. Precedencia de operadores

Precedencia 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Operadores

menos) typeof void delete

0 () new ! - - (signo

+ (signo

ms)

++

*/% + (suma) - (resta) > <<=>>= in instanceof


&
A

I
& &

? : = += -= *= /= % =& = A= |= = = >=
331

II

www.FreeLibros.com

Referencia rpida a los objetos de JavaScript

En este apndice podr encontrar una referencia a todos los objetos de JavaScript, con sus propiedades y mtodos, junto con una breve descripcin.

C.1. Boolean
Crea valores booleanos a partir de un valor. Su constructor es el siguiente:
<SCRIPT TYPE="text/javascript"> // Objeto Boolean var nombre_variable = new Boolean(valor); </SCRIPT>

El valor booleano que se devuelve depende de su par metro: Si el parm etro es omitido o es 0, -0, nu 1 1 , cadena vaca (" "), valor booleano f a l s e , valor u n d e f in e d o valor NaN, entonces el objeto devuelve f a l s e . En cualquier otro caso, devuelve t r u e . Este objeto no tiene propiedades o mtodos.

C.2. Number
Crea instancias con un valor num rico (entero o real). Su i (instructor es el siguiente:
SCRIPT TYPE="text/javascript"> t - // Objeto Number var nombre_variable = new Number(valor); |l/SCRIPT>

333

www.FreeLibros.com

En funcin del valor que se reciba se obtienen distintos resultados: Si no recibe un valor, devuelve un 0. Si es un nm ero (expresado com o tal o en forma de string), entonces inicializa el objeto con el nmero que recibe. La cadena vaca equivale a un 0. En caso de que reciba un valor no numrico, devuelve NaN. El valor false se interpreta como un 0 y true como un 1.

<SCRIPT TYPE="text/javascript"> // Objeto String var nombre_variable new String(valor); </SCRIPT>

El valor que le pasemos al constructor ser convertido a una cadena de texto en todos los casos.

C.3.1. Propiedades
length: Nmero de caracteres que contiene la cadena.

C.2.1. Propiedades
MAX_VALUE: El m ayor nm ero que representable en JavaScript. MIN_VALUE: El menor nmero representable. NaN (Not A Number ): Valor especial que indica que el valor no es un nmero. POSITIVE_INFINITY: Valor especial (Infinity) que indica el nmero es mayor que el mximo representable (MAX_VALUE). NEGATIVE_INFINITY: Valor especial (-Infinity) que indica el nmero es menor que el mnimo representable (MIN_VALUE).

C.3.2. Mtodos
anchor (nombre),link (direccin) :Crean un ancla HTML y un enlace HTML respectivamente. b ig ( ) , b lin k ( ) , b o ld (), f ix e d (), i t a l i c s ( ) , s m a ll ( ) , s t r i k e ( ) , su b ( ) , sup ( ): Encierran el valor de la cadena entre una etiqueta HTML de formato. fontcolor(color),fontsize (tamao): Cambian el color y el tamao de la cadena.

charAt(posicion), charCodeAt(posicion):
Devuelven el carcter y el cdigo UNICODE del ca rcter que se encuentre en la posicin indicada por su parmetro.

indexOf(texto, inicio),lastlndexOf(texto,

C.2.2. Mtodos
toExponential (decimales): Convierte a una expre sin exponencial (e o E), con el nmero de posiciones decimales especificada en el parmetro decimales. toFixed (decimales) : Ajuste del nmero de posi ciones decimales de un valor a las definidas por deci males, redondeando si es necesario. toPrecision (digitos): Ajusta el nmero de dgitos de un valor a los especificados por digitos, redon deando si es necesario.

i n i c i o ) : Devuelven la posicin de la primera y ltima ocurrencia, respectivamente, de texto dentro la cadena. El parmetro inicio es opcional e indica la posicin en la que se debe em pezar a buscar. concat (cadenal, cadena2, . . . , cadenaN): U neel valor de la cadena con el de las cadenas pasadas como parmetros.

fromCharCode (codigol, codigo2, . . . , codigoN): Construye una cadena a partir de una lista de valores UNICODE. Es exclusivo del objeto String. split (separador, limite): Devuelve un array
con el subconjunto de cadenas resultantes de dividir la cadena tomando el parm etro separador como delimitador. El parmetro opcional limite indica el nmero de subconjuntos que se devuelven.

C.3. String
Este objeto de JavaScript crea instancias de cadenas. Su constructor debe escribirse as:
334

substring(inicio, fin),substr(inicio, lon gitud), slice (inicio, fin): Extrae y devuelve


la porcin de la cadena que se encuentra entre las
335

www.FreeLibros.com

posiciones i n i c i o y f i n o una cantidad de caracteres ( lo n g i t u d ) a partir de la posicin i n i c i o . m a t c h (e x p r e s i n ), r e p la c e (e x p r e s i n , r e e m p la z o ), s e a r c h ( e x p r e s i n ) : Buscan una coin cidencia de e x p r e s i n dentro de la cadena o, en el caso de r e p l a c e , sustituye la primera ocurrencia por el valor de re e m p la z o . to L o w e rC a s e ( ) , to U p p e rC a s e ( ) : Pasa la cadena a minsculas o maysculas, respectivamente.

C.4. Array
Para crear un array existen varios constructores: 1. new Array ( ) : crea un array vaco, sin huecos donde almacenar nuestros datos. 2. new A r r a y ( l o n g i t u d ) : en este caso el orray se crea con tantos huecos como indique el parmetro lo n g it u d . 3. new A r r a y ( v a l o r l , v a l o r 2 , ..., v a l o r N ) : con este constructor crearemos un array con tantos huecos o posiciones como valores hayamos pasado como pa rmetros y, adems, dichos huecos irn rellenos con el valor correspondiente. Se puede almacenar cualquier tipo de datos en las posi ciones del array y adems pueden ser distintos en cada una.

s h i f t ( ) : Realiza la misma operacin que pop, pero con el primer valor. u n s h i f t ( v a l o r l , v a l o r 2 , ..., v a l o r N ) : Se comporta igual que p u sh , pero insertando valores al principio del array. s i i c e ( i n i c i o , f i n ) : Devuelve un nuevo array con los valores que estn entre las posiciones i n i c i o y fin -1 . s p l i c e ( i n i c i o , lo n g i t u d _ b o r r a d o , v a l o r l , v a l o r 2 , . . . , v a l o r N ) : Aade y/o elimina valores de un array. r e v e r s e ( ) : Invierte el orden de todos los valores del array. s o r t ( f u n c i n ) : Ordena alfabticamente los valores del array, pudiendo pasar una funcin para determinar como deben ordenarse los valores.

C.5. Date
El objeto D a te almacena una fecha como los milisegundos que han pasado desde una fecha base (1 de enero de 1970 a las 00:00:00). Se pueden crear instancias de la siguiente forma:
<SCRIPT TYPE="text/javascript"> I I Objeto Date var nombre_variable = new Date(fecha); </SCRIPT>

C.4.1. Propiedades
le n g t h : Indica la longitud del array.

Siendo el parm etro f e c h a cualquiera de estas expre siones: Vaco: Si no se pasa este parmetro, entonces se crea una instancia con la fecha y hora actuales. Una cantidad de milisegundos, que se sumarn a la fecha base. "M es_en_letras da, ao horas:m inutos:segundos": El mes debe estar escrito en ingls, y si se om ite las horas, m inutos o segundos, tomarn valor 00 por defecto. "Ao, m es, da": Estos valores deben ser num ricos enteros. "Ao, mes, da, hora, minuto, segundos": Exactamente igual que el anterior pero am pliado para incluir la hora.
337

C.4.2. Mtodos
c o n c a t (arrayl , a r r a y 2 , ... , arrayN):Une el array actual con los que se pasen como parmetros, devolviendo el resultado en un nico array. j o i n ( s e p a r a d o r ) : Traslada todos los valores de un array a una cadena, intercalando el carcter s e p a r a d o r entre ellos. pop ( ) : Elim ina y devuelve el ltimo valor de un array pu sh ( v a l o r l , v a l o r 2 , ..., v a lo r N ) : Aade uno o ms valores al final del array y devuelve la longitud del mismo.
336

www.FreeLibros.com

C.5.1. Propiedades
Este objeto no dispone de propiedades. S6S U rS(h0ra' m in' se9' m seg), s e t U T C D a t e ( d a ) , setUTCMonth(mes, da) s e t U T C F u l l Y e a r ( a o , m es , d a ) : Realizan lo" mismo que sus equivalentes pero ajustadas al UTC.
M todos de transform acin

C.5.2. Mtodos
Estn agrupados segn su funcionalidad.

Mtodos de obtencin
getTime ( ): Con esto obtenem os la fecha expresada como el nmero de milisegundos que han pasado desde la fecha base. g e t M i l l i s e c o n d s (), g e t S e c o n d s (), g e t M i nutes ( ) , getHours ( ): Devuelven el campo corres pondiente a los m ilisegundos, segundos, m inutos u hora, respectivamente. getDate ( ) , getDay ( ) , getMonth ( ) : Nos permiten obtener el da del mes, el da de la semana y el mes. getYear ( ) , getFullYear ( ) : Devuelven el ao con dos o cuatro cifras. getUTCMilliseconds(), getUTCSeconds(), getUTCMinutes() , getUTCHours() , getUTCDate(), getUTCDay (),getUTCMonth(), getUTCFullYear( ) : Funcionan exactam ente igual que sus anlogos pero devolviendo el campo de acuerdo al UTC. getTimezoneOf f set ( ) : Devuelve la cantidad de minutos de diferencia que existen entre la fecha de la instancia actual y el GMT.

p a r s e ( f e c h a _ c a d e n a ) : Recibe una fecha expresada como una cadena y calcula el nmero de milisegundos que han pasado desde la fecha base. Es exclusivo del objeto Dat e. UTC(ano, mes, d a , h o r a , m i n u t o , s e g u n d o , m i l i se g un d o) : Toma la fecha indicada por los parme tros y halla el nmero de milisegundos que han pasado desde la fecha base de acuerdo al UTC. Es exclusivo del objeto Dat e. t o D a t e S t r i n g ( ) , t o L o c a l e D a t e S t r i n g () : Devuelven la fecha sin informacin sobre la hora en forma de texto. t o T i m e S t r i n g ( ) , t o L o c a l e T i m e S t r i n g ( ) : Similar a los anteriores pero devuelven nicamente la parte correspondiente a la hora. toG M T String( ) , to U T C S trin g (), t o L o c a le S ^ ng ( } Expresan la fecha y la hora en base al GMT, U I L. y configuracin local respectivamente.

C.6. Math
Este objeto nos proporciona una serie de propiedades y mtodos que nos permitirn realizar operaciones matemticas complejas. Este objeto no permite la creacin de instancias por lo que todas sus propiedades y mtodos deben utilizarse directamente a travs del objeto Math.

Mtodos de asignacin
setTime (milisegundos) : Crea una fecha aadiendo o restando los milisegundos indicados a la fecha base. setMilliseconds (mseg),setSeconds(seg, mseg), setMinutes(min, seg, mseg),setHours(hora, min, seg, mseg) : Fija los campos correspondientes a los milisegundos (mseg), segundos (seg), minutos (min) y hora. Slo es obligatorio el prim er parmetro. s e t D a t e (d i a ) , s e t M o n t h ( m e s , d a) , setYear(ao), setFullYear(ao, mes, dia): Fija los campos que corresponden al da del mes, el mes y el ao. Slo es obligatorio el primer parmetro. s e t U T C M i l l i s e c o n d s ( m s e g ) , setUTCSeconds (seg, mseg),setUTCMinutes(min, seg, mseg),
338

C.6.1. Propiedades
E : Representa la constante de Euler (2,718). P I: Nos da el nmero Pi (3,14159). S , 1Q. R 1 ^ : Con esta obtendramos la raz cuadrada de 2 SQRT1_2: La raz cuadrada de Vi (0,707). LN2: Devuelve el logaritmo neperiano de 2 (0,693).
339

www.FreeLibros.com

LN10: El logaritmo neperiano de 10 ( 2 , 3 0 2 ) . LOG2E: Devuelve el resultado del logaritmo de E en base

<SCRIPT TYPE="text/javascript"> I I Objeto RegExp var miPatron = new RegExp(patrn, modificadores); </SCRIPT>

2( 1 , 4 4 2 ) . LOGIOE: Igual que el anterior, pero en base 10 ( 0 , 4 3 4 ) .

C.6.2. Mtodos
a b s ( n u m e r o ) : Devuelve el valor absoluto de n u m ero. s in ( n g u lo ), e o s ( n g u lo ), ta n ( n g u lo ): Funciones trigonomtricas para calcular el seno, coseno y tangente de un ngulo expresado en radianes. a s in (n u m e r o ), a c o s(n u m e ro ), a ta n (n u m e ro ): Realizan los clculos trigonomtricos arcoseno, arcocoseno y arcotangente. a t a n 2 ( p o s i c i o n Y , p o s i c i o n X ) : Devuelve el n gulo que forma, respecto al eje X, el punto situado en las coordenadas indicadas. e x p (n u m e r o ), l o g ( n u m e r o ) : D evuelven, respec tivam ente, el resultado de E elevado al parm etro numero (En u m ero) y el logaritmo neperiano (base E) del parmetro. c e i l (n u m e ro ): Devuelve el entero inmediatamente superior de num ero, si ste tiene decimales, o directa mente num ero si no es as. f l o o r (n u m e r o ): Igual que el anterior, pero devol viendo el entero inm ediatamente inferior. m in ( n u m e r o l, n u m e ro 2 ) , m a x (n u m e r o l, n u m e ro 2 ): Proporcionan el menor o mayor valor de sus dos parmetros. p o w (b a s e , e x p o n e n t e ) : Calcula una potencia. random ( ) : Este mtodo devuelve un nmero aleatorio entre 0 y 1 . rou n d (num ero): Redondea el parmetro al entero ms cercano. s q r t (n u m ero ): Calcula la raz cuadrada del parmetro num ero.

C.7.1. Propiedades
Las propiedades de este objeto se activan o desactivan m e diante un valor booleano.

global: Fija el modificador "g". ignoreCase: Fija el modificador "i". multiline: Activa el modificador "m". lastlndex: Representa la posicin dentro del texto
donde se empezar a buscar la prxima coincidencia.

Las siguientes propiedades slo estn accesibles desde el objeto RegExp, aunque hace referencia a valores de la ins tancia.

input: Fija u obtiene el texto sobre el que se aplica el


patrn.

lastMatch: Devuelve la ltima cadena encontrada


mediante el patrn. lastParen: Devuelve la ltima coincidencia que est encerrada entre parntesis. leftContext, rightContext: Permite conocer los caracteres que estn a la izquierda o derecha de la ltima coincidencia.

C.7.2. Mtodos
compile (patrn, modificadores): Permite fijar
un nuevo patrn en una instancia de RegExp y opcio nalm ente tambin sus modificadores. exec (texto): Aplica el patrn sobre el texto pasado como parmetro y devuelve la cadena encontrada, test(texto): Aplica el patrn sobre el parm etro texto pero nicam ente nos dir si se encontraron coincidencias. En el apndice F tiene informacin sobre cmo escribir expresiones regulares.

C.7. RegExp
Este objeto permite trabajar con expresiones regulares me diante el siguiente constructor:
340

341

www.FreeLibros.com

Objetos del navegador (DOM)

La figura D .l representa a modo resum en la estructura DOM de los navegadores Web.

Figura D.1. Estructura DOM.

A continuacin encontrar una referencia rpida a todos los objetos del DOM, con sus colecciones, propiedades y mtodos junto a una breve descripcin.

D.1. Objeto window


Es el objeto principal del DOM que representa la ventana del navegador donde se est visualizando la pgina.
343

www.FreeLibros.com

D.1.1. Colecciones de objetos


El objeto window contiene a su vez otros objetos. f ram es: Se trata de un array con la coleccin d efra m es o m arcos que contenga la pgina. Se accede a ellos a travs de su posicin o su nombre.

ope ne r : Hace referencia a la ventana que abri la actual. Si la ventana no fue abierta por otra, obtendremos un valor u n d e f i n e d . c l o s e d : Indica si la ventana est cerrada o no.

D.1.3. Mtodos
Entre los mtodos del objeto window encontraremos: a l e r t ( m e n s a j e ) : Muestra un mensaje en un cuadro de dilogo con el botn Aceptar. c o n f i r m ( m e n s a j e ) : M uestra un m ensaje en un cuadro de dilogo con los botones Aceptar y Cancelar. Devuelve un booleano ( t r u e para Aceptar y f a l s e para Cancelar). prompt ( m e n s a j e , v a l o r _ p o r _ d e f e c t o ) : Similar a c o n f i r m pero incluyendo una caja de texto para re coger un valor escrito por el usuario, el cual es devuelto. O pcionalm ente podem os indicar un valor que ser mostrado por defecto en la caja de texto. Si el usuario hace clic sobre Cancelar obtendremos un valor n u i l . f oc us ( ) , b l u r ( ) : Establece o retira el foco de un objeto. moveBy ( x, y ) : Mueve la ventana el nmero de pxeles indicados. La x indica el desplazamiento horizontal y la y el vertical. moveTo ( x , y ) : M ueve la ventana a una posicin concreta. r e s i z e B y ( x , y ): Redimensiona la ventana tantos pxeles como indiquen los parmetros. La x se refiere a la anchura y la y a la altura. r e s i z e T o ( x , y ) : Establece una anchura y altura concretas a la ventana. scro llB y(x, y ) : Realiza un desplazamiento hori zontal y/o vertical de tantos pxeles como m arquen los parmetros. scro llT o(x, y ) : Realiza un desplazamiento hori zontal y/o vertical hasta una posicin concreta. o p e n (URL, nombr e, o p c i o n e s ): Crea una nueva ventana en la que se carga un URL. Las opciones se pasan como una cadena con pares propiedad =valor separados por comas, siendo y e s o 1 valores positivos y no o 0 los negativos. t o o l b a r : Permite indicar si la ventana tendr barra de herram ientas o no.
345

D.1.2. Propiedades
Este objeto dispone de un buen nmero de propiedades: l e n g t h : Fija o devuelve el nmero de m arcos de la ventana actual. ame: Fija o devuelve el nombre de la ventana, que nos servir para referim os a ella en el cdigo. m enubar: Devuelve un objeto que representa la barra de m en del navegador. t o o l b a r : Devuelve un objeto que representa la barra de herramientas del navegador. s t a t u s b a r : Devuelve un objeto que representa la barra de estado. d e f a u l t S t a t u s : Permite fijar u obtener el mensaje por defecto que se muestra en la barra de estado. s t a t u s : Permite modificar el texto de la barra de estado. s c r o l l b a r s : Devuelve el objeto que sim boliza las barras de desplazamiento. l o c a t i o n , h i s t o r y , d ocu m en t: Devuelven los ob jetos l o c a t i o n , h i s t o r y y d ocu m en t. o u t e r H e i g h t , o u t e r W id t h : Establece o devuelve el tamao en pixels del espacio de toda la ventana en vertical u horizontal, respectivamente, incluyendo las barras de desplazamiento, de herramientas, etc. in n e r H e i g h t , in n e r W id th : Devuelve la altura o an chura, en pixels, del espacio donde se muestra la pgina incluyendo las barras de desplazamiento, si hubiera, pero excluyendo todas las dems (men, herramientas, estado, etc.). p a r e n t : Se refiere a la ventana donde est situado el marco en el que estamos trabajando. En caso de no haber marcos, equivale a la propia ventana. top: Devuelve la ventana que se encuentra un nivel por encima del marco actual. Si no hay marcos, se devuelve la propia ventana. s e l f : Representa a la ventana actual.
344

www.FreeLibros.com

m enubar: M uestra u oculta la barra de mens de la nueva ventana. l o c a t i o n : Perm ite m ostrar u ocultar la barra de direcciones en la nueva ventana. d i r e c t o r i e s : Deja decidir si la ventana tendr botones de direccin o no. s c r o l l b a r s : Deja indicar si la nueva ventana tendr barras de desplazamiento o no. s t a t u s : Perm ite controlar la visibilidad de la barra de estado. r e s i z a b l e : Permite establecer si la nueva ventana podr ser cambiada de tamao (con el ratn) o no. f u l l s c r e e n : Deja indicar si la ventana se ver a pantalla completa o no. w id th , h e i g h t : Establece el ancho o alto que tendr la ventana, en pixels. to p , l e f t : Indica la distancia, en pixels, a la que es tar la ventana respecto al lado superior o izquierdo de la pantalla. Este mtodo devuelve un identificador para la ventana que hemos abierto o un valor n u i l si la ventana no pudo abrirse. c i s e ( ) : Cierra la ventana actual. p r i n t ( ) : M anda im prim ir la pgina que estem os viendo. s e t l n t e r v a l ( e x p r e s i n , m il is e g u n d o s ) : Evala una expresin continuamente despus de que hayan pa sado el nmero de milisegundos especificados. Devuelve un identificador para poder cancelar su ejecucin. s e t T i m e o u t ( e x p r e s i n , m i l i s e g u n d o s ) : Evala una expresin una nica vez despus de que hayan pa sado el nm ero de m ilisegundos indicados. Devuelve un identificador para poder cancelar su ejecucin. c l e a r l n t e r v a l ( i d e n t i f i c a d o r ) , c le a r T im e o u t ( i d e n t i f i c a d o r ) : Cancelan respectivamente la ejecucin de s e t l n t e r v a l y s e tT im e o u t a travs del identificador pasado como parmetro.

D.2.1. Propiedades
Gracias a esta lista de propiedades podemos obtener bas tante inform acin sobre el navegador del usuario: appCodeName: Devuelve el nom bre del cdigo del navegador. appName: Devuelve el nombre del navegador. appMinorVersion: Indica la versin de la ltima revisin del navegador. appVersion: Proporciona inform acin acerca de la versin del navegador. userAgent: Devuelve la cabecera completa del nave gador que se enva en cada peticin HTTP (appCode

Name + appVersion). browserLanguage: D evuelve el idiom a del n ave


gador. systemLanguage: Indica el idioma por defecto del sistema operativo del usuario. userLanguage: Indica el idioma preferido del usuario para el sistema operativo que est utilizando. language: Devuelve el idioma del navegador. cpuClass: Ofrece informacin acerca del tipo de pro cesador que tiene el usuario. platform: Indica la plataform a del sistem a opera tivo. cookieEnabled: Permite saber si el navegador tiene activadas las cookies o no.

D.2.2. Mtodos
Com o no podem os m odificar ninguna de las caracte rsticas del navegador, slo tenem os un m todo a nuestro alcance: j avaEnabled ( ) : Indica si el navegador tiene activado el soporte para Java (no confunda con JavaScript).

D.3. Objeto screen D.2. Objeto navigator


Con este objeto podremos acceder a informacin acerca del navegador que est utilizando el usuario para ver la pgina.
346

Mediante este objeto podremos obtener informacin acerca de la configuracin de pantalla del usuario que est viendo nuestra pgina. Slo dispone de propiedades.
347

www.FreeLibros.com

D.3.1. Propiedades
Conocer algunos parmetros de la configuracin del usuario ser til para realizar algn ajuste en nuestro cdigo.

D.5.1. Propiedades
Con estas propiedades podremos separar el URL en varias partes para usar la que ms nos interese. h r e f : Devuelve el URL completo. Tambin podemos reemplazarlo para dirigirnos a otra pgina. h o stn a m e: Devuelve nicamente la parte del URL que hace referencia al nombre o direccin IP del servidor donde est alojada la pgina. path n am e: Contiene la ruta que se sigue, dentro del servidor Web, hasta alcanzar la pgina actual. h a sh : Devuelve la parte del URL que hay despus de la almohadilla (#), representando un ancla (anchor). s e a r c h : Devuelve la parte del URL que hay despus del signo de interrogacin (?), conocido como consulta o query string. p o r t : Indica el puerto por el que hemos accedido al servidor. h o s t : Devuelve el nombre del servidor (h o stn am e) y el nm ero del puerto (p o r t). p r o t o c o l : Indica el protocolo que se ha usado para acceder al servidor (normalmente HTTP).

width, height: Indican los pixels de ancho y alto que


tiene la resolucin actual.

availWidth, availHeight: Devuelven la anchura y


altura que queda libre en el rea de trabajo del escritorio, es decir, resta al ancho o alto total el espacio que ocupan las barras de herram ientas que tengam os en nuestro sistema operativo. colorDepth: Permite conocer la profundidad de color, en bits, de la pantalla del usuario.

D.4. Objeto history


Este objeto almacena una lista de los sitios por los que hemos estado navegando.

D.4.1. Propiedades
Tan slo tiene una propiedad de inters:

length: Devuelve la cantidad de sitios que hay dentro


del historial.

D.5.2. Mtodos
Su funcin principal es la de interactuar con un URL. a s s i g n (U R L ): Carga un nuevo URL, creando una nueva entrada en el objeto h i s t o r y . r e p l a c e (URL): Reemplaza el URL actual por otro, pero reemplazando la entrada actual en h i s t o r y . r e l o a d ( ) : Recarga la pgina actual.

D.4.2. Mtodos
Los mtodos de history nos ayudarn a desplazamos por las pginas del historial. back ( ) ,forward ( ): Carga la pgina inmediatamente anterior o posterior a la actual. go (posicion): Carga una pgina especfica que est en la posicin indicada dentro del historial. Un valor del parmetro posicion negativo representa pginas anteriores y uno positivo las posteriores.

D.6. Objeto document


Todos los elementos de una pgina (texto, imgenes, en laces, form ularios...) quedan representados y accesibles dentro de este objeto.

D.5. Objeto location


Este objeto contiene el URL actual.
348

D.6.1. Colecciones de objetos


Este objeto contiene a su vez otros objetos.
349

www.FreeLibros.com

a n c h o r s : Es un array con todas las anclas (anchors ) del documento (se mantiene por temas de compatibilidad). f or ms : Contiene un array con todas las referencias a los formularios de la pgina. imag e s : Tiene ecopiladas todas las imgenes represen tadas con la etiqueta <IMG>. 1 i n k s : Contiene todos los enlaces de la pgina, dentro de un array.

D.7. Objeto anchor


Este objeto engloba todos los enlaces internos al documento, tambin llamados anclas o anchor.

D.7.1. Propiedades
Las propiedades de este objeto representan bsicamente todos los atributos HTML que puede tener. id : Idenficador del ancla. ame: Nombre del ancla. t a r g e t : Ventana o marco donde se cargar el ancla. t e x t : Permite saber el texto que contiene el ancla (slo lectura). innerHTML: Permite obtener o modificar el texto que contiene el ancla.

D.6.2. Propiedades
Las propiedades de este objeto nos proporcionarn alguna informacin de inters: c o o k i e : Devuelve, en forma de cadena, los valores de las cookies que tenga el documento. d o m a i n : Indica el nom bre del servidor donde est alojado el documento. l a s t Modi f i ed: Indica la fecha de la ltima modifica cin del documento. r e f e r r e r : Indica el URL del documento que llam al actual, a travs de un enlace. t i 1 1 e : Devuelve ttulo del documento que aparece en la parte superior izquierda de la ventana del navegador. URL: Devuelve el URL del documento actual.

D.7.2. Mtodos
Slo contamos con dos m todos para este objeto. f o c u s ( ) , b l u r ( ) : Hacen que reciba o pierda el foco, respectivamente.

D.6.3. Mtodos
Estos mtodos nos permiten modificar ligeramente el con tenido de la pgina. w r i t e ( t e x t o ) , w r i t e l n ( t e x t o ) : Escribe texto HTML en el documento. El mtodo w r i t e l n aade adems un salto de lnea al final. open ( ) : Permite escribir sobre el documento una vez que el documento ha sido cargado. c i s e ( ) : Finaliza la escritura sobre el documento. g e t E l e m e n t B y l d ( i d e n t i f i c a d o r ) : Devuelve el primer elemento del documento cuyo atributo ID coin cida con el parmetro i d e n t i f i c a d o r . g et El ement sBy Na me ( n o mb r e) : Devuelve un array de elementos cuyo atributo AM E coincida con el indicado. g e t E l e m e n t s B y T a g N a m e ( e t i q u e t a ) : Devuelve un array de elem entos cuya etiqueta sea la misma que la especificada por el parmetro.
350

D.8. Objeto link


Este objeto permite tener acceso a todos los enlaces externos del documento.

D.8.1. Propiedades
La lista de propiedades que tiene este tipo de objeto es muy similar a la que vimos para l o c a t i o n . id : Idenficador del enlace. h r e f : Devuelve el URL completo del enlace. t a r g e t : Ventana o marco donde se cargar el enlace. h o stn a m e: Devuelve la parte del URL que hace refe rencia al nombre o direccin IP del servidor donde est alojada la pgina destino. path n am e: Contiene la ruta que se sigue hasta alcanzar la pgina destino.
351

www.FreeLibros.com

h a sh : Devuelve la parte del URL que hay despus de la almohadilla (#), llamada ancla (anchor). s e a r c h : Devuelve la parte del URL que hay despus del signo de interrogacin (?), conocida como consulta o query string. p o r t : Indica el puerto por el que vamos a acceder al servidor destino. h o s t : Devuelve el nom bre del servidor (h o stn am e) y el nmero del puerto (p o r t). p r o t o c o l : Indica el protocolo que vamos a usar para acceder al servidor. t e x t : Permite saber el texto del enlace (slo lectura). innerHTML: Permite obtener y modificar el texto del enlace

Formularios en JavaScript

D.8.2. Mtodos
Este objeto slo dispone de dos mtodos. f o c u s ( ) , b l u r ( ) : Hacen que reciba o pierda el foco, respectivamente.

Este apndice pretende recopilar todo lo referente al manejo de formularios a travs de cdigo JavaScript para que tenga una referencia rpida a todos los objetos, con sus colecciones de objetos, propiedades y mtodos, junto con una breve des cripcin.

E.1. Formulario
El objeto docum ent nos otorga un acceso directo a todos los formlanos de la pgina, a travs de su coleccin form s, aunque tambin se puede acceder a ellos mediante su nombre.
// Acceso a un formulario var miForm = document.forms[0]; var miForm = document.formRegistro;

D.9. Objeto image


M ediante este objeto serem os capaces de acceder y m a nipular ciertas caractersticas de una imagen contenida en la pgina. Este objeto no cuenta con ningn mtodo.

D.9.1. Propiedades
id : Se corresponde con el identificador de la imagen. ame: Proporciona acceso al nombre del objeto. s r c : Permite m anipular el URL de la imagen que se muestra. w id th , he ig h t : Permiten conocer y cambiar la anchura y altura de la imagen. a 1 1: Corresponde con el texto alternativo que se muestra al usuario cuando la imagen no puede ser cargada. t i t l e : Representa el texto que se m uestra sobre la imagen al poner el cursor sobre ella.

E.1.1. Colecciones de objetos


e le m e n ts : Array con todos los campos que componen el formulario.

E.1.2. Propiedades
id : Representa el identificador del formulario (atributo ID). ame, a c t i o n , method, t a r g e t , e n c ty p e : Representan cada uno de los atributos HTML correspondientes. le n g t h : El nmero de campos que tiene el formulario. Es lo m ismo que e le m e n t s . l e n g t h .
353

352

www.FreeLibros.com

E.1.3. Mtodos
s u b m it ( ) : Enva el formulario con toda la informacin que haya introducido el usuario en l. r e s e t ( ) : Deja el formulario en blanco, tal y como estaba al cargar la pgina.

E.3. Campos de seleccin de datos


Tam bin nos perm iten recoger inform acin del usuario dndole a escoger un valor dentro de una serie de opciones. Aqu entran las etiquetas <INPUT> ( r a d i o y c h e c k b o x ), <SELECT> y <OPTION>.

E.2. Campos de entrada de datos


Nos permiten obtener datos directamente del usuario. Estn representados por las etiquetas <INPUT> ( t e x t , p a ssw o rd , f i l e y h id d e n ) y <TEXTAREA>.

E.3.1. Colecciones de objetos


Slo aplicable a los elementos <SELECT>. Se trata de una coleccin que representa los elementos <0PTI0N>. o p t i o n s : Contiene un array todas las opciones que muestra la lista desplegable.

E.2.1. Propiedades
Las siguientes propiedades son com unes para todos los elementos. id : Representa el identificador del formulario (atributo ID). d i s a b l e d , ame, re a d O n ly , ty p e , v a lu : Devuelven el valor del atributo HTML correspondiente. form : Nos indica el objeto de formulario donde est contenido el campo actual. Las cajas de texto, definidas con <INPUT>, tienen adems estas propiedades: m axL en gth: Nos permite obtener y m odificar la lon gitud mxima del campo. s i ze: Devuelve el nm ero de caracteres visibles en el campo. Como no poda ser de otra manera, los <TEXTAREA> tam bin tienen algunas propiedades ms: c o i s , row s: Nos dejan obtener o modificar el ancho o el alto del cuadro de texto.

E.3.2. Propiedades
Las propiedades listadas a continuacin son comunes para todos los elementos. i d : E q u ivale al id en tificad o r del cam po (atributo ID). ame, ty p e: Representan el nombre y el tipo del elemento (atributos AME y TYPE), excepto para los <OPTION>, que no disponen de estos atributos. v a lu : Nos devuelve el valor que tenga asociado el campo en su atributo VALUE. En el caso de los <SELECT> nos devolver el valor de la opcin que est seleccio nada. d i s a b l e d : Nos perm ite habilitar o deshabilitar el campo. form : Nos devuelve el objeto de formulario en el que se encuentra el campo. Adicionalmente, los dos tipos de elem entos <INPUT> que pueden existir en un formulario ( r a d io y c h e c k b o x ) tienen esta propiedad: c h e c k e d : Permite saber y establecer cundo est selec cionado el campo. Las listas desplegables (<SELECT>) tienen adems estas propiedades: m l t i p l e : Nos permite conocer y establecer cuando la lista admite seleccin mltiple.
355

E.2.2. Mtodos
f o c u s ( ) , b l u r ( ) : Establece o retira el foco de la caja. s e l e c t ( ) : Selecciona todo el texto que est escrito dentro de la caja de texto.
354

www.FreeLibros.com

s i z e : Nos devuelve el nmero de opciones visibles al mismo tiempo en la lista desplegable. length: Nos indica el nm ero de opciones de las que dispone. Equivale a la longitud de su coleccin de datos, es decir, options.length. selectedlndex: Nos permite obtener o establecer la opcin que est seleccionada. El valor 0 representa la primera opcin. Si esta propiedad toma el valor especial -1 significa que no hay ninguna opcin seleccionada. Por ltimo, las propiedades de los elem entos <OPTION>:

f orm: Nos indica el formulario en el que se encuentran los botones.

E.4.2. Mtodos
f o c u s ( ) , b l u r ( ) : Sirven para colocar o quitar el foco del botn. click (): Simula un clic de ratn sobre el botn como si lo hubiera hecho el usuario.

selected: Nos permite saber o fijar cundo la opcin


estar seleccionada.

E.5. Resumen de tipos de campos


La tabla E .l le permitir tener a mano los valores que uti liza JavaScript para identificar todos los posibles valores de la propiedad ty p e de los campos de un formulario.
Tabla E.1. Valores de la propiedad type. | Campo Entrada de datos Seleccin de datos Valores type text, password, file, hidden, textarea radio, checkbox, select-one (sin atributo MULTIPLE), select-multiple (con atributo MULTIPLE) button, submit, reset

text: Obtiene el texto que se encuentra junto a la eti queta <OPTION> y tambin nos deja modificarlo. index: Devuelve la posicin que ocupa la opcin dentro
de la lista desplegable.

E.3.3. Mtodos
Todos los campos de seleccin tiene estos dos mtodos definidos: f o c u s ( ) , b l u r ( ) : Nos dejan establecer o retirar el foco del campo. Adem s los <INPUT> disponen de otro ms: click ( ) : Simula un clic de ratn sobre el campo, de form a que lo dejar seleccionado o deseleccionado dependiendo de su estado anterior.
Botones

E.4. Botones
Con ellos podremos ejecutar una serie de operaciones con los datos introducidos en el formulario. Todos los botones se de finen con la etiqueta <INPUT> (button, submit y reset).

E.4.1. Propiedades
Todos estos elem entos tienen las mismas propiedades. id, disabled, ame, type, valu: N os perm iten manipular los atributos que representan con el mismo nombre.
356 357

www.FreeLibros.com

Caracteres y modificadores de las expresiones regulares

Para hacer ms tiles las expresiones regulares, se utilizan una serie de estructuras y caracteres especiales para crear patrones ms complejos y adaptables a nuestros propsitos. Adem s pueden com binarse entre ellos las veces que sean necesarias.

F.1. Caracteres de repeticin


Permiten indicar que se busquen coincidencias en nuestro patrn teniendo en cuenta que algunas partes de la cadena pueden repetirse un nmero determinado de veces. Asterisco (* ): Indica que el carcter que le precede puede aparecer cero o ms veces. Ms (+): Indica que el carcter que le precede puede repetirse una o ms veces. Interrogacin (?): Indica que el carcter que le precede puede aparecer ninguna o una vez. ( n ) : Siendo n un entero positivo, indica que el carcter que le precede se debe repetir exactam ente el nmero de veces especificado con n. ( n , ) : Similar al anterior, pero el carcter debe aparecer al menos n veces. (n, m): Siendo n y m enteros positivos, indica que el carcter que preceda a esta estructura debe repetirse un nmero de veces entre las definidas por n y m.
359

www.FreeLibros.com

F.2. Caracteres especiales


A veces es necesario incluir en un patrn ciertos carac teres, com o el fabulador o el salto de lnea, que deben es cribirse de una form a concreta para que JavaScript pueda reconocerlos. Punto ( . ) : C oincidir con cualquier carcter sim ple excepto con el de salto de lnea. \n: N ueva lnea (o salto de lnea). \ r: El retom o de carro. \ t : Carcter de tabulado. \v: El de tabulado vertical. \ f : Avance de pgina. \ u xxxx: Carcter UNICODE que tiene como cdigo cuatro dgitos hexadecimales representados por xxxx. \b: Separador de palabra, como puede ser el espacio o el carcter de nueva lnea. \B: Carcter que no sea separador de palabra. \cX: Carcter de control en una cadena siendo X dicho carcter (combinacin de teclas Control-X). \d: Dgito entre cero y nueve. \D: Carcter que no sea un dgito. \s : Un carcter de separacin (espacio, tabulado, avance de pgina o nueva lnea). \S: Un carcter que no sea de separacin. \w: Cualquier carcter alfanumrico (letras de la "a" a la "z", minsculas o m aysculas y nmeros del cero al nueve) o el subrayado. \W : Cualquier carcter no alfanumrico ni subrayado. \0 (cero): Carcter nulo o de fin de cadena. No puede tener ningn dgito a continuacin.

[Ax x x ]: Coincide con cualquier carcter salvo los que estn indicados en el conjunto. Barra vertical (x |y): Coincide con x o y, pero no con los dos. [\b]: Coincide con el carcter de retroceso o backspace. No confundir con el carcter especial \b (separador de palabra).

F.4. Caracteres de posicin


Los caracteres de posicin nos permiten especificar en qu parte de la lnea debe existir la coincidencia dentro de nuestro patrn. Circunflejo (A): Hace que coincida desde el inicio de la lnea. Dlar ($): Hace que coincida con la parte final de la lnea.

F.5. Modificadores
Permiten definir algunas caractersticas a tener en cuenta a la hora de buscar coincidencias. Podemos aplicar a un patrn tantos modificadores como queramos y deben escribirse a continuacin de la ltima barra (/) que delimita el patrn. g: Fuerza que se sigan buscando coincidencias despus de encontrar la primera. i: Elim ina la distincin entre m aysculas y m in s culas. m: Permite usar varios caracteres de posicin (Ay $) en el patrn. s: Incluye el salto de lnea en el comodn punto ( .) . x: Fuerza que los espacios sean ignorados.

F.3. Agrupacin de valores


Para encontrar una coincidencia en palabras que son muy similares diferencindose en una pequea parte, podemos usar estas estructuras para fusionar todo bajo un mismo patrn. [xxx]: Coincide con uno de los caracteres que estn entre los corchetes. Tambin es posible especificar un rango de caracteres usando un guin donde los valores deben ser contiguos.
360

F.6. Expresiones regulares tiles


Los patrones que nos presenta la siguiente tabla F .l se suelen utilizar con frecuencia.
361

www.FreeLibros.com

Tabla F.1. Expresiones regulares de uso frecuente. Expresin regular Ad{9}/ Ad{8}[a-zA-Z]/ Ad{2}-\d{2}-\d{4}/ /[0-3]\d-[01 ]\d-\d{4}/ /([0][1 -9] 1 1[0-2]): [0-5]\d:[0-5]\d/ /([01 ]\d 1 2 [0-3]): [0-5]\d:[0-5]\d/ Aw+@\w+\.\w{2,3}/ Descripcin Nmero de telfono Nmero de DNI Fecha (da-m es-ao o mesda-ao) Fecha (da-mes-ao) Hora (hora:minutos:segundos en formato de 12 horas) Hora (hora:minutos:segundos en formato de 24 horas) Direccin de correo electrnico

Indice alfabtico

Smbolos
<NOSCRIPT>, 29 <SCRIPT> especificar versin JavaScript, 25 fichero externo, 26 integracin con HTML, 25

A
AJAX, 23,323 mbito de variable global, 114 local, 112 Array, 139 en elementos de JavaScript, 156-159 ndice de un, 141 multidimensional, 149 trabajar con, 140-145 ver contenido de, 140

operaciones a nivel de, 65-71 Booleano, 36 Borrar cookie, 272 Botn, 210-213,226-228 de radio, 207 break, 83, 91 Bucle, 86 do-while, 89-90 finalizar un, 91 for, 86-88 for-in, 125-126 while, 90

c
Cadena de consulta, 190,196 Caducidad cookie, 266 Campo botones, 210-213,226-228 de entrada de datos, 204-207, 217-221 de seleccin de datos, 207-210, 221-226 Carcter de escape, 37 especial, 37 especial en patrones, 42

B
Binario, 63 Bit, 63 de signo, 64

362

363

www.FreeLibros.com

Chrome, 16 Circunflejo en expresiones regulares, 46 en operadores binarios, 67 clearlnterval, 181 clearTimeout, 181 Comentarios lnea simple, 27 multilnea, 27 Comparacin de cadenas, 61 desigualdad, 59 desigualdad estricta, 60 igualdad, 59 igualdad estricta, 60 Complemento a dos, 64 Concatenar cadenas, 57,136 Constantes, 33 matemticas, 167 Constructor de objeto, 118 continu, 91 Conversin entre tipos explcita, 76 implcita, 75 parseFloat(), 109 parselnt(), 107 Cookie almacenar una, 267 borrar una, 272 caducidad de una, 266 modificar una, 272 recuperar una, 268 Cookies, 263 del documento, 192 Crear un objeto, constructor, 118 Cuadro de dilogo, 180

arrays, 146 cadenas, 136 nmeros, 55 DOM, 23,343 objetos del, 175 do-while, 89

validar un, 228 Funciones, 93 definicin y llamada correctas, 93-96 llamada a, 94 nombrado de, 94 parmetros de, 96,98 parmetros obligatorios, 99 parmetros opcionales, 99 predefinidas, 104-112 valor de retorno de, 101-104

nmero de opciones en una, 221, 223 opciones de una, 208,221

M
Manejador de evento, 239 como atributo HTML, 240-243 en JavaScript, 251 Maysculas convertir a, 137 sensible a, 27 Mtodos de un objeto, 39 definicin de, 121-124 llamadas a, 122 Minsculas convertir a, 137 sensible a, 27 Modificadores de expresin regular, 48,171 Mdulo, 56

E
ECMAScript, 25 Euler, 167 eval, 111 Event, objeto, 258 Eventos, 237 en HTML, 238 en JavaScript, 237 manejadores de, 240,251 Expresin exponencial, 133 Expresin regular, 41 modificadores de, 48,171 parntesis en, 47 patrn con caracteres especiales, 42 patrn simple, 42 regExp, 170

G
getElementByld, 194 getElementsByTagName, 194

H
Historial de visitas, 189

I
if-else, 80 Incremento, 53 post-incremento, 54 pre-incremento, 54 Infinity, 40,132 isFiniteO, 106 -Infinity, 40,132 Instancia de un objeto, 39 crear una, 73,118 Internet Explorer, 16

N
NaN, 40,131 isNaN(), 105 Navegador mtodos del, 188 propiedades del, 186 versin del, 186 Navegadores con soporte JavaScript, 24 lista de, 16 sin soporte JavaScript, 29 Netscape, 22 new, 73,119 NOT operador binario, 65 operador lgico, 58 nuil, 40 Nmero aleatorio, 169 objeto, 131 redondeo de un, 169

F
Fecha, 159 actual, 160 base, 159 GMT, 159 trabajar con, 164 UTC, 159 FireFox, 16 for, 86 for-in, 125 Formulario, 201 campos de un, 204-213 en HTML, 201 en JavaScript, 214 enviar un, 211,216 incluir ficheros en un, 205 nmero de campos en un, 214

D
Decremento, 53 post-decremento, 54 pre-decremento, 54 DHTML, 22,319 Dividir

Jerarqua de objetos del navegador, 23,343 JScript, 22

Lenguaje de lado cliente, 21 Lenguaje de lado servidor, 21 Lista desplegable, 207, 221

364

365

www.FreeLibros.com

o
Objetos, 39,117 constructor de, 118 del navegador, 175 envoltorio, 129 instancia de, 39 manipulacin de, 124-128 mtodos de, 39,115-118 predefinidos, 129 propiedades de, 39,120 trabajar con, 119 Opera, 16 Operadores, 51 abreviados, 56, 70 especiales, 71 precedencia de, 74 sobre bits, 65-70 sobre objetos, 73

Q
Query string, 190,196

R
Retorno de funciones, 101 return, 101

s
Safari, 16 setlnterval, 181 setTimeout, 181 Sistema binario, 63 hexadecimal, 36 octal, 36 String, 37 como un array, 148 funcin, 105 objeto, 134 switch-case, 83

como constante, 34 declaracin de, 32 nombrado de, 31 prioridad de, 115 valores especiales de, 40 VBScript, 22 Ventana abrir una, 180 cerrar una, 181 mtodos de, 179-181 objeto, 176 propiedades de, 177-179 redimensionar una, 180 Virgulilla, 65 void, 72

w
W3C, 175 while, 90 with, 126

X
XOR, 67

Y
operador binario, 65 operador lgico, 58

Palabra reservada, 329-330 Parmetros de funciones, 96 como un array, 156 mltiples, 98 obligatorios, 99 opcionales, 99 parseFloat(), 109 parselnt(), 107 Patrn, 41 agrupacin de valores, 45 caracteres de posicin, 46 caracteres de repeticin, 42 caracteres especiales, 43 Pi, 167 POO, 117 Pop-up, 179 abrir un, 180 Prioridad de operadores, 74 de variables, 115 Propagacin de signo, 68

T
Temporizador cancelar un, 181 crear un, 181 this, 73,120 toStringO, 129 typeof, 72

u
undefined, 40 UNICODE, 38 escape(), 109 unescape(), 110

V
Variable, 31 mbito o alcance de, 112

366

www.FreeLibros.com

Las Guas Prcticas de Anaya Multimedia son los libros ms apreciados por los usuarios que se inician en el estudio de un tema informtico. Ofrecen una visin rpida y rigurosa de todo lo relacionado con ordenadores personales, lenguajes de programacin, Internet y nuevas tecnologas en general. El objetivo es que todos los interesados encuentren aqu una forma prctica y solvente de resolver sus dudas. El lenguaje es claro e incluye ejemplos y ejercicios. Adems, las capturas de pantalla e ilustraciones permiten fijar las deas de modo eficaz, actualizar conocimientos y profundiza! en el aprendizaje. En definitiva, aqu encontrar todo lo que necesita saber. Lo esencial de la informtica al alcance do todos

HMEDIAM

http://www.AnayaMultimediii.c-. www.FreeLibros.com