Introduccin a

JavaScript

Javier Eguluz Prez

Sobre este libro...

Los contenidos de este libro estn bajo una licencia Creative Commons econocimiento !o Comercial " Sin #bra $erivada %&' ()ttp*++creativecommons&org+licenses+b,"nc"nd+ %&'+deed&es Esta versin impresa se cre el 25 de marzo de 2009 y todava est incompleta & La versin ms actualizada de los contenidos de este libro se puede encontrar en )ttp*++...&libros.eb&es+javascript Si /uieres aportar sugerencias0 comentarios0 crticas o in1ormar sobre errores0 puedes enviarnos un mensaje a contacto@librosweb.es

Capt lo !. "ntrod ccin .................................................................................................................... ......... 5 2&2& 34u es JavaScript5 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 6 2&7& 8reve )istoria&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 6 2&%& Especi1icaciones o1iciales&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 9 2&:& Cmo incluir JavaScript en documentos ;<=>L &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 9 2&6& Eti/ueta noscript &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ? 2&9& @losario bsico &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& A 2&B& SintaCis&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2' 2&?& Posibilidades , limitaciones &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22 2&A& JavaScript , navegadores&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22 2&2'& primer script Capt lo %&2& Dariables &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 29 %&7& %&%& #peradores&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 72 %&:& %&6& Capt lo :&2& Eunciones&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& %? :&7& :&%& Fmbito Sentencias de breaG las , variables&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :: Estructuras Eunciones , '. de propiedades control bsicas de de 1lujo &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 7B JavaScript&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& %% $ro%ramacin avanzada...........................................................................................................#( =ipos de variables &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2? ........................................................................................................................!# #. $ro%ramacin JavaScript en otros entornos &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 27 Capt lo 2. El

bsica................................................................................................................!&

continue&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :9 :&:& #tras estructuras :B Capt lo de 5. &. control&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .......5! ........&! 9&2& 9&7& 9&%& Capt lo ........,( B&2& Propiedades bsicas de 1ormularios , elementos &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& B? B&7& B&%& Dalidacin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ?B Capt lo tilidades 9' ?&2& ?&7& Calendario&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& A9 ?&%& =ooltip&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2'' ?&:& ?&6& Capt lo A&2& A&7& 9. Correccin Correccin @aleras )eteccin de de y errores de correccin con errores >enI imgenes de Internet con desplegable &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2'% (Lig)tboC-&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2'9 errores..........................................................................................!!0 ECplorer&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22' Eire1oC &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 227 elojes0 contadores e intervalos de tiempo &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& A: (. *tras ....................................................................................................................... Htilidades bsicas para 1ormularios&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ?' #bteniendo >odelo in1ormacin del >odelos bsico evento de de (objeto ,. eventos &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 92 eventos&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 97 event- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 9? -orm larios ..................................................................................................................... Capt lo

)*+................................................................................................................................. Eventos ...........................................................................................................................

A&%&

Correccin

de

errores

con

#pera &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22:

Capt lo !0. .ec rsos /tiles.....................................................................................................................!!& Capt lo !!. E0ercicios res eltos ..............................................................................................................!!,

Capt lo !. "ntrod ccin

!.!. 12 3 es 4avaScript5
JavaScript es un lenguaje de programacin /ue se utiliza principalmente para crear pginas .eb dinmicas& Hna pgina .eb dinmica es a/uella /ue incorpora e1ectos como teCto /ue aparece , desaparece0 animaciones0 acciones /ue se activan al pulsar botones , ventanas con mensajes de aviso al usuario& =cnicamente0 JavaScript es un lenguaje de programacin interpretado0 por lo /ue no es necesario compilar los programas para ejecutarlos& En otras palabras0 los programas escritos con JavaScript se pueden probar directamente en cual/uier navegador sin necesidad de procesos intermedios& J pesar de su nombre0 JavaScript no guarda ninguna relacin directa con el lenguaje de programacin Java& Legalmente0 JavaScript es una marca registrada de la empresa Sun >icros,stems0 como se puede ver en )ttp*++...&sun&com+suntrademarGs+&

!.2. 6reve 7istoria

J principios de los aKos A'0 la ma,ora de usuarios /ue se conectaban a Internet lo )acan con mdems a una velocidad mCima de 7?&? Gbps& En esa poca0 empezaban a desarrollarse las primeras aplicaciones .eb , por tanto0 las pginas .eb comenzaban a incluir 1ormularios complejos& Con unas aplicaciones .eb cada vez ms complejas , una velocidad de navegacin tan lenta0 surgi la necesidad de un lenguaje de programacin /ue se ejecutara en el navegador del usuario& $e esta 1orma0 si el usuario no rellenaba correctamente un 1ormulario0 no se le )aca esperar muc)o tiempo )asta /ue el servidor volviera a mostrar el 1ormulario indicando los errores eCistentes& 6rendan Eic70 un programador /ue trabajaba en !etscape0 pens /ue podra solucionar este problema adaptando otras tecnologas eCistentes (como ScriptEase- al navegador !etscape !avigator 7&'0 /ue iba a lanzarse en 2AA6& Inicialmente0 Eic) denomin a su lenguaje LiveScript& Posteriormente0 !etscape 1irm una alianza con Sun >icros,stems para el desarrollo del nuevo lenguaje de programacin& Jdems0 justo antes del lanzamiento !etscape decidi cambiar el nombre por el de JavaScript& La razn del cambio de nombre 1ue eCclusivamente por marGeting0 ,a /ue Java era la palabra de moda en el mundo in1ormtico , de Internet de la poca& La primera versin de JavaScript 1ue un completo Cito , !etscape !avigator %&' ,a incorporaba la siguiente versin del lenguaje0 la versin 2&2& Jl mismo tiempo0 >icroso1t lanz JScript con su navegador Internet ECplorer %& JScript era una copia de JavaScript al /ue le cambiaron el nombre para evitar problemas legales&

Para evitar una guerra de tecnologas0 !etscape decidi /ue lo mejor sera estandarizar el lenguaje JavaScript& $e esta 1orma0 en 2AAB se envi la especi1icacin JavaScript 2&2 al organismo EC>J (European Computer Manufacturers Association -& EC>J cre el comit =C%A con el objetivo de "estandarizar de un lenguaje de script multiplataforma e independiente de cualquier empresa" & El primer estndar /ue cre el comit =C%A se denomin EC+892&20 en el /ue se de1ini por primera vez el lenguaje EC>JScript& Por este motivo0 algunos programadores pre1ieren la denominacin ECMAScript para re1erirse al lenguaje JavaScript& $e )ec)o0 JavaScript no es ms /ue la implementacin /ue realiz la empresa !etscape del estndar EC>JScript& La organizacin internacional para la estandarizacin (IS#- adopt el estndar EC>J"797 a travs de su comisin IEC0 dando lugar al estndar IS#+IEC"29797&

!.#. Especi:icaciones o:iciales

EC>J )a publicado varios estndares relacionados con EC>JScript& En Junio de 2AAB se public la primera edicin del estndar EC>J"797& Hn aKo despus0 en Junio de 2AA? se realizaron pe/ueKas modi1icaciones para adaptarlo al estandar IS#+IEC"29797 , se cre la segunda edicin& La tercera edicin del estndar EC>J"797 (publicada en $iciembre de 2AAA- es la versin /ue utilizan los navegadores actuales , se puede consultar gratuitamente en )ttp*++...&ecma"international&org+publications+standards+Ecma"797&)tm Jctualmente se encuentra en desarrollo la cuarta versin de EC>J"7970 /ue podra incluir novedades como pa/uetes0 namespaces0 de1inicin eCplcita de clases0 etc& EC>J tambin )a de1inido varios estndares relacionados con EC>JScript0 como el estndar EC>J"%6B0 /ue de1ine una eCtensin conocida como E:; , /ue permite la integracin de JavaScript , ;>L&

!.'. Cmo incl ir 4avaScript en doc mentos ;<=+>

La integracin de JavaScript , ;<=>L es mu, 1leCible0 ,a /ue eCisten al menos tres 1ormas para incluir cdigo JavaScript en las pginas .eb&

!.'.!. "ncl ir 4avaScript en el mismo doc mento ;<=+>

El cdigo JavaScript se encierra entre eti/uetas LscriptM , se inclu,e en cual/uier parte del documento& Jun/ue es correcto incluir cual/uier blo/ue de cdigo en cual/uier zona de la pgina0 se recomienda de1inir el cdigo JavaScript dentro de la cabecera del documento (dentro de la eti/ueta L)eadM-*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M

LtitleMEjemplo de cdigo JavaScript en el propio documentoL+titleM Lscript t,peRPteCt+javascriptPM alert(PHn mensaje de pruebaP-S L+scriptM L+)eadM Lbod,M LpMHn prra1o de teCto&L+pM L+bod,M L+)tmlM

Para /ue la pgina ;<=>L resultante sea vlida0 es necesario aKadir el atributo t,pe a la eti/ueta LscriptM& Los valores /ue se inclu,en en el atributo t,pe estn estandarizados , para el caso de JavaScript0 el valor correcto es teCt+javascript& Este mtodo se emplea cuando se de1ine un blo/ue pe/ueKo de cdigo o cuando se /uieren incluir instrucciones espec1icas en un determinado documento <=>L /ue completen las instrucciones , 1unciones /ue se inclu,en por de1ecto en todos los documentos del sitio .eb& El principal inconveniente es /ue si se /uiere )acer una modi1icacin en el blo/ue de cdigo0 es necesario modi1icar todas las pginas /ue inclu,en ese mismo blo/ue de cdigo JavaScript&

!.'.2. )e:inir 4avaScript en

n arc7ivo e?terno

Las instrucciones JavaScript se pueden incluir en un arc)ivo eCterno de tipo JavaScript /ue los documentos ;<=>L enlazan mediante la eti/ueta LscriptM& Se pueden crear todos los arc)ivos JavaScript /ue sean necesarios , cada documento ;<=>L puede enlazar tantos arc)ivos JavaScript como necesite& Ejemplo* Jrc)ivo codigo&js
alert(PHn mensaje de pruebaP-S

$ocumento ;<=>L
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjemplo de cdigo JavaScript en el propio documentoL+titleM Lscript t,peRPteCt+javascriptP srcRP+js+codigo&jsPML+scriptM L+)eadM Lbod,M LpMHn prra1o de teCto&L+pM L+bod,M L+)tmlM

Jdems del atributo t,pe0 este mtodo re/uiere de1inir el atributo src0 /ue es el /ue indica la H L correspondiente al arc)ivo JavaScript /ue se /uiere enlazar& Cada eti/ueta LscriptM

solamente puede enlazar un Inico arc)ivo0 pero en una misma pgina se pueden incluir tantas eti/uetas LscriptM como sean necesarias& Los arc)ivos de tipo JavaScript son documentos normales de teCto con la eCtensin &js0 /ue se pueden crear con cual/uier editor de teCto como !otepad0 Qordpad0 EmEditor0 HltraEdit0 Di0 etc& La principal ventaja de enlazar un arc)ivo JavaScript eCterno es /ue se simpli1ica el cdigo ;<=>L de la pgina0 /ue se puede reutilizar el mismo cdigo JavaScript en todas las pginas del sitio .eb , /ue cual/uier modi1icacin realizada en el arc)ivo JavaScript se ve re1lejada inmediatamente en todas las pginas ;<=>L /ue lo enlazan&

!.'.#. "ncl ir 4avaScript en los elementos ;<=+>

Este Iltimo mtodo es el menos utilizado0 ,a /ue consiste en incluir trozos de JavaScript dentro del cdigo ;<=>L de la pgina*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjemplo de cdigo JavaScript en el propio documentoL+titleM L+)eadM Lbod,M Lp onclicGRPalert(THn mensaje de pruebaT-PMHn prra1o de teCto&L+pM L+bod,M L+)tmlM

El ma,or inconveniente de este mtodo es /ue ensucia innecesariamente el cdigo ;<=>L de la pgina , complica el mantenimiento del cdigo JavaScript& En general0 este mtodo slo se utiliza para de1inir algunos eventos , en algunos otros casos especiales0 como se ver ms adelante&

!.5. Eti@ eta noscript

Jlgunos navegadores no disponen de soporte completo de JavaScript0 otros navegadores permiten blo/uearlo parcialmente e incluso algunos usuarios blo/uean completamente el uso de JavaScript por/ue creen /ue as navegan de 1orma ms segura& En estos casos0 es )abitual /ue si la pgina .eb re/uiere JavaScript para su correcto 1uncionamiento0 se inclu,a un mensaje de aviso al usuario indicndole /ue debera activar JavaScript para dis1rutar completamente de la pgina& El siguiente ejemplo muestra una pgina .eb basada en JavaScript cuando se accede con JavaScript activado , cuando se accede con JavaScript completamente desactivado& Eigura 2&2& Imagen de ...&!etvibes&com con JavaScript activado

Eigura 2&7& Imagen de ...&!etvibes&com con JavaScript desactivado

El lenguaje <=>L de1ine la eti/ueta LnoscriptM para mostrar un mensaje al usuario cuando su navegador no puede ejecutar JavaScript& El siguiente cdigo muestra un ejemplo del uso de la eti/ueta LnoscriptM*
L)eadM &&& L+)eadM Lbod,M LnoscriptM LpM8ienvenido a >i SitioL+pM LpMLa pgina /ue ests viendo re/uiere para su 1uncionamiento el uso de JavaScript& Si lo )as des)abilitado intencionadamente0 por 1avor vuelve a activarlo&L+pM L+noscriptM L+bod,M

La eti/ueta LnoscriptM se debe incluir en el interior de la eti/ueta Lbod,M (normalmente se inclu,e al principio de Lbod,M-& El mensaje /ue muestra LnoscriptM puede incluir cual/uier elemento o eti/ueta ;<=>L&

!.&. Alosario bsico

Script* cada uno de los programas0 aplicaciones o trozos de cdigo creados con el lenguaje de programacin JavaScript& Hnas pocas lneas de cdigo 1orman un script , un arc)ivo de miles de lneas de JavaScript tambin se considera un script& J veces se traduce al espaKol directamente como "guin"0 aun/ue script es una palabra ms adecuada , comInmente aceptada&

Sentencia* cada una de las instrucciones /ue 1orman un script& $alabras reservadas* son las palabras (en ingls- /ue se utilizan para construir las sentencias de JavaScript , /ue por tanto no pueden ser utilizadas libremente& Las palabras actualmente reservadas por JavaScript son* breaG0 case0 catc)0 continue0 de1ault0 delete0 do0 else0 1inall,0 1or0 1unction0 i10 in0 instanceo10 ne.0 return0 s.itc)0 t)is0 t)ro.0 tr,0 t,peo10 var0 void0 .)ile0 .it)&

!.,. Sinta?is
La sintaCis de un lenguaje de programacin se de1ine como el conjunto de reglas /ue deben seguirse al escribir el cdigo 1uente de los programas para considerarse como correctos para ese lenguaje de programacin& La sintaCis de JavaScript es mu, similar a la de otros lenguajes de programacin como Java , C& Las normas bsicas /ue de1inen la sintaCis de JavaScript son las siguientes* Bo se tienen en c enta los espacios en blanco y las n evas lneas* como sucede con ;<=>L0 el intrprete de JavaScript ignora cual/uier espacio en blanco sobrante0 por lo /ue el cdigo se puede ordenar de 1orma adecuada para entenderlo mejor (tabulando las lneas0 aKadiendo espacios0 creando nuevas lneas0 etc& Se distin% en las may/sc las y min/sc las* al igual /ue sucede con la sintaCis de las eti/uetas , elementos ;<=>L& Sin embargo0 si en una pgina ;<=>L se utilizan indistintamente ma,Isculas , minIsculas0 la pgina se visualiza correctamente0 siendo el Inico problema la no validacin de la pgina& En cambio0 si en JavaScript se intercambian ma,Isculas , minIsculas el script no 1unciona& Bo se de:ine el tipo de las variables* al crear una variable0 no es necesario indicar el tipo de dato /ue almacenar& $e esta 1orma0 una misma variable puede almacenar di1erentes tipos de datos durante la ejecucin del script& Bo es necesario terminar cada sentencia con el carcter de p nto y coma CDE* en la ma,ora de lenguajes de programacin0 es obligatorio terminar cada sentencia con el carcter S& Jun/ue JavaScript no obliga a )acerlo0 es conveniente seguir la tradicin de terminar cada sentencia con el carcter del punto , coma ( S-& Se p eden incl ir comentarios* los comentarios se utilizan para aKadir in1ormacin en el cdigo 1uente del programa& Jun/ue el contenido de los comentarios no se visualiza por pantalla0 si /ue se enva al navegador del usuario junto con el resto del script0 por lo /ue es necesario eCtremar las precauciones sobre la in1ormacin incluida en los comentarios& JavaScript de1ine dos tipos de comentarios* los de una sola lnea , los /ue ocupan varias lneas& Ejemplo de comentario de una sola lnea*
// a continuacin se muestra un mensaje alert(Pmensaje de pruebaP-S

Los comentarios de una sola lnea se de1inen aKadiendo dos barras oblicuas ( ++- al principio de la lnea&

Ejemplo de comentario de varias lneas*

/* Los comentarios de varias l neas son mu! "tiles cuando se necesita incluir #astante informacin en los comentarios */ alert(Pmensaje de pruebaP-S

Los comentarios multilnea se de1inen encerrando el teCto del comentario entre los smbolos +U , U+&

!.(. $osibilidades y limitaciones

$esde su aparicin0 JavaScript siempre 1ue utilizado de 1orma masiva por la ma,ora de sitios de Internet& La aparicin de Elas) disminu, su popularidad0 ,a /ue Elas) permita realizar algunas acciones imposibles de llevar a cabo mediante JavaScript& Sin embargo0 la aparicin de las aplicaciones JJJ; programadas con JavaScript le )a devuelto una popularidad sin igual dentro de los lenguajes de programacin .eb& En cuanto a las limitaciones0 JavaScript 1ue diseKado de 1orma /ue se ejecutara en un entorno mu, limitado /ue permitiera a los usuarios con1iar en la ejecucin de los scripts& $e esta 1orma0 los scripts de JavaScript no pueden comunicarse con recursos /ue no pertenezcan al mismo dominio desde el /ue se descarg el script& Los scripts tampoco pueden cerrar ventanas /ue no )a,an abierto esos mismos scripts& Las ventanas /ue se crean no pueden ser demasiado pe/ueKas ni demasiado grandes ni colocarse 1uera de la vista del usuario (aun/ue los detalles concretos dependen de cada navegador-& Jdems0 los scripts no pueden acceder a los arc)ivos del ordenador del usuario (ni en modo lectura ni en modo escritura- , tampoco pueden leer o modi1icar las pre1erencias del navegador& Por Iltimo0 si la ejecucin de un script dura demasiado tiempo (por ejemplo por un error de programacin- el navegador in1orma al usuario de /ue un script est consumiendo demasiados recursos , le da la posibilidad de detener su ejecucin& J pesar de todo0 eCisten alternativas para poder saltarse algunas de las limitaciones anteriores& La alternativa ms utilizada , conocida consiste en 1irmar digitalmente el script , solicitar al usuario el permiso para realizar esas acciones&

!.9. 4avaScript y nave%adores

Los navegadores ms modernos disponibles actualmente inclu,en soporte de JavaScript )asta la versin correspondiente a la tercera edicin del estndar EC>J"797& La ma,or di1erencia reside en el dialecto utilizado0 ,a /ue mientras Internet ECplorer utiliza JScript0 el resto de navegadores (Eire1oC0 #pera0 Sa1ari0 Von/ueror- utilizan JavaScript&

!.!0. 4avaScript en otros entornos

La inigualable popularidad de JavaScript como lenguaje de programacin de aplicaciones .eb se )a eCtendido a otras aplicaciones , otros entornos no relacionados con la .eb& <erramientas como Jdobe Jcrobat permiten incluir cdigo JavaScript en arc)ivos P$E& #tras )erramientas de Jdobe como Elas) , EleC utilizan JctionScript0 un dialecto del mismo estndar de JavaScript& P)otos)op permite realizar pe/ueKos scripts mediante JavaScript , la versin 9 de Java inclu,e un nuevo pa/uete (denominado javaC&script- /ue permite integrar ambos lenguajes& Por Iltimo0 aplicaciones como Oa)oo Qidgets ()ttp*++.idgets&,a)oo&com+- , el $as)board de Jpple ()ttp*++...&apple&com+do.nloads+das)board+- utilizan JavaScript para programar sus .idgets&

Capt lo 2. El primer script

J continuacin0 se muestra un primer script sencillo pero completo*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEl primer scriptL+titleM Lscript t,peRPteCt+javascriptPM alert(P<ola >undoNP-S L+scriptM L+)eadM Lbod,M LpMEsta pgina contiene el primer scriptL+pM L+bod,M L+)tmlM

En este ejemplo0 el script se inclu,e como un blo/ue de cdigo dentro de una pgina ;<=>L& Por tanto0 en primer lugar se debe crear una pgina ;<=>L correcta /ue inclu,a la declaracin del $#C=OPE0 el atributo Cmlns0 las secciones L)eadM , Lbod,M0 la eti/ueta LtitleM0 etc& Jun/ue el cdigo del script se puede incluir en cual/uier parte de la pgina0 se recomienda incluirlo en la cabecera del documento0 es decir0 dentro de la eti/ueta L)eadM& J continuacin0 el cdigo JavaScript se debe incluir entre las eti/uetas LscriptM&&&L+scriptM& Jdems0 para /ue la pgina sea vlida0 es necesario de1inir el atributo t,pe de la eti/ueta LscriptM& =cnicamente0 el atributo t,pe se corresponde con Pel tipo >I>EP0 /ue es un estndar para identi1icar los di1erentes tipos de contenidos& El Ptipo >I>EP correcto para JavaScript es teCt+javascript& Hna vez de1inida la zona en la /ue se incluir el script0 se escriben todas las sentencias /ue 1orman la aplicacin& Este primer ejemplo es tan sencillo /ue solamente inclu,e una sentencia* alert(P<ola >undoNP-S& La instruccin alert(- es una de las utilidades /ue inclu,e JavaScript , permite mostrar un mensaje en la pantalla del usuario& Si se visualiza la pgina .eb de este primer script en cual/uier navegador0 automticamente se mostrar una ventana con el mensaje P<ola >undoNP& J continuacin se muestra el resultado de ejecutar el script en di1erentes navegadores* Eigura 7&2& >ensaje mostrado con Palert(-P en Internet ECplorer

Eigura 7&7& >ensaje mostrado con Palert(-P en Eire1oC

Eigura 7&%& >ensaje mostrado con Palert(-P en #pera

Como se puede observar en las imgenes anteriores0 el 1uncionamiento de la utilidad alert(en los distintos navegadores es idntico& Sin embargo0 eCisten grandes di1erencias visuales en la 1orma en la /ue se presentan los mensajes&

>odi1icar el primer script para /ue*

=odo el cdigo JavaScript se encuentre en un arc)ivo eCterno llamado codigo&js , el script siga 1uncionando de la misma manera& 7 $espus del primer mensaje0 se debe mostrar otro mensaje /ue diga "So! el primer script" % JKadir algunos comentarios /ue eCpli/uen el 1uncionamiento del cdigo : JKadir en la pgina ;<=>L un mensaje de aviso para los navegadores /ue no tengan activado el soporte de JavaScript

Capt lo #. $ro%ramacin bsica

Jntes de comenzar a desarrollar programas , utilidades con JavaScript0 es necesario conocer los elementos bsicos con los /ue se constru,en las aplicaciones& Si ,a sabes programar en algIn lenguaje de programacin0 este captulo te servir para conocer la sintaCis espec1ica de JavaScript& Si nunca )as programado0 este captulo eCplica en detalle , comenzando desde cero los conocimientos bsicos necesarios para poder entender posteriormente la programacin avanzada0 /ue es la /ue se utiliza para crear las aplicaciones reales&

#.!. Fariables
Las variables en los lenguajes de programacin siguen una lgica similar a las variables utilizadas en otros mbitos como las matemticas& Hna variable es un elemento /ue se emplea para almacenar , )acer re1erencia a otro valor& @racias a las variables es posible crear "programas gen$ricos"0 es decir0 programas /ue 1uncionan siempre igual independientemente de los valores concretos utilizados& $e la misma 1orma /ue si en >atemticas no eCistieran las variables no se podran de1inir las ecuaciones , 1rmulas0 en programacin no se podran )acer programas realmente Itiles sin las variables& Si no eCistieran variables0 un programa /ue suma dos nImeros podra escribirse como*
resultado R % W 2

El programa anterior es tan poco Itil /ue slo sirve para el caso en el /ue el primer nImero de la suma sea el % , el segundo nImero sea el 2& En cual/uier otro caso0 el programa obtiene un resultado incorrecto& Sin embargo0 el programa se puede re)acer de la siguiente manera utilizando variables para almacenar , re1erirse a cada nImero*
numeroX2 R % numeroX7 R 2 resultado R numeroX2 W numeroX7

Los elementos numeroX2 , numeroX7 son variables /ue almacenan los valores /ue utiliza el programa& El resultado se calcula siempre en 1uncin del valor almacenado por las variables0 por lo /ue este programa 1unciona correctamente para cual/uier par de nImeros indicado& Si se modi1ica el valor de las variables numeroX2 , numeroX70 el programa sigue 1uncionando correctamente& Las variables en JavaScript se crean mediante la palabra reservada var& $e esta 1orma0 el ejemplo anterior se puede realizar en JavaScript de la siguiente manera*

var numeroX2 R %S var numeroX7 R 2S var resultado R numeroX2 W numeroX7S

La palabra reservada var solamente se debe indicar al de1inir por primera vez la variable0 lo /ue se denomina declarar una variable& Cuando se utilizan las variables en el resto de instrucciones del script0 solamente es necesario indicar su nombre& En otras palabras0 en el ejemplo anterior sera un error indicar lo siguiente*
var numeroX2 R %S var numeroX7 R 2S var resultado R var numeroX2 W var numeroX7S

Si cuando se declara una variable se le asigna tambin un valor0 se dice /ue la variable )a sido inicializada& En JavaScript no es obligatorio inicializar las variables0 ,a /ue se pueden declarar por una parte , asignarles un valor posteriormente& Por tanto0 el ejemplo anterior se puede re)acer de la siguiente manera*
var numeroX2S var numeroX7S numeroX2 R %S numeroX7 R 2S var resultado R numeroX2 W numeroX7S

Hna de las caractersticas ms sorprendentes de JavaSript para los programadores )abituados a otros lenguajes de programacin es /ue tampoco es necesario declarar las variables& En otras palabras0 se pueden utilizar variables /ue no se )an de1inido anteriormente mediante la palabra reservada var& El ejemplo anterior tambin es correcto en JavaScript de la siguiente 1orma*
var numeroX2 R %S var numeroX7 R 2S resultado R numeroX2 W numeroX7S

La variable resultado no est declarada0 por lo /ue JavaScript crea una variable global (ms adelante se vern las di1erencias entre variables locales , globales- , le asigna el valor correspondiente& $e la misma 1orma0 tambin sera correcto el siguiente cdigo*
numeroX2 R %S numeroX7 R 2S resultado R numeroX2 W numeroX7S

En cual/uier caso0 se recomienda declarar todas las variables /ue se va,an a utilizar& El nombre de una variable tambin se conoce como identi:icador , debe cumplir las siguientes normas* Slo puede estar 1ormado por letras0 nImeros , los smbolos Y (dlar- , X(guin bajo-& El primer carcter no puede ser un nImero& Por tanto0 las siguientes variables tienen nombres correctos*

var Ynumero2S var XYletraS var YYYotro!umeroS var YXaXXY:S

Sin embargo0 las siguientes variables tienen identi1icadores incorrectos*

var 2numeroS // Empieza por un n"mero var numeroS2X27%S // Contiene un car%cter "&"

#.2. =ipos de variables

Jun/ue todas las variables de JavaScript se crean de la misma 1orma (mediante la palabra reservada var-0 la 1orma en la /ue se les asigna un valor depende del tipo de valor /ue se /uiere almacenar (nImeros0 teCtos0 etc&-

#.2.!. B m3ricas
Se utilizan para almacenar valores numricos enteros (llamados integer en ingls- o decimales (llamados float en ingls-& En este caso0 el valor se asigna indicando directamente el nImero entero o decimal& Los nImeros decimales utilizan el carcter & (punto- en vez de 0 (coma- para separar la parte entera , la parte decimal*
var iva R 29S // varia#le tipo entero var total R 7%:&96S // varia#le tipo decimal

#.2.2. Cadenas de te?to

Se utilizan para almacenar caracteres0 palabras ,+o 1rases de teCto& Para asignar el valor a la variable0 se encierra el valor entre comillas dobles o simples0 para delimitar su comienzo , su 1inal*
var mensaje R P8ienvenido a nuestro sitio .ebPS var nombreProducto R TProducto J8CTS var letraSeleccionada R TcTS

En ocasiones0 el teCto /ue se almacena en las variables no es tan sencillo& Si por ejemplo el propio teCto contiene comillas simples o dobles0 la estrategia /ue se sigue es la de encerrar el teCto con las comillas (simples o dobles- /ue no utilice el teCto*
/* El contenido de te'to( tiene comillas simples) por lo que se encierra con comillas do#les */ var teCto2 R PHna 1rase con Tcomillas simplesT dentroPS /* El contenido de te'to* tiene comillas do#les) por lo que se encierra con comillas simples */ var teCto7 R THna 1rase con Pcomillas doblesP dentroTS

!o obstante0 a veces las cadenas de teCto contienen tanto comillas simples como dobles& Jdems0 eCisten otros caracteres /ue son di1ciles de incluir en una variable de teCto (tabulador0 E!=E 0 etc&- Para resolver estos problemas0 JavaScript de1ine un mecanismo para incluir de 1orma sencilla caracteres especiales , problemticos dentro de una cadena de teCto&

El mecanismo consiste en sustituir el carcter problemtico por una combinacin simple de caracteres& J continuacin se muestra la tabla de conversin /ue se debe utilizar*

$e esta 1orma0 el ejemplo anterior /ue contena comillas simples , dobles dentro del teCto se puede re)acer de la siguiente 1orma*
var teCto2 R THna 1rase con ZTcomillas simplesZT dentroTS var teCto7 R PHna 1rase con ZPcomillas doblesZP dentroPS

Este mecanismo de JavaScript se denomina "mecanismo de escape" de los caracteres problemticos0 , es )abitual re1erirse a /ue los caracteres )an sido "escapados"&

>odi1icar el primer script del captulo anterior para /ue*

El mensaje /ue se muestra al usuario se almacene en una variable llamada mensaje , el 1uncionamiento del script sea el mismo& 7 El mensaje mostrado sea el de la siguiente imagen* Eigura %&2& !uevo mensaje /ue debe mostrar el script

#.2.#. 8rrays
En ocasiones0 a los arra,s se les llama vectores0 matrices e incluso arreglos& !o obstante0 el trmino arra, es el ms utilizado , es una palabra comInmente aceptada en el entorno de la programacin& Hn arra, es una coleccin de variables0 /ue pueden ser todas del mismo tipo o cada una de un tipo di1erente& Su utilidad se comprende mejor con un ejemplo sencillo* si una aplicacin necesita manejar los das de la semana0 se podran crear siete variables de tipo teCto*
var dia2 R PLunesPS var dia7 R P>artesPS &&& var diaB R P$omingoPS

Jun/ue el cdigo anterior no es incorrecto0 s /ue es poco e1iciente , complica en eCceso la programacin& Si en vez de los das de la semana se tuviera /ue guardar el nombre de los meses del aKo0 el nombre de todos los pases del mundo o las mediciones diarias de temperatura de los Iltimos 2'' aKos0 se tendran /ue crear decenas o cientos de variables& En este tipo de casos0 se pueden agrupar todas las variables relacionadas en una coleccin de variables o arra,& El ejemplo anterior se puede re)acer de la siguiente 1orma*
var dias R [PLunesP0 P>artesP0 P>ircolesP0 PJuevesP0 PDiernesP0 PSbadoP0 P$omingoP\S

J)ora0 una Inica variable llamada dias almacena todos los valores relacionados entre s0 en este caso los das de la semana& Para de1inir un arra,0 se utilizan los caracteres [ , \ para delimitar su comienzo , su 1inal , se utiliza el carcter 0(coma- para separar sus elementos*
var nombreXarra, R [valor20 valor70 &&&0 valor!\S

Hna vez de1inido un arra,0 es mu, sencillo acceder a cada uno de sus elementos& Cada elemento se accede indicando su posicin dentro del arra,& La Inica complicacin0 /ue es responsable de muc)os errores cuando se empieza a programar0 es /ue las posiciones de los elementos empiezan a contarse en el ', no en el 2*
var diaSeleccionado R dias['\S // diaSeleccionado + "Lunes" var otro$ia R dias[6\S // otro,ia + "S%#ado"

En el ejemplo anterior0 la primera instruccin /uiere obtener el primer elemento del arra,& Para ello0 se indica el nombre del arra, , entre corc)etes la posicin del elemento dentro del arra,& Como se )a comentado0 las posiciones se empiezan a contar en el '0 por lo /ue el primer elemento ocupa la posicin ' , se accede a el mediante dias['\& El valor dias[6\ )ace re1erencia al elemento /ue ocupa la seCta posicin dentro del arra, dias& Como las posiciones empiezan a contarse en '0 la posicin 6)ace re1erencia al seCto elemento0 en este caso0 el valor Sbado&

Crear un arra, llamado meses , /ue almacene el nombre de los doce meses del aKo& >ostrar por pantalla los doce nombres utilizando la 1uncin alert(-&

#.2.'. 6ooleanos
Las variables de tipo #oolean o #ooleano tambin se conocen con el nombre de variables de tipo lgico& Jun/ue para entender realmente su utilidad se debe estudiar la programacin avanzada con JavaScript del siguiente captulo0 su 1uncionamiento bsico es mu, sencillo& Hna variable de tipo #oolean almacena un tipo especial de valor /ue solamente puede tomar dos valores* true (verdadero- o 1alse (1also-& !o se puede utilizar para almacenar nImeros , tampoco permite guardar cadenas de teCto& Los Inicos valores /ue pueden almacenar estas variables son true , 1alse0 por lo /ue no pueden utilizarse los valores verdadero , 1also& J continuacin se muestra un par de variables de tipo #ooleano*
var cliente egistrado R 1alseS var ivaIncluido R trueS

#.#. *peradores
Las variables por s solas son de poca utilidad& <asta a)ora0 slo se )a visto cmo crear variables de di1erentes tipos , cmo mostrar su valor mediante la 1uncin alert(-& Para )acer programas realmente Itiles0 son necesarias otro tipo de )erramientas& Los operadores permiten manipular el valor de las variables0 realizar operaciones matemticas con sus valores , comparar di1erentes variables& $e esta 1orma0 los operadores permiten a los programas realizar clculos complejos , tomar decisiones lgicas en 1uncin de comparaciones , otros tipos de condiciones&

#.#.!. 8si%nacin
El operador de asignacin es el ms utilizado , el ms sencillo& Este operador se utiliza para guardar un valor espec1ico en una variable& El smbolo utilizado es R (no con1undir con el operador RR/ue se ver ms adelante-*
var numero2 R %S

J la iz/uierda del operador0 siempre debe indicarse el nombre de una variable& J la derec)a del operador0 se pueden indicar variables0 valores0 condiciones lgicas0 etc*
var numero2 R %S var numero7 R :S /* Error) la asignacin siempre se realiza a una varia#le) por lo que en la izquierda no se puede indicar un n"mero */ 6 R numero2S // A-ora) la varia#le numero( vale . numero2 R 6S // A-ora) la varia#le numero( vale / numero2 R numero7S

#.#.2. "ncremento y decremento

Estos dos operadores solamente son vlidos para las variables numricas , se utilizan para incrementar o decrementar en una unidad el valor de una variable& Ejemplo*
var numero R 6S WWnumeroS alert(numero-S // numero + 0

El operador de incremento se indica mediante el pre1ijo WW en el nombre de la variable& El resultado es /ue el valor de esa variable se incrementa en una unidad& Por tanto0 el anterior ejemplo es e/uivalente a*
var numero R 6S numero R numero W 2S alert(numero-S // numero + 0

$e 1orma e/uivalente0 el operador decremento (indicado como un pre1ijo ""en el nombre de la variable- se utiliza para decrementar el valor de la variable*
var numero R 6S ""numeroS alert(numero-S // numero + /

El anterior ejemplo es e/uivalente a*

var numero R 6S numero R numero "2S alert(numero-S // numero + /

Los operadores de incremento , decremento no solamente se pueden indicar como pre1ijo del nombre de la variable0 sino /ue tambin es posible utilizarlos como su1ijo& En este caso0 su comportamiento es similar pero mu, di1erente& En el siguiente ejemplo*
var numero R 6S numeroWWS alert(numero-S // numero + 0

El resultado de ejecutar el script anterior es el mismo /ue cuando se utiliza el operador W Wnumero0 por lo /ue puede parecer /ue es e/uivalente indicar el operador WW delante o detrs del identi1icador de la variable& Sin embargo0 el siguiente ejemplo muestra sus di1erencias*
var numero2 R 6S var numero7 R 7S numero% R numero2WW W numero7S // numero1 + 2) numero( + 0 var numero2 R 6S var numero7 R 7S numero% R WWnumero2 W numero7S // numero1 + 3) numero( + 0

Si el operador WW se indica como pre1ijo del identi1icador de la variable0 su valor se incrementa antes de realizar cual/uier otra operacin& Si el operador WW se indica como su1ijo del identi1icador de la variable0 su valor se incrementa desp 3s de ejecutar la sentencia en la /ue aparece& Por tanto0 en la instruccin numero% R numero2WW W numero7S0 el valor de numero2 se incrementa despus de realizar la operacin (primero se suma , numero% vale B0 despus se incrementa el valor de numero2 , vale 9-& Sin embargo0 en la instruccin numero% R W Wnumero2 W numero7S0 en primer lugar se incrementa el valor de numero2 , despus se realiza la suma (primero se incrementa numero2 , vale 90 despus se realiza la suma , numero%vale ?-&

#.#.#. >%icos
Los operadores lgicos son imprescindibles para realizar aplicaciones complejas0 ,a /ue se utilizan para tomar decisiones sobre las instrucciones /ue debera ejecutar el programa en 1uncin de ciertas condiciones& El resultado de cual/uier operacin /ue utilice operadores lgicos siempre es un valor lgico o #ooleano&

#.#.#.!. Be%acin
Hno de los operadores lgicos ms utilizados es el de la negacin& Se utiliza para obtener el valor contrario al valor de la variable*
var visible R trueS alert(Nvisible-S // Muestra "false" ! no "true"

La negacin lgica se obtiene pre1ijando el smbolo N al identi1icador de la variable& El 1uncionamiento de este operador se resume en la siguiente tabla*

Si la variable original es de tipo #ooleano0 es mu, sencillo obtener su negacin& Sin embargo0 3/u sucede cuando la variable es un nImero o una cadena de teCto5 Para obtener la negacin en este tipo de variables0 se realiza en primer lugar su conversin a un valor #ooleano* Si la variable contiene un nImero0 se trans1orma en 1alsesi vale ', en true para cual/uier otro nImero (positivo o negativo0 decimal o entero-& Si la variable contiene una cadena de teCto0 se trans1orma en 1alse si la cadena es vaca (PP- , en true en cual/uier otro caso&
var cantidad R 'S vacio R NcantidadS // vacio + true cantidad R 7S vacio R NcantidadS // vacio + false

var mensaje R PPS mensajeDacio R NmensajeS // mensaje4acio + true mensaje R P8ienvenidoPS mensajeDacio R NmensajeS // mensaje4acio + false

#.#.#.2. 8B)
La operacin lgica J!$ obtiene su resultado combinando dos valores booleanos& El operador se indica mediante el smbolo ]], su resultado solamente es truesi los dos operandos son true*

var valor2 R trueS var valor7 R 1alseS resultado R valor2 ]] valor7S // resultado + false valor2 R trueS valor7 R trueS resultado R valor2 ]] valor7S // resultado + true

#.#.#.#. *.
La operacin lgica # tambin combina dos valores booleanos& El operador se indica mediante el smbolo ^^ , su resultado es truesi alguno de los dos operandos es true*

var valor2 R trueS var valor7 R 1alseS resultado R valor2 ^^ valor7S // resultado + true valor2 R 1alseS valor7 R 1alseS resultado R valor2 ^^ valor7S // resultado + false

#.#.'. +atemticos
JavaScript permite realizar manipulaciones matemticas sobre el valor de las variables numricas& Los operadores de1inidos son* suma ( W-0 resta ("-0 multiplicacin (U- , divisin (+-& Ejemplo*
var numero2 R 2'S var numero7 R 6S resultado R numero2 + numero7S // resultado + * resultado R % W numero2S // resultado + (1 resultado R numero7 _ :S // resultado + ( resultado R numero2 U numero 7S // resultado + .5

Jdems de los cuatro operadores bsicos0 JavaScript de1ine otro operador matemtico /ue no es sencillo de entender cuando se estudia por primera vez0 pero /ue es mu, Itil en algunas ocasiones& Se trata del operador "mdulo"0 /ue calcula el resto de la divisin entera de dos nImeros& Si se divide por ejemplo 2' , 60 la divisin es eCacta , da un resultado de 7& El resto de esa divisin es '0 por lo /ue mdulo de 2' , 6 es igual a '& Sin embargo0 si se divide A , 60 la divisin no es eCacta0 el resultado es 2 , el resto :0 por lo /ue mdulo de A , 6 es igual a :& El operador mdulo en JavaScript se indica mediante el smbolo `0 /ue no debe con1undirse con el clculo del porcentaje*
var numero2 R 2'S var numero7 R 6S resultado R numero2 ` numero7S // resultado + 5 numero2 R AS numero7 R 6S resultado R numero2 ` numero7S // resultado + /

Los operadores matemticos tambin se pueden combinar con el operador de asignacin para abreviar su notacin*
var numero2 R 6S numero2 WR %S // numero( + numero( 6 1 + 3 numero2 "R 2S // numero( + numero( 7 ( + / numero2 UR 7S // numero( + numero( * * + (5 numero2 +R 6S // numero( + numero( / . + ( numero2 `R :S // numero( + numero( 8 / + (

#.#.5. .elacionales
Los operadores relacionales de1inidos por JavaScript son idnticos a los /ue de1inen las matemticas* ma,or /ue (M-0 menor /ue (L-0 ma,or o igual (MR-0 menor o igual (LR-0 igual /ue (RR- , distinto de (NR-&

Los operadores /ue relacionan variables son imprescindibles para realizar cual/uier aplicacin compleja0 como se ver en el siguiente captulo de programacin avanzada& El resultado de todos estos operadores siempre es un valor booleano*
var numero2 R %S var numero7 R 6S resultado R numero2 M numero7S // resultado + false resultado R numero2 L numero7S // resultado + true numero2 R 6S numero7 R 6S resultado R numero2 MR numero7S // resultado + true resultado R numero2 LR numero7S // resultado + true resultado R numero2 RR numero7S // resultado + true resultado R numero2 NR numero7S // resultado + false

Se debe tener especial cuidado con el operador de igualdad ( RR-0 ,a /ue es el origen de la ma,ora de errores de programacin0 incluso para los usuarios /ue ,a tienen cierta eCperiencia desarrollando scripts& El operador RR se utiliza para comparar el valor de dos variables0 por lo /ue es mu, di1erente del operador R0 /ue se utiliza para asignar un valor a una variable*
// El operador "+" asigna valores var numero2 R 6S resultado R numero2 R %S // numero( + 1 ! resultado + 1 // El operador "++" compara varia#les var numero2 R 6S resultado R numero2 RR %S // numero( + . ! resultado + false

Los operadores relacionales tambin se pueden utilizar con variables de tipo cadena de teCto*
var teCto2 R P)olaPS var teCto7 R P)olaPS var teCto% R PadiosPS resultado R teCto2 RR teCto%S // resultado + false resultado R teCto2 NR teCto7S // resultado + false resultado R teCto% MR teCto7S // resultado + false

Cuando se utilizan cadenas de teCto0 los operadores Pma,or /ueP ( M- , Pmenor /ueP (Lsiguen un razonamiento no intuitivo* se compara letra a letra comenzando desde la iz/uierda )asta /ue se encuentre una di1erencia entre las dos cadenas de teCto& Para determinar si una letra es ma,or o menor /ue otra0 las ma,Isculas se consideran menores /ue las minIsculas , las primeras letras del al1abeto son menores /ue las Iltimas ( a es menor /ue b0 b es menor /ue c0 J es menor /ue a0 etc&-

J partir del siguiente arra, /ue se proporciona* var valores R [true0 60 1alse0 P)olaP0 PadiosP0 7\S 2& $eterminar cual de los dos elementos de teCto es ma,or

Htilizando eCclusivamente los dos valores booleanos del arra,0 determinar los operadores necesarios para obtener un resultado true , otro resultado 1alse 7 $eterminar el resultado de las cinco operaciones matemticas realizadas con los dos elementos numricos

#.'. Estr ct ras de control de :l 0o

Los programas /ue se pueden realizar utilizando solamente variables , operadores son una simple sucesin lineal de instrucciones bsicas& Sin embargo0 no se pueden realizar programas /ue muestren un mensaje si el valor de una variable es igual a un valor determinado , no muestren el mensaje en el resto de casos& =ampoco se puede repetir de 1orma e1iciente una misma instruccin0 como por ejemplo sumar un determinado valor a todos los elementos de un arra,& Para realizar este tipo de programas son necesarias las estr ct ras de control de :l 0o 0 /ue son instrucciones del tipo "si se cumple esta condicin) -azlo& si no se cumple) -az esto otro"& =ambin eCisten instrucciones del tipo "repite esto mientras se cumpla esta condicin" & Si se utilizan estructuras de control de 1lujo0 los programas dejan de ser una sucesin lineal de instrucciones para convertirse en programas inteligentes /ue pueden tomar decisiones en 1uncin del valor de las variables&

#.'.!. Estr ct ra i:
La estructura ms utilizada en JavaScript , en la ma,ora de lenguajes de programacin es la estructura i1& Se emplea para tomar decisiones en 1uncin de una condicin& Su de1inicin 1ormal es*
i1(condicion- a &&& b

Si la condicin se cumple (es decir0 si su valor es true- se ejecutan todas las instrucciones /ue se encuentran dentro de a&&&b& Si la condicin no se cumple (es decir0 si su valor es 1alseno se ejecuta ninguna instruccin contenida en a&&&b , el programa continIa ejecutando el resto de instrucciones del script& Ejemplo*
var mostrar>ensaje R trueS i1(mostrar>ensaje- a alert(P<ola >undoP-S b

En el ejemplo anterior0 el mensaje s /ue se muestra al usuario ,a /ue la variable mostrar>ensaje tiene un valor de true , por tanto0 el programa entra dentro del blo/ue de instrucciones del i1& El ejemplo se podra reescribir tambin como*

var mostrar>ensaje R trueS i1(mostrar>ensaje RR true- a alert(P<ola >undoP-S b

En este caso0 la condicin es una comparacin entre el valor de la variable mostrar>ensaje , el valor true& Como los dos valores coinciden0 la igualdad se cumple , por tanto la condicin es cierta0 su valor es true, se ejecutan las instrucciones contenidas en ese blo/ue del i1& La comparacin del ejemplo anterior suele ser el origen de muc)os errores de programacin0 al con1undir los operadores RR , R& Las comparaciones siempre se realizan con el operador RR0 ,a /ue el operador Rsolamente asigna valores*
var mostrar>ensaje R trueS // Se comparan los dos valores i1(mostrar>ensaje RR 1alse- a &&& b // Error 7 Se asigna el valor "false" a la varia#le i1(mostrar>ensaje R 1alse- a &&& b

La condicin /ue controla el i1(- puede combinar los di1erentes operadores lgicos , relacionales mostrados anteriormente*
var mostrado R 1alseS i1(Nmostrado- a alert(PEs la primera vez /ue se muestra el mensajeP-S b

Los operadores J!$ , # condiciones complejas*

permiten encadenar varias condiciones simples para construir

var mostrado R 1alseS var usuarioPermite>ensajes R trueS i1(Nmostrado ]] usuarioPermite>ensajes- a alert(PEs la primera vez /ue se muestra el mensajeP-S b

La condicin anterior est 1ormada por una operacin J!$ sobre dos variables& J su vez0 a la primera variable se le aplica el operador de negacin antes de realizar la operacin J!$& $e esta 1orma0 como el valor de mostrado es 1alse0 el valor Nmostrado sera true& Como la variable usuarioPermite>ensajes vale true0 el resultado de Nmostrado ]] usuarioPermite>ensajes sera igual a true ]] true0 por lo /ue el resultado 1inal de la condicin del i1(- sera true , por tanto0 se ejecutan las instrucciones /ue se encuentran dentro del blo/ue del i1(-&

Completar las condiciones de los i1 del siguiente script para /ue los mensajes de los alert(- se muestren siempre de 1orma correcta*
var numero2 R 6S var numero7 R ?S i1(&&&- a alert(Pnumero2 no es ma,or /ue numero7P-S b i1(&&&- a alert(Pnumero7 es positivoP-S b i1(&&&- a alert(Pnumero2 es negativo o distinto de ceroP-S b i1(&&&- a alert(PIncrementar en 2 unidad el valor de numero2 no lo )ace ma,or o igual /ue numero7P-S b

#.'.2. Estr ct ra i:...else

En ocasiones0 las decisiones /ue se deben realizar no son del tipo "si se cumple la condicin) -azlo& si no se cumple) no -agas nada" & !ormalmente las condiciones suelen ser del tipo "si se cumple esta condicin) -azlo& si no se cumple) -az esto otro" & Para este segundo tipo de decisiones0 eCiste una variante de la estructura i1 llamada i1&&&else& Su de1inicin 1ormal es la siguiente*
i1(condicion- a &&& b else a &&& b

Si la condicin se cumple (es decir0 si su valor es true- se ejecutan todas las instrucciones /ue se encuentran dentro del i1(-& Si la condicin no se cumple (es decir0 si su valor es 1alsese ejecutan todas las instrucciones contenidas en else a b& Ejemplo*
var edad R 2?S i1(edad MR 2?- a alert(PEres ma,or de edadP-S b else a alert(P=odava eres menor de edadP-S b

Si el valor de la variable edad es ma,or o igual /ue el valor numrico 2?0 la condicin del i1(se cumple , por tanto0 se ejecutan sus instrucciones , se muestra el mensaje PEres ma,or de edadP& Sin embargo0 cuando el valor de la variable edad no es igual o ma,or /ue 2?0 la condicin del i1(- no se cumple0 por lo /ue automticamente se ejecutan todas las instrucciones del blo/ue else a b& En este caso0 se mostrara el mensaje P=odava eres menor de edadP&

El siguiente ejemplo compara variables de tipo cadena de teCto*

var nombre R PPS i1(nombre RR PP- a alert(PJIn no nos )as dic)o tu nombreP-S b else a alert(P<emos guardado tu nombreP-S b

La condicin del i1(- anterior se constru,e mediante el operador RR0 /ue es el /ue se emplea para comparar dos valores (no con1undir con el operador R /ue se utiliza para asignar valores-& En el ejemplo anterior0 si la cadena de teCto almacenada en la variable nombre es vaca (es decir0 es igual a PP- se muestra el mensaje de1inido en el i1(-& En otro caso0 se muestra el mensaje de1inido en el blo/ue else a b& La estructura i1&&&else se puede encadenar para realizar varias comprobaciones seguidas*
i1(edad L 27- a alert(P=odava eres mu, pe/ueKoP-S b else i1(edad L 2A- a alert(PEres un adolescenteP-S b else i1(edad L %6- a alert(PJun sigues siendo jovenP-S b else a alert(PPiensa en cuidarte un poco msP-S b

!o es obligatorio /ue la combinacin de estructuras i1&&&else acabe con la instruccin else0 ,a /ue puede terminar con una instruccin de tipo else i1(-&

El clculo de la letra del $ocumento !acional de Identidad ($!I- es un proceso matemtico sencillo /ue se basa en obtener el resto de la divisin entera del nImero de $!I , el nImero 7%& J partir del resto de la divisin0 se obtiene la letra seleccionndola dentro de un arra, de letras& El arra, de letras es*
var letras R [T=T0 T T0 TQT0 TJT0 T@T0 T>T0 TOT0 TET0 TPT0 T$T0 T;T0 T8T0 T!T0 TJT0 TcT0 TST0 T4T0 TDT0 T<T0 TLT0 TCT0 TVT0 TET0 T=T\S

Por tanto si el resto de la divisin es '0 la letra del $!I es la = , si el resto es % la letra es la J& Con estos datos0 elaborar un pe/ueKo script /ue*

Jlmacene en una variable el nImero de $!I indicado por el usuario , en otra variable la letra del $!I /ue se )a indicado& (Pista* si se /uiere pedir directamente al usuario /ue indi/ue su nImero , su letra0 se puede utilizar la 1uncin prompt(-7 En primer lugar (, en una sola instruccin- se debe comprobar si el nImero es menor /ue ' o ma,or /ue AAAAAAAA& Si ese es el caso0 se muestra un mensaje al usuario indicando /ue el nImero proporcionado no es vlido , el programa no muestra ms mensajes& 2 Si el nImero es vlido0 se calcula la letra /ue le corresponde segIn el mtodo eCplicado anteriormente& 7 Hna vez calculada la letra0 se debe comparar con la letra indicada por el usuario& Si no coinciden0 se muestra un mensaje al usuario dicindole /ue la letra /ue )a indicado no es correcta& En otro caso0 se muestra un mensaje indicando /ue el nImero , la letra de $!I son correctos&

#.'.#. Estr ct ra :or

Las estructuras i1 , i1&&&else no son mu, e1icientes cuando se desea ejecutar de 1orma repetitiva una instruccin& Por ejemplo0 si se /uiere mostrar un mensaje cinco veces0 se podra pensar en utilizar el siguiente i1*
var veces R 'S i1(veces L :- a alert(P>ensajeP-S vecesWWS b

Se comprueba si la variable veces es menor /ue :& Si se cumple0 se entra dentro del i1(-0 se muestra el mensaje , se incrementa el valor de la variable veces& Js se debera seguir ejecutando )asta mostrar el mensaje las cinco veces deseadas& Sin embargo0 el 1uncionamiento real del script anterior es mu, di1erente al deseado0 ,a /ue solamente se muestra una vez el mensaje por pantalla& La razn es /ue la ejecucin de la estructura i1(- no se repite , la comprobacin de la condicin slo se realiza una vez0 independientemente de /ue dentro del i1(- se modi1i/ue el valor de la variable utilizada en la condicin& La estructura 1or permite realizar este tipo de repeticiones (tambin llamadas bucles- de una 1orma mu, sencilla& !o obstante0 su de1inicin 1ormal no es tan sencilla como la de i1(-*
1or(inicializacionS condicionS actualizacion- a &&& b

La idea del 1uncionamiento de un bucle 1or es la siguiente* "mientras la condicin indicada se siga cumpliendo) repite la ejecucin de las instrucciones definidas dentro del for9 Adem%s) despu$s de cada repeticin) actualiza el valor de las varia#les que se utilizan en la condicin"& La PinicializacinP es la zona en la /ue se establece los valores iniciales de las variables /ue controlan la repeticin&

 La PcondicinP es el Inico elemento /ue decide si continua o se detiene la repeticin& La PactualizacinP es el nuevo valor /ue se asigna despus de cada repeticin a las variables /ue controlan la repeticin&
var mensaje R P<ola0 esto, dentro de un buclePS 1or(var i R 'S i L 6S iWW- a alert(mensaje-S b

La parte de la inicializacin del bucle consiste en*

var i R 'S

Por tanto0 en primer lugar se crea la variable i , se le asigna el valor de '& Esta zona de inicializacin solamente se tiene en consideracin justo antes de comenzar a ejecutar el bucle& Las siguientes repeticiones no tienen en cuenta esta parte de inicializacin& La zona de condicin del bucle es*
i L6

Los bucles se siguen ejecutando mientras se cumplan las condiciones , se dejan de ejecutar justo despus de comprobar /ue la condicin no se cumple& En este caso0 mientras la variable i valga menos de 6 el bucle se ejecuta inde1inidamente& Como la variable i se )a inicializado a un valor de ' , la condicin para salir del bucle es /ue i sea menor /ue 60 si no se modi1ica el valor de i de alguna 1orma0 el bucle se repetira inde1inidamente& Por ese motivo0 es imprescindible indicar la zona de actualizacin0 en la /ue se modi1ica el valor de las variables /ue controlan el bucle*
iWW

En este caso0 el valor de la variable ise incrementa en una unidad despus de cada repeticin& La zona de actualizacin se ejecuta despus de la ejecucin de las instrucciones /ue inclu,e el 1or& Js0 durante la ejecucin de la /uinta repeticin el valor de i ser :& $espus de la /uinta ejecucin0 se actualiza el valor de i0 /ue a)ora valdr 6& Como la condicin es /ue i sea menor /ue 60 la condicin ,a no se cumple , las instrucciones del 1orno se ejecutan una seCta vez& !ormalmente0 la variable /ue controla los bucles 1or se llama i0 ,a /ue recuerda a la palabra ndice , su nombre tan corto a)orra muc)o tiempo , espacio& El ejemplo anterior /ue mostraba los das de la semana contenidos en un arra, se puede re)acer de 1orma ms sencilla utilizando la estructura 1or*
var dias R [PLunesP0 P>artesP0 P>ircolesP0 PJuevesP0 PDiernesP0 PSbadoP0 P$omingoP\S 1or(var iR'S iLBS iWW- a alert(dias[i\-S b

El 1actorial de un nImero entero n es una operacin matemtica /ue consiste en multiplicar todos los 1actores n C (n"2- C (n"7- C &&& C 2 & Js0 el 1actorial de 6 (escrito como 6N- es igual a* 6N
R 6 C : C % C 7 C 2 R 27'

Htilizando la estructura 1or0 crear un script /ue calcule el 1actorial de un nImero entero&

#.'.'. Estr ct ra :or...in

Hna estructura de control derivada de 1ores la estructura 1or&&&in& Su de1inicin eCacta implica el uso de objetos0 /ue es un elemento de programacin avanzada /ue no se va a estudiar& Por tanto0 solamente se va a presentar la estructura 1or&&&in adaptada a su uso en arra,s& Su de1inicin 1ormal adaptada a los arra,s es*
1or(indice in arra,- a &&& b

Si se /uieren recorrer todos los elementos /ue 1orman un arra,0 la estructura 1or&&&in es la 1orma ms e1iciente de )acerlo0 como se muestra en el siguiente ejemplo*
var dias R [PLunesP0 P>artesP0 P>ircolesP0 PJuevesP0 PDiernesP0 PSbadoP0 P$omingoP\S 1or(i in dias- a alert(dias[i\-S b

La variable /ue se indica como indice es la /ue se puede utilizar dentro del bucle 1or&&&in para acceder a los elementos del arra,& $e esta 1orma0 en la primera repeticin del bucle la variable i vale ', en la Iltima vale 9& Esta estructura de control es la ms adecuada para recorrer arra,s (, objetos-0 ,a /ue evita tener /ue indicar la inicializacin , las condiciones del bucle 1or simple , 1unciona correctamente cual/uiera /ue sea la longitud del arra,& $e )ec)o0 sigue 1uncionando igual aun/ue vare el nImero de elementos del arra,&

#.5. - nciones y propiedades bsicas de 4avaScript

JavaScript incorpora una serie de )erramientas , utilidades (llamadas 1unciones , propiedades0 como se ver ms adelante- para el manejo de las variables& $e esta 1orma0 muc)as de las operaciones bsicas con las variables0 se pueden realizar directamente con las utilidades /ue o1rece JavaScript&

#.5.!. - nciones /tiles para cadenas de te?to

J continuacin se muestran algunas de las 1unciones ms Itiles para el manejo de cadenas de teCto*
lengt)0 calcula la longitud de una cadena de teCto (el nImero de caracteres /ue la 1orman-

var mensaje R P<ola >undoPS var numeroLetras R mensaje&lengt)S // numeroLetras + (5

W0 se emplea para concatenar varias cadenas de teCto

var mensaje2 R P<olaPS var mensaje7 R P >undoPS var mensaje R mensaje2 W mensaje7S // mensaje + ":ola Mundo"

Jdems del operador W0 tambin se puede utilizar la 1uncin concat(var mensaje2 R P<olaPS var mensaje7 R mensaje2&concat(P >undoP-S // mensaje* + ":ola Mundo"

Las cadenas de teCto tambin se pueden unir con variables numricas*

var variable2 R P<ola PS var variable7 R %S var mensaje R variable2 W variable7S // mensaje + ":ola 1"

Cuando se unen varias cadenas de teCto es )abitual olvidar aKadir un espacio de separacin entre las palabras*
var mensaje2 R P<olaPS var mensaje7 R P>undoPS var mensaje R mensaje2 W mensaje7S // mensaje + ":olaMundo"

Los espacios en blanco se pueden aKadir al 1inal o al principio de las cadenas , tambin se pueden indicar 1orma eCplcita*
var mensaje2 R P<olaPS var mensaje7 R P>undoPS var mensaje R mensaje2 W P P W mensaje7S // mensaje + ":ola Mundo"

toHpperCase(-0 trans1orma todos los caracteres de la cadena a sus correspondientes

caracteres en ma,Isculas*
var mensaje2 R P<olaPS var mensaje7 R mensaje2&toHpperCase(-S // mensaje* + ":;LA"

toLo.erCase(-0 trans1orma todos los caracteres de la cadena a sus correspondientes

caracteres en minIsculas*
var mensaje2 R P<olJPS var mensaje7 R mensaje2&toLo.erCase(-S // mensaje* + "-ola"

c)arJt(posicion-0 obtiene el carcter /ue se encuentra en la posicin indicada*

var mensaje R P<olaPS var letra R mensaje&c)arJt('-S // letra + : letra R mensaje&c)arJt(7-S // letra + l

indeC#1(caracter-0 calcula la posicin en la /ue se encuentra el carcter indicado dentro de la

cadena de teCto& Si el carcter se inclu,e varias veces dentro de la cadena de teCto0 se devuelve su primera posicin empezando a buscar desde la iz/uierda& Si la cadena no contiene el carcter0 la 1uncin devuelve el valor "2*

var mensaje R P<olaPS var posicion R mensaje&indeC#1(TaT-S // posicion + 1 posicion R mensaje&indeC#1(TbT-S // posicion + 7(

Su 1uncin anloga es lastIndeC#1(-*

lastIndeC#1(caracter-0 calcula la Iltima posicin en la /ue se encuentra el carcter indicado

dentro de la cadena de teCto& Si la cadena no contiene el carcter0 la 1uncin devuelve el valor "2*
var mensaje R P<olaPS var posicion R mensaje&lastIndeC#1(TaT-S // posicion + 1 posicion R mensaje&lastIndeC#1(TbT-S // posicion + 7(

La 1uncin lastIndeC#1(- comienza su bIs/ueda desde el 1inal de la cadena )acia el principio0 aun/ue la posicin devuelta es la correcta empezando a contar desde el principio de la palabra&
substring(inicio0 1inal-0 eCtrae una porcin de una cadena de teCto& El segundo parmetro es

opcional& Si slo se indica el parmetro inicio0 la 1uncin devuelve la parte de la cadena original correspondiente desde esa posicin )asta el 1inal*
var mensaje R P<ola >undoPS var porcion R mensaje&substring(7-S // porcion + "la Mundo" porcion R mensaje&substring(6-S // porcion + "Mundo" porcion R mensaje&substring(B-S // porcion + "ndo"

Si se indica un inicionegativo0 se devuelve la misma cadena original*

var mensaje R P<ola >undoPS var porcion R mensaje&substring("7-S // porcion + ":ola Mundo"

Cuando se indica el inicio , el 1inal0 se devuelve la parte de la cadena original comprendida entre la posicin inicial , la inmediatamente anterior a la posicin 1inal (es decir0 la posicin inicio est incluida , la posicin 1inalno-*
var mensaje R P<ola >undoPS var porcion R mensaje&substring(20 ?-S // porcion + "ola Mun" porcion R mensaje&substring(%0 :-S // porcion + "a"

Si se indica un 1inal ms pe/ueKo /ue el inicio0 JavaScript los considera de 1orma inversa0 ,a /ue automticamente asigna el valor ms pe/ueKo al inicio, el ms grande al 1inal*
var mensaje R P<ola >undoPS var porcion R mensaje&substring(60 '-S // porcion + ":ola " porcion R mensaje&substring('0 6-S // porcion + ":ola "

split(separador-0 convierte una cadena de teCto en un arra, de cadenas de teCto& La 1uncin

parte la cadena de teCto determinando sus trozos a partir del carcter separador indicado*
var mensaje R P<ola >undo0 so, una cadena de teCtoNPS var palabras R mensaje&split(P P-S // pala#ras + <":ola") "Mundo)") "so!") "una") "cadena") "de") "te'to=">&

Con esta 1uncin se pueden eCtraer 1cilmente las letras /ue 1orman una palabra*
var palabra R P<olaPS var letras R palabra&split(PP-S // letras + <":") "o") "l") "a">

#.5.2. - nciones /tiles para arrays

J continuacin se muestran algunas de las 1unciones ms Itiles para el manejo de arra,s*
lengt)0 calcula el nImero de elementos de un arra,
var vocales R [PaP0 PeP0 PiP0 PoP0 PuP\S var numeroDocales R vocales&lengt)S // numero4ocales + .

concat(-0 se emplea para concatenar los elementos de varios arra,s

var arra,2 R [20 70 %\S arra,7 R arra,2&concat(:0 60 9-S // arra!* + <() *) 1) /) .) 0> arra,% R arra,2&concat([:0 60 9\-S // arra!1 + <() *) 1) /) .) 0>

join(separador-0 es la 1uncin contraria a split(-& Hne todos los elementos de un arra, para

1ormar una cadena de teCto& Para unir los elementos se utiliza el carcter separador indicado
var arra, R [P)olaP0 PmundoP\S var mensaje R arra,&join(PP-S // mensaje + "-olamundo" mensaje R arra,&join(P P-S // mensaje + "-ola mundo"

pop(-0 elimina el Iltimo elemento del arra, , lo devuelve& El arra, original se modi1ica , su

longitud disminu,e en 2 elemento&

var arra, R [20 70 %\S var ultimo R arra,&pop(-S // a-ora arra! + <() *>) ultimo + 1

pus)(-0 aKade un elemento al 1inal del arra,& El arra, original se modi1ica , aumenta su

longitud en 2 elemento& (=ambin es posible aKadir ms de un elemento a la vezvar arra, R [20 70 %\S arra,&pus)(:-S // a-ora arra! + <() *) 1) />

s)i1t(-0 elimina el primer elemento del arra, , lo devuelve& El arra, original se ve modi1icado ,

su longitud disminuida en 2 elemento&

var arra, R [20 70 %\S var primero R arra,&s)i1t(-S // a-ora arra! + <*) 1>) primero + (

uns)i1t(-0 aKade un elemento al principio del arra,& El arra, original se modi1ica , aumenta su

longitud en 2 elemento& (=ambin es posible aKadir ms de un elemento a la vezvar arra, R [20 70 %\S arra,&uns)i1t('-S // a-ora arra! + <5) () *) 1>

reverse(-0 modi1ica un arra, colocando sus elementos en el orden inverso a su posicin

original*
var arra, R [20 70 %\S arra,&reverse(-S // a-ora arra! + <1) *) (>

#.5.#. - nciones /tiles para n/meros

J continuacin se muestran algunas de las 1unciones , propiedades ms Itiles para el manejo de nImeros&
!a!0 (del ingls0 "?ot a ?um#er"- JavaScript emplea el valor !a! para indicar un valor

numrico no de1inido (por ejemplo0 la divisin '+'-&

var numero2 R 'S var numero7 R 'S alert(numero2+numero7-S // se muestra el valor ?a?

is!a!(-0 permite proteger a la aplicacin de posibles valores numricos no de1inidos

var numero2 R 'S var numero7 R 'S i1(is!a!(numero2+numero7-- a alert(PLa divisin no est de1inida para los nImeros indicadosP-S b else a alert(PLa divisin es igual a RM P W numero2+numero7-S b

In1init,0 )ace re1erencia a un valor numrico in1inito , positivo (tambin eCiste el valor _In1init,

para los in1initos negativosvar numero2 R 2'S var numero7 R 'S alert(numero2+numero7-S // se muestra el valor @nfinit!

toEiCed(digitos-0 devuelve el nImero original con tantos decimales como los indicados por el

parmetro digitos , realiza los redondeos necesarios& Se trata de una 1uncin mu, Itil por ejemplo para mostrar precios&
var numero2 R :69:&%:69BS numero2&toEiCed(7-S // /.0/91. numero2&toEiCed(9-S // /.0/91/.025 numero2&toEiCed(-S // /.0/

Capt lo '. $ro%ramacin avanzada

Las estructuras de control0 los operadores , todas las utilidades propias de JavaScript /ue se )an visto en los captulos anteriores0 permiten crear scripts sencillos , de mediana complejidad& Sin embargo0 para las aplicaciones ms complejas son necesarios otros elementos como las 1unciones , otras estructuras de control ms avanzadas0 /ue se describen en este captulo&

'.!. - nciones
Cuando se desarrolla una aplicacin compleja0 es mu, )abitual utilizar una , otra vez las mismas instrucciones& Hn script para una tienda de comercio electrnico por ejemplo0 tiene /ue calcular el precio total de los productos varias veces0 para aKadir los impuestos , los gastos de envo& Cuando una serie de instrucciones se repiten una , otra vez0 se complica demasiado el cdigo 1uente de la aplicacin0 ,a /ue* El cdigo de la aplicacin es muc)o ms largo por/ue muc)as instrucciones estn repetidas& Si se /uiere modi1icar alguna de las instrucciones repetidas0 se deben )acer tantas modi1icaciones como veces se )a,a escrito esa instruccin0 lo /ue se convierte en un trabajo mu, pesado , mu, propenso a cometer errores& Las 1unciones son la solucin a todos estos problemas0 tanto en JavaScript como en el resto de lenguajes de programacin& Hna 1uncin es un conjunto de instrucciones /ue se agrupan para realizar una tarea concreta , /ue se pueden reutilizar 1cilmente& En el siguiente ejemplo0 las instrucciones /ue suman los dos nImeros , muestran un mensaje con el resultado se repiten una , otra vez*
var resultadoS var numero2 R %S var numero7 R 6S // Se suman los n"meros ! se muestra el resultado resultado R numero2 W numero7S alert(PEl resultado es P W resultado-S numero2 R 2'S numero7 R BS // Se suman los n"meros ! se muestra el resultado resultado R numero2 W numero7S alert(PEl resultado es P W resultado-S numero2 R 6S numero7 R ?S // Se suman los n"meros ! se muestra el resultado

resultado R numero2 W numero7S alert(PEl resultado es P W resultado-S &&&

Jun/ue es un ejemplo mu, sencillo0 parece evidente /ue repetir las mismas instrucciones a lo largo de todo el cdigo no es algo recomendable& La solucin /ue proponen las 1unciones consiste en eCtraer las instrucciones /ue se repiten , sustituirlas por una instruccin del tipo "en este punto) se ejecutan las instrucciones que se -an e'tra do" *
var resultadoS var numero2 R %S var numero7 R 6S /* En este punto) se llama a la funcin que suma * n"meros ! muestra el resultado */ numero2 R 2'S numero7 R BS /* En este punto) se llama a la funcin que suma * n"meros ! muestra el resultado */ numero2 R 6S numero7 R ?S /* En este punto) se llama a la funcin que suma * n"meros ! muestra el resultado */ &&&

Para /ue la solucin del ejemplo anterior sea vlida0 las instrucciones comunes se tienen /ue agrupar en una 1uncin a la /ue se le puedan indicar los nImeros /ue debe sumar antes de mostrar el mensaje& Por lo tanto0 en primer lugar se debe crear la 1uncin bsica con las instrucciones comunes& Las 1unciones en JavaScript se de1inen mediante la palabra reservada 1unction0 seguida del nombre de la 1uncin& Su de1inicin 1ormal es la siguiente*
1unction nombreX1uncion(- a &&& b

El nombre de la 1uncin se utiliza para llamar a esa 1uncin cuando sea necesario& El concepto es el mismo /ue con las variables0 a las /ue se les asigna un nombre Inico para poder utilizarlas dentro del cdigo& $espus del nombre de la 1uncin0 se inclu,en dos parntesis cu,o signi1icado se detalla ms adelante& Por Iltimo0 los smbolos a , b se utilizan para encerrar todas las instrucciones /ue pertenecen a la 1uncin (de 1orma similar a como se encierran las instrucciones en las estructuras i1 o 1or-& Dolviendo al ejemplo anterior0 se crea una 1uncin llamada sumaX,Xmuestra de la siguiente 1orma*
1unction sumaX,Xmuestra(- a resultado R numero2 W numero7S

alert(PEl resultado es P W resultado-S b

Jun/ue la 1uncin anterior est correctamente creada0 no 1unciona como debera ,a /ue le 1altan los "argumentos"0 /ue se eCplican en la siguiente seccin& Hna vez creada la 1uncin0 desde cual/uier punto del cdigo se puede llamar a la 1uncin para /ue se ejecuten sus instrucciones (adems de "llamar a la funcin"0 tambin se suele utilizar la eCpresin "invocar a la funcin"-& La llamada a la 1uncin se realiza simplemente indicando su nombre0 inclu,endo los parntesis del 1inal , el carcter S para terminar la instruccin*
1unction sumaX,Xmuestra(- a resultado R numero2 W numero7S alert(PEl resultado es P W resultado-S b var resultadoS var numero2 R %S var numero7 R 6S sumaX,Xmuestra(-S numero2 R 2'S numero7 R BS sumaX,Xmuestra(-S numero2 R 6S numero7 R ?S sumaX,Xmuestra(-S &&&

El cdigo del ejemplo anterior es muc)o ms e1iciente /ue el primer cdigo /ue se mostr0 ,a /ue no eCisten instrucciones repetidas& Las instrucciones /ue suman , muestran mensajes se )an agrupado bajo una 1uncin0 lo /ue permite ejecutarlas en cual/uier punto del programa simplemente indicando el nombre de la 1uncin& Lo Inico /ue le 1alta al ejemplo anterior para 1uncionar correctamente es poder indicar a la 1uncin los nImeros /ue debe sumar& Cuando se necesitan pasar datos a una 1uncin0 se utilizan los "argumentos"0 como se eCplica en la siguiente seccin&

'.!.!. 8r% mentos y valores de retorno

Las 1unciones ms sencillas no necesitan ninguna in1ormacin para producir sus resultados& Sin embargo0 la ma,ora de 1unciones de las aplicaciones reales deben acceder al valor de algunas variables para producir sus resultados& Las variables /ue necesitan las 1unciones se llaman argumentos& Jntes de /ue pueda utilizarlos0 la 1uncin debe indicar cuntos argumentos necesita , cul es el nombre de cada argumento& Jdems0 al invocar la 1uncin0 se deben incluir los valores /ue se le van a pasar a la 1uncin& Los argumentos se indican dentro de los parntesis /ue van detrs del nombre de la 1uncin , se separan con una coma ( 0-&

Siguiendo el ejemplo anterior0 la 1uncin debe indicar /ue necesita dos argumentos0 correspondientes a los dos nImeros /ue tiene /ue sumar*
1unction sumaX,Xmuestra(primer!umero0 segundo!umero- a &&& b

J continuacin0 para utilizar el valor de los argumentos dentro de la 1uncin0 se debe emplear el mismo nombre con el /ue se de1inieron los argumentos*
1unction sumaX,Xmuestra(primer!umero0 segundo!umero- a &&& b var resultado R primer!umero W segundo!umeroS alert(PEl resultado es P W resultado-S b

$entro de la 1uncin0 el valor de la variable primer!umero ser igual al primer valor /ue se le pase a la 1uncin , el valor de la variable segundo!umero ser igual al segundo valor /ue se le pasa& Para pasar valores a la 1uncin0 se inclu,en dentro de los parntesis utilizados al llamar a la 1uncin*
// ,efinicin de la funcin 1unction sumaX,Xmuestra(primer!umero0 segundo!umero- a &&& b var resultado R primer!umero W segundo!umeroS alert(PEl resultado es P W resultado-S b // ,eclaracin de las varia#les var numero2 R %S var numero7 R 6S // Llamada a la funcin sumaX,Xmuestra(numero20 numero7-S

En el cdigo anterior0 se debe tener en cuenta /ue* Jun/ue casi siempre se utilizan variables para pasar los datos a la 1uncin0 se podra )aber utilizado directamente el valor de esas variables* sumaX,Xmuestra(%0 6-S El nImero de argumentos /ue se pasa a una 1uncin debera ser el mismo /ue el nImero de argumentos /ue )a indicado la 1uncin& !o obstante0 JavaScript no muestra ningIn error si se pasan ms o menos argumentos de los necesarios& El orden de los argumentos es 1undamental0 ,a /ue el primer dato /ue se indica en la llamada0 ser el primer valor /ue espera la 1uncinS el segundo valor indicado en la llamada0 es el segundo valor /ue espera la 1uncin , as sucesivamente& Se puede utilizar un nImero ilimitado de argumentos0 aun/ue si su nImero es mu, grande0 se complica en eCceso la llamada a la 1uncin& !o es obligatorio /ue coincida el nombre de los argumentos /ue utiliza la 1uncin , el nombre de los argumentos /ue se le pasan& En el ejemplo anterior0 los argumentos /ue se pasan son numero2, numero7 , los argumentos /ue utiliza la 1uncin son primer!umero , segundo!umero&

J continuacin se muestra otro ejemplo de una 1uncin /ue calcula el precio total de un producto a partir de su precio bsico*
// ,efinicin de la funcin 1unction calculaPrecio=otal(precio- a var impuestos R 2&29S var gastosEnvio R 2'S var precio=otal R ( precio U impuestos - W gastosEnvioS b // Llamada a la funcin calculaPrecio=otal(7%&%:-S

La 1uncin anterior toma como argumento una variable llamada precio , le suma los impuestos , los gastos de envo para obtener el precio total& Jl llamar a la 1uncin0 se pasa directamente el valor del precio bsico mediante el nImero 7%&%:& !o obstante0 el cdigo anterior no es demasiado Itil0 ,a /ue lo ideal sera /ue la 1uncin pudiera devolver el resultado obtenido para guardarlo en otra variable , poder seguir trabajando con este precio total*
1unction calculaPrecio=otal(precio- a var impuestos R 2&29S var gastosEnvio R 2'S var precio=otal R ( precio U impuestos - W gastosEnvioS b // El valor devuelto por la funcin) se guarda en una varia#le var precio=otal R calculaPrecio=otal(7%&%:-S // Seguir tra#ajando con la varia#le "precioAotal"

J1ortunadamente0 las 1unciones no solamente puede recibir variables , datos0 sino /ue tambin pueden devolver los valores /ue )an calculado& Para devolver valores dentro de una 1uncin0 se utiliza la palabra reservada return& Jun/ue las 1unciones pueden devolver valores de cual/uier tipo0 solamente pueden devolver un valor cada vez /ue se ejecutan&
1unction calculaPrecio=otal(precio- a var impuestos R 2&29S var gastosEnvio R 2'S var precio=otal R ( precio U impuestos - W gastosEnvioS return precio=otalS b var precio=otal R calculaPrecio=otal(7%&%:-S // Seguir tra#ajando con la varia#le "precioAotal"

Para /ue la 1uncin devuelva un valor0 solamente es necesario escribir la palabra reservada return junto con el nombre de la variable /ue se /uiere devolver& En el ejemplo anterior0 la ejecucin de la 1uncin llega a la instruccin return precio=otalS , en ese momento0 devuelve el valor /ue contenga la variable precio=otal&

Como la 1uncin devuelve un valor0 en el punto en el /ue se realiza la llamada0 debe indicarse el nombre de una variable en el /ue se guarda el valor devuelto*
var precio=otal R calculaPrecio=otal(7%&%:-S

Si no se indica el nombre de ninguna variable0 JavaScript no muestra ningIn error , el valor devuelto por la 1uncin simplemente se pierde , por tanto0 no se utilizar en el resto del programa& En este caso0 tampoco es obligatorio /ue el nombre de la variable devuelta por la 1uncin coincida con el nombre de la variable en la /ue se va a almacenar ese valor& Si la 1uncin llega a una instruccin de tipo return0 se devuelve el valor indicado , 1inaliza la ejecucin de la 1uncin& Por tanto0 todas las instrucciones /ue se inclu,en despus de un return se ignoran , por ese motivo la instruccin return suele ser la Iltima de la ma,ora de 1unciones& Para /ue el ejemplo anterior sea ms completo0 se puede aKadir otro argumento a la 1uncin /ue indi/ue el porcentaje de impuestos /ue se debe aKadir al precio del producto& Evidentemente0 el nuevo argumento se debe aKadir tanto a la de1inicin de la 1uncin como a su llamada*
1unction calculaPrecio=otal(precio0 porcentajeImpuestos- a var gastosEnvio R 2'S var precioConImpuestos R (2 W porcentajeImpuestos+2''- U precioS var precio=otal R precioConImpuestos W gastosEnvioS return precio=otalS b var precio=otal R calculaPrecio=otal(7%&%:0 29-S var otroPrecio=otal R calculaPrecio=otal(26&7'0 :-S

Para terminar de completar el ejercicio anterior0 se puede rendondear a dos decimales el precio total devuelto por la 1uncin*
1unction calculaPrecio=otal(precio0 porcentajeImpuestos- a var gastosEnvio R 2'S var precioConImpuestos R (2 W porcentajeImpuestos+2''- U precioS var precio=otal R precioConImpuestos W gastosEnvioS return precio=otal&toEiCed(7-S b var precio=otal R calculaPrecio=otal(7%&%:0 29-S

Escribir el cdigo de una 1uncin a la /ue se pasa como parmetro un nImero entero , devuelve como resultado una cadena de teCto /ue indica si el nImero es par o impar& >ostrar por pantalla el resultado devuelto por la 1uncin&

$e1inir una 1uncin /ue muestre in1ormacin sobre una cadena de teCto /ue se le pasa como argumento& J partir de la cadena /ue se le pasa0 la 1uncin determina si esa cadena est 1ormada slo por ma,Isculas0 slo por minIsculas o por una mezcla de ambas&

$e1inir una 1uncin /ue determine si la cadena de teCto /ue se le pasa como parmetro es un palndromo0 es decir0 si se lee de la misma 1orma desde la iz/uierda , desde la derec)a& Ejemplo de palndromo complejo* PLa ruta nos aporto otro paso naturalP&

'.2. Gmbito de las variables

El mbito de una variable (llamado "scope" en ingls- es la zona del programa en la /ue se de1ine la variable& JavaScript de1ine dos mbitos para las variables* global , local& El siguiente ejemplo ilustra el comportamiento de los mbitos*
1unction crea>ensaje(- a var mensaje R d>ensaje de pruebaeS b crea>ensaje(-S alert(mensaje-S

El ejemplo anterior de1ine en primer lugar una 1uncin llamada crea>ensaje /ue crea una variable llamada mensaje& J continuacin0 se ejecuta la 1uncin mediante la llamada crea>ensaje(-S , seguidamente0 se muestra mediante la 1uncin alert(- el valor de una variable llamada mensaje& Sin embargo0 al ejecutar el cdigo anterior no se muestra ningIn mensaje por pantalla& La razn es /ue la variable mensaje se )a de1inido dentro de la 1uncin crea>ensaje(- , por tanto0 es una variable local /ue solamente est de1inida dentro de la 1uncin& Cual/uier instruccin /ue se encuentre dentro de la 1uncin puede )acer uso de esa variable0 pero todas las instrucciones /ue se encuentren en otras 1unciones o 1uera de cual/uier 1uncin no tendrn de1inida la variable mensaje& $e esta 1orma0 para mostrar el mensaje en el cdigo anterior0 la 1uncin alert(-debe llamarse desde dentro de la 1uncin crea>ensaje(-*
1unction crea>ensaje(- a var mensaje R d>ensaje de pruebaeS alert(mensaje-S b crea>ensaje(-S

Jdems de variables locales0 tambin eCiste el concepto de variable %lobal0 /ue est de1inida en cual/uier punto del programa (incluso dentro de cual/uier 1uncin-&
var mensaje R d>ensaje de pruebaeS 1unction muestra>ensaje(- a alert(mensaje-S b

El cdigo anterior es el ejemplo inverso al mostrado anteriormente& $entro de la 1uncin muestra>ensaje(- se /uiere )acer uso de una variable llamada mensaje , /ue no )a sido de1inida dentro de la propia 1uncin& Sin embargo0 si se ejecuta el cdigo anterior0 s /ue se muestra el mensaje de1inido por la variable mensaje&

El motivo es /ue en el cdigo JavaScript anterior0 la variable mensaje se )a de1inido 1uera de cual/uier 1uncin& Este tipo de variables automticamente se trans1orman en variables globales , estn disponibles en cual/uier punto del programa (incluso dentro de cual/uier 1uncin-& $e esta 1orma0 aun/ue en el interior de la 1uncin no se )a de1inido ninguna variable llamada mensaje0 la variable global creada anteriormente permite /ue la instruccin alert(- dentro de la 1uncin muestre el mensaje correctamente& Si una variable se declara 1uera de cual/uier 1uncin0 automticamente se trans1orma en variable global independientemente de si se de1ine utilizando la palabra reservada var o no& Sin embargo0 las variables de1inidas dentro de una 1uncin pueden ser globales o locales& Si en el interior de una 1uncin0 las variables se declaran mediante varse consideran locales , las variables /ue no se )an declarado mediante var0 se trans1orman automticamente en variables globales& Por lo tanto0 se puede re)acer el cdigo del primer ejemplo para /ue muestre el mensaje correctamente& Para ello0 simplemente se debe de1inir la variable dentro de la 1uncin sin la palabra reservada var0 para /ue se trans1orme en una variable global*
1unction crea>ensaje(- a mensaje R P>ensaje de pruebaPS b crea>ensaje(-S alert(mensaje-S

34u sucede si una 1uncin de1ine una variable local con el mismo nombre /ue una variable global /ue ,a eCiste5 En este caso0 las variables locales prevalecen sobre las globales0 pero slo dentro de la 1uncin*
var mensaje R Pgana la de 1ueraPS 1unction muestra>ensaje(- a var mensaje R Pgana la de dentroPS alert(mensaje-S b alert(mensaje-S muestra>ensaje(-S alert(mensaje-S

El cdigo anterior muestra por pantalla los siguientes mensajes*

gana la de 1uera gana la de dentro gana la de 1uera

$entro de la 1uncin0 la variable local llamada mensaje tiene ms prioridad /ue la variable global del mismo nombre0 pero solamente dentro de la 1uncin&

34u sucede si dentro de una 1uncin se de1ine una variable global con el mismo nombre /ue otra variable global /ue ,a eCiste5 En este otro caso0 la variable global de1inida dentro de la 1uncin simplemente modi1ica el valor de la variable global de1inida anteriormente*
var mensaje R Pgana la de 1ueraPS 1unction muestra>ensaje(- a mensaje R Pgana la de dentroPS alert(mensaje-S b alert(mensaje-S muestra>ensaje(-S alert(mensaje-S

En este caso0 los mensajes mostrados son*

gana la de 1uera gana la de dentro gana la de dentro

La recomendacin general es de1inir como variables locales todas las variables /ue sean de uso eCclusivo para realizar las tareas encargadas a cada 1uncin& Las variables globales se utilizan para compartir variables entre 1unciones de 1orma sencilla&

'.#. Sentencias breaH y contin e

La estructura de control 1or es mu, sencilla de utilizar0 pero tiene el inconveniente de /ue el nImero de repeticiones /ue se realizan slo se pueden controlar mediante las variables de1inidas en la zona de actualizacin del bucle& Las sentencias breaG , continue permiten manipular el comportamiento normal de los bucles 1or para detener el bucle o para saltarse algunas repeticiones& Concretamente0 la sentencia breaG permite terminar de 1orma abrupta un bucle , la sentencia continue permite saltarse algunas repeticiones del bucle& El siguiente ejemplo muestra el uso de la sentencia breaG*
var cadena R PEn un lugar de la >anc)a de cu,o nombre no /uiero acordarme&&&PS var letras R cadena&split(PP-S var resultado R PPS 1or(i in letras- a i1(letras[i\ RR TaT- a breaGS b else a resultado WR letras[i\S b b alert(resultado-S // muestra "En un lug"

Si el programa llega a una instruccin de tipo breaGS0 sale inmediatamente del bucle , continIa ejecutando el resto de instrucciones /ue se encuentran 1uera del bucle 1or& En el ejemplo anterior0 se recorren todas las letras de una cadena de teCto , cuando se encuentra con la primera letra PaP0 se detiene la ejecucin del bucle 1or& La utilidad de breaG es terminar la ejecucin del bucle cuando una variable toma un determinado valor o cuando se cumple alguna condicin& En ocasiones0 lo /ue se desea es saltarse alguna repeticin del bucle cuando se dan algunas condiciones& Siguiendo con el ejemplo anterior0 a)ora se desea /ue el teCto de salida elimine todas las letras PaPde la cadena de teCto original*
var cadena R PEn un lugar de la >anc)a de cu,o nombre no /uiero acordarme&&&PS var letras R cadena&split(PP-S var resultado R PPS 1or(i in letras- a i1(letras[i\ RR TaT- a continueS b else a resultado WR letras[i\S b b alert(resultado-S // muestra "En un lugr de l Mnc- de cu!o nom#re no quiero cordrme999"

En este caso0 cuando se encuentra una letra PaP no se termina el bucle0 sino /ue no se ejecutan las instrucciones de esa repeticin , se pasa directamente a la siguiente repeticin del bucle 1or& La utilidad de continue es /ue permite utilizar el bucle 1or para 1iltrar los resultados en 1uncin de algunas condiciones o cuando el valor de alguna variable coincide con un valor determinado&

'.'. *tras estr ct ras de control

Las estructuras de control de 1lujo /ue se )an visto ( i10 else0 1or- , las sentencias /ue modi1ican su comportamiento (breaG0 continue- no son su1icientes para realizar algunas tareas complejas , otro tipo de repeticiones& Por ese motivo0 JavaScript proporciona otras estructuras de control de 1lujo di1erentes , en algunos casos ms e1icientes&

'.'.!. Estr ct ra w7ile

La estructura .)ile permite crear bucles /ue se ejecutan ninguna o ms veces0 dependiendo de la condicin indicada& Su de1inicin 1ormal es*
.)ile(condicion- a &&& b

El 1uncionamiento del bucle .)ile se resume en* "mientras se cumpla la condicin indicada) repite indefinidamente las instrucciones incluidas dentro del #ucle" &

Si la condicin no se cumple ni si/uiera la primera vez0 el bucle no se ejecuta& Si la condicin se cumple0 se ejecutan las instrucciones una vez , se vuelve a comprobar la condicin& Si se sigue cumpliendo la condicin0 se vuelve a ejecutar el bucle , as se continIa )asta /ue la condicin no se cumpla& Evidentemente0 las variables /ue controlan la condicin deben modi1icarse dentro del propio bucle0 ,a /ue de otra 1orma0 la condicin se cumplira siempre , el bucle .)ile se repetira inde1inidamente& El siguiente ejemplo utiliza el bucle .)ile para sumar todos los nImeros menores o iguales /ue otro nImero*
var resultado R 'S var numero R 2''S var i R 'S .)ile(i LR numero- a resultado WR iS iWWS b alert(resultado-S

El programa debe sumar todos los nImeros menores o igual /ue otro dado& Por ejemplo si el nImero es 60 se debe calcular* 2 W 7 W % W : W 6 R 26 Este tipo de condiciones ("suma n"meros mientras sean menores o iguales que otro n"mero dado"- se resuelven mu, 1cilmente con los bucles tipo .)ile0 aun/ue tambin se podan resolver con bucles de tipo 1or& En el ejemplo anterior0 mientras se cumpla la condicin0 es decir0 mientras /ue la variable i sea menor o igual /ue la variable numero0 se ejecutan las instrucciones del bucle& $entro del bucle se suma el valor de la variable i al resultado total (variable resultado- , se actualiza el valor de la variable i0 /ue es la /ue controla la condicin del bucle& Si no se actualiza el valor de la variable i0 la ejecucin del bucle continua in1initamente o )asta /ue el navegador permita al usuario detener el script&

'.'.2. Estr ct ra do...w7ile

El bucle de tipo do&&&.)ile es mu, similar al bucle .)ile0 salvo /ue en este caso siempre se ejecutan las instrucciones del bucle al menos la primera vez& Su de1inicin 1ormal es*
do a &&& b .)ile(condicion-S

$e esta 1orma0 como la condicin se comprueba despus de cada repeticin0 la primera vez siempre se ejecutan las instrucciones del bucle& Es importante no olvidar /ue despus del .)ile(-se debe aKadir el carcter S(al contrario de lo /ue sucede con el bucle .)ile simple-& Htilizando este bucle se puede calcular 1cilmente el 1actorial de un nImero*

var resultado R 2S var numero R 6S do a resultado UR numeroS // resultado + resultado * numero numero""S b .)ile(numero M '-S alert(resultado-S

En el cdigo anterior0 el resultado se multiplica en cada repeticin por el valor de la variable numero& Jdems0 en cada repeticin se decrementa el valor de esta variable numero& La condicin del bucle do&&&.)ile es /ue el valor de numerosea ma,or /ue '0 ,a /ue el 1actorial de un nImero multiplica todos los nImeros menores o iguales /ue l mismo0 pero )asta el nImero 2 (el 1actorial de 6 por ejemplo es 6 C : C % C 7 C 2 R 27'-& Como en cada repeticin se decrementa el valor de la variable numero , la condicin es /ue numero sea ma,or /ue cero0 en la repeticin en la /ue numero valga '0 la condicin ,a no se cumple , el programa se sale del bucle do&&&.)ile&

'.'.#. Estr ct ra switc7

La estructura i1&&&else se puede utilizar para realizar comprobaciones mIltiples , tomar decisiones complejas& Sin embargo0 si todas las condiciones dependen siempre de la misma variable0 el cdigo JavaScript resultante es demasiado redundante*
i1(numero RR 6- a &&& b else i1(numero RR ?- a &&& b else i1(numero RR 7'- a &&& b else a &&& b

En estos casos0 la estructura s.itc) es la ms e1iciente0 ,a /ue est especialmente diseKada para manejar de 1orma sencilla mIltiples condiciones sobre la misma variable& Su de1inicin 1ormal puede parecer compleja0 aun/ue su uso es mu, sencillo*
s.itc)(variable- a case valorX2* &&& breaGS case valorX7* &&& breaGS &&& case valorXn* &&&

breaGS de1ault* &&& breaGS b

El anterior ejemplo realizado con i1&&&else se puede re)acer mediante s.itc)*

s.itc)(numero- a case 6* &&& breaGS case ?* &&& breaGS case 7'* &&& breaGS de1ault* &&& breaGS b

La estructura s.itc) se de1ine mediante la palabra reservada s.itc) seguida0 entre parntesis0 del nombre de la variable /ue se va a utilizar en las comparaciones& Como es )abitual0 las instrucciones /ue 1orman parte del s.itc) se encierran entre las llaves a , b& $entro del s.itc) se de1inen todas las comparaciones /ue se /uieren realizar sobre el valor de la variable& Cada comparacin se indica mediante la palabra reservada case seguida del valor con el /ue se realiza la comparacin& Si el valor de la variable utilizada por s.itc) coincide con el valor indicado por case0 se ejecutan las instrucciones de1inidas dentro de ese case& !ormalmente0 despus de las instrucciones de cada case se inclu,e la sentencia breaG para terminar la ejecucin del s.itc)0 aun/ue no es obligatorio& Las comparaciones se realizan por orden0 desde el primer case )asta el Iltimo0 por lo /ue es mu, importante el orden en el /ue se de1inen los case& 34u sucede si ningIn valor de la variable del s.itc) coincide con los valores de1inidos en los case5 En este caso0 se utiliza el valor de1ault para indicar las instrucciones /ue se ejecutan en el caso en el /ue ningIn case se cumpla para la variable indicada& Jun/ue de1ault es opcional0 las estructuras s.itc) suelen incluirlo para de1inir al menos un valor por de1ecto para alguna variable o para mostrar algIn mensaje por pantalla&

Capt lo 5. )*+
La creacin del ,ocument ;#ject Model o )*+ es una de las innovaciones /ue ms )a in1luido en el desarrollo de las pginas .eb dinmicas , de las aplicaciones .eb ms complejas& $#> permite a los programadores .eb acceder , manipular las pginas ;<=>L como si 1ueran documentos ;>L& $e )ec)o0 $#> se diseK originalmente para manipular de 1orma sencilla los documentos ;>L& J pesar de sus orgenes0 $#> se )a convertido en una utilidad disponible para la ma,ora de lenguajes de programacin (Java0 P<P0 JavaScript- , cu,as Inicas di1erencias se encuentran en la 1orma de implementarlo&

5.!. Grbol de nodos

Hna de las tareas )abituales en la programacin de aplicaciones .eb con JavaScript consiste en la manipulacin de las pginas .eb& $e esta 1orma0 es )abitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un 1ormulario-0 crear un elemento (prra1os0 LdivM0 etc&- de 1orma dinmica , aKadirlo a la pgina0 aplicar una animacin a un elemento (/ue aparezca+desaparezca0 /ue se desplace0 etc&-& =odas estas tareas )abituales son mu, sencillas de realizar gracias a $#>& Sin embargo0 para poder utilizar las utilidades de $#>0 es necesario "transformar" la pgina original& Hna pgina <=>L normal no es ms /ue una sucesin de caracteres0 por lo /ue es un 1ormato mu, di1cil de manipular& Por ello0 los navegadores .eb trans1orman automticamente todas las pginas .eb en una estructura ms e1iciente de manipular& Esta trans1ormacin la realizan todos los navegadores de 1orma automtica , nos permite utilizar las )erramientas de $#> de 1orma mu, sencilla& El motivo por el /ue se muestra el 1uncionamiento de esta trans1ormacin interna es /ue condiciona el comportamiento de $#> , por tanto0 la 1orma en la /ue se manipulan las pginas& $#> trans1orma todos los documentos ;<=>L en un conjunto de elementos llamados nodos0 /ue estn interconectados , /ue representan los contenidos de las pginas .eb , las relaciones entre ellos& Por su aspecto0 la unin de todos los nodos se llama "%r#ol de nodos"& La siguiente pgina ;<=>L sencilla*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMPgina sencillaL+titleM L+)eadM Lbod,M LpMEsta pgina es LstrongMmu, sencillaL+strongML+pM

L+bod,M L+)tmlM

Se trans1orma en el siguiente rbol de nodos* Eigura 6&2& Frbol de nodos generado automticamente por $#> a partir del cdigo ;<=>L de la pgina En el es/uema anterior0 cada rectngulo representa un nodo $#> , las 1lec)as indican las relaciones entre nodos& $entro de cada nodo0 se )a incluido su tipo (/ue se ver ms adelante- , su contenido& La raz del rbol de nodos de cual/uier pgina ;<=>L siempre es la misma* un nodo de tipo especial denominado ",ocumento"& J partir de ese nodo raz0 cada eti/ueta ;<=>L se trans1orma en un nodo de tipo "Elemento"& La conversin de eti/uetas en nodos se realiza de 1orma jerr/uica& $e esta 1orma0 del nodo raz solamente pueden derivar los nodos <EJ$ , 8#$O& J partir de esta derivacin inicial0 cada eti/ueta ;<=>L se trans1orma en un nodo /ue deriva del nodo correspondiente a su "etiqueta padre"& La trans1ormacin de las eti/uetas ;<=>L )abituales genera dos nodos* el primero es el nodo de tipo "Elemento" (correspondiente a la propia eti/ueta ;<=>L- , el segundo es un nodo de tipo "Ae'to" /ue contiene el teCto encerrado por esa eti/ueta ;<=>L& Js0 la siguiente eti/ueta ;<=>L*
LtitleMPgina sencillaL+titleM

@enera los siguientes dos nodos* $e la misma 1orma0 la siguiente

eti/ueta ;<=>L*

Eigura 6&7& !odos generados automticamente por $#> para una eti/ueta ;<=>L sencilla

LpMEsta pgina es LstrongMmu, sencillaL+strongML+pM

@enera los siguientes nodos* !odo de tipo "Elemento" correspondiente a la eti/ueta LpM& !odo de tipo "Ae'toP con el contenido teCtual de la eti/ueta LpM& Como el contenido de LpM inclu,e en su interior otra eti/ueta ;<=>L0 la eti/ueta interior se trans1orma en un nodo de tipo "Elemento" /ue representa la eti/ueta LstrongM , /ue deriva del nodo anterior& El contenido de la eti/ueta LstrongM genera a su vez otro nodo de tipo "Ae'to" /ue deriva del nodo generado por LstrongM& Eigura 6&%& !odos generados automticamente por $#> para una eti/ueta ;<=>L con otras eti/uetas ;<=>L en su interior La trans1ormacin automtica de la pgina en un rbol de nodos siempre sigue las mismas reglas* Las eti/uetas ;<=>L se trans1orman en dos nodos* el primero es la propia eti/ueta , el segundo nodo es )ijo del primero , consiste en el contenido teCtual de la eti/ueta& Si una eti/ueta ;<=>L se encuentra dentro de otra0 se sigue el mismo procedimiento anterior0 pero los nodos generados sern nodos )ijo de su eti/ueta padre&

Como se puede suponer0 las pginas ;<=>L )abituales producen rboles con miles de nodos& Jun as0 el proceso de trans1ormacin es rpido , automtico0 siendo las 1unciones proporcionadas por $#> (/ue se vern ms adelante- las Inicas /ue permiten acceder a cual/uier nodo de la pgina de 1orma sencilla e inmediata&

5.2. =ipos de nodos

La especi1icacin completa de $#> de1ine 27 tipos de nodos0 aun/ue las pginas ;<=>L )abituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos* $ocument0 nodo raz del /ue derivan todos los dems nodos del rbol& Element0 representa cada una de las eti/uetas ;<=>L& Se trata del Inico nodo /ue puede contener atributos , el Inico del /ue pueden derivar otros nodos& Jttr0 se de1ine un nodo de este tipo para representar cada uno de los atributos de las eti/uetas ;<=>L0 es decir0 uno por cada par atributoRvalor& =eCt0 nodo /ue contiene el teCto encerrado por una eti/ueta ;<=>L& Comment0 representa los comentarios incluidos en la pgina ;<=>L& Los otros tipos de nodos eCistentes /ue no se van a considerar son $ocument=,pe0 C$ataSection0 $ocumentEragment0 Entit,0 Entit, e1erence0 ProcessingInstruction , !otation&

5.#. 8cceso directo a los nodos

Hna vez construido automticamente el rbol completo de nodos $#>0 ,a es posible utilizar las 1unciones $#> para acceder de 1orma directa a cual/uier nodo del rbol& Como acceder a un nodo del rbol es e/uivalente a acceder a "un trozo" de la pgina0 una vez construido el rbol0 ,a es posible manipular de 1orma sencilla la pgina* acceder al valor de un elemento0 establecer el valor de un elemento0 mover un elemento de la pgina0 crear , aKadir nuevos elementos0 etc& $#> proporciona dos mtodos alternativos para acceder a un nodo espec1ico* acceso a travs de sus nodos padre , acceso directo& Las 1unciones /ue proporciona $#> para acceder a un nodo a travs de sus nodos padre consisten en acceder al nodo raz de la pgina , despus a sus nodos )ijos , a los nodos )ijos de esos )ijos , as sucesivamente )asta el Iltimo nodo de la rama terminada por el nodo buscado& Sin embargo0 cuando se /uiere acceder a un nodo espec1ico0 es muc)o ms rpido acceder directamente a ese nodo , no llegar )asta l descendiendo a travs de todos sus nodos padre& Por ese motivo0 no se van a presentar las 1unciones necesarias para el acceso jerr/uico de nodos , se muestran solamente las /ue permiten acceder de 1orma directa a los nodos& Por Iltimo0 es importante recordar /ue el acceso a los nodos0 su modi1icacin , su eliminacin solamente es posible cuando el rbol $#> )a sido construido completamente0 es decir0 despus de /ue la pgina ;<=>L se cargue por completo& >s adelante se ver cmo asegurar /ue un cdigo JavaScript solamente se ejecute cuando el navegador )a cargado entera la pgina ;<=>L&

5.#.!. %etElements6y=a%BameCE
Como todas las 1unciones /ue proporciona $#>0 la 1uncin getElements8,=ag!ame(- tiene un nombre mu, largo0 pero /ue lo )ace autoeCplicativo& La 1uncin getElements8,=ag!ame(nombreEti/ueta- obtiene todos los elementos de la pgina ;<=>L cu,a eti/ueta sea igual /ue el parmetro /ue se le pasa a la 1uncin& El siguiente ejemplo muestra cmo obtener todos los prra1os de una pgina ;<=>L*
var parra1os R document&getElements8,=ag!ame(PpP-S

sucede

con

El valor /ue se indica delante del nombre de la 1uncin (en este caso0 document- es el nodo a partir del cual se realiza la bIs/ueda de los elementos& En este caso0 como se /uieren obtener todos los prra1os de la pgina0 se utiliza el valor document como punto de partida de la bIs/ueda& El valor /ue devuelve la 1uncin es un arra, con todos los nodos /ue cumplen la condicin de /ue su eti/ueta coincide con el parmetro proporcionado& El valor devuelto es un arra, de nodos $#>0 no un arra, de cadenas de teCto o un arra, de objetos normales& Por lo tanto0 se debe procesar cada valor del arra, de la 1orma /ue se muestra en las siguientes secciones& $e este modo0 se puede obtener el primer prra1o de la pgina de la siguiente manera*
var primerParra1o R parra1os['\S

$e la misma 1orma0 se podran recorrer todos los prra1os de la pgina con el siguiente cdigo*
1or(var iR'S iLparra1os&lengt)S iWW- a var parra1o R parra1os[i\S b

La 1uncin getElements8,=ag!ame(- se puede aplicar de 1orma recursiva sobre cada uno de los nodos devueltos por la 1uncin& En el siguiente ejemplo0 se obtienen todos los enlaces del primer prra1o de la pgina*
var parra1os R document&getElements8,=ag!ame(PpP-S var primerParra1o R parra1os['\S var enlaces R primerParra1o&getElements8,=ag!ame(PaP-S

5.#.2. %etElements6yBameCE
La 1uncin getElements8,!ame(- es similar a la anterior0 pero en este caso se buscan los elementos cu,o atributo name sea igual al parmetro proporcionado& En el siguiente ejemplo0 se obtiene directamente el Inico prra1o con el nombre indicado*
var parra1oEspecial R document&getElements8,!ame(PespecialP-S Lp nameRPpruebaPM&&&L+pM Lp nameRPespecialPM&&&L+pM LpM&&&L+pM

!ormalmente el atributo name es Inico para los elementos <=>L /ue lo de1inen0 por lo /ue es un mtodo mu, prctico para acceder directamente al nodo deseado& En el caso de los elementos

<=>L radio#utton0 el atributo name es comIn a todos los radio#utton /ue estn relacionados0 por lo /ue la 1uncin devuelve una coleccin de elementos& Internet ECplorer 9&' no implementa de 1orma correcta esta 1uncin0 ,a /ue slo la tiene en cuenta para los elementos de tipo LinputM , LimgM& Jdems0 tambin tiene en consideracin los elementos cu,o atributo idsea igual al parmetro de la 1uncin&

5.#.#. %etElement6y"dCE
La 1uncin getElement8,Id(- es la ms utilizada cuando se desarrollan aplicaciones .eb dinmicas& Se trata de la 1uncin pre1erida para acceder directamente a un nodo , poder leer o modi1icar sus propiedades& La 1uncin getElement8,Id(- devuelve el elemento ;<=>L cu,o atributo id coincide con el parmetro indicado en la 1uncin& Como el atributo id debe ser Inico para cada elemento de una misma pgina0 la 1uncin devuelve Inicamente el nodo deseado&
var cabecera R document&getElement8,Id(PcabeceraP-S Ldiv idRPcabeceraPM La )re1RP+P idRPlogoPM&&&L+aM L+divM

La 1uncin getElement8,Id(- es tan importante , tan utilizada en todas las aplicaciones .eb0 /ue casi todos los ejemplos , ejercicios /ue siguen la utilizan constantemente& Internet ECplorer 9&' tambin interpreta incorrectamente esta 1uncin0 ,a /ue devuelve tambin a/uellos elementos cu,o atributo name coincida con el parmetro proporcionado a la 1uncin&

5.'. Creacin y eliminacin de nodos

Jcceder a los nodos , a sus propiedades (/ue se ver ms adelante- es slo una parte de las manipulaciones )abituales en las pginas& Las otras operaciones )abituales son las de crear , eliminar nodos del rbol $#>0 es decir0 crear , eliminar "trozos" de la pgina .eb&

5.'.!. Creacin de elementos ;<=+> simples

Como se )a visto0 un elemento ;<=>L sencillo0 como por ejemplo un prra1o0 genera dos nodos* el primer nodo es de tipo Element , representa la eti/ueta LpM , el segundo nodo es de tipo =eCt , representa el contenido teCtual de la eti/ueta LpM& Por este motivo0 crear , aKadir a la pgina un nuevo elemento ;<=>L sencillo consta de cuatro pasos di1erentes*

2 7 % :

Creacin de un nodo de tipo Element /ue represente al elemento& Creacin de un nodo de tipo =eCt/ue represente el contenido del elemento& JKadir el nodo =eCtcomo nodo )ijo del nodo Element& JKadir el nodo Elementa la pgina0 en 1orma de nodo )ijo del nodo correspondiente al lugar en el /ue se /uiere insertar el elemento&

$e este modo0 si se /uiere aKadir un prra1o simple al 1inal de una pgina ;<=>L0 es necesario incluir el siguiente cdigo JavaScript*
// Crear nodo de tipo Element var parra1o R document&createElement(PpP-S // Crear nodo de tipo Ae't var contenido R document&create=eCt!ode(P<ola >undoNP-S // ABadir el nodo Ae't como -ijo del nodo Element parra1o&appendC)ild(contenido-S // ABadir el nodo Element como -ijo de la pagina document&bod,&appendC)ild(parra1o-S

El proceso de creacin de nuevos nodos puede llegar a ser tedioso0 ,a /ue implica la utilizacin de tres 1unciones $#>* createElement(eti/ueta-* crea un nodo de tipo Element/ue representa al elemento ;<=>L cu,a eti/ueta se pasa como parmetro& create=eCt!ode(contenido-* crea un nodo de tipo =eCt /ue almacena el contenido teCtual de los elementos ;<=>L& nodoPadre&appendC)ild(nodo<ijo-* aKade un nodo como )ijo de otro nodo& Se debe utilizar al menos dos veces con los nodos )abituales* en primer lugar se aKade el nodo =eCtcomo )ijo del nodo Element , a continuacin se aKade el nodo Elementcomo )ijo de algIn nodo de la pgina&

5.'.2. Eliminacin de nodos

J1ortunadamente0 eliminar un nodo del rbol $#> de la pgina es muc)o ms sencillo /ue aKadirlo& En este caso0 solamente es necesario utilizar la 1uncin removeC)ild(-*
var parra1o R document&getElement8,Id(PprovisionalP-S parra1o&parent!ode&removeC)ild(parra1o-S Lp idRPprovisionalPM&&&L+pM

La 1uncin removeC)ild(- re/uiere como parmetro el nodo /ue se va a eliminar& Jdems0 esta 1uncin debe ser invocada desde el elemento padre de ese nodo /ue se /uiere eliminar& La 1orma ms segura , rpida de acceder al nodo padre de un elemento es mediante la propiedad nodo<ijo&parent!ode& Js0 para eliminar un nodo de una pgina ;<=>L se invoca a la 1uncin removeC)ild(- desde el valor parent!ode del nodo /ue se /uiere eliminar& Cuando se elimina un nodo0 tambin se eliminan automticamente todos los nodos )ijos /ue tenga0 por lo /ue no es necesario borrar manualmente cada nodo )ijo&

5.5. 8cceso directo a los atrib tos ;<=+>

Hna vez /ue se )a accedido a un nodo0 el siguiente paso natural consiste en acceder ,+o modi1icar sus atributos , propiedades& >ediante $#>0 es posible acceder de 1orma sencilla a todos los atributos ;<=>L , todas las propiedades CSS de cual/uier elemento de la pgina& Los atributos ;<=>L de los elementos de la pgina se trans1orman automticamente en propiedades de los nodos& Para acceder a su valor0 simplemente se indica el nombre del atributo ;<=>L detrs del nombre del nodo& El siguiente ejemplo obtiene de 1orma directa la direccin a la /ue enlaza el enlace*
var enlace R document&getElement8,Id(PenlaceP-S alert(enlace&)re1-S // muestra -ttpC//DDD999com La idRPenlaceP )re1RP)ttp*++...&&&comPMEnlaceL+aM

En el ejemplo anterior0 se obtiene el nodo $#> /ue representa el enlace mediante la 1uncin document&getElement8,Id(-& J continuacin0 se obtiene el atributo )re1 del enlace mediante enlace&)re1& Para obtener por ejemplo el atributo id0 se utilizara enlace&id& Las propiedades CSS no son tan 1ciles de obtener como los atributos ;<=>L& Para obtener el valor de cual/uier propiedad CSS del nodo0 se debe utilizar el atributo st,le& El siguiente ejemplo obtiene el valor de la propiedad margin de la imagen*
var imagen R document&getElement8,Id(PimagenP-S alert(imagen&st,le&margin-S Limg idRPimagenP st,leRPmargin*'S border*'SP srcRPlogo&pngP +M

Jun/ue el 1uncionamiento es )omogneo entre distintos navegadores0 los resultados no son eCactamente iguales0 como muestran las siguientes imgenes /ue son el resultado de ejecutar el cdigo anterior en distintos navegadores* Eigura 6&:& Dalores /ue muestra Internet ECplorer al acceder a las propiedades CSS a travs de JavaScript Eigura 6&6& Dalores /ue muestra Eire1oC al acceder a las propiedades CSS a travs de JavaScript

Si el nombre de una propiedad CSS es compuesto0 se accede a su valor modi1icando ligeramente su nombre*
var parra1o R document&getElement8,Id(Pparra1oP-S alert(parra1o&st,le&1ontQeig)t-S // muestra "#old" Lp idRPparra1oP st,leRP1ont".eig)t* boldSPM&&&L+pM

La trans1ormacin del nombre de las propiedades CSS compuestas consiste en eliminar todos los guiones medios ("- , escribir en ma,Iscula la letra siguiente a cada guin medio& J continuacin se muestran algunos ejemplos* 1ont".eig)t se trans1orma en 1ontQeig)t line")eig)t se trans1orma en line<eig)t border"top"st,le se trans1orma en border=opSt,le list"st,le"image se trans1orma en listSt,leImage El Inico atributo ;<=>L /ue no tiene el mismo nombre en ;<=>L , en las propiedades $#> es el atributo class& Como la palabra class est reservada por JavaScript0 no es posible utilizarla para acceder al atributo class del elemento ;<=>L& En su lugar0 $#> utiliza el nombre class!ame para acceder al atributo class de ;<=>L*
var parra1o R document&getElement8,Id(Pparra1oP-S alert(parra1o&class-S // muestra "undefined" alert(parra1o&class!ame-S // muestra "normal" Lp idRPparra1oP classRPnormalPM&&&L+pM

5.&. E0ercicios sobre )*+

J partir de la pgina .eb proporcionada , utilizando las 1unciones $#>0 mostrar por pantalla la siguiente in1ormacin*

2& 7& %& :&

!Imero de enlaces de la pgina $ireccin a la /ue enlaza el penIltimo enlace !umero de enlaces /ue enlazan a )ttp*++prueba !Imero de enlaces del tercer prra1o

Completar el cdigo JavaScript proporcionado para /ue cuando se pinc)e sobre el enlace se muestre completo el contenido de teCto& Jdems0 el enlace debe dejar de mostrarse despus de pulsarlo por primera vez& La accin de pinc)ar sobre un enlace 1orma parte de los PEventosP de JavaScript /ue se ven en el siguiente captulo& En este ejercicio0 slo se debe saber /ue al pinc)ar sobre el enlace0 se ejecuta la 1uncin llamada muestra(-&

Completar el cdigo JavaScript proporcionado para /ue se aKadan nuevos elementos a la lista cada vez /ue se pulsa sobre el botn& Htilizar las 1unciones $#> para crear nuevos nodos , aKadirlos a la lista eCistente& Jl igual /ue sucede en el ejercicio anterior0 la accin de pinc)ar sobre un botn 1orma parte de los PEventosP de JavaScript /ue se ven en el siguiente captulo& En este ejercicio0 slo se debe saber /ue al pinc)ar sobre el botn0 se ejecuta la 1uncin llamada anade(-&

Capt lo &. Eventos

<asta a)ora0 todas las aplicaciones , scripts /ue se )an creado tienen algo en comIn* se ejecutan desde la primera instruccin )asta la Iltima de 1orma secuencial& @racias a las estructuras de control de 1lujo ( i10 1or0 .)ile- es posible modi1icar ligeramente este comportamiento , repetir algunos trozos del script , saltarse otros trozos en 1uncin de algunas condiciones& Este tipo de aplicaciones son poco Itiles0 ,a /ue no interactIan con los usuarios , no pueden responder a los di1erentes eventos /ue se producen durante la ejecucin de una aplicacin& J1ortunadamente0 las aplicaciones .eb creadas con el lenguaje JavaScript pueden utilizar el modelo de programacin #asada en eventos& En este tipo de programacin0 los scripts se dedican a esperar a /ue el usuario "-aga algo" (/ue pulse una tecla0 /ue mueva el ratn0 /ue cierre la ventana del navegador-& J continuacin0 el script responde a la accin del usuario normalmente procesando esa in1ormacin , generando un resultado& Los eventos )acen posible /ue los usuarios transmitan in1ormacin a los programas& JavaScript de1ine numerosos eventos /ue permiten una interaccin completa entre el usuario , las pginas+aplicaciones .eb& La pulsacin de una tecla constitu,e un evento0 as como pinc)ar o mover el ratn0 seleccionar un elemento de un 1ormulario0 redimensionar la ventana del navegador0 etc& JavaScript permite asignar una 1uncin a cada uno de los eventos& $e esta 1orma0 cuando se produce cual/uier evento0 JavaScript ejecuta su 1uncin asociada& Este tipo de 1unciones se denominan "event -andlers" en ingls , suelen traducirse por "manejadores de eventos"&

&.!. +odelos de eventos

Crear pginas , aplicaciones .eb siempre )a sido muc)o ms complejo de lo /ue debera serlo debido a las incompatibilidades entre navegadores& J pesar de /ue eCisten decenas de estndares para las tecnologas empleadas0 los navegadores no los soportan completamente o incluso los ignoran& Las principales incompatibilidades se producen en el lenguaje ;<=>L0 en el soporte de )ojas de estilos CSS , sobre todo0 en la implementacin de JavaScript& $e todas ellas0 la incompatibilidad ms importante se da precisamente en el modelo de eventos del navegador& Js0 eCisten )asta tres modelos di1erentes para manejar los eventos dependiendo del navegador en el /ue se ejecute la aplicacin&

&.!.!. +odelo bsico de eventos

Este modelo simple de eventos se introdujo para la versin : del estndar <=>L , se considera parte del nivel ms bsico de $#>& Jun/ue sus caractersticas son limitadas0 es el Inico modelo /ue es compatible en todos los navegadores , por tanto0 el Inico /ue permite crear aplicaciones /ue 1uncionan de la misma manera en todos los navegadores&

&.!.2. +odelo de eventos estndar

Las versiones ms avanzadas del estndar $#> ($#> nivel 7- de1inen un modelo de eventos completamente nuevo , muc)o ms poderoso /ue el original& =odos los navegadores modernos lo inclu,en0 salvo Internet ECplorer&

&.!.#. +odelo de eventos de "nternet E?plorer

Internet ECplorer utiliza su propio modelo de eventos0 /ue es similar pero incompatible con el modelo estndar& Se utiliz por primera vez en Internet ECplorer : , >icroso1t decidi seguir utilizndolo en el resto de versiones0 a pesar de /ue la empresa )aba participado en la creacin del estndar de $#> /ue de1ine el modelo de eventos estndar&

&.2. +odelo bsico de eventos

&.2.!. =ipos de eventos
En este modelo0 cada elemento o eti/ueta ;<=>L de1ine su propia lista de posibles eventos /ue se le pueden asignar& Hn mismo tipo de evento (por ejemplo0 pinc)ar el botn iz/uierdo del ratn- puede estar de1inido para varios elementos ;<=>L di1erentes , un mismo elemento ;<=>L puede tener asociados varios eventos di1erentes& El nombre de cada evento se constru,e mediante el pre1ijo on0 seguido del nombre en ingls de la accin asociada al evento& Js0 el evento de pinc)ar un elemento con el ratn se denomina onclicG, el evento asociado a la accin de mover el ratn se denomina onmousemove& La siguiente tabla resume los eventos ms importantes de1inidos por JavaScript* Los eventos ms utilizados en las aplicaciones .eb tradicionales son onload para esperar a /ue se cargue la pgina por completo0 los eventos onclicG0 onmouseover0 onmouseout para controlar el ratn , onsubmitpara controlar el envo de los 1ormularios&

Jlgunos eventos de la tabla anterior (onclicG0 onGe,do.n0 onGe,press0 onreset0 onsubmitpermiten evitar la "accin por defecto" de ese evento& >s adelante se muestra en detalle este comportamiento0 /ue puede resultar mu, Itil en algunas tcnicas de programacin& Las acciones tpicas /ue realiza un usuario en una pgina .eb pueden dar lugar a una sucesin de eventos& Jl pulsar por ejemplo sobre un botn de tipo Linput t,peRPsubmitPM se desencadenan los eventos onmousedo.n0 onclicG0 onmouseup , onsubmit de 1orma consecutiva&

&.2.2. +ane0adores de eventos

Hn evento de JavaScript por s mismo carece de utilidad& Para /ue los eventos resulten Itiles0 se deben asociar 1unciones o cdigo JavaScript a cada evento& $e esta 1orma0 cuando se produce un evento se ejecuta el cdigo indicado0 por lo /ue la aplicacin puede responder ante cual/uier evento /ue se produzca durante su ejecucin& Las 1unciones o cdigo JavaScript /ue se de1inen para cada evento se denominan "manejador de eventos" , como JavaScript es un lenguaje mu, 1leCible0 eCisten varias 1ormas di1erentes de indicar los manejadores* >anejadores como atributos de los elementos ;<=>L& >anejadores como 1unciones JavaScript eCternas& >anejadores "sem%nticos"&

&.2.2.!. +ane0adores de eventos como atrib tos ;<=+>

Se trata del mtodo ms sencillo , a la vez menos profesional de indicar el cdigo JavaScript /ue se debe ejecutar cuando se produzca un evento& En este caso0 el cdigo se inclu,e en un atributo del propio elemento ;<=>L& En el siguiente ejemplo0 se /uiere mostrar un mensaje cuando el usuario pinc)e con el ratn sobre un botn*

Linput t,peRPbuttonP valueRPPinc)ame , versP onclicGRPalert(T@racias por pinc)arT-SP +M

En este mtodo0 se de1inen atributos ;<=>L con el mismo nombre /ue los eventos /ue se /uieren manejar& El ejemplo anterior slo /uiere controlar el evento de pinc)ar con el ratn0 cu,o nombre es onclicG& Js0 el elemento ;<=>L para el /ue se /uiere de1inir este evento0 debe incluir un atributo llamado onclicG& El contenido del atributo es una cadena de teCto /ue contiene todas las instrucciones JavaScript /ue se ejecutan cuando se produce el evento& En este caso0 el cdigo JavaScript es mu, sencillo (alert(T@racias por pinc)arT-S-0 ,a /ue solamente se trata de mostrar un mensaje& En este otro ejemplo0 cuando el usuario pinc)a sobre el elemento LdivM se muestra un mensaje , cuando el usuario pasa el ratn por encima del elemento0 se muestra otro mensaje*
Ldiv onclicGRPalert(T<as pinc)ado con el ratnT-SP onmouseoverRPalert(TJcabas de pasar el ratn por encimaT-SPM Puedes pinc)ar sobre este elemento o simplemente pasar el ratn por encima L+divM

Este otro ejemplo inclu,e una de las instrucciones ms utilizadas en las aplicaciones JavaScript ms antiguas*
Lbod, onloadRPalert(TLa pgina se )a cargado completamenteT-SPM &&& L+bod,M

El mensaje anterior se muestra despus de /ue la pgina se )a,a cargado completamente0 es decir0 despus de /ue se )a,a descargado su cdigo <=>L0 sus imgenes , cual/uier otro objeto incluido en la pgina& El evento onload es uno de los ms utilizados ,a /ue0 como se vio en el captulo de $#>0 las 1unciones /ue permiten acceder , manipular los nodos del rbol $#> solamente estn disponibles cuando la pgina se )a cargado completamente&

&.2.2.2. +ane0adores de eventos y variable t7is

JavaScript de1ine una variable especial llamada t)is /ue se crea automticamente , /ue se emplea en algunas tcnicas avanzadas de programacin& En los eventos0 se puede utilizar la variable t)is para re1erirse al elemento ;<=>L /ue )a provocado el evento& Esta variable es mu, Itil para ejemplos como el siguiente* Cuando el usuario pasa el ratn por encima del LdivM0 el color del borde se muestra de color negro& Cuando el ratn sale del LdivM0 se vuelve a mostrar el borde con el color gris claro original& Elemento LdivMoriginal*
Ldiv idRPcontenidosP st,leRP.idt)*26'pCS )eig)t*9'pCS border*t)in solid silverPM Seccin de contenidos&&& L+divM

Si no se utiliza la variable t)is0 el cdigo necesario para modi1icar el color de los bordes0 sera el siguiente*
Ldiv idRPcontenidosP st,leRP.idt)*26'pCS )eig)t*9'pCS border*t)in solid silverP onmouseoverRPdocument&getElement8,Id(TcontenidosT-&st,le&borderColorRTblacGTSP onmouseoutRPdocument&getElement8,Id(TcontenidosT-&st,le&borderColorRTsilverTSPM Seccin de contenidos&&& L+divM

El cdigo anterior es demasiado largo , demasiado propenso a cometer errores& $entro del cdigo de un evento0 JavaScript crea automticamente la variable t)is0 /ue )ace re1erencia al elemento ;<=>L /ue )a provocado el evento& Js0 el ejemplo anterior se puede reescribir de la siguiente manera*
Ldiv idRPcontenidosP st,leRP.idt)*26'pCS )eig)t*9'pCS border*t)in solid silverP onmouseoverRPt)is&st,le&borderColorRTblacGTSP onmouseoutRPt)is&st,le&borderColorRTsilverTSPM Seccin de contenidos&&& L+divM

El cdigo anterior es muc)o ms compacto0 ms 1cil de leer , de escribir , sigue 1uncionando correctamente aun/ue se modi1i/ue el valor del atributo id del LdivM&

&.2.2.#. +ane0adores de eventos como : nciones e?ternas

La de1inicin de los manejadores de eventos en los atributos ;<=>L es el mtodo ms sencillo pero menos aconsejable de tratar con los eventos en JavaScript& El principal inconveniente es /ue se complica en eCceso en cuanto se aKaden algunas pocas instrucciones0 por lo /ue solamente es recomendable para los casos ms sencillos& Si se realizan aplicaciones complejas0 como por ejemplo la validacin de un 1ormulario0 es aconsejable agrupar todo el cdigo JavaScript en una 1uncin eCterna , llamar a esta 1uncin desde el elemento ;<=>L& Siguiendo con el ejemplo anterior /ue muestra un mensaje al pinc)ar sobre un botn*
Linput t,peRPbuttonP valueRPPinc)ame , versP onclicGRPalert(T@racias por pinc)arT-SP +M

Htilizando 1unciones eCternas se puede trans1ormar en*

1unction muestra>ensaje(- a alert(T@racias por pinc)arT-S b Linput t,peRPbuttonP valueRPPinc)ame , versP onclicGRPmuestra>ensaje(-P +M

Esta tcnica consiste en eCtraer todas las instrucciones de JavaScript , agruparlas en una 1uncin eCterna& Hna vez de1inida la 1uncin0 en el atributo del elemento ;<=>L se inclu,e el nombre de la 1uncin0 para indicar /ue es la 1uncin /ue se ejecuta cuando se produce el evento& La llamada a la 1uncin se realiza de la 1orma )abitual0 indicando su nombre seguido de los parntesis , de 1orma opcional0 inclu,endo todos los argumentos , parmetros /ue se necesiten&

El principal inconveniente de este mtodo es /ue en las 1unciones eCternas no se puede seguir utilizando la variable t)is , por tanto0 es necesario pasar esta variable como parmetro a la 1uncin*
1unction resalta(elemento- a s.itc)(elemento&st,le&borderColor- a case TsilverT* case Tsilver silver silver silverT* case Tfc'c'c'T* elemento&st,le&borderColor R TblacGTS breaGS case TblacGT* case TblacG blacG blacG blacGT* case Tf''''''T* elemento&st,le&borderColor R TsilverTS breaGS b b Ldiv st,leRP.idt)*26'pCS )eig)t*9'pCS border*t)in solid silverP onmouseoverRPresalta(t)is-P onmouseoutRPresalta(t)is-PM Seccin de contenidos&&& L+divM

En el ejemplo anterior0 la 1uncin eCterna es llamada con el parmetro t)is0 /ue dentro de la 1uncin se denomina elemento& La complejidad del ejemplo se produce sobre todo por la 1orma en la /ue los distintos navegadores almacenan el valor de la propiedad borderColor& >ientras /ue Eire1oC almacena (en caso de /ue los cuatro bordes coincidan en color- el valor blacG0 Internet ECplorer lo almacena como blacG blacG blacG blacG , #pera almacena su representacin )eCadecimal f''''''&

&.2.2.'. +ane0adores de eventos semnticos

Los mtodos /ue se )an visto para aKadir manejadores de eventos (como atributos ;<=>L , como 1unciones eCternas- tienen un grave inconveniente* "ensucian" el cdigo ;<=>L de la pgina& Como es conocido0 una de las buenas prcticas bsicas en el diseKo de pginas , aplicaciones .eb es la separacin de los contenidos (;<=>L- , su aspecto o presentacin (CSS-& Siempre /ue sea posible0 tambin se recomienda separar los contenidos (;<=>L- , su comportamiento o programacin (JavaScript-& >ezclar el cdigo JavaScript con los elementos ;<=>L solamente contribu,e a complicar el cdigo 1uente de la pgina0 a di1icultar la modi1icacin , mantenimiento de la pgina , a reducir la semntica del documento 1inal producido& J1ortunadamente0 eCiste un mtodo alternativo para de1inir los manejadores de eventos de JavaScript& Esta tcnica es una evolucin del mtodo de las 1unciones eCternas0 ,a /ue se basa en utilizar las propiedades $#> de los elementos ;<=>L para asignar todas las 1unciones eCternas /ue actIan de manejadores de eventos& Js0 el siguiente ejemplo*

Linput idRPpinc)ableP t,peRPbuttonP valueRPPinc)ame , versP onclicGRPalert(T@racias por pinc)arT-SP +M

Se puede trans1ormar en*

// Euncin e'terna 1unction muestra>ensaje(- a alert(T@racias por pinc)arT-S b // Asignar la funcin e'terna al elemento document&getElement8,Id(Ppinc)ableP-&onclicG R muestra>ensajeS // Elemento F:AML Linput idRPpinc)ableP t,peRPbuttonP valueRPPinc)ame , versP +M

La tcnica de los manejadores semnticos consiste en*

2& Jsignar un identi1icador Inico al elemento ;<=>L mediante el atributo id& 7& Crear una 1uncin de JavaScript encargada de manejar el evento& %& Jsignar la 1uncin eCterna al evento correspondiente en el elemento deseado&
El Iltimo paso es la clave de esta tcnica& En primer lugar0 se obtiene el elemento al /ue se desea asociar la 1uncin eCterna*
document&getElement8,Id(Ppinc)ableP-S

J continuacin0 se utiliza una propiedad del elemento con el mismo nombre /ue el evento /ue se /uiere manejar& En este caso0 la propiedad es onclicG*
document&getElement8,Id(Ppinc)ableP-&onclicG R &&&

Por Iltimo0 se asigna la 1uncin eCterna mediante su nombre sin parntesis& Lo ms importante (, la causa ms comIn de errores- es indicar solamente el nombre de la 1uncin0 es decir0 prescindir de los parntesis al asignar la 1uncin*
document&getElement8,Id(Ppinc)ableP-&onclicG R muestra>ensajeS

Si se aKaden los parntesis despus del nombre de la 1uncin0 en realidad se est ejecutando la 1uncin , guardando el valor devuelto por la 1uncin en la propiedad onclicG de elemento&
// Asignar una funcin e'terna a un evento de un elemento document&getElement8,Id(Ppinc)ableP-&onclicG R muestra>ensajeS // Ejecutar una funcin ! guardar su resultado en una propiedad de un elemento document&getElement8,Id(Ppinc)ableP-&onclicG R muestra>ensaje(-S

La gran ventaja de este mtodo es /ue el cdigo ;<=>L resultante es mu, "limpio"0 ,a /ue no se mezcla con el cdigo JavaScript& Jdems0 dentro de las 1unciones eCternas asignadas s /ue se puede utilizar la variable t)ispara re1erirse al elemento /ue provoca el evento& El Inico inconveniente de este mtodo es /ue la pgina se debe cargar completamente antes de /ue se puedan utilizar las 1unciones $#> /ue asignan los manejadores a los elementos ;<=>L& Hna de las 1ormas ms sencillas de asegurar /ue cierto cdigo se va a ejecutar despus de /ue la pgina se cargue por completo es utilizar el evento onload*

.indo.&onload R 1unction(- a document&getElement8,Id(Ppinc)ableP-&onclicG R muestra>ensajeS b

La tcnica anterior utiliza el concepto de funciones annimas0 /ue no se va a estudiar0 pero /ue permite crear un cdigo compacto , mu, sencillo& Para asegurarse /ue un cdigo JavaScript va a ejecutarse despus de /ue la pgina se )a,a cargado completamente0 slo es necesario incluir esas instrucciones entre los smbolos a , b*
.indo.&onload R 1unction(- a &&& b

En el siguiente ejemplo0 se aKaden eventos a los elementos de tipo inputRteCt de un 1ormulario complejo*
1unction resalta(- a // Cdigo GavaScript b .indo.&onload R 1unction(- a var 1ormulario R document&getElement8,Id(P1ormularioP-S var camposInput R 1ormulario&getElements8,=ag!ame(PinputP-S 1or(var iR'S iLcamposInput&lengt)S iWW- a i1(camposInput[i\&t,pe RR PteCtP- a camposInput[i\&onclicG R resaltaS b b b

J partir de la pgina .eb proporcionada0 completar el cdigo JavaScript para /ue*

2 7

Cuando se pinc)e sobre el primer enlace0 se oculte su seccin relacionada Cuando se vuelva a pinc)ar sobre el mismo enlace0 se muestre otra vez esa seccin de contenidos % Completar el resto de enlaces de la pgina para /ue su comportamiento sea idntico al del primer enlace : Cuando una seccin se oculte0 debe cambiar el mensaje del enlace asociado (pista* propiedad inner<=>L-

&.#. *bteniendo eventE

in:ormacin

del

evento

Cob0eto

!ormalmente0 los manejadores de eventos re/uieren in1ormacin adicional para procesar sus tareas& Si una 1uncin por ejemplo se encarga de procesar el evento onclicG0 /uizs necesite saber en /ue posicin estaba el ratn en el momento de pinc)ar el botn& !o obstante0 el caso ms )abitual en el /ue es necesario conocer in1ormacin adicional sobre el evento es el de los eventos asociados al teclado& !ormalmente0 es mu, importante conocer la tecla /ue se )a pulsado0 por ejemplo para di1erenciar las teclas normales de las teclas especiales (E!=E 0 tabulador0 Jlt0 Ctrl&0 etc&-&

JavaScript permite obtener in1ormacin sobre el ratn , el teclado mediante un objeto especial llamado event& $esa1ortunadamente0 los di1erentes navegadores presentan di1erencias mu, notables en el tratamiento de la in1ormacin sobre los eventos& La principal di1erencia reside en la 1orma en la /ue se obtiene el objeto event& Internet ECplorer considera /ue este objeto 1orma parte del objeto .indo. , el resto de navegadores lo consideran como el Inico argumento /ue tienen las 1unciones manejadoras de eventos& Jun/ue es un comportamiento /ue resulta mu, eCtraKo al principio0 todos los navegadores modernos eCcepto Internet ECplorer crean m%gicamente , de 1orma automtica un argumento /ue se pasa a la 1uncin manejadora0 por lo /ue no es necesario incluirlo en la llamada a la 1uncin manejadora& $e esta 1orma0 para utilizar este "argumento m%gico"0 slo es necesario asignarle un nombre0 ,a /ue los navegadores lo crean automticamente& En resumen0 en los navegadores tipo Internet ECplorer0 el objeto event se obtiene directamente mediante*
var evento R .indo.&eventS

Por otra parte0 en el resto de navegadores0 el objeto event se obtiene m%gicamente a partir del argumento /ue el navegador crea automticamente*
1unction manejadorEventos(elEvento- a var evento R elEventoS b

Si se /uiere programar una aplicacin /ue 1uncione correctamente en todos los navegadores0 es necesario obtener el objeto event de 1orma correcta segIn cada navegador& El siguiente cdigo muestra la 1orma correcta de obtener el objeto event en cual/uier navegador*
1unction manejadorEventos(elEvento- a var evento R elEvento ^^ .indo.&eventS b

Hna vez obtenido el objeto event0 ,a se puede acceder a toda la in1ormacin relacionada con el evento0 /ue depende del tipo de evento producido&

&.#.!. "n:ormacin sobre el evento

La propiedad t,pe indica el tipo de evento producido0 lo /ue es Itil cuando una misma 1uncin se utiliza para manejar varios eventos*
var tipo R evento&t,peS

La propiedad t,pe devuelve el tipo de evento producido0 /ue es igual al nombre del evento pero sin el pre1ijo on& >ediante esta propiedad0 se puede re)acer de 1orma ms sencilla el ejemplo anterior en el /ue se resaltaba una seccin de contenidos al pasar el ratn por encima*

1unction resalta(elEvento- a var evento R elEvento ^^ .indo.&eventS s.itc)(evento&t,pe- a case TmouseoverT* t)is&st,le&borderColor R TblacGTS breaGS case TmouseoutT* t)is&st,le&borderColor R TsilverTS breaGS b b .indo.&onload R 1unction(- a document&getElement8,Id(PseccionP-&onmouseover R resaltaS document&getElement8,Id(PseccionP-&onmouseout R resaltaS b Ldiv idRPseccionP st,leRP.idt)*26'pCS )eig)t*9'pCS border*t)in solid silverPM Seccin de contenidos&&& L+divM

&.#.2. "n:ormacin sobre los eventos de teclado

$e todos los eventos disponibles en JavaScript0 los eventos relacionados con el teclado son los ms incompatibles entre di1erentes navegadores , por tanto0 los ms di1ciles de manejar& En primer lugar0 eCisten muc)as di1erencias entre los navegadores0 los teclados , los sistemas operativos de los usuarios0 principalmente debido a las di1erencias entre idiomas& Jdems0 eCisten tres eventos di1erentes para las pulsaciones de las teclas ( onGe,up0 onGe,press , onGe,do.n-& Por Iltimo0 eCisten dos tipos de teclas* las teclas normales (como letras0 nImeros , smbolos normales- , las teclas especiales (como E!=E 0 Jlt0 S)i1t0 etc&Cuando un usuario pulsa una tecla normal0 se producen tres eventos seguidos , en este orden* onGe,do.n0 onGe,press , onGe,up& El evento onGe,do.n se corresponde con el )ec)o de pulsar una tecla , no soltarlaS el evento onGe,press es la propia pulsacin de la tecla , el evento onGe,up)ace re1erencia al )ec)o de soltar una tecla /ue estaba pulsada& La 1orma ms sencilla de obtener la in1ormacin sobre la tecla /ue se )a pulsado es mediante el evento onGe,press& La in1ormacin /ue proporcionan los eventos onGe,do.n , onGe,up se puede considerar como ms tcnica0 ,a /ue devuelven el cdigo interno de cada tecla , no el carcter /ue se )a pulsado& J continuacin se inclu,e una lista con todas las propiedades di1erentes de todos los eventos de teclado tanto en Internet ECplorer como en el resto de navegadores* Evento Ge,do.n* >ismo comportamiento en todos los navegadores* Propiedad Ge,Code* cdigo interno de la tecla Propiedad c)arCode* no de1inido

 Evento Ge,press* Internet ECplorer* Propiedad Ge,Code* el cdigo del carcter de la tecla /ue se )a pulsado Propiedad c)arCode* no de1inido esto de navegadores* Propiedad Ge,Code* para las teclas normales0 no de1inido& Para las teclas especiales0 el cdigo interno de la tecla& Propiedad c)arCode* para las teclas normales0 el cdigo del carcter de la tecla /ue se )a pulsado& Para las teclas especiales0 '& Evento Ge,up* >ismo comportamiento en todos los navegadores* Propiedad Ge,Code* cdigo interno de la tecla Propiedad c)arCode* no de1inido Para convertir el cdigo de un carcter (no con1undir con el cdigo interno- al carcter /ue representa la tecla /ue se )a pulsado0 se utiliza la 1uncin String&1romC)arCode(-& J continuacin se inclu,e un script /ue muestra toda la in1ormacin sobre los tres eventos de teclado*
.indo.&onload R 1unction(- a document&onGe,up R muestraIn1ormacionS document&onGe,press R muestraIn1ormacionS document&onGe,do.n R muestraIn1ormacionS b 1unction muestraIn1ormacion(elEvento- a var evento R .indo.&event ^^ elEventoS var mensaje R P=ipo de evento* P W evento&t,pe W PLbrMP W PPropiedad Ge,Code* P W evento&Ge,Code W PLbrMP W PPropiedad c)arCode* P W evento&c)arCode W PLbrMP W PCarcter pulsado* P W String&1romC)arCode(evento&c)arCode-S in1o&inner<=>L WR PLbrM""""""""""""""""""""""""""""""""""""""LbrMP W mensaje b &&& Ldiv idRPin1oPML+divM

Jl pulsar la tecla aen el navegador Eire1oC0 se muestra la siguiente sucesin de eventos*

=ipo de evento* Ge,do.n Propiedad Ge,Code* 96 Propiedad c)arCode* '

Carcter pulsado* 5 =ipo de evento* Ge,press Propiedad Ge,Code* ' Propiedad c)arCode* AB Carcter pulsado* a =ipo de evento* Ge,up Propiedad Ge,Code* 96 Propiedad c)arCode* ' Carcter pulsado* 5

Jl pulsar la tecla J (la misma tecla0 pero )abiendo activado previamente las ma,Isculas- se muestra la siguiente sucesin de eventos en el navegador Eire1oC*
=ipo de evento* Ge,do.n Propiedad Ge,Code* 96 Propiedad c)arCode* ' Carcter pulsado* 5 =ipo de evento* Ge,press Propiedad Ge,Code* ' Propiedad c)arCode* 96 Carcter pulsado* J =ipo de evento* Ge,up Propiedad Ge,Code* 96 Propiedad c)arCode* ' Carcter pulsado* 5

En los eventos Ge,do.n , Ge,up0 la propiedad Ge,Code sigue valiendo lo mismo en los dos casos& El motivo es /ue Ge,Code almacena el cdigo interno de la tecla0 por lo /ue si se pulsa la misma tecla0 se obtiene el mismo cdigo0 independientemente de /ue una misma tecla puede producir caracteres di1erentes (por ejemplo ma,Isculas , minIsculas-& En el evento Ge,press0 el valor de la propiedad c)arCode vara0 ,a /ue el carcter a0 no es el mismo /ue el carcter J& En este caso0 el valor de c)arCode coincide con el cdigo JSCII del carcter pulsado& Siguiendo en el navegador Eire1oC0 si a)ora se pulsa una tecla especial0 como por ejemplo el tabulador0 se muestra la siguiente in1ormacin*
=ipo de evento* Ge,do.n Propiedad Ge,Code* A Propiedad c)arCode* ' Carcter pulsado* 5 =ipo de evento* Ge,press Propiedad Ge,Code* A Propiedad c)arCode* ' Carcter pulsado* 5

=ipo de evento* Ge,up Propiedad Ge,Code* A Propiedad c)arCode* ' Carcter pulsado* 5

Las teclas especiales no disponen de la propiedad c)arCode0 ,a /ue slamente se guarda el cdigo interno de la tecla pulsada en la propiedad Ge,Code0 en este caso el cdigo A& Si se pulsa la tecla Enter0 se obtiene el cdigo 2%0 la tecla de la 1lec)a superior produce el cdigo %?0 etc& !o obstante0 dependiendo del teclado utilizado para pulsar las teclas , dependiendo de la disposicin de las teclas en 1uncin del idioma del teclado0 estos cdigos podran variar& J continuacin se muestra el resultado de la ejecucin del mismo ejemplo anterior en el navegador Internet ECplorer& Jl pulsar la tecla a0 se obtiene la siguiente in1ormacin*
=ipo de evento* Ge,do.n Propiedad Ge,Code* 96 Propiedad c)arCode* unde1ined Carcter pulsado* =ipo de evento* Ge,press Propiedad Ge,Code* AB Propiedad c)arCode* unde1ined Carcter pulsado* =ipo de evento* Ge,up Propiedad Ge,Code* 96 Propiedad c)arCode* unde1ined Carcter pulsado*

La propiedad Ge,Code en el evento Ge,press contiene el cdigo JSCII del carcter de la tecla0 por lo /ue se puede obtener directamente el carcter mediante String&1romC)arCode(Ge,Code-& Si se pulsa la tecla J0 la in1ormacin mostrada es idntica a la anterior0 salvo /ue el cdigo /ue muestra el evento Ge,press cambia por 960 /ue es el cdigo JSCII de la tecla J*
=ipo de evento* Ge,do.n Propiedad Ge,Code* 96 Propiedad c)arCode* unde1ined Carcter pulsado* =ipo de evento* Ge,press Propiedad Ge,Code* 96 Propiedad c)arCode* unde1ined Carcter pulsado* =ipo de evento* Ge,up Propiedad Ge,Code* 96 Propiedad c)arCode* unde1ined Carcter pulsado*

Jl pulsar una tecla especial como el tabulador0 Internet ECplorer muestra la siguiente in1ormacin*

=ipo de evento* Ge,do.n Propiedad Ge,Code* A Propiedad c)arCode* unde1ined Carcter pulsado*

Los cdigos mostrados para las teclas especiales coinciden con los de Eire1oC , el resto de navegadores0 pero recuerda /ue pueden variar en 1uncin del teclado /ue se utiliza , en 1uncin de la disposicin de las teclas para cada idioma& Por Iltimo0 las propiedades altVe,0 ctrlVe, , s)i1tVe, almacenan un valor booleano /ue indica si alguna de esas teclas estaba pulsada al producirse el evento del teclado& Sorprendentemente0 estas tres propiedades 1uncionan de la misma 1orma en todos los navegadores*
i1(evento&altVe,- a alert(TEstaba pulsada la tecla JL=T-S b

J continuacin se muestra el caso en el /ue se pulsa la tecla S)i1t , sin soltarla0 se pulsa sobre la tecla /ue contiene el nImero 7 (en este caso0 se re1iere a la tecla /ue se encuentra en la parte superior del teclado , por tanto0 no se re1iere a la /ue se encuentra en el teclado numrico-& =anto Internet ECplorer como Eire1oC muestran la misma secuencia de eventos*
=ipo de evento* Ge,do.n Propiedad Ge,Code* 29 Propiedad c)arCode* ' Carcter pulsado* 5 =ipo de evento* Ge,do.n Propiedad Ge,Code* 6' Propiedad c)arCode* ' Carcter pulsado* 5 =ipo de evento* Ge,press Propiedad Ge,Code* ' Propiedad c)arCode* %: Carcter pulsado* P =ipo de evento* Ge,up Propiedad Ge,Code* 6' Propiedad c)arCode* ' Carcter pulsado* 5 =ipo de evento* Ge,up Propiedad Ge,Code* 29 Propiedad c)arCode* ' Carcter pulsado* 5

El evento Ge,press es el Inico /ue permite obtener el car%cter realmente pulsado0 ,a /ue al pulsar sobre la tecla 7 )abiendo pulsado la tecla S)i1t previamente0 se obtiene el carcter P0 /ue es precisamente el /ue muestra el evento Ge,press&

El siguiente cdigo de JavaScript permite obtener de 1orma correcta en cual/uier navegador el carcter correspondiente a la tecla pulsada*
1unction manejador(elEvento- a var evento R elEvento ^^ .indo.&eventS var caracter R evento&c)arCode ^^ evento&Ge,CodeS alert(PEl carcter pulsado es* P W String&1romC)arCode(caracter--S b document&onGe,press R manejadorS

&.#.#. "n:ormacin sobre los eventos de ratn

La in1ormacin ms relevante sobre los eventos relacionados con el ratn es la de las coordenadas de la posicin del puntero del ratn& Jun/ue el origen de las coordenadas siempre se encuentra en la es/uina superior iz/uierda0 el punto /ue se toma como re1erencia de las coordenadas puede variar& $e esta 1orma0 es posible obtener la posicin del ratn respecto de la pantalla del ordenador0 respecto de la ventana del navegador , respecto de la propia pgina <=>L (/ue se utiliza cuando el usuario )a )ec)o scroll sobre la pgina-& Las coordenadas ms sencillas son las /ue se re1ieren a la posicin del puntero respecto de la ventana del navegador0 /ue se obtienen mediante las propiedades client;, clientO*
1unction muestraIn1ormacion(elEvento- a var evento R elEvento ^^ .indo.&eventS var coordenada; R evento&client;S var coordenadaO R evento&clientOS alert(P<as pulsado el ratn en la posicin* P W coordenada; W P0 P W coordenadaO-S b document&onclicG R muestraIn1ormacionS

Las coordenadas de la posicin del puntero del ratn respecto de la pantalla completa del ordenador del usuario se obtienen de la misma 1orma0 mediante las propiedades screen; , screenO*
var coordenada; R evento&screen;S var coordenadaO R evento&screenOS

En muc)as ocasiones0 es necesario obtener otro par de coordenadas di1erentes* las /ue corresponden a la posicin del ratn respecto del origen de la pgina& Estas coordenadas no siempre coinciden con las coordenadas respecto del origen de la ventana del navegador0 ,a /ue el usuario puede )acer scroll sobre la pgina .eb& Internet ECplorer no proporciona estas coordenadas de 1orma directa0 mientras /ue el resto de navegadores s /ue lo )acen& $e esta 1orma0 es necesario detectar si el navegador es de tipo Internet ECplorer , en caso a1irmativo realizar un clculo sencillo*
// ,etectar si el navegador es @nternet E'plorer var ie R navigator&userJgent&toLo.erCase(-&indeC#1(TmsieT-NR"2S i1(ie- a coordenada; R evento&client; W document&bod,&scrollLe1tS

coordenadaO R evento&clientO W document&bod,&scroll=opS b else a coordenada; R evento&page;S coordenadaO R evento&pageOS b alert(P<as pulsado el ratn en la posicin* P W coordenada; W P0 P W coordenadaO W P respecto de la pgina .ebP-S

La variable ie vale true si el navegador en el /ue se ejecuta el script es de tipo Internet ECplorer (cual/uier versin- , vale 1alse en otro caso& Para el resto de navegadores0 las coordenadas respecto del origen de la pgina se obtienen mediante las propiedades page; , pageO& En el caso de Internet ECplorer0 se obtienen sumando la posicin respecto de la ventana del navegador (client;0 clientO- , el desplazamiento /ue )a su1rido la pgina (document&bod,&scrollLe1t0 document&bod,&scroll=op-&

Completar el cdigo JavaScript proporcionado para /ue* 2& Jl mover el ratn en cual/uier punto de la ventana del navegador0 se muestre la posicin del puntero respecto del navegador , respecto de la pgina* Eigura 9&2& In1ormacin /ue se muestra para los eventos del ratn Para mostrar los mensajes0 utilizar la 1uncin muestraIn1ormacion(- deduciendo su 1uncionamiento a partir de su cdigo 1uente& 2 Jl pulsar cual/uier tecla0 el mensaje mostrado debe cambiar para indicar el nuevo evento , su in1ormacin asociada*

JKadir la siguiente caracterstica al script* cuando se pulsa un botn del ratn0 el color de 1ondo del cuadro de mensaje debe ser amarillo ( fEEEECC- , cuando se pulsa una tecla0 el Eigura 9&7& In1ormacin /ue se muestra para los eventos del teclado

color de 1ondo debe ser azul ( fCCE9EE-& Jl volver a mover el ratn0 el color de 1ondo vuelve a ser blanco& Eigura 9&%& El color de 1ondo del cuadro de in1ormacin cambia en 1uncin del tipo de evento

Crear un script /ue in1orme al usuario en /ue zona de la pantalla )a pulsado el ratn& Las zonas de1inidas son las siguientes* iz/uierda arriba0 iz/uierda abajo0 derec)a arriba , derec)a abajo& Para determinar el tamaKo de la ventana del navegador0 utilizar la 1uncin tamanoDentana!avegador(- proporcionada&

Capt lo ,. -orm larios

La programacin de aplicaciones /ue contienen 1ormularios .eb siempre )a sido una de las tareas 1undamentales de JavaScript& $e )ec)o0 una de las principales razones por las /ue se invent el lenguaje de programacin JavaScript 1ue la necesidad de validar los datos de los 1ormularios directamente en el navegador del usuario& $e esta 1orma0 se evitaba recargar la pgina cuando el usuario cometa errores al rellenar los 1ormularios& !o obstante0 la aparicin de las aplicaciones JJJ; )a relevado al tratamiento de 1ormularios como la principal actividad de JavaScript& J)ora0 el principal uso de JavaScript es el de las comunicaciones asncronas con los servidores , el de la manipulacin dinmica de las aplicaciones& $e todas 1ormas0 el manejo de los 1ormularios sigue siendo un re/uerimiento imprescindible para cual/uier programador de JavaScript&

,.!. $ropiedades bsicas de :orm larios y elementos

JavaScript dispone de numerosas propiedades , 1unciones /ue 1acilitan la programacin de aplicaciones /ue manejan 1ormularios& En primer lugar0 cuando se carga una pgina .eb0 el navegador crea automticamente un arra, llamado 1orms , /ue contiene la re1erencia a todos los 1ormularios de la pgina& Para acceder al arra, 1orms0 se utiliza el objeto document0 por lo /ue document&1orms es el arra, /ue contiene todos los 1ormularios de la pgina& Como se trata de un arra,0 el acceso a cada 1ormulario se realiza con la misma sintaCis de los arra,s& La siguiente instruccin accede al primer 1ormulario de la pgina*
document&1orms['\S

Jdems del arra, de 1ormularios0 el navegador crea automticamente un arra, llamado elements por cada uno de los 1ormularios de la pgina& Cada arra, elements contiene la re1erencia a todos los elementos (cuadros de teCto0 botones0 listas desplegables0 etc&- de ese 1ormulario& Htilizando la sintaCis de los arra,s0 la siguiente instruccin obtiene el primer elemento del primer 1ormulario de la pgina*
document&1orms['\&elements['\S

La sintaCis de los arra,s no siempre es tan concisa& El siguiente ejemplo muestra cmo obtener directamente el Iltimo elemento del primer 1ormulario de la pgina*
document&1orms['\&elements[document&1orms['\&elements&lengt)"2\S

Jun/ue esta 1orma de acceder a los 1ormularios es rpida , sencilla0 tiene un inconveniente mu, grave& 34u sucede si cambia el diseKo de la pgina , en el cdigo <=>L se cambia el orden de los 1ormularios originales o se aKaden nuevos 1ormularios5 El problema es /ue "el primer formulario de la p%gina" a)ora podra ser otro 1ormulario di1erente al /ue espera la aplicacin&

En un entorno tan cambiante como el diseKo .eb0 es mu, di1cil con1iar en /ue el orden de los 1ormularios se mantenga estable en una pgina .eb& Por este motivo0 siempre debera evitarse el acceso a los 1ormularios de una pgina mediante el arra, document&1orms& Hna 1orma de evitar los problemas del mtodo anterior consiste en acceder a los 1ormularios de una pgina a travs de su nombre (atributo name- o a travs de su atributo id& El objeto document permite acceder directamente a cual/uier 1ormulario mediante su atributo name*
var 1ormularioPrincipal R document&1ormularioS var 1ormularioSecundario R document&otroX1ormularioS L1orm nameRP1ormularioP M &&& L+1ormM L1orm nameRPotroX1ormularioP M &&& L+1ormM

Jccediendo de esta 1orma a los 1ormularios de la pgina0 el script 1unciona correctamente aun/ue se reordenen los 1ormularios o se aKadan nuevos 1ormularios a la pgina& Los elementos de los 1ormularios tambin se pueden acceder directamente mediante su atributo name*
var 1ormularioPrincipal R document&1ormularioS var primerElemento R document&1ormulario&elementoS L1orm nameRP1ormularioPM Linput t,peRPteCtP nameRPelementoP +M L+1ormM

#bviamente0 tambin se puede acceder a los 1ormularios , a sus elementos utilizando las 1unciones $#> de acceso directo a los nodos& El siguiente ejemplo utiliza la )abitual 1uncin document&getElement8,Id(- para acceder de 1orma directa a un 1ormulario , a uno de sus elementos*
var 1ormularioPrincipal R document&getElement8,Id(P1ormularioP-S document&getElement8,Id(PelementoP-S L1orm nameRP1ormularioP idRP1ormularioP M Linput t,peRPteCtP nameRPelementoP idRPelementoP +M L+1ormM var primerElemento R

Independientemente del mtodo utilizado para obtener la re1erencia a un elemento de 1ormulario0 cada elemento dispone de las siguientes propiedades Itiles para el desarrollo de las aplicaciones* t,pe* indica el tipo de elemento /ue se trata& Para los elementos de tipo LinputM (teCt0 button0 c)ecGboC0 etc&- coincide con el valor de su atributo t,pe& Para las listas desplegables normales (elemento LselectM- su valor es select"one0 lo /ue permite di1erenciarlas de las listas /ue permiten seleccionar varios elementos a la vez , cu,o tipo es select"multiple& Por Iltimo0 en los elementos de tipo LteCtareaM0 el valor de t,pe es teCtarea&

 1orm* es una re1erencia directa al 1ormulario al /ue pertenece el elemento& Js0 para acceder al 1ormulario de un elemento0 se puede utilizar
document&getElement8,Id(PidXdelXelementoP-&1orm

name* obtiene el valor del atributo name de ;<=>L& Solamente se puede leer su valor0 por lo /ue no se puede modi1icar& value* permite leer , modi1icar el valor del atributo value de ;<=>L& Para los campos de teCto (Linput t,peRPteCtPM , LteCtareaM- obtiene el teCto /ue )a escrito el usuario& Para los botones obtiene el teCto /ue se muestra en el botn& Para los elementos c-ecH#o' , radio#utton no es mu, Itil0 como se ver ms adelante Por Iltimo0 los eventos ms utilizados en el manejo de los 1ormularios son los siguientes* onclicG* evento /ue se produce cuando se pinc)a con el ratn sobre un elemento& !ormalmente se utiliza con cual/uiera de los tipos de botones /ue permite de1inir ;<=>L (Linput t,peRPbuttonPM0 Linput t,peRPsubmitPM0 Linput t,peRPimagePM-& onc)ange* evento /ue se produce cuando el usuario cambia el valor de un elemento de teCto (Linput t,peRPteCtPM o LteCtareaM-& =ambin se produce cuando el usuario selecciona una opcin en una lista desplegable ( LselectM-& Sin embargo0 el evento slo se produce si despus de realizar el cambio0 el usuario pasa al siguiente campo del 1ormulario0 lo /ue tcnicamente se conoce como /ue "el otro campo de formulario -a perdido el foco"& on1ocus* evento /ue se produce cuando el usuario selecciona un elemento del 1ormulario& onblur* evento complementario de on1ocus0 ,a /ue se produce cuando el usuario )a deseleccionado un elemento por )aber seleccionado otro elemento del 1ormulario& =cnicamente0 se dice /ue el elemento anterior "-a perdido el foco"&

,.2. Itilidades bsicas para :orm larios

,.2.!. *btener el valor de los campos de :orm lario
La ma,ora de tcnicas JavaScript relacionadas con los 1ormularios re/uieren leer ,+o modi1icar el valor de los campos del 1ormulario& Por tanto0 a continuacin se muestra cmo obtener el valor de los campos de 1ormulario ms utilizados&

,.2.!.!. C adro de te?to y te?tarea

El valor del teCto mostrado por estos elementos se obtiene , se establece directamente mediante la propiedad value&
Linput t,peRPteCtP idRPteCtoP +M var valor R document&getElement8,Id(PteCtoP-&valueS LteCtarea idRPparra1oPML+teCtareaM var valor R document&getElement8,Id(Pparra1oP-&valueS

,.2.!.2. .adiob tton

Cuando se dispone de un grupo de radio#uttons0 generalmente no se /uiere obtener el valor del atributo value de alguno de ellos0 sino /ue lo importante es conocer cul de todos los radio#uttons se )a seleccionado& La propiedad c)ecGed devuelve true para el radio#utton seleccionado , 1alse en cual/uier otro caso& Si por ejemplo se dispone del siguiente grupo de radio#uttons*
Linput t,peRPradioP valueRPsiP nameRPpreguntaP idRPpreguntaXsiP+M SI Linput t,peRPradioP valueRPnoP nameRPpreguntaP idRPpreguntaXnoP+M !# Linput t,peRPradioP valueRPnsncP nameRPpreguntaP idRPpreguntaXnsncP+M !S+!C

El siguiente cdigo permite determinar si cada radio#utton )a sido seleccionado o no*

var elementos R document&getElements8,!ame(PpreguntaP-S 1or(var iR'S iLelementos&lengt)S iWW- a alert(P Elemento* P W elementos[i\&value W PZn Seleccionado* P W elementos[i\&c)ecGed-S b

,.2.!.#. C7ecHbo?
Los elementos de tipo c-ecH#o' son mu, similares a los radio#utton0 salvo /ue en este caso se debe comprobar cada c-ecH#o' de 1orma independiente del resto& El motivo es /ue los grupos de radio#utton son mutuamente eCclu,entes , slo se puede seleccionar uno de ellos cada vez& Por su parte0 los c-ecH#o' se pueden seleccionar de 1orma independiente respecto de los dems& Si se dispone de los siguientes c-ecH#o'*
Linput t,peRPc)ecGboCP valueRPcondicionesP nameRPcondicionesP idRPcondicionesP+M <e ledo , acepto las condiciones Linput t,peRPc)ecGboCP valueRPprivacidadP nameRPprivacidadP idRPprivacidadP+M <e ledo la poltica de privacidad

Htilizando la propiedad c)ecGed0 es posible comprobar si cada c-ecH#o' )a sido seleccionado*

var elemento R document&getElement8,Id(PcondicionesP-S alert(P Elemento* P W elemento&value W PZn Seleccionado* P W elemento&c)ecGed-S elemento R document&getElement8,Id(PprivacidadP-S alert(P Elemento* P W elemento&value W PZn Seleccionado* P W elemento&c)ecGed-S

,.2.!.'. Select
Las listas desplegables (LselectM- son los elementos en los /ue es ms di1cil obtener su valor& Si se dispone de una lista desplegable como la siguiente*
Lselect idRPopcionesP nameRPopcionesPM Loption valueRP2PMPrimer valorL+optionM Loption valueRP7PMSegundo valorL+optionM Loption valueRP%PM=ercer valorL+optionM Loption valueRP:PMCuarto valorL+optionM L+selectM

En general0 lo /ue se re/uiere es obtener el valor del atributo value de la opcin (LoptionMseleccionada por el usuario& #btener este valor no es sencillo0 ,a /ue se deben realizar una serie de pasos& Jdems0 para obtener el valor seleccionado0 deben utilizarse las siguientes propiedades* options0 es un arra, creado automticamente por el navegador para cada lista desplegable , /ue contiene la re1erencia a todas las opciones de esa lista& $e esta 1orma0 la primera opcin de una lista se puede obtener mediante document&getElement8,Id(PidXdeXlaXlistaP-&options['\& selectedIndeC0 cuando el usuario selecciona una opcin0 el navegador actualiza automticamente el valor de esta propiedad0 /ue guarda el ndice de la opcin seleccionada& El ndice )ace re1erencia al arra, options creado automticamente por el navegador para cada lista&
// ;#tener la referencia a la lista var lista R document&getElement8,Id(PopcionesP-S // ;#tener el ndice de la opcin que se -a seleccionado var indiceSeleccionado R lista&selectedIndeCS // Con el ndice ! el arra! "options") o#tener la opcin seleccionada var opcionSeleccionada R lista&options[indiceSeleccionado\S // ;#tener el valor ! el te'to de la opcin seleccionada var teCtoSeleccionado R opcionSeleccionada&teCtS var valorSeleccionado R opcionSeleccionada&valueS alert(P#pcin seleccionada* P W teCtoSeleccionado W PZn Dalor de la opcin* P W valorSeleccionado-S

Como se )a visto0 para obtener el valor del atributo value correspondiente a la opcin seleccionada por el usuario0 es necesario realizar varios pasos& !o obstante0 normalmente se abrevian todos los pasos necesarios en una Inica instruccin*
var lista R document&getElement8,Id(PopcionesP-S // ;#tener el valor de la opcin seleccionada var valorSeleccionado R lista&options[lista&selectedIndeC\&valueS // ;#tener el te'to que muestra la opcin seleccionada var valorSeleccionado R lista&options[lista&selectedIndeC\&teCtS

Lo ms importante es no con1undir el valor de la propiedad selectedIndeC con el valor correspondiente a la propiedad value de la opcin seleccionada& En el ejemplo anterior0 la primera opcin tiene un value igual a 2& Sin embargo0 si se selecciona esta opcin0 el valor de selectedIndeC ser '0 ,a /ue es la primera opcin del arra, options (, los arra,s empiezan a contar los elementos en el nImero '-&

,.2.2. Establecer el :oco en

n elemento

En programacin0 cuando un elemento est seleccionado , se puede escribir directamente en el o se puede modi1icar alguna de sus propiedades0 se dice /ue tiene el 1oco del programa&

Si un cuadro de teCto de un 1ormulario tiene el 1oco0 el usuario puede escribir directamente en el sin necesidad de pinc)ar previamente con el ratn en el interior del cuadro& Igualmente0 si una lista desplegable tiene el 1oco0 el usuario puede seleccionar una opcin directamente subiendo , bajando con las 1lec)as del teclado& Jl pulsar repetidamente la tecla =J8HLJ$# sobre una pgina .eb0 los di1erentes elementos (enlaces0 imgenes0 campos de 1ormulario0 etc&- van obteniendo el 1oco del navegador (el elemento seleccionado cada vez suele mostrar un pe/ueKo borde punteado-& Si en una pgina .eb el 1ormulario es el elemento ms importante0 como por ejemplo en una pgina de bIs/ueda o en una pgina con un 1ormulario para registrarse0 se considera una buena prctica de usabilidad el asignar automticamente el 1oco al primer elemento del 1ormulario cuando se carga la pgina& Para asignar el 1oco a un elemento de ;<=>L0 se utiliza la 1uncin 1ocus(-& El siguiente ejemplo asigna el 1oco a un elemento de 1ormulario cu,o atributo ides igual a primero*
document&getElement8,Id(PprimeroP-&1ocus(-S L1orm idRP1ormularioP actionRPfPM Linput t,peRPteCtP idRPprimeroP +M L+1ormM

Jmpliando el ejemplo anterior0 se puede asignar automticamente el 1oco del programa al primer elemento del primer 1ormulario de la pgina0 independientemente del id del 1ormulario , de los elementos*
i1(document&1orms&lengt) M '- a i1(document&1orms['\&elements&lengt) M 'a document&1orms['\&elements['\&1ocus(-S b b

El cdigo anterior comprueba /ue eCiste al menos un 1ormulario en la pgina mediante el tamaKo del arra, 1orms& Si su tamaKo es ma,or /ue '0 se utiliza este primer 1ormulario& Empleando la misma tcnica0 se comprueba /ue el 1ormulario tenga al menos un elemento (i1(document&1orms['\&elements&lengt) M '--& En caso a1irmativo0 se establece el 1oco del navegador en el primer elemento del primer 1ormulario (document&1orms['\&elements['\&1ocus(-S-& Para /ue el ejemplo anterior sea completamente correcto0 se debe aKadir una comprobacin adicional& El campo de 1ormulario /ue se selecciona no debera ser de tipo )idden*
i1(document&1orms&lengt) M '- a 1or(var iR'S i L document&1orms['\&elements&lengt)S iWW- a var campo R document&1orms['\&elements[i\S i1(campo&t,pe NR P)iddenP- a campo&1ocus(-S breaGS b b b

,.2.#. Evitar el envo d plicado de

n :orm lario

Hno de los problemas )abituales con el uso de 1ormularios .eb es la posibilidad de /ue el usuario pulse dos veces seguidas sobre el botn PEnviarP& Si la coneCin del usuario es demasiado lenta o la respuesta del servidor se )ace esperar0 el 1ormulario original sigue mostrndose en el navegador , por ese motivo0 el usuario tiene la tentacin de volver a pinc)ar sobre el botn de PEnviarP& En la ma,ora de los casos0 el problema no es grave e incluso es posible controlarlo en el servidor0 pero puede complicarse en 1ormularios de aplicaciones importantes como las /ue implican transacciones econmicas& Por este motivo0 una buena prctica en el diseKo de aplicaciones .eb suele ser la de des)abilitar el botn de envo despus de la primera pulsacin& El siguiente ejemplo muestra el cdigo necesario*
L1orm idRP1ormularioP actionRPfPM &&& Linput t,peRPbuttonP valueRPEnviarP onclicGRPt)is&disabledRtrueS t)is&valueRgEnviando&&&gS t)is&1orm&submit(-P +M L+1ormM

Cuando se pulsa sobre el botn de envo del 1ormulario0 se produce el evento onclicG sobre el botn , por tanto0 se ejecutan las instrucciones JavaScript contenidas en el atributo onclicG*

En primer lugar0 se des)abilita el botn mediante la instruccin t)is&disabled R trueS& Esta es la Inica instruccin necesaria si slo se /uiere des)abilitar un botn& 7 J continuacin0 se cambia el mensaje /ue muestra el botn& $el original PEnviarP se pasa al ms adecuado PEnviando&&&P % Por Iltimo0 se enva el 1ormulario mediante la 1uncin submit(- en la siguiente instruccin* t)is&1orm&submit(El botn del ejemplo anterior est de1inido mediante un botn de tipo Linput t,peRPbuttonP +M0 ,a /ue el cdigo JavaScript mostrado no 1unciona correctamente con un botn de tipo Linput t,peRPsubmitP +M& Si se utiliza un botn de tipo submit0 el botn se des)abilita antes de enviar el 1ormulario , por tanto el 1ormulario acaba sin enviarse&

,.2.'. >imitar el tamaJo de caracteres de

n te?tarea

La carencia ms importante de los campos de 1ormulario de tipo teCtarea es la imposibilidad de limitar el mCimo nImero de caracteres /ue se pueden introducir0 de 1orma similar al atributo maClengt) de los cuadros de teCto normales& JavaScript permite aKadir esta caracterstica de 1orma mu, sencilla& En primer lugar0 )a, /ue recordar /ue con algunos eventos (como onGe,press0 onclicG , onsubmit- se puede evitar su comportamiento normal si se devuelve el valor 1alse& Evitar el comportamiento normal e/uivale a modi1icar completamente el comportamiento )abitual del evento& Si por ejemplo se devuelve el valor 1alse en el evento onGe,press0 la tecla

pulsada por el usuario no se tiene en cuenta& Si se devuelve 1alse en el evento onclicG de un elemento como un enlace0 el navegador no carga la pgina indicada por el enlace& Si un evento devuelve el valor true0 su comportamiento es el )abitual*
LteCtarea onGe,pressRPreturn trueSPML+teCtareaM

En el teCtarea del ejemplo anterior0 el usuario puede escribir cual/uier carcter0 ,a /ue el evento onGe,press devuelve true , por tanto0 su comportamiento es el normal , la tecla pulsada se trans1orma en un carcter dentro del teCtarea& Sin embargo0 en el siguiente ejemplo*
LteCtarea onGe,pressRPreturn 1alseSPML+teCtareaM

Como el valor devuelto por el evento onGe,press es igual a 1alse0 el navegador no ejecuta el comportamiento por de1ecto del evento0 es decir0 la tecla presionada no se trans1orma en ningIn carcter dentro del teCtarea& !o importa las veces /ue se pulsen las teclas , no importa la tecla pulsada0 ese teCtarea no permitir escribir ningIn carcter& Jprovec)ando esta caracterstica0 es sencillo limitar el nImero de caracteres /ue se pueden escribir en un elemento de tipo teCtarea* se comprueba si se )a llegado al mCimo nImero de caracteres permitido , en caso a1irmativo se evita el comportamiento )abitual del evento , por tanto0 los caracteres adicionales no se aKaden al teCtarea*
1unction limita(maCimoCaracteres- a var elemento R document&getElement8,Id(PteCtoP-S i1(elemento&value&lengt) MR maCimoCaracteres - a return 1alseS b else a return trueS b b LteCtarea idRPteCtoP onGe,pressRPreturn limita(2''-SPML+teCtareaM

En el ejemplo anterior0 con cada tecla pulsada se compara el nImero total de caracteres del teCtarea con el mCimo nImero de caracteres permitido& Si el nImero de caracteres es igual o ma,or /ue el lmite0 se devuelve el valor 1alse , por tanto0 se evita el comportamiento por de1ecto de onGe,press , la tecla no se aKade&

>ejorar el ejemplo anterior indicando en todo momento al usuario el nImero de caracteres /ue aIn puede escribir& Jdems0 se debe permitir pulsar las teclas 8acGspace0 Supr& , las 1lec)as )orizontales cuando se )a,a llegado al mCimo nImero de caracteres&

,.2.5. .estrin%ir los caracteres permitidos en

n c adro de te?to

En ocasiones0 puede ser Itil blo/uear algunos caracteres determinados en un cuadro de teCto& Si por ejemplo un cuadro de teCto espera /ue se introduzca un nImero0 puede ser interesante no permitir al usuario introducir ningIn carcter /ue no sea numrico&

Igualmente0 en algunos casos puede ser Itil impedir /ue el usuario introduzca nImeros en un cuadro de teCto& Htilizando el evento onGe,press , unas cuantas sentencias JavaScript0 el problema se resuelve 1cilmente*
1unction permite(elEvento0 permitidos- a // 4aria#les que definen los caracteres permitidos var numeros R P'27%:69B?APS var caracteres R P abcde1g)ijGlmnKop/rstuv.C,zJ8C$EE@<IJVL>!h#P4 S=HDQ;OcPS var numerosXcaracteres R numeros W caracteresS var teclasXespeciales R [?0 %B0 %A0 :9\S // 3 + IacHSpace) /0 + Supr) 12 + flec-a izquierda) 1J + flec-a derec-a

// Seleccionar los caracteres a partir del par%metro de la funcin s.itc)(permitidos- a case TnumT* permitidos R numerosS breaGS case TcarT* permitidos R caracteresS breaGS case TnumXcarT* permitidos R numerosXcaracteresS breaGS b // ;#tener la tecla pulsada var evento R elEvento ^^ .indo.&eventS var codigoCaracter R evento&c)arCode ^^ evento&Ge,CodeS var caracter R String&1romC)arCode(codigoCaracter-S // Compro#ar si la tecla pulsada es alguna de las teclas especiales // Kteclas de #orrado ! flec-as -orizontalesL var teclaXespecial R 1alseS 1or(var i in teclasXespeciales- a i1(codigoCaracter RR teclasXespeciales[i\- a teclaXespecial R trueS breaGS bb // Compro#ar si la tecla pulsada se encuentra en los caracteres permitidos // o si es una tecla especial return permitidos&indeC#1(caracter- NR "2 ^^ teclaXespecialS b // Slo n"meros Linput t,peRPteCtP idRPteCtoP onGe,pressRPreturn permite(event0 TnumT-P +M // Slo letras Linput t,peRPteCtP idRPteCtoP onGe,pressRPreturn permite(event0 TcarT-P +M // Slo letras o n"meros Linput t,peRPteCtP idRPteCtoP onGe,pressRPreturn permite(event0 TnumXcarT-P +M

El 1uncionamiento del script anterior se basa en permitir o impedir el comportamiento )abitual del evento onGe,press& Cuando se pulsa una tecla0 se comprueba si el carcter de esa tecla se encuentra dentro de los caracteres permitidos para ese elemento LinputM& Si el carcter se encuentra dentro de los caracteres permitidos0 se devuelve true , por tanto el comportamiento de onGe,press es el )abitual , la tecla se escribe& Si el carcter no se encuentra dentro de los caracteres permitidos0 se devuelve 1alse , por tanto se impide el comportamiento normal de onGe,press , la tecla no llega a escribirse en el input& Jdems0 el script anterior siempre permite la pulsacin de algunas teclas especiales& En concreto0 las teclas 8acGSpace , Supr para borrar caracteres , las teclas Elec)a Iz/uierda , Elec)a $erec)a para moverse en el cuadro de teCto siempre se puden pulsar independientemente del tipo de caracteres permitidos&

,.#. Falidacin
La principal utilidad de JavaScript en el manejo de los 1ormularios es la validacin de los datos introducidos por los usuarios& Jntes de enviar un 1ormulario al servidor0 se recomienda validar mediante JavaScript los datos insertados por el usuario& $e esta 1orma0 si el usuario )a cometido algIn error al rellenar el 1ormulario0 se le puede noti1icar de 1orma instantnea0 sin necesidad de esperar la respuesta del servidor& !oti1icar los errores de 1orma inmediata mediante JavaScript mejora la satis1accin del usuario con la aplicacin (lo /ue tcnicamente se conoce como "mejorar la e'periencia de usuario"-, a,uda a reducir la carga de procesamiento en el servidor& !ormalmente0 la validacin de un 1ormulario consiste en llamar a una 1uncin de validacin cuando el usuario pulsa sobre el botn de envo del 1ormulario& En esta 1uncin0 se comprueban si los valores /ue )a introducido el usuario cumplen las restricciones impuestas por la aplicacin& Jun/ue eCisten tantas posibles comprobaciones como elementos de 1ormulario di1erentes0 algunas comprobaciones son mu, )abituales* /ue se rellene un campo obligatorio0 /ue se seleccione el valor de una lista desplegable0 /ue la direccin de email indicada sea correcta0 /ue la 1ec)a introducida sea lgica0 /ue se )a,a introducido un nImero donde as se re/uiere0 etc& J continuacin se muestra el cdigo JavaScript bsico necesario para incorporar la validacin a un 1ormulario*
L1orm actionRPP met)odRPP idRPP nameRPP onsubmitRPreturn validacion(-PM &&& L+1ormM

O el es/uema de la 1uncin validacion(- es el siguiente*

1unction validacion(- a i1 (condicion /ue debe cumplir el primer campo del 1ormulario- a // Si no se cumple la condicion999 alert(T[E # \ El campo debe tener un valor de&&&T-S return 1alseS b

else i1 (condicion /ue debe cumplir el segundo campo del 1ormulario- a // Si no se cumple la condicion999 alert(T[E # \ El campo debe tener un valor de&&&T-S return 1alseS b &&& else i1 (condicion /ue debe cumplir el Iltimo campo del 1ormulario- a // Si no se cumple la condicion999 alert(T[E # \ El campo debe tener un valor de&&&T-S return 1alseS b // Si el script -a llegado a este punto) todas las condiciones // se -an cumplido) por lo que se devuelve el valor true return trueS b

El 1uncionamiento de esta tcnica de validacin se basa en el comportamiento del evento onsubmit de JavaScript& Jl igual /ue otros eventos como onclicG , onGe,press0 el evento Tonsubmit vara su comportamiento en 1uncin del valor /ue se devuelve& Js0 si el evento onsubmit devuelve el valor true0 el 1ormulario se enva como lo )ara normalmente& Sin embargo0 si el evento onsubmit devuelve el valor 1alse0 el 1ormulario no se enva& La clave de esta tcnica consiste en comprobar todos , cada uno de los elementos del 1ormulario& En cuando se encuentra un elemento incorrecto0 se devuelve el valor 1alse& Si no se encuentra ningIn error0 se devuelve el valor true& Por lo tanto0 en primer lugar se de1ine el evento onsubmit del 1ormulario como*
onsubmitRPreturn validacion(-P

Como el cdigo JavaScript devuelve el valor resultante de la 1uncin validacion(-0 el 1ormulario solamente se enviar al servidor si esa 1uncin devuelve true& En el caso de /ue la 1uncin validacion(- devuelva 1alse0 el 1ormulario permanecer sin enviarse& $entro de la 1uncin validacion(- se comprueban todas las condiciones impuestas por la aplicacin& Cuando no se cumple una condicin0 se devuelve 1alse , por tanto el 1ormulario no se enva& Si se llega al 1inal de la 1uncin0 todas las condiciones se )an cumplido correctamente0 por lo /ue se devuelve true, el 1ormulario se enva& La noti1icacin de los errores cometidos depende del diseKo de cada aplicacin& En el cdigo del ejemplo anterior simplemente se muestran mensajes mediante la 1uncin alert(indicando el error producido& Las aplicaciones .eb mejor diseKadas muestran cada mensaje de error al lado del elemento de 1ormulario correspondiente , tambin suelen mostrar un mensaje principal indicando /ue el 1ormulario contiene errores& Hna vez de1inido el es/uema de la 1uncin validacion(-0 se debe aKadir a esta 1uncin el cdigo correspondiente a todas las comprobaciones /ue se realizan sobre los elementos del 1ormulario& J continuacin0 se muestran algunas de las validaciones ms )abituales de los campos de 1ormulario&

,.#.!. Falidar

n campo de te?to obli%atorio

Se trata de 1orzar al usuario a introducir un valor en un cuadro de teCto o teCtarea en los /ue sea obligatorio& La condicin en JavaScript se puede indicar como*
valor R document&getElement8,Id(PcampoP-&valueS i1( valor RR null ^^ valor&lengt) RR ' ^^ +iZsWY+&test(valor- - a return 1alseS b

Para /ue se de por completado un campo de teCto obligatorio0 se comprueba /ue el valor introducido sea vlido0 /ue el nImero de caracteres introducido sea ma,or /ue cero , /ue no se )a,an introducido slo espacios en blanco& La palabra reservada null es un valor especial /ue se utiliza para indicar "ning"n valor"& Si el valor de una variable es null0 la variable no contiene ningIn valor de tipo objeto0 arra,0 numrico0 cadena de teCto o booleano& La segunda parte de la condicin obliga a /ue el teCto introducido tenga una longitud superior a cero caracteres0 esto es0 /ue no sea un teCto vaco& Por Iltimo0 la tercera parte de la condicin (+iZsWY+&test(valor-- obliga a /ue el valor introducido por el usuario no slo est 1ormado por espacios en blanco& Esta comprobacin se basa en el uso de "e'presiones regulares"0 un recurso )abitual en cual/uier lenguaje de programacin pero /ue por su gran complejidad no se van a estudiar& Por lo tanto0 slo es necesario copiar literalmente esta condicin0 poniendo especial cuidado en no modi1icar ningIn carcter de la eCpresin&

,.#.2. Falidar

n campo de te?to con valores n m3ricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de teCto& La condicin JavaScript consiste en*
valor R document&getElement8,Id(PcampoP-&valueS i1( is!a!(valor- - a return 1alseS b

Si el contenido de la variable valor no es un nImero vlido0 no se cumple la condicin& La ventaja de utilizar la 1uncin interna is!a!(- es /ue simpli1ica las comprobaciones0 ,a /ue JavaScript se encarga de tener en cuenta los decimales0 signos0 etc& J continuacin se muestran algunos resultados de la 1uncin is!a!(-*
is!a!(%-S // false is!a!(P%P-S // false is!a!(%&%6:6-S // false is!a!(%7%7%&%:6-S // false is!a!(W7%&7-S // false is!a!(P"7%&7P-S // false is!a!(P7%aP-S // true is!a!(P7%&:%&6:P-S // true

,.#.#. Falidar @ e se 7a seleccionado

na opcin de

na lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable& El siguiente cdigo JavaScript permite conseguirlo*
indice R document&getElement8,Id(PopcionesP-&selectedIndeCS i1( indice RR null ^^ indice RR ' - a return 1alseS b Lselect idRPopcionesP nameRPopcionesPM Loption valueRPPM" Selecciona un valor "L+optionM Loption valueRP2PMPrimer valorL+optionM Loption valueRP7PMSegundo valorL+optionM Loption valueRP%PM=ercer valorL+optionM L+selectM

J partir de la propiedad selectedIndeC0 se comprueba si el ndice de la opcin seleccionada es vlido , adems es distinto de cero& La primera opcin de la lista ( "Selecciona un valor _- no es vlida0 por lo /ue no se permite el valor ' para esta propiedad selectedIndeC&

,.#.'. Falidar

na direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un 1ormato vlido& Por tanto0 lo /ue se comprueba es /ue la direccin parezca vlida0 ,a /ue no se comprueba si se trata de una cuenta de correo electrnico real , operativa& La condicin JavaScript consiste en*
valor R document&getElement8,Id(PcampoP-&valueS i1( N(+Z.W(["W&T\Z.W-UjZ.W(["&\Z.W-UZ&Z.W(["&\Z.W-+&test(valor-- - a return 1alseS b

La comprobacin se realiza nuevamente mediante las eCpresiones regulares0 ,a /ue las direcciones de correo electrnico vlidas pueden ser mu, di1erentes& Por otra parte0 como el estndar /ue de1ine el 1ormato de las direcciones de correo electrnico es mu, complejo0 la eCpresin regular anterior es una simpli1icacin& Jun/ue esta regla valida la ma,ora de direcciones de correo electrnico utilizadas por los usuarios0 no soporta todos los di1erentes 1ormatos vlidos de email&

,.#.5. Falidar

na :ec7a

Las 1ec)as suelen ser los campos de 1ormulario ms complicados de validar por la multitud de 1ormas di1erentes en las /ue se pueden introducir& El siguiente cdigo asume /ue de alguna 1orma se )a obtenido el aKo0 el mes , el da introducidos por el usuario*
var ano R document&getElement8,Id(PanoP-&valueS var mes R document&getElement8,Id(PmesP-&valueS var dia R document&getElement8,Id(PdiaP-&valueS valor R ne. $ate(ano0 mes0 dia-S i1( Nis!a!(valor- - a

return 1alseS b

La 1uncin $ate(ano0 mes0 dia- es una 1uncin interna de JavaScript /ue permite construir 1ec)as a partir del aKo0 el mes , el da de la 1ec)a& Es mu, importante tener en cuenta /ue el nImero de mes se indica de ' a 220 siendo ' el mes de Enero , 22 el mes de $iciembre& Los das del mes siguen una numeracin di1erente0 ,a /ue el mnimo permitido es 2, el mCimo %2& La validacin consiste en intentar construir una 1ec)a con los datos proporcionados por el usuario& Si los datos del usuario no son correctos0 la 1ec)a no se puede construir correctamente , por tanto la validacin del 1ormulario no ser correcta&

,.#.&. Falidar

n n/mero de )B"

Se trata de comprobar /ue el nImero proporcionado por el usuario se corresponde con un nImero vlido de $ocumento !acional de Identidad o $!I& Jun/ue para cada pas o regin los re/uisitos del documento de identidad de las personas pueden variar0 a continuacin se muestra un ejemplo genrico 1cilmente adaptable& La validacin no slo debe comprobar /ue el nImero est 1ormado por oc)o ci1ras , una letra0 sino /ue tambin es necesario comprobar /ue la letra indicada es correcta para el nImero introducido*
valor R document&getElement8,Id(PcampoP-&valueS var letras R [T=T0 T T0 TQT0 TJT0 T@T0 T>T0 TOT0 TET0 TPT0 T$T0 T;T0 T8T0 T!T0 TJT0 TcT0 TST0 T4T0 TDT0 T<T0 TLT0 TCT0 TVT0 TET0 T=T\S i1( N(+iZda?b[J"c\Y+&test(valor-- - a return 1alseS b i1(valor&c)arJt(?- NR letras[(valor&substring('0 ?--`7%\- a return 1alseS b

La primera comprobacin asegura /ue el 1ormato del nImero introducido es el correcto0 es decir0 /ue est 1ormado por ? nImeros seguidos , una letra& Si la letra est al principio de los nImeros0 la comprobacin sera +i[J"c\Zda?bY+& Si en vez de oc)o nImeros , una letra0 se re/uieren diez nImeros , dos letras0 la comprobacin sera +iZda2'b[J"c\a7bY+ , as sucesivamente& La segunda comprobacin aplica el algoritmo de clculo de la letra del $!I , la compara con la letra proporcionada por el usuario& El algoritmo de cada documento de identi1icacin es di1erente0 por lo /ue esta parte de la validacin se debe adaptar convenientemente&

,.#.,. Falidar

n n/mero de tel3:ono

Los nImeros de tel1ono pueden ser indicados de 1ormas mu, di1erentes* con pre1ijo nacional0 con pre1ijo internacional0 agrupado por pares0 separando los nImeros con guiones0 etc& El siguiente script considera /ue un nImero de tel1ono est 1ormado por nueve dgitos consecutivos , sin espacios ni guiones entre las ci1ras*

valor R document&getElement8,Id(PcampoP-&valueS i1( N(+iZdaAbY+&test(valor-- - a return 1alseS b

Hna vez ms0 la condicin de JavaScript se basa en el uso de eCpresiones regulares0 /ue comprueban si el valor indicado es una sucesin de nueve nImeros consecutivos& J continuacin se muestran otras eCpresiones regulares /ue se pueden utilizar para otros 1ormatos de nImero de tel1ono*

,.#.(. Falidar @ e

n c7ecHbo? 7a sido seleccionado

Si un elemento de tipo c-ecH#o' se debe seleccionar de 1orma obligatoria0 JavaScript permite comprobarlo de 1orma mu, sencilla*
elemento R document&getElement8,Id(PcampoP-S i1( N elemento&c)ecGed - a return 1alseS b

Si se trata de comprobar /ue todos los c-ecH#o' del 1ormulario )an sido seleccionados0 es ms 1cil utilizar un bucle*
1ormulario R document&getElement8,Id(P1ormularioP-S 1or(var iR'S iL1ormulario&elements&lengt)S iWW- a var elemento R 1ormulario&elements[i\S i1(elemento&t,pe RR Pc)ecGboCP- a i1(Nelemento&c)ecGeda return 1alseS b b b

,.#.9. Falidar @ e

n radiob tton 7a sido seleccionado

Jun/ue se trata de un caso similar al de los c-ecH#o'0 la validacin de los radio#utton presenta una di1erencia importante* en general0 la comprobacin /ue se realiza es /ue el usuario )a,a seleccionado algIn radio#utton de los /ue 1orman un determinado grupo& >ediante JavaScript0 es sencillo determinar si se )a seleccionado algIn radio#utton de un grupo*
opciones R document&getElements8,!ame(PopcionesP-S var seleccionado R 1alseS 1or(var iR'S iLopciones&lengt)S iWW- a i1(opciones[i\&c)ecGed- a seleccionado R trueS breaGS b b i1(Nseleccionado- a return 1alseS b

El anterior ejemplo recorre todos los radio#utton /ue 1orman un grupo , comprueba elemento por elemento si )a sido seleccionado& Cuando se encuentra el primer radio#utton seleccionado0 se sale del bucle , se indica /ue al menos uno )a sido seleccionado&

Capt lo (. *tras

tilidades

Jdems de los 1ormularios , de todas las 1unciones , utilidades de JavaScript /ue se )an visto0 eCisten muc)as otras utilidades /ue es necesario conocer para desarrollar aplicaciones completas& Como no es posible estudiar todas las )erramientas /ue se pueden crear con JavaScript0 a continuacin se muestran algunas de las utilidades bsicas ms comunes&

(.!. .elo0esK contadores e intervalos de tiempo

En ocasiones0 algunas pginas .eb muestran un reloj con la )ora actual& Si el reloj debe actualizarse cada segundo0 no se puede mostrar la )ora directamente en la pgina <=>L generada por el servidor& En este caso0 aun/ue eCisten alternativas realizadas con Java , con Elas)0 la 1orma ms sencilla de )acerlo es mostrar la )ora del ordenador del usuario mediante JavaScript& Para crear , mostrar un reloj con JavaScript0 se debe utilizar el objeto interno $ate(- para crear 1ec)as+)oras , las utilidades /ue permiten de1inir contadores0 para actualizar el reloj cada segundo& El objeto $ate(- es una utilidad /ue proporciona JavaScript para crear 1ec)as , )oras& Hna vez creado un objeto de tipo 1ec)a0 es posible manipularlo para obtener in1ormacin o realizar clculos con las 1ec)as& Para obtener la 1ec)a , )ora actuales0 solamente es necesario crear un objeto $ate(-sin pasar ningIn parmetro*
var 1ec)a<ora R ne. $ate(-S

Htilizando el cdigo anterior0 se puede construir un reloj mu, bsico /ue no actualiza su contenido*
var 1ec)a<ora R ne. $ate(-S document&getElement8,Id(PrelojP-&inner<=>L R 1ec)a<oraS Ldiv idRPrelojP +M

Cuando se carga la pgina0 el ejemplo anterior mostrara un teCto parecido al siguiente en el LdivM reservado para el reloj*
=)u Jug '7 7''B 2A*%6*2A @>=W'7'' (<ora de verano romance-

Este primer reloj construido presenta muc)as di1erencias respecto al reloj /ue se /uiere construir& En primer lugar0 muestra muc)a ms in1ormacin de la necesaria& Jdems0 su valor no se actualiza cada segundo0 por lo /ue no es un reloj mu, prctico& El objeto $ate(- proporciona unas 1unciones mu, Itiles para obtener in1ormacin sobre la 1ec)a , la )ora& Concretamente0 eCisten 1unciones /ue obtienen directamente la )ora0 los minutos , los segundos*
var 1ec)a<ora R ne. $ate(-S var )oras R 1ec)a<ora&get<ours(-S var minutos R 1ec)a<ora&get>inutes(-S

var segundos R 1ec)a<ora&getSeconds(-S document&getElement8,Id(PrelojP-&inner<=>L R )orasWT*TWminutosWT*TWsegundosS Ldiv idRPrelojP +M

Htilizando las 1unciones get<ours(-0 get>inutes(- , getSeconds(- del objeto $ate0 el reloj puede mostrar solamente la in1ormacin de la )ora& El resultado del ejemplo anterior sera un reloj como el siguiente*
7'*A*72

Si la )ora0 minuto o segundo son menores /ue 2'0 JavaScript no aKade el ' por delante0 por lo /ue el resultado no es del todo satis1actorio& El siguiente cdigo soluciona este problema aKadiendo un ' cuando sea necesario*
var 1ec)a<ora R ne. $ate(-S var )oras R 1ec)a<ora&get<ours(-S var minutos R 1ec)a<ora&get>inutes(-S var segundos R 1ec)a<ora&getSeconds(-S i1()oras L 2'- a )oras R T'T W )orasS b i1(minutos L 2'- a minutos R T'T W minutosS b i1(segundos L 2'- a segundos R T'T W segundosS b document&getElement8,Id(PrelojP-&inner<=>L R )orasWT*TWminutosWT*TWsegundosS Ldiv idRPrelojP +M

J)ora el reloj muestra correctamente la )ora*

7'*2:*'%

Para completar el reloj0 slo 1alta /ue se actualice su valor cada segundo& Para conseguirlo0 se deben utilizar unas 1unciones especiales de JavaScript /ue permiten ejecutar determinadas instrucciones cuando )a transcurrido un determinado espacio de tiempo& La 1uncin set=imeout(- permite ejecutar una 1uncin una vez /ue )a,a transcurrido un periodo de tiempo indicado& La de1inicin de la 1uncin es*
set=imeout(nombreEuncion0 milisegundos-S

La 1uncin /ue se va a ejecutar se debe indicar mediante su nombre sin parntesis , el tiempo /ue debe transcurrir )asta /ue se ejecute se indica en milisegundos& $e esta 1orma0 si se crea una 1uncin encargada de mostrar la )ora del reloj , se denomina muestra eloj(-0 se puede indicar /ue se ejecute dentro de 2 segundo mediante el siguiente cdigo*
1unction muestra eloj(- a var 1ec)a<ora R ne. $ate(-S var )oras R 1ec)a<ora&get<ours(-S var minutos R 1ec)a<ora&get>inutes(-S var segundos R 1ec)a<ora&getSeconds(-S i1()oras L 2'- a )oras R T'T W )orasS b i1(minutos L 2'- a minutos R T'T W minutosS b i1(segundos L 2'a segundos R T'T W segundosS b

document&getElement8,Id(PrelojP-&inner<=>L R )orasWT*TWminutosWT*TWsegundosS

b set=imeout(muestra eloj0 2'''-S Ldiv idRPrelojP +M

!o obstante0 el cdigo anterior simplemente muestra el contenido del reloj 2 segundo despus de /ue se cargue la pgina0 por lo /ue no es mu, Itil& Para ejecutar una 1uncin de 1orma peridica0 se utiliza una 1uncin de JavaScript mu, similar a set=imeout(- /ue se denomina setInterval(-& Su de1inicin es*
setInterval(nombreEuncion0 milisegundos-S

La de1inicin de esta 1uncin es idntica a la 1uncin set=imeout(-0 salvo /ue en este caso0 la 1uncin programada se ejecuta in1initas veces de 1orma peridica con un lapso de tiempo entre ejecuciones de tantos milisegundos como se )a,an establecido& Js0 para construir el reloj completo0 se establece una ejecucin peridica de la 1uncin muestra eloj(- cada segundo*
1unction muestra eloj(- a var 1ec)a<ora R ne. $ate(-S var )oras R 1ec)a<ora&get<ours(-S var minutos R 1ec)a<ora&get>inutes(-S var segundos R 1ec)a<ora&getSeconds(-S i1()oras L 2'- a )oras R T'T W )orasS b i1(minutos L 2'- a minutos R T'T W minutosS b i1(segundos L 2'a segundos R T'T W segundosS b document&getElement8,Id(PrelojP-&inner<=>L R )orasWT*TWminutosWT*TWsegundosS b .indo.&onload R 1unction(- a setInterval(muestra eloj0 2'''-S b Ldiv idRPrelojP +M

Empleando el objeto $ate , sus 1unciones0 es posible construir "cuentras atr%s"0 es decir0 relojes /ue muestran el tiempo /ue 1alta )asta /ue se produzca un evento& Jdems0 las 1unciones set=imeout(- , setInterval(- pueden resultar mu, Itiles en otras tcnicas de programacin&

(.2. Calendario
Cuando una aplicacin muestra un 1ormulario para /ue el in1ormacin ms complicada de obtener siempre suelen ser 1ec)as& El motivo es /ue eCisten muc)as 1ormas di1erentes de por ejemplo se pueden indicar como dd+mm+aa0 dd+mm+aaaa0 aaaa0 etc& usuario inserte sus datos0 la los nImeros de tel1ono , las indicar estos datos& Las 1ec)as aaaa+mm+dd0 dd"mm"aa0 dd mm

Los mtodos ms utilizados para /ue el usuario introduzca la in1ormacin relativa a una 1ec)a suelen ser un cuadro de teCto en el /ue tiene /ue insertar la 1ec)a completa (indicndole el 1ormato /ue debe seguir- o un cuadro de teCto para el da0 una lista desplegable para el mes , otro cuadro de teCto para el aKo& En cual/uier caso0 para el usuario suele ser ms cmodo /ue la aplicacin inclu,a un calendario en el /ue pueda indicar la 1ec)a pinc)ando sobre el da elegido* Eigura ?&2& Jspecto de un calendario creado con JavaScript Jdems0 este mtodo es menos propenso a cometer errores0 ,a /ue si el calendario est bien construido0 no es posible introducir 1ec)as invlidas , tampoco es posible insertar las 1ec)as en un 1ormato incorrecto& !o obstante0 realizar un calendario completo en JavaScript no es una tarea trivial0 por lo /ue no se va a estudiar su desarrollo completo& J1ortunadamente0 eCisten scripts gratuitos para mostrar calendarios , /ue permiten su uso libre incluso en aplicaciones comerciales& $e entre todos los calendarios disponibles0 uno de los ms completos es el desarrollado por la empresa $,nJrc)0 /ue se puede acceder desde su pgina .eb o1icial* )ttp*++...&d,narc)&com+ projects+calendar+ , /ue se puede descargar gratuitamente desde )ttp*++source1orge&net+ projects+jscalendar+ El arc)ivo descargado inclu,e todos los scripts necesarios0 su documentacin0 ejemplos de uso0 di1erentes estilos CSS para el calendario0 etc& J continuacin se indican los pasos necesarios para incluir un calendario bsico en cual/uier pgina .eb* 2- Enlazar los arc)ivos JavaScript , CSS re/ueridos* Se descomprime el arc)ivo descargado0 se guardan los arc)ivos JavaScript , CSS en el sitio adecuado (en este ejemplo se supone /ue los arc)ivos JavaScript se guardan en el directorio js+ , los arc)ivos CSS en el directorio css+- , se enlazan directamente desde la cabecera de la pgina <=>L&
L)eadM &&& Lst,le t,peRPteCt+cssPMjimport url(Pcss+calendar"estilo&cssP-SL+st,leM Lscript t,peRPteCt+javascriptP srcRPjs+calendar&jsP +M Lscript t,peRPteCt+javascriptP srcRPjs+calendar"es&jsP +M Lscript t,peRPteCt+javascriptP srcRPjs+calendar"setup&jsP +M &&& L+)eadM

El calendario inclu,e traducciones a ms de :' idiomas0 entre los /ue se encuentra el espaKol& Para mostrar el calendario en un determinado idioma0 tan solo es necesario enlazar el arc)ivo del idioma correspondiente& Las traducciones se encuentran en el directorio lang , su 1ormato es calendar";;&js0 donde ;;es el cdigo del idioma& 7- JKadir el cdigo ;<=>L necesario para el elemento /ue va a mostrar el calendario*
LpMIntroduce la 1ec)a pulsando sobre la imagen del calendarioL+pM Linput t,peRPteCtP nameRPdateP idRP1ec)aP readonl,RPreadonl,P +M Limg srcRPcalendario&pngP idRPselectorP +M

En este caso0 el calendario est 1ormado por dos elementos* Hn cuadro de teCto llamado 1ec)a , /ue almacena el valor introducido por el usuario& Como se le )a asignado un atributo readonl,RPreadonl,P0 el usuario no puede modi1icar su valor& Hna pe/ueKa imagen o icono /ue se utiliza para activar el calendario& Cuando el usuario pinc)a con el ratn sobre la imagen0 se muestra el calendario de JavaScript& %- Con1igurar el calendario*
Lscript t,peRPteCt+javascriptPM .indo.&onload R 1unction(- a Calendar&setup(a inputEield* P1ec)aP0 i1Eormat* P`d + `m + `OP0 button* PselectorP b-S b L+scriptM

Hna vez enlazados los arc)ivos del calendario , preparado el cdigo ;<=>L0 es necesario inicializar , con1igurar el calendario& La con1iguracin del calendario consiste en establecer el valor de alguna de sus propiedades& Las propiedades bsicas imprescindibles son* inputEield* se trata del atributo iddel elemento en el /ue se mostrar la 1ec)a seleccionada0 en este ejemplo sera 1ec)a& i1Eormat* 1ormato en el /ue se mostrar la 1ec)a una vez seleccionada (en este caso se )a optado por el 1ormato dd + mm + aaaa-& button* atributo id del elemento /ue se pulsa (botn0 imagen0 enlace- para mostrar el calendario de seleccin de 1ec)a& En este ejemplo0 el idde la imagen es selector&

$espus de esta con1iguracin bsica0 el calendario ,a puede utilizarse en la aplicacin* 2- Jspecto por de1ecto del selector de calendario* Eigura ?&7& Elementos ;<=>L del calendario JavaScript* cuadro de teCto e icono

7- Jl pinc)ar una vez sobre la imagen del calendario* Eigura ?&%& Jspecto inicial del calendario JavaScript cuando se abre por primera vez Se muestra el calendario con el aspecto e idioma establecidos , aparece resaltada la 1ec)a del da actual& %- Se selecciona la 1ec)a deseada* Eigura ?&:& Seleccionando una 1ec)a en el calendario JavaScript

:- $espus de pinc)ar con el ratn sobre la 1ec)a deseada* Eigura ?&6& El cuadro de teCto muestra la 1ec)a establecida por el usuario con el calendario JavaScript Jl pulsar con el ratn sobre la 1ec)a deseada0 el calendario se cierra automticamente , el cuadro de teCto muestra la 1ec)a seleccionada con el 1ormato indicado en la con1iguracin del calendario& Si se vuelve a abrir el calendario para seleccionar otra 1ec)a0 se mostrar resaltada la 1ec)a del da seleccionado , no la 1ec)a del da actual&

>ejorar el calendario creado aKadiendo las opciones necesarias para /ue muestre el siguiente aspecto* Eigura ?&9& Jspecto mejorado del calendario JavaScript

2 7

4ue no se muestre el nImero de la semana en el calendario (pista* .eeG!umbers>odi1icar el 1ormato en el /ue se muestra la 1ec)a seleccionada& El 1ormato original es 72 + '? + 7''B (indicado como `d + `m + `O-& El 1ormato deseado es >artes0 72 de Jgosto de 7''B (pistas* `J0 `8% El nuevo 1ormato de 1ec)a es muc)o ms agradable para los usuarios0 pero ms incmodo para los scripts /ue tienen /ue manejarlo& J1ortunadamente0 el calendario dispone de la posibilidad de guardar dos valores* un valor para mostrar a los usuarios , otro valor para /ue lo procesen los scripts& Cuando el usuario seleccione una 1ec)a0 la 1ec)a con el 1ormato original se debe almacenar en un campo oculto de 1ormulario , el otro 1ormato ms largo debe mostrar al usuario en un elemento de tipo LspanM (pistas* displa,Jrea0 daEormat-

(.#. =ooltip
Los tooltips son pe/ueKos recuadros de in1ormacin /ue aparecen al posicionar el ratn sobre un elemento& !ormalmente se utilizan para o1recer in1ormacin adicional sobre el elemento seleccionado o para mostrar al usuario pe/ueKos mensajes de a,uda& Los tooltips son )abituales en varios elementos de los sistemas operativos* Eigura ?&B& Jspecto de un tooltip tpico en el Sistema #perativo ealizar un tooltip completo mediante JavaScript es una tarea mu, compleja0 sobre todo por la di1icultad de mostrar el mensaje correctamente en 1uncin de la posicin del ratn& J1ortunadamente0 eCisten scripts /ue ,a estn preparados para generar cual/uier tipo de tooltip& La librera /ue se va a utilizar se denomina overLI80 , se puede descargar desde su pgina .eb principal* )ttp*++...&bosrup&com+.eb+overlib+ La descarga inclu,e todos los scripts necesarios para el 1uncionamiento del sistema de tooltips0 pero no su documentacin0 /ue se puede consultar en* )ttp*++...&bosrup&com+.eb+overlib+ 5$ocumentation& La re1erencia de todos los comandos disponibles se puede consultar en* )ttp*++...&bosrup&com+.eb+overlib+5CommandX e1erence

J continuacin se indican los pasos necesarios para incluir un tooltip bsico en cual/uier pgina .eb* 2- Enlazar los arc)ivos JavaScript re/ueridos*
Lscript t,peRPteCt+javascriptP srcRPjs+overlib&jsPMLN"" overLI8 (c- EriG 8osrup ""ML+scriptM

Se descomprime el arc)ivo descargado0 se guarda el arc)ivo JavaScript en el sitio adecuado (en este ejemplo se supone /ue los arc)ivos JavaScript se guardan en el directorio js+- , se enlaza directamente desde la cabecera de la pgina <=>L& Los tooltips slo re/uieren /ue se enlace un Inico arc)ivo JavaScript ( overlib&js-& El comentario /ue inclu,e el cdigo ;<=>L es el aviso de cop,rig)t de la librera0 /ue es obligatorio incluirlo para poder usarla& 7- $e1inir el teCto /ue activa el tooltip , su contenido*
LpMLorem ipsum dolor sit amet0 La )re1RPfP onmouseoverRPreturn overlib(TPrueba de un tooltip bsico , mu, sencillo&T-SP onmouseoutRPreturn nd(-SPMconsectetuer adipiscing elitL+aM& Etiam eget metus& Proin varius auctor tortor& Cras augue ne/ue0 porta vitae0 vestibulum nec0 pulvinar id0 nib)& Eusce in arcu& $uis ve)icula nonumm, orci&L+pM

Los tooltip se inclu,en como enlaces de tipo LaM para los /ue se de1inen los eventos onmouseover , onmouseout& Cuando el ratn se pasa por encima del enlace anterior0 se muestra el tooltip con el aspecto por de1ecto* Eigura ?&?& Jspecto por de1ecto del tooltip creado con la librera overLI8

La librera overLI8 permite con1igurar completamente el aspecto , comportamiento de cada tooltip& Las opciones se indican en cada tooltip , se inclu,en como parmetros al 1inal de la llamada a la 1uncin overlib(-*
La )re1RPfP onmouseoverRPreturn overlib(TPrueba de un onmouseoutRPreturn nd(-SPMconsectetuer adipiscing elitL+aM tooltip bsico , mu, sencillo&T0 CE!=E -SP

El parmetro CE!=E del ratn*

indica /ue el tooltip se debe mostrar centrado respecto de la posicin

Eigura ?&A& Centrando el tooltip respecto de la posicin del ratn

#tra opcin /ue se puede controlar es la anc)ura del tooltip& Por de1ecto0 su anc)ura es de 7''pC0 pero la opcin QI$=< permite modi1icarla*
La )re1RPfP onmouseoverRPreturn overlib(TPrueba de un tooltip bsico , mu, sencillo&T0 CE!=E 0 QI$=<0 27'-SP onmouseoutRPreturn nd(-SPMconsectetuer adipiscing elitL+aM

El valor de la nueva anc)ura se indica en el parmetro /ue va detrs de QI$=<& El nuevo aspecto del tooltip es el siguiente* Eigura ?&2'& $e1iniendo la anc)ura /ue muestra el tooltip El uso de los parmetros de con1iguracin en la propia llamada a la 1uncin /ue muestra los tooltips no es recomendable cuando el nImero de parmetros empieza a ser mu, numeroso& J1ortunadamente0 overLI8 permite realizar una Inica con1iguracin /ue se utilizar para todos los tooltips de la pgina& La con1iguracin global consiste en llamar a la 1uncin overlibXpagede1aults(- con todos los parmetros de con1iguracin deseados& Por tanto0 el cdigo JavaScript necesario para realizar los cambios con1igurados )asta el momento sera*
Lscript t,peRPteCt+javascriptP srcRPjs+overlib&jsPMM=77 overL@I KcL EriH Iosrup 77NL+scriptM Lscript t,peRPteCt+javascriptPM overlibXpagede1aults(CE!=E 0 QI$=<0 27'-S L+scriptM LpMLorem ipsum dolor sit amet0 La )re1RPfP onmouseoverRPreturn overlib(TPrueba de un tooltip bsico , mu, sencillo&T-SP onmouseoutRPreturn nd(-SPMconsectetuer adipiscing elitL+aM& Etiam eget metus& Proin varius auctor tortor& Cras augue ne/ue0 porta vitae0 vestibulum nec0 pulvinar id0 nib)& Eusce in arcu& $uis ve)icula nonumm, orci&L+pM

Htilizando esta con1iguracin global0 se va a modi1icar por Iltimo el aspecto del tooltip para )acerlo ms parecido a los tooltips de los sistemas operativos* Eigura ?&22& =ooltip creado con la librera overLI8 , personalizado para /ue parezca un tooltip de Sistema #perativo En el ejemplo anterior se )a modi1icado el tamaKo , tipo de letra , el color de 1ondo del tooltip mediante la siguiente con1iguracin*
overlibXpagede1aults(QI$=<026'0E@C#L# 0Tf1111ccT08@C#L# 0Tf999999T0=E;=E#!=0PJrial0 DerdanaP0=E;=SIcE0P&?emP-S <elvetica0

>ejorar el tooltip propuesto aKadiendo las siguientes caractersticas* 2& 4ue el tooltip no se muestre instantneamente0 sino /ue transcurra un cuarto de segundo )asta /ue se muestre (pista* $ELJO-

4ue eCista una separacin )orizontal de 26 pCel entre el puntero del ratn , el tooltip (pista* #EESE=;7 4ue el tooltip se muestre en la parte superior del puntero del ratn , no en la parte in1erior (pista* J8#DEEl nuevo aspecto del tooltip se muestra en la siguiente imagen* Eigura ?&27& !uevo aspecto del tooltip

(.'. +en/ desple%able

La navegacin de algunas pginas .eb se realiza mediante menIs desplegables0 /ue disponen de varios niveles jerr/uicos /ue se despliegan a medida /ue el usuario pasa el puntero del ratn por encima de cada elemento& Jun/ue CSS permite realizar menIs desplegables )orizontales , verticales de cual/uier nivel de pro1undidad0 los navegadores de la 1amilia Internet ECplorer versin 9&' , anteriores no disponen del su1iciente soporte de CSS como para crear este tipo de menIs& $e esta 1orma0 la Inica 1orma de crear un menI desplegable /ue 1uncione correctamente en cual/uier navegador consiste en utilizar JavaScript& J pesar de /ue realizar un menI desplegable sencillo con JavaScript no es una tarea mu, compleja0 se va a utilizar un componente ,a realizado /ue pertenece a la librera de desarrollo .eb de Oa)oo& La Oa-oo P@ Li#rar!0 conocida como OHI0 , /ue se puede traducir como "Li#rer a de componentes de interfaz de usuario de Oa-oo" es un conjunto de utilidades , controles escritos en JavaScript para el desarrollo rpido , sencillo de aplicaciones .eb complejas& La librera completa est dividida en mdulos , componentes relacionados con CSS0 $#>0 eventos0 JJJ;0 etc& Entre las utilidades disponibles se encuentran calendarios0 tooltips0 cuadros /ue autocompletan el teCto0 rboles jerr/uicos0 etc& Jdems de esas utilidades0 la OHI inclu,e un completo mdulo de menIs /ue permite realizar decenas de tipos de menIs di1erentes* )orizontales0 verticales0 desplegables0 estticos0 menIs conteCtuales0 menIs de aplicacin0 menIs realizados con ;<=>L o con JavaScript0 etc& La librera OHI se puede descargar gratuitamente en )ttp*++developer&,a)oo&com+,ui+0 la in1ormacin espec1ica sobre los menIs se puede encontrar en )ttp*++developer&,a)oo&com+,ui+ menu+ , se pueden ver decenas de ejemplos de menIs ,a realizados en )ttp*++developer&,a)oo&com+,ui+eCamples+menu+& J continuacin se indican los pasos necesarios para incluir un menI vertical desplegable* 2- Enlazar los arc)ivos JavaScript , CSS re/ueridos* La librera OHI se puede descargar gratuitamente con todos los arc)ivos necesarios0 toda la documentacin , cientos de ejemplos (por lo /ue comprimida ,a ocupa ms de 22 >8-& Jun/ue es posible utilizar los arc)ivos CSS , JavaScript proporcionados por la librera desde nuestro servidor0 Oa)oo permite enlazar los arc)ivos CSS , JavaScript desde sus propios servidores&

$e esta 1orma0 todos los arc)ivos re/ueridos por las utilidades de Oa)oo se pueden servir directamente desde sus servidores0 muc)o ms rpidos , 1iables /ue cual/uier servidor particular& Como el usuario se descarga los arc)ivos desde los servidores de Oa)oo0 el a)orro de anc)o de banda es total , la aplicacin carga muc)o ms rpido& Para crear un menI vertical0 se deben enlazar los siguientes arc)ivos*
M=77 ,ependencias 77N LlinG relRPst,les)eetP t,peRPteCt+cssP )re1RP)ttp*++,ui&,a)ooapis&com+7&%&'+build+menu+ assets+sGins+sam+menu&cssPM Lscript t,peRPteCt+javascriptP srcRP)ttp*++,ui&,a)ooapis&com+7&%&'+build+ ,a)oo" dom"event+,a)oo"dom"event&jsPML+scriptM Lscript t,peRPteCt+javascriptP srcRP)ttp*++,ui&,a)ooapis&com+7&%&'+build+container+ containerXcore"min&jsPML+scriptM M=77 Cdigo para men"s 77N Lscript t,peRPteCt+javascriptP srcRP)ttp*++,ui&,a)ooapis&com+7&%&'+build+menu+ menu"min&jsPML+scriptM

Si se opta por servir los arc)ivos desde nuestro propio servidor0 es recomendable enlazar las versiones comprimidas de cada arc)ivo0 /ue se pueden reconocer por/ue su nombre termina en "min&js& 7- $e1inir el cdigo ;<=>L de los elementos del menI*
Ldiv idRPmenuXverticalP classRP,uimenuPM Ldiv classRPbdPM Lul classRP1irst"o1"t,pePM Lli classRP,uimenuitemPMLa )re1RPfPMLorem ipsumL+aML+liM Lli classRP,uimenuitemPMLa )re1RPfPM$olor sit ametL+aML+liM Lli classRP,uimenuitemPMConsectetuer Ldiv idRPconsectetuerP classRP,uimenuPM Ldiv classRPbdPM LulM Lli classRP,uimenuitemPMLa )re1RPfPM$onec /uis nuncL+aML+liM Lli classRP,uimenuitemPMLa )re1RPfPMEusce elei1endL+aML+liM Lli classRP,uimenuitemPMLa )re1RPfPM$onec eratL+aML+liM Lli classRP,uimenuitemPMLa )re1RPfPMEaucibus orciL+aML+liM Lli classRP,uimenuitemPMLa )re1RPfPMDolutpat /uamL+aML+liM L+ulM L+divM L+divM L+liM Lli classRP,uimenuitemPMLa )re1RPfPMJdipiscing elitL+aML+liM L+ulM L+divM L+divM

La librera OHI dispone de muc)os tipos di1erentes de menIs& Jdems0 los menIs se pueden construir completamente con JavaScript (en la pgina ;<=>L no aparecen los elementos del menI- o a partir del cdigo ;<=>L de los elementos del menI incluido en la pgina&

Este Iltimo mtodo0 de1inir el menI con ;<=>L , despus aplicarle JavaScript0 es la 1orma recomendada0 ,a /ue si el usuario no tiene JavaScript activado0 el menI se visualiza correctamente& Por ese motivo0 no se va a estudiar el mtodo de construccin de un menI de OHI eCclusivamente con JavaScript& Los elementos /ue 1orman los menIs creados con OHI se constru,en mediante listas no ordenadas con las eti/uetas LulM , LliM& Hn pe/ueKo inconveniente de los menIs de1inidos con la librera OHI es /ue cada uno de los menIs (el principal , todos los desplegables- debe encerrarse con dos elementos de tipo LdivM& En otras palabras0 el es/uema de cada menI (, submenI desplegable- es el siguiente*
Ldiv idRPcual/uierXidenti1icadorP classRP,uimenuPM Ldiv classRPbdPM Lul classRP1irst"o1"t,pePM &&& L+ulM L+divM L+divM

Los valores de los atributos class de los elementos LdivM anteriores deben mantenerse para /ue el menI 1uncione correctamente& %- Construir el menI , mostrarlo en la pgina*
Lscript t,peRPteCt+javascriptPM OJ<##&util&Event&onContent ead,(PmenuXverticalP0 1unction (- a var el>enu R ne. OJ<##&.idget&>enu(PmenuXverticalP0 a .idt)* T26'pCT b-S el>enu&render(-S el>enu&s)o.(-S b-S L+scriptM

El cdigo JavaScript /ue crea dinmicamente el menI re/uiere /ue el rbol $#> de la pgina se )a,a construido completamente0 por lo /ue se utiliza la 1uncin onContent ead,(- /ue 1orma parte de las utilidades para eventos de la librera OHI& Para construir el menI se crea un nuevo objeto de tipo OJ<##&.idget&>enu , se le pasan las opciones de inicializacin (en este caso0 /ue tenga una anc)ura de 26' pCel-&*
var el>enu R ne. OJ<##&.idget&>enu(PmenuXverticalP0 a .idt)* T26'pCT b-S

Hna vez creado el objeto del menI0 se constru,e mediante la instruccin el>enu&render(- , se muestra en la pgina con la instruccin el>enu&s)o.(-& El resultado 1inal es un menI vertical desplegable con el siguiente aspecto* Eigura ?&2%& Jspecto 1inal del menI vertical desplegable creado con la librera Oa)oo OHI

(.5. Aaleras de im%enes C>i%7tbo?E

>uc)os sitios .eb utilizan galeras de imgenes para mostrar sus productos , servicios& Este tipo de galeras muestran una serie de miniaturas de imgenes /ue se amplan al pinc)ar sobre cada imagen& <asta )ace poco0 la tcnica ms utilizada para construir una galera consista en incluir las miniaturas en la pgina , abrir cada imagen grande en una ventana emergente (o pop7up- o en una nueva pgina& El uso de tcnicas basadas en JavaScript )a supuesto una revolucin en la creacin de las galeras de imgenes , )a permitido mejorar la eCperiencia de navegacin del usuario& La tcnica se conoce como Lig-t#o' , 1ue creada originalmente por LoGes) $)aGar& Lig)tboC es una tcnica mu, sencilla de utilizar0 1unciona correctamente en todos los navegadores , permite mantener la semntica del documento (no ensucia la pgina con cdigo JavaScript-& El cdigo de la versin ms reciente se puede descargar gratuitamente en )ttp*++...&)uddletoget)er&com+projects+lig)tboC7+0 donde tambin se puede ver una demostracin de las galeras de imgenes construidas con Lig)tboC& La descarga inclu,e el cdigo 1uente del script0 todos los arc)ivos JavaScript eCternos necesarios0 arc)ivos CSS e imgenes de prueba , una breve pero completa documentacin& J continuacin se indican los pasos necesarios para incluir Lig)tboC en una pgina .eb* 2- Enlazar los arc)ivos JavaScript , CSS re/ueridos*
M=77 ,ependencias 77N LlinG relRPst,les)eetP )re1RPcss+lig)tboC&cssP t,peRPteCt+cssP mediaRPscreenP +M Lscript t,peRPteCt+javascriptP srcRPjs+protot,pe&jsPML+scriptM Lscript t,peRPteCt+javascriptP srcRPjs+scriptaculous&js5 loadRe11ects0builderPML+scriptM M=77 Cdigo fuente 77N Lscript t,peRPteCt+javascriptP srcRPjs+lig)tboC&jsPML+scriptM

Lig)tboC utiliza dos de las libreras ms conocidas , utilizadas para realizar aplicaciones JavaScript complejas* Protot,pe , Scriptaculous& Jdems de estos dos arc)ivos JavaScript0 tambin es necesario enlazar un arc)ivo de tipo CSS /ue controla el aspecto de Lig)tboC , enlaza las imgenes utilizadas& 7- Jctivar Lig)tboC* La pgina ;<=>L original contiene un enlace simple /ue abre una nueva pgina en la /ue se puede ver ampliada la imagen original*

La )re1RPimages+image"2&jpgP titleRP=tulo de la imagen 2PMImagen 2L+aM

Para

activar Lig)tboC0 tan solo es necesario incluir el siguiente atributo rel* La

)re1RPimages+image"2&jpgP relRPlig)tboCP titleRP=tulo de la imagen 2PMImagen 2L+aM

J)ora0 si el usuario tiene activado JavaScript0 al pinc)ar en el enlace* Eigura ?&2:& Enlace con el atributo Plig)tboCP aKadido

Se mostrar la imagen ampliada centrada en la misma pgina* Eigura ?&26& Imagen ampliada /ue se muestra al pinc)ar sobre el enlace Lig)tboC se activa automticamente para todos los enlaces cu,o atributo rel sea igual a lig)tboC& Jdems0 Lig)tboC muestra como ttulo de la imagen el valor del atributo title del enlace& Si el usuario no tiene activado JavaScript0 la imagen se abrir en una pgina nueva0 como ocurre si no se utiliza Lig)tboC& La sencillez de uso , el resultado tan espectacular /ue se consigue son los puntos 1uertes de Lig)tboC& !ormalmente0 Lig)tboC no se utiliza con enlaces de teCto sino con imgenes /ue contienen enlaces*

La )re1RPimages+image"2&jpgP relRPlig)tboCP srcRPimages+imagenXpe/uena2&jpgP +ML+aM

titleRP=tulo

de

la

imagen

2PMLimg

J)ora0 si el usuario tiene activado JavaScript0 al pinc)ar sobre la imagen pe/ueKa* Eigura ?&29& Imagen en miniatura con el enlace preparado para Lig)tboC

Se mostrar la imagen ampliada centrada en la misma pgina* Eigura ?&2B& Imagen ampliada /ue se muestra al pinc)ar sobre la imagen en miniatura La imagen ampliada se muestra con una vistosa animacin , el 1ondo de la pgina completa se oscurece para /ue el usuario centre toda su atencin en la imagen& El usuario puede cerrar la imagen ampliada , volver a la pgina original pulsando sobre la imagen CL#SE ; de la es/uina in1erior derec)a de la imagen& Htilizar Lig)tboC aporta muc)as ventajas respecto de la eCperiencia de usuario del sitio .eb& Jdems0 el cdigo ;<=>L permanece intacto , no se ensucia con llamadas a 1unciones JavaScript0 ,a /ue lo Inico /ue )a, /ue aKadir es un atributo relRPlig)tboCP a las imgenes , enlaces /ue va,an a utilizar Lig)tboC& Jdems0 Lig)tboC permite relacionar varias imgenes entre s para crear una galera de imgenes& Js0 mientras se visualiza una imagen ampliada es posible pasar a la siguiente imagen de la galera& Para relacionar varias imgenes entre s0 tan slo es necesario aplicar un valor Inico al atributo relcomo se muestra a continuacin*

La )re1RPimages+imagen"2&jpgP relRPlig)tboC[galeria2\PMimagen f2L+aM La )re1RPimages+imagen"7&jpgP relRPlig)tboC[galeria2\PMimagen f7L+aM La )re1RPimages+imagen"%&jpgP relRPlig)tboC[galeria2\PMimagen f%L+aM

=odas las imgenes /ue tengan el mismo valor del atributo rel0 automticamente pasarn a 1ormar parte de una galera de 1otos por la /ue se puede navegar )acia la siguiente o )acia la anterior imagen& La tcnica Lig)tboC presentada solamente es vlida para elementos de tipo imagen& !o es posible por tanto mostrar una pgina .eb o cierto cdigo ;<=>L dentro de una ventana de ese tipo& J1ortunadamente0 eCisten otras libreras basadas en Lig)tboC , /ue permiten mostrar cual/uier tipo de cdigo ;<>=L en el interior de la ventana& La ms conocida es la tcnica creada por Particle=ree , /ue se puede encontrar en* )ttp*++particletree&com+1eatures+lig)tboC"gone".ild+

Capt lo 9. )eteccin correccin de errores

JavaScript es un lenguaje de programacin interpretado0 lo /ue signi1ica /ue no se pueden detectar la ma,ora de errores en el cdigo )asta /ue se ejecutan los scripts& $e esta 1orma0 antes de considerar un script como correcto0 es necesario probarlo en todos los navegadores sobre los /ue se va,a a utilizar& Cuando se producen errores durante la ejecucin de un script0 los navegadores proporcionan cierta in1ormacin Itil para descubrir el punto eCacto en el /ue se )a producido el error , su posible solucin& Solucionar los errores de un script se denomina "depurar el script" o "de#ugear el script" (trmino /ue viene de la palabra inglesa "de#ug"0 /ue signi1ica Peliminar los errores de una aplicacinP-& $esa1ortunadamente0 no todos los navegadores proporcionan la misma in1ormacin Itil0 lo /ue complica la solucin de los errores para cada tipo de navegador& J continuacin se muestran las )erramientas /ue proporciona cada navegador para detectar , corregir los errores en JavaScript&

9.!. Correccin de errores con "nternet E?plorer

$ependiendo de su con1iguracin0 el navegador Internet ECplorer puede tener desactivada la noti1icacin de errores de JavaScript& Por este motivo0 en primer lugar puede ser necesario activar los mensajes de aviso sobre los errores de JavaScript& Para activar las noti1icaciones0 se accede al menI <erramientas M #pciones0 pestaKa #pciones Jvanzadas , se activa la opcin >ostrar una noti1icacin sobre cada error de secuencia de comandos 0 como se muestra en la siguiente imagen* Eigura A&2& #pciones avanzadas en Internet ECplorer necesarias para activar la noti1icacin de errores de JavaScript

Hna vez activado0 se mostrar un mensaje de error cada vez /ue se produzcan errores de JavaScript en una pgina& Jdems0 en la es/uina in1erior iz/uierda se muestra un pe/ueKo mensaje indicando /ue la pgina contiene errores* Eigura A&7& >ensaje de aviso de Internet ECplorer sobre los errores de JavaScript

Pulsando sobre el botn >ostrar $etalles MM es posible acceder a cierta in1ormacin adicional sobre el error producido* Eigura A&%& In1ormacin adicional proporcionada por Internet ECplorer sobre los errores de JavaScript

Internet ECplorer es el navegador /ue menos in1ormacin proporciona& Jdems0 cuando se produce un error no siempre indica correctamente la posicin del posible error& El tipo de mensajes (mu, breves , en ocasiones ambiguos- , la 1alta de precisin sobre el lugar en el /ue se )a producido realmente el error0 )acen /ue depurar un script en Internet ECplorer sea una tarea eCcesivamente complicada&

9.2. Correccin de errores con -ire:o?

$epurar scripts utilizando Eire1oC es una eCperiencia completamente di1erente , ms sencilla /ue depurarlos con Internet ECplorer& Eire1oC proporciona )erramientas ms Itiles0 activadas por de1ecto , /ue muestran ms in1ormacin , muc)o ms precisa& Para depurar un script con Eire1oC0 solamente es necesario acceder a la opcin Consola de error dentro del menI <erramientas* de Eire1oC donde se muestra toda la in1ormacin sobre los errores de JavaScript

La consola de errores permite di1erenciar los mensajes de in1ormacin0 los mensajes de aviso , los mensajes de error& Jdems0 permite visualizar todos los errores de la pgina simultneamente& Por cada error detectado se indica la posible solucin mediante un mensaje en ingls , se muestra el trozo de cdigo del script donde se )a producido el error& Jdems0 pulsando sobre el enlace incluido se accede a la lnea concreta del arc)ivo concreto donde se )a producido el error& Jdems0 Eire1oC permite instalar pe/ueKas mejoras , ampliaciones en el navegador0 /ue se conocen con el nombre de eCtensiones& Hna de las eCtensiones ms interesantes para los desarrolladores de aplicaciones .eb es Eirebug0 /ue se puede descargar gratuitamente desde )ttp*++...&get1irebug&com+ El mismo error de JavaScript muestra la siguiente in1ormacin en Eirebug* Eigura A&6& In1ormacin mostrada por Eirebug sobre un error de JavaScript

Si se pinc)a sobre el mensaje de error0 Eirebug tambin redirige a la lnea concreta del script en la /ue se est produciendo el error* Eigura A&9& Eirebug permite ir directamente a la lnea concreta del script en la /ue se est produciendo el error

Eirebug inclu,e cientos de utilidades , )erramientas necesarias para depurar aplicaciones .eb , para diseKar pginas .eb& Jdems0 proporciona in1ormacin detallada sobre ;<=>L0 CSS0 $#> , JavaScript& =oda la documentacin0 tutoriales , preguntas 1recuentes sobre Eirebug se pueden encontrar en )ttp*++...&get1irebug&com+docs&)tml

9.#. Correccin de errores con *pera

El navegador #pera tambin dispone de una consola de errores mu, completa /ue muestra toda la in1ormacin sobre el error producido& La consola de errores se accede desde el menI <erramientas M Jvanzado , la opcin Consola de error*

Eigura A&B& Consola de errores de #pera donde se muestra toda la in1ormacin sobre los errores de JavaScript

Capt lo !0. .ec rsos /tiles

Estndares , especi1icaciones o1iciales Especi1icacin o1icial del lenguaje JavaScript* EC>JScript Language Speci1ication ()ttp*++...&ecma"international&org+publications+standards+Ecma"797&)tm- (%k edicin0 $iciembre de 2AAA #tros estndares relacionados* EC>JScript Components Speci1ication (EC>J"7A'()ttp*++...&ecma"international&org+publications+standards+Ecma"7A'&)tm- 0 EC>JScript %rd Edition Compact Pro1ile (EC>J"%7B- ()ttp*++...&ecma" international&org+publications+standards+Ecma"%7B&)tm- 0 EC>JScript 1or ;>L (E:;Speci1ication (EC>J"%6B()ttp*++...&ecma"international&org+publications+standards+Ecma"%6B&)tmScripts , utilidades gratuitas <otscripts ()ttp*++...&)otscripts&com+JavaScript+indeC&)tml- * sitio .eb en ingls /ue contiene re1erencias a miles de scripts , utilidades de JavaScript gratuitas& $,namic $rive ()ttp*++...&d,namicdrive&com+- * sitio .eb en ingls con cientos de scripts gratuitos de JavaScript con las utilidades ms comunes (calendarios0 menIs0 1ormularios0 animaciones de teCto0 enlaces0 galeras de imgenes0 etc& @amarod JavaScript ()ttp*++...&gamarod&com&ar+- * sitio .eb en espaKol /ue contiene decenas de utilidades JavaScript gratuitas listas para usar& Libros Pro1essional JavaScript 1or Qeb $evelopers ()ttp*++...&.roC&com+Qile,C$J+ QroC=itle+productCd"'B9:6BA'??&)tml- 0 !ic)olas C& caGas (IS8!* AB?"'"B9:6"BA'?"'-& Jlgunos captulos son demasiado avanzados para los principiantes de JavaScript0 pero la ma,ora de captulos eCplican conceptos bsicos de 1orma sencilla , clara& JavaScript* =)e $e1initive @uide (Ei1t) Edition- ()ttp*++...&oreill,&com+catalog+jscript6+ indeC&)tml- 0 $avid Elanagan (IS8! 2%* AB?'6A92'2AA7-& e1erencia completa de JavaScript en ms de 2&''' pginas /ue eCplican con detalle cual/uier aspecto de este lenguaje de programacin&

Capt lo !!. E0ercicios res eltos

!!.!. E0ercicio !
Pgina <=>L*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2 " Jrc)ivo eCterno , varios mensajesL+titleM Lscript t,peRPteCt+javascriptP srcRPcodigo&jsPML+scriptM L+)eadM Lbod,M LnoscriptMEsta pgina LstrongMre/uiereL+strongM el uso de JavaScript , parece /ue est desactivadoL+noscriptM LpMEsta pgina muestra 7 mensajesL+pM L+bod,M L+)tmlM

Jrc)ivo codigo&js
// Al cargarse el arc-ivo GavaScript) se muestra un mensaje alert(P<ola >undoNP-S // ,espues del primer mensaje) se muestra otro mensaje seguido alert(PSo, el primer scriptP-S

!!.2. E0ercicio 2
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 7 " >ostrar mensajes complejosL+titleM Lscript t,peRPteCt+javascriptPM var mensaje R P<ola >undoN Zn 4u 1acil es incluir ZTcomillas simplesZT Zn , ZPcomillas doblesZP PS alert(mensaje-S L+scriptM L+)eadM Lbod,M LpMEsta pgina muestra un mensaje complejoL+pM L+bod,M L+)tmlM

!!.#. E0ercicio #
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2"transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp" e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio % " Jrra,s simplesL+titleM Lscript t,peRPteCt+javascriptPM // Arra! que almacena los (* meses del aBo var meses R [PEneroP0 PEebreroP0 P>arzoP0 PJbrilP0 P>a,oP0 PJunioP0 PJulioP0 PJgostoP0 PSeptiembreP0 P#ctubreP0 P!oviembreP0 P$iciembreP\S // Se muestra el nom#re de cada mes alert(meses['\-S alert(meses[2\-S alert(meses[7\-S alert(meses[%\-S alert(meses[:\-S alert(meses[6\-S alert(meses[9\-S alert(meses[B\-S alert(meses[?\-S alert(meses[A\-S alert(meses[2'\-S alert(meses[22\-S L+scriptM L+)eadM Lbod,M LpMEsta pgina muestra los 27 meses del aKoL+pM L+bod,M L+)tmlM

!!.'. E0ercicio '

LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2"transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp" e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio : " #peradoresL+titleM Lscript t,peRPteCt+javascriptPM var valores R [true0 60 1alse0 P)olaP0 PadiosP0 7\S // Cual de los * elementos de te'to es ma!or // Si el resultado es true) el primer te'to es ma!or var resultado R valores[%\ M valores[:\S alert(resultado-S // Com#inar valores #ooleanos var valor2 R valores['\S var valor7 R valores[7\S // ;#tener un resultado AQPE

var resultado R valor2 ^^ valor7S alert(resultado-S // ;#tener un resultado EALSE resultado R valor2 ]] valor7S alert(resultado-S // ;peraciones matem%ticas var num2 R valores[2\S var num7 R valores[6\S var suma R num2 W num7S alert(suma-S var resta R num2 " num7S alert(resta-S var multiplicacion R num2 U num7S alert(multiplicacion-S var division R num2 + num7S alert(division-S var modulo R num2 ` num7S alert(modulo-S L+scriptM L+)eadM Lbod,M LpMEsta pgina muestra el uso bsico de los operadoresL+pM L+bod,M L+)tmlM

!!.5. E0ercicio 5
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 6 " Estructuras de control0 IEL+titleM Lscript t,peRPteCt+javascriptPM var numero2 R 6S var numero7 R ?S i1(numero2 LR numero7- a alert(Pnumero2 no es ma,or /ue numero7P-S b i1(numero7 MR 'a alert(Pnumero7 es positivoP-S b i1(numero2 L ' ^^ numero2 NR '- a alert(Pnumero2 es negativo o distinto de ceroP-S b

i1(WWnumero2 L numero7- a alert(PIncrementar en 2 unidad el valor de numero2 no lo )ace ma,or o igual /ue numero7P-S b L+scriptM L+)eadM Lbod,M LpMEsta pgina muestra el uso bsico de la estructura de control IEL+pM L+bod,M L+)tmlM

!!.&. E0ercicio &

LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 9 " Calculo de la letra del $!IL+titleM Lscript t,peRPteCt+javascriptPM var letras R [T=T0 T T0 TQT0 TJT0 T@T0 T>T0 TOT0 TET0 TPT0 T$T0 T;T0 T8T0 T!T0 TJT0 TcT0 TST0 T4T0 TDT0 T<T0 TLT0 TCT0 TVT0 TET0 T=T\S var numero R prompt(PIntroduce tu nImero de $!I (sin la letra-P-S var letra R prompt(PIntroduce la letra de tu $!I (en ma,Isculas-P-S letra R letra&toHpperCase(-S i1(numero L ' ^^ numero M AAAAAAAA- a alert(PEl nImero proporcionado no es vlidoP-S b else a var letraCalculada R letras[numero ` 7%\S i1(letraCalculada NR letra- a alert(PLa letra o el nImero proporcionados no son correctosP-S b else a alert(PEl nImero de $!I , su letra son correctosP-S b b L+scriptM L+)eadM Lbod,M LpMEsta pgina calcula la letra del $!IL+pM L+bod,M L+)tmlM

!!.,. E0ercicio ,
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM

Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio B " Eactorial de un nImero enteroL+titleM Lscript t,peRPteCt+javascriptPM var numero R prompt(PIntroduce un nImero , se mostrar su 1actorialP-S var resultado R 2S 1or(var iR2S iLRnumeroS iWW- a resultado UR iS b alert(resultado-S L+scriptM L+)eadM Lbod,M L+bod,M L+)tmlM

!!.(. E0ercicio (
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio ? " Eunciones bsicasL+titleM Lscript t,peRPteCt+javascriptPM var numero R prompt(PIntroduce un nImero enteroP-S var resultado R parImpar(numero-S alert(PEl nImero PWnumeroWP es PWresultado-S 1unction parImpar(numero- a i1(numero ` 7 RR 'a return PparPS b else a return PimparPS b b L+scriptM L+)eadM Lbod,M L+bod,M L+)tmlM

!!.9. E0ercicio 9
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M

LtitleMEjercicio A " In1ormacin sobre cadenasL+titleM Lscript t,peRPteCt+javascriptPM 1unction in1o(cadena- a var resultado R PLa cadena ZPPWcadenaWPZP PS // Compro#ar ma!"sculas ! min"sculas i1(cadena RR cadena&toHpperCase(-- a resultado WR P est 1ormada slo por ma,IsculasPS b else i1(cadena RR cadena&toLo.erCase(-- a resultado WR P est 1ormada slo por minIsculasPS b else a resultado WR P est 1ormada por ma,Isculas , minIsculasPS b return resultadoS b alert(in1o(P#D!I R #8JE=# D#LJ$# L+scriptM L+)eadM Lbod,M L+bod,M L+)tmlM !# I$E!=IEICJ$#P--S alert(in1o(PEn un lugar de la manc)a&&&P--S

!!.!0. E0ercicio !0
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2' " $eteccin de palndromosL+titleM Lscript t,peRPteCt+javascriptPM 1unction palindromo(cadena- a var resultado R PLa cadena ZPPWcadenaWPZP ZnPS // Rasar a minusculas la cadena var cadena#riginal R cadena&toLo.erCase(-S // Convertir la cadena en un arra! var letrasEspacios R cadena#riginal&split(PP-S // Eliminar los espacios en #lanco Keste paso es demasiado largo !a que no se utiliza la funcion "replace"L var cadenaSinEspacios R PPS 1or(i in letrasEspacios- a i1(letrasEspacios[i\ NR P P- a

cadenaSinEspacios WR letrasEspacios[i\S b b var letras R cadenaSinEspacios&split(PP-S var letras eves R cadenaSinEspacios&split(PP-&reverse(-S // Este paso tam#ien es mu! largo porque no se utiliza la sentencia "#reaH" var iguales R trueS 1or(i in letras- a i1(letras[i\ RR letras eves[i\- a // Aodo #ien b else a // Alguna letra es distinta) por lo que !a no es un palindromo iguales R 1alseS b b i1(iguales- a resultado WR P es un palndromoPS b else a resultado WR P no es un palndromoPS b return resultadoS b alert(palindromo(PLa ruta nos aporto otro paso naturalP--S alert(palindromo(PEsta 1rase no se parece a ningun palindromoP--S L+scriptM L+)eadM Lbod,M L+bod,M L+)tmlM

!!.!!. E0ercicio !!
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 22 " $#> bsicoL+titleM Lscript t,peRPteCt+javascriptPM .indo.&onload R 1unction(- a var in1o R document&getElement8,Id(Pin1ormacionP-S // ?umero de enlaces de la pagina var enlaces R document&getElements8,=ag!ame(PaP-S in1o&inner<=>L R P!umero de enlaces R PWenlaces&lengt)S

// ,ireccion del penultimo enlace var mensaje R PEl penultimo enlace apunta a* PWenlaces[enlaces&lengt)"7\&)re1S in1o&inner<=>L R in1o&inner<=>L W PLbr+MP W mensajeS // ?umero de enlaces que apuntan a -ttpC//prue#a var contador R 'S 1or(var iR'S iLenlaces&lengt)S iWW- a // Es necesario compro#ar los enlaces -ttpC//prue#a ! // -ttpC//prue#a/ por las diferencias entre navegadores i1(enlaces[i\&)re1 RR P)ttp*++pruebaP ^^ enlaces[i\&)re1 RR P)ttp*++prueba+P- a contadorWWS b b in1o&inner<=>L R in1o&inner<=>L W PLbr+MP W contador W P enlaces apuntan a )ttp*++pruebaP // ?umero de enlaces del tercer p%rrafo var parra1os R document&getElements8,=ag!ame(PpP-S enlaces R parra1os[7\&getElements8,=ag!ame(PaP-S in1o&inner<=>L R in1o&inner<=>L W PLbr+MP W P!umero de enlaces del tercer prra1o R PWenlaces&lengt)S b L+scriptM L+)eadM Lbod,M Ldiv idRPin1ormacionP st,leRPborder*t)in solid silverS padding*&6emPML+divM LpMLorem ipsum dolor sit amet0 La )re1RP)ttp*++pruebaPMconsectetuer adipiscing elitL+aM& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& La )re1RP)ttp*++prueba7PMEusce portaL+aM& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue& $onec lacus ne/ue0 ve)icula in0 elei1end vitae0 venenatis ac0 1elis& $onec arcu& !am sed tortor nec ipsum ali/uam ullamcorper& $uis accumsan metus eu urna& Jenean vitae enim& Integer lacus& Destibulum venenatis erat eu odio& Praesent id metus&L+pM LpMJenean at nisl& >aecenas egestas dapibus odio& Destibulum ante ipsum primis in 1aucibus orci luctus et ultrices posuere cubilia CuraeS Proin conse/uat auctor diam& La )re1RP)ttp*++pruebaPMHt bibendum blandit estL+aM& Curabitur vestibulum& !unc malesuada porttitor sapien& Jenean a lacus et metus venenatis porta& Suspendisse cursus0 sem non dapibus tincidunt0 lorem magna porttitor 1elis0 id sodales dolor dolor sed urna& Sed rutrum nulla vitae tellus& Sed /uis eros nec lectus tempor lacinia& Jli/uam nec lectus nec ne/ue ali/uet dictum& Etiam La )re1RP)ttp*++prueba%PMconse/uat sem /uis massaL+aM& $onec ali/uam euismod diam& In magna massa0 mattis id0 pellentes/ue sit amet0 porta sit amet0 lectus& Curabitur posuere& Jli/uam in elit& Eusce condimentum0 arcu in sceleris/ue lobortis0 ante arcu sceleris/ue mi0 at cursus mi risus sed tellus&L+pM LpM$onec sagittis0 nib) nec ullamcorper tristi/ue0 pede velit 1eugiat massa0 at sollicitudin justo tellus vitae justo& Destibulum ali/uet0 nulla sit amet imperdiet suscipit0 nunc erat laoreet est0 a La )re1RP)ttp*++pruebaPMali/uam leo odio sed semL+aM& 4uis/ue eget eros ve)icula diam euismod tristi/ue& Ht dui& $onec in metus sed

risus laoreet sollicitudin& Proin et nisi non arcu sodales )endrerit& In sem& Cras id augue eu lorem dictum interdum& $onec pretium& Proin La )re1RP)ttp*++prueba:PMegestasL+aM adipiscing ligula& $uis iaculis laoreet turpis& >auris mollis est sit amet diam& Curabitur )endrerit0 eros /uis malesuada tristi/ue0 ipsum odio euismod tortor0 a vestibulum nisl mi at odio& La )re1RP)ttp*++prueba6PMSed non lectus non est pellentes/ueL+aM auctor&L+pM L+bod,M L+)tmlM

!!.!2. E0ercicio !2
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 27 " $#> bsico , atributos ;<=>LL+titleM Lst,le t,peRPteCt+cssPM &oculto a displa,* noneS b &visible a displa,* inlineS b L+st,leM Lscript t,peRPteCt+javascriptPM 1unction muestra(- a var elemento R document&getElement8,Id(PadicionalP-S elemento&class!ame R PvisiblePS var enlace R document&getElement8,Id(PenlaceP-S enlace&class!ame R PocultoPS b L+scriptM L+)eadM Lbod,M Lp idRPteCtoPMLorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& Lspan idRPadicionalP classRPocultoPM!ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue& $onec lacus ne/ue0 ve)icula in0 elei1end vitae0 venenatis ac0 1elis& $onec arcu& !am sed tortor nec ipsum ali/uam ullamcorper& $uis accumsan metus eu urna& Jenean vitae enim& Integer lacus& Destibulum venenatis erat eu odio& Praesent id metus&L+spanML+pM La idRPenlaceP )re1RPfP onclicGRPmuestra(-S return 1alseSPMSeguir le,endoL+aM L+bod,M L+)tmlM

!!.!#. E0ercicio !#
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2% " $#> bsico , atributos ;<=>LL+titleM Lscript t,peRPteCt+javascriptPM 1unction anade(- a var elemento R document&createElement(PliP-S var teCto R document&create=eCt!ode(PElemento de pruebaP-S elemento&appendC)ild(teCto-S var lista R document&getElement8,Id(PlistaP-S lista&appendC)ild(elemento-S var nuevoElemento R PLliM=eCto de pruebaL+liMPS lista&inner<=>L R lista&inner<=>L W nuevoElementoS b L+scriptM L+)eadM Lbod,M Lul idRPlistaPM LliMLorem ipsum dolor sit ametL+liM LliMConsectetuer adipiscing elitL+liM LliMSed mattis enim vitae orciL+liM LliMP)asellus liberoL+liM LliM>aecenas nisl arcuL+liM L+ulM Linput t,peRPbuttonP valueRPJKadir elementoP onclicGRPanade(-SPM L+bod,M L+)tmlM

!!.!'. E0ercicio !'

Si se utilizan manejadores de eventos como atributos de ;<=>L0 la solucin podra ser la siguiente*
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2: " $#> bsico , atributos ;<=>LL+titleM Lscript t,peRPteCt+javascriptPM 1unction muestra#culta(id- a var elemento R document&getElement8,Id(TcontenidosXTWid-S

var enlace R document&getElement8,Id(TenlaceXTWid-S i1(elemento&st,le&displa, RR PP ^^ elemento&st,le&displa, RR PblocGP- a elemento&st,le&displa, R PnonePS enlace&inner<=>L R T>ostrar contenidosTS b else a elemento&st,le&displa, R PblocGPS enlace&inner<=>L R T#cultar contenidosTS b b L+scriptM L+)eadM Lbod,M Lp idRPcontenidosX2PM[2\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX2P )re1RPfP onclicGRPmuestra#culta(T2T-S return 1alseSPM#cultar contenidosL+aM Lbr+M Lp idRPcontenidosX7PM[7\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX7P )re1RPfP onclicGRPmuestra#culta(T7T-S return 1alseSPM#cultar contenidosL+aM Lbr+M Lp idRPcontenidosX%PM[%\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX%P )re1RPfP onclicGRPmuestra#culta(T%T-S return 1alseSPM#cultar contenidosL+aM L+bod,M L+)tmlM

=ambin es posible solucionar el ejercicio utilizando manejadores de eventos sem%nticos*

LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2: " $#> bsico , atributos ;<=>LL+titleM Lscript t,peRPteCt+javascriptPM .indo.&onload R 1unction(- a var enlaces R document&getElements8,=ag!ame(TaT-S 1or(i in enlaces- a enlaces[i\&onclicG R muestra#cultaS b b 1unction muestra#culta(- a var idEnlace R t)is&idS var trozos R idEnlace&split(TXT-S var numero R trozos[2\S var parra1o R document&getElement8,Id(TcontenidosXT W numero-S s.itc)(parra1o&st,le&displa,- a case TnoneT* parra1o&st,le&displa, R TblocGTS t)is&inner<=>L R T#cultar contenidosTS breaGS case TblocGT* case TT* parra1o&st,le&displa, R TnoneTS t)is&inner<=>L R T>ostrar contenidosTS breaGS b b L+scriptM L+)eadM Lbod,M Lp idRPcontenidosX2PM[2\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX2P )re1RPfPM#cultar contenidosL+aM Lbr+M Lp idRPcontenidosX7PM[7\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus

at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX7P )re1RPfPM#cultar contenidosL+aM Lbr+M Lp idRPcontenidosX%PM[%\ Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& Sed mattis enim vitae orci& P)asellus libero& >aecenas nisl arcu0 conse/uat congue0 commodo nec0 commodo ultricies0 turpis& 4uis/ue sapien nunc0 posuere vitae0 rutrum et0 luctus at0 pede& Pellentes/ue massa ante0 ornare id0 ali/uam vitae0 ultrices porttitor0 pede& !ullam sit amet nisl elementum elit convallis malesuada& P)asellus magna sem0 semper /uis0 1aucibus ut0 r)oncus non0 mi& $uis pellentes/ue0 1elis eu adipiscing ullamcorper0 odio urna conse/uat arcu0 at posuere ante /uam non dolor& Lorem ipsum dolor sit amet0 consectetuer adipiscing elit& $uis sceleris/ue&L+pM La idRPenlaceX%P )re1RPfPM#cultar contenidosL+aM L+bod,M L+)tmlM

!!.!5. E0ercicio !5
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 26 " In1ormacin sobre eventosL+titleM Lst,le t,peRPteCt+cssPM bod, a1ont"1amil,* arial0 )elveticaSb fin1o a.idt)*29'pCS border*t)in solid silverS padding*&6emS position*1iCedSb fin1o )2 amargin* 'Sb L+st,leM Lscript t,peRPteCt+javascriptPM 1unction in1ormacion(elEvento- a var evento R elEvento ^^ .indo.&eventS s.itc)(evento&t,pe- a case TmousemoveT* document&getElement8,Id(Tin1oT-&st,le&bacGgroundColor R TfEEEEEETS var ie R navigator&userJgent&toLo.erCase(-&indeC#1(TmsieT-NR"2S var coordenada;relativa0 coordenadaOrelativa0 coordenada;absoluta0 coordenadaOabsolutaS i1(ie- a i1(document&documentElement ]] document&documentElement&scroll=op-a coordenada;absoluta R evento&client; W document&documentElement&scrollLe1tS coordenadaOabsoluta R evento&clientO W document&documentElement&scroll=opS b else a coordenada;absoluta R evento&client; W document&bod,&scrollLe1tS coordenadaOabsoluta R evento&clientO W document&bod,&scroll=opS bb

else a coordenada;absoluta R evento&page;S coordenadaOabsoluta R evento&pageOS b coordenada;relativa R evento&client;S coordenadaOrelativa R evento&clientOS muestraIn1ormacion([T atnT0 T!avegador [TWcoordenada;relativaWT0 TWcoordenadaOrelativaWT\T0 TPagina [TWcoordenada;absolutaWT0 TWcoordenadaOabsolutaWT\T\-S breaGS case TGe,pressT* document&getElement8,Id(Tin1oT-&st,le&bacGgroundColor R TfCCE9EETS var caracter R evento&c)arCode ^^ evento&Ge,CodeS var letra R String&1romC)arCode(caracter-S var codigo R letra&c)arCodeJt('-S muestraIn1ormacion([T=ecladoT0 TCarcter [TWletraWT\T0 TCdigo [TWcodigoWT\T\-S breaGS case TclicGT* document&getElement8,Id(Tin1oT-&st,le&bacGgroundColor R TfEEEECCTS breaGS bb 1unction muestraIn1ormacion(mensaje- a document&getElement8,Id(Pin1oP-&inner<=>L R TL)2MTWmensaje['\WTL+)2MTS 1or(var iR2S iLmensaje&lengt)S iWW- a document&getElement8,Id(Pin1oP-&inner<=>L WR TLpMTWmensaje[i\WTL+pMTS b b document&onmousemove R in1ormacionS document&onGe,press R in1ormacionS document&onclicG R in1ormacionS L+scriptM L+)eadM Lbod,M Ldiv idRPin1oPML+divM Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M L+bod,M L+)tmlM

!!.!&. E0ercicio !&

LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM

Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 29 " In1ormacin sobre eventosL+titleM Lst,le t,peRPteCt+cssPM bod, a1ont"1amil,* arial0 )elveticaSb fin1o a.idt)*29'pCS border*t)in solid silverS padding*&6emS position*1iCedSb fin1o )2 amargin* 'Sb L+st,leM Lscript t,peRPteCt+javascriptPM 1unction in1ormacion(elEvento- a var evento R elEvento ^^ .indo.&eventS var coordenada; R evento&client;S var coordenadaO R evento&clientOS var dimensiones R tamanoDentana!avegador(-S var tamano; R dimensiones['\S var tamanoO R dimensiones[2\S var posicion<orizontal R PPS var posicionDertical R PPS i1(coordenada; M tamano;+7- a posicion<orizontal R Pderec)aPS b else a posicion<orizontal R Piz/uierdaPS b i1(coordenadaO M tamanoO+7- a posicionDertical R PabajoPS b else a posicionDertical R ParribaPS b muestraIn1ormacion([TPosicionT0 posicion<orizontal0 posicionDertical\-S b 1unction muestraIn1ormacion(mensaje- a document&getElement8,Id(Pin1oP-&inner<=>L R TL)2MTWmensaje['\WTL+)2MTS 1or(var iR2S iLmensaje&lengt)S iWW- a document&getElement8,Id(Pin1oP-&inner<=>L WR TLpMTWmensaje[i\WTL+pMTS b b 1unction tamanoDentana!avegador(-a // Adaptada de -ttpC//DDD9-oDtocreate9co9uH/tutorials/javascript/#roDserDindoD var dimensiones R [\S i1(t,peo1(.indo.&innerQidt)- RR TnumberT- a // ?o es @E dimensiones R [.indo.&innerQidt)0 .indo.&inner<eig)t\S b else i1(document&documentElement ]] (document&documentElement&clientQidt) ^^

document&documentElement&client<eig)t-- a //@E 0 en modo estandar Kno quirHsL dimensiones R [document&documentElement&clientQidt)0 document&documentElement&client<eig)t\S b else i1(document&bod, ]] (document&bod,&clientQidt) ^^ document&bod,&client<eig)t-- a //@E en modo quirHs dimensiones R [document&bod,&clientQidt)0 document&bod,&client<eig)t\S b return dimensionesS b document&onclicG R in1ormacionS L+scriptM L+)eadM Lbod,M Ldiv idRPin1oPML+divM Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M Lbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+MLbr+ M L+bod,M L+)tmlM

!!.!,. E0ercicio !,
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2B " Limitar nImero de caracteres en teCtareaL+titleM Lst,le t,peRPteCt+cssPM bod, a1ont"1amil,* arial0 )elveticaSb L+st,leM Lscript t,peRPteCt+javascriptPM 1unction limita(elEvento0 maCimoCaracteres- a var elemento R document&getElement8,Id(PteCtoP-S // ;#tener la tecla pulsada var evento R elEvento ^^ .indo.&eventS var codigoCaracter R evento&c)arCode ^^ evento&Ge,CodeS // Rermitir utilizar las teclas con flec-a -orizontal i1(codigoCaracter RR %B ^^ codigoCaracter RR %Aa return trueS b // Rermitir #orrar con la tecla IacHspace ! con la tecla Supr9

i1(codigoCaracter RR ? ^^ codigoCaracter RR :9- a return trueS b else i1(elemento&value&lengt) MR maCimoCaracteres - a return 1alseS b else a return trueS b b 1unction actualizaIn1o(maCimoCaracteres- a var elemento R document&getElement8,Id(PteCtoP-S var in1o R document&getElement8,Id(Pin1oP-S i1(elemento&value&lengt) MR maCimoCaracteres - a in1o&inner<=>L R P>Cimo PWmaCimoCaracteresWP caracteresPS b else a in1o&inner<=>L R PPuedes escribir )asta PW(maCimoCaracteres" elemento&value&lengt)-WP caracteres adicionalesPS b b L+scriptM L+)eadM Lbod,M Ldiv idRPin1oPM>Cimo 2'' caracteresL+divM LteCtarea idRPteCtoP onGe,pressRPreturn limita(event0 2''-SP onGe,upRPactualizaIn1o(2''-P ro.sRP9P colsRP%'PML+teCtareaM L+bod,M L+)tmlM

!!.!(. E0ercicio !(
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2? " Htilidades0 CalendarioL+titleM LlinG relRPst,les)eetP t,peRPteCt+cssP mediaRPallP )re1RPcss+calendar"estilo&cssP +M Lscript t,peRPteCt+javascriptP srcRPjs+calendar&jsPML+scriptM Lscript t,peRPteCt+javascriptP srcRPjs+calendar"es&jsPML+scriptM Lscript t,peRPteCt+javascriptP srcRPjs+calendar" setup&jsPML+scriptM L+)eadM Lbod,M

LpML+pM Linput t,peRP)iddenP nameRP1ec)aP idRP1ec)aP +M Lspan st,leRPbacGground"color* f11cS cursor*de1aultS padding*&%emS border*t)in solid f11'S teCt"decoration*underlineS color* blueSP onmouseoverRPt)is&st,le&cursorRTpointerTS t)is&st,le&cursorRT)andTS t)is&st,le&bacGgroundColorRTf11?TS t)is&st,le&teCt$ecorationRTnoneTSP onmouseoutRPt)is&st,le&bacGgroundColorRTf11cTS t)is&st,le&teCt$ecorationRTunderlineTSP idRP1ec)aXusuarioPM Pinc)a a/u para seleccionar la 1ec)a L+spanM

Lscript t,peRPteCt+javascriptPM Calendar&setup(a inputEield* P1ec)aP0 i1Eormat* P`d+`m+ `OP0 .eeG!umbers* 1alse0 displa,Jrea* P1ec)aXusuarioP0 daEormat* P`J0 `d de `8 de `OP b-S L+scriptM L+bod,M L+)tmlM

!!.!9. E0ercicio !9
LN$#C=OPE )tml PH8LIC P"++Q%C++$=$ ;<=>L 2&' =ransitional++E!P P)ttp*++...&.%&org+= + C)tml2+$=$+C)tml2" transitional&dtdPM L)tml CmlnsRP)ttp*++...&.%&org+2AAA+C)tmlPM L)eadM Lmeta )ttp"e/uivRPContent"=,peP contentRPteCt+)tmlS c)arsetRiso"??6A"2P +M LtitleMEjercicio 2A " Htilidades0 =ooltipL+titleM Lscript t,peRPteCt+javascriptP srcRPjs+overlib&jsPMLN"" overLI8 (c- EriG 8osrup ""ML+scriptM Lscript t,peRPteCt+javascriptPM overlibXpagede1aults(QI$=<026'0E@C#L# 0Tf1111ccT08@C#L# 0Tf999999T0=E;=E#!=0PJrial0 <elvetica0 DerdanaP0=E;=SIcE0P&?emP0$ELJO076'0#EESE=;0260J8#DE-S L+scriptM L+)eadM Lbod,M LpMLorem ipsum dolor sit amet0 La )re1RPfP onmouseoverRPreturn overlib(TPrueba de un tooltip bsico , mu, sencillo&T-SP onmouseoutRPreturn nd(-SPMconsectetuer adipiscing elitL+aM& Etiam eget metus& Proin varius auctor tortor& Cras augue ne/ue0 porta vitae0 vestibulum nec0 pulvinar id0 nib)& Eusce in arcu& $uis ve)icula nonumm, orci&L+pM LpM4uis/ue 1acilisis0 lacus vel adipiscing tempor0 ne/ue /uam tincidunt ante0 sed bibendum velit urna /uis ipsum& Jli/uam convallis justo at turpis& Sed iaculis dictum ne/ue& Praesent varius augue /uis ligula& Suspendisse potenti&L+pM LpMPellentes/ue )abitant morbi tristi/ue senectus et netus et malesuada 1ames ac turpis egestas& $uis non nunc at augue ultrices viverra& Pellentes/ue tempus& $uis nisi ipsum0

condimentum vel0 accumsan non0 sodales )endrerit0 nisi& Jenean vel velit& Proin at massa&L+pM L+bod,M L+)tmlM

lllmn mn

mn

&& &"#$%&

! !

& "#$%

& ! "#$%"#$% &' (& ' (& )&& )& )& &

*+ *"#$%, *+ *&- *- *)+ *.+& **+ &%/ *0(& & *1 - *$&%/2 * *+& &3-34 *& & *- *) %- *.- 0 !5 & 0

 0 &

& 0& 0)& &