Fundamentos de jQuery

Textos originales por Rebecca Murphey

Traducido y adaptado a espaol por Leandro D'Ono rio!

"orrecciones por #usta$o Ra%l &rag'n( )ablo Maronna( Denis "iccale y otras personas!

"on contribuciones de *ames )adolsey( )aul +rish y otros! )ara un completo historial de contribuciones $isite el repositorio en #it,ub!

Repositorio en espaol - Repositorio original

.Tienes correcciones o mejoras del material/

0ajo licencia "reati$e "ommons &ttribution12hare &li3e 4!5 6nited 2tates!

7ltima actuali8aci'n del libro9 Diciembre :5;: <$er cambios=!

"ontenidos >; 0ien$enido?a @;!; Obtener el Material de &prendi8aje @;!: 2o tAare @;!4 &adir *a$a2cript a una )Bgina @;!C Depuraci'n del "'digo *a$a2cript @;!D Ejercicios @;!F "on$enciones 6tili8adas en el Libro @;!G Hotas de la Traducci'n @;!I Material de Re erencia

>: "onceptos 0Bsicos de *a$a2cript @:!; +ntroducci'n @:!: 2intaxis 0Bsica @:!4 Operadores :!4!; Operadores 0Bsicos :!4!: Operaciones con H%meros y "adenas de "aracteres :!4!4 Operadores L'gicos :!4!C Operadores de "omparaci'n

@:!C "'digo "ondicional :!C!; Elementos Jerdaderos y Falsos

:!C!: Jariables "ondicionales 6tili8ando el Operador Ternario :!C!4 Declaraci'n 2Aitch

@:!D 0ucles :!D!; 0ucles 6tili8ando For :!D!: 0ucles 6tili8ando Khile :!D!4 0ucles 6tili8ando Do1Ahile :!D!C 0rea3 y "ontinue

@:!F )alabras Reser$adas @:!G Jectores @:!I Objetos @:!L Funciones :!L!; 6tili8aci'n de Funciones :!L!: Funciones &n'nimas &utoejecutables :!L!4 Funciones como &rgumentos

@:!;5 Determinaci'n del Tipo de Jariable @:!;; La palabra cla$e this @:!;: &lcance @:!;4 "lausuras

>4 "onceptos 0Bsicos de jQuery @4!; M<document=!ready<= @4!: 2elecci'n de Elementos 4!:!; "omprobar 2elecciones 4!:!: #uardar 2elecciones 4!:!4 Re inamiento y Filtrado de 2elecciones 4!:!C 2elecci'n de Elementos de un Formulario

@4!4 Trabajar con 2elecciones 4!4!; Encadenamiento

4!4!: Obtenedores <#etters= N Establecedores <2etters=

@4!C "22( Estilos( N Dimensiones 4!C!; 6tili8ar "lases para &plicar Estilos "22 4!C!: Dimensiones

@4!D &tributos @4!F Recorrer el DOM @4!G Manipulaci'n de Elementos 4!G!; Obtener y Establecer +n ormaci'n en Elementos 4!G!: Mo$er( "opiar y Remo$er Elementos 4!G!:!; "lonar Elementos 4!G!:!: Remo$er elementos

4!G!4 "rear Hue$os Elementos 4!G!C Manipulaci'n de &tributos

@4!I Ejercicios 4!I!; 2elecciones 4!I!: Recorrer el DOM 4!I!4 Manipulaci'n

>C El n%cleo de jQuery @C!; M $s M<= @C!: MOtodos 6tilitarios @C!4 "omprobaci'n de Tipos @C!C El MOtodo Data @C!D Detecci'n de Ha$egadores y "aracterPsticas @C!F E$itar "on lictos con Otras 0ibliotecas *a$a2cript

>D E$entos @D!; +ntroducci'n

@D!: Jincular E$entos a Elementos D!:!; Jincular E$entos para Ejecutar una $e8 D!:!: Des$incular E$entos D!:!4 Espacios de Hombres para E$entos D!:!C Jinculaci'n de M%ltiples E$entos

@D!4 El Objeto del E$ento @D!C Ejecuci'n automBtica de "ontroladores de E$entos @D!D +ncrementar el Rendimiento con la Delegaci'n de E$entos D!D!; Des$incular E$entos Delegados

@D!F Funciones &uxiliares de E$entos D!F!; M! n!ho$er D!F!: M! n!toggle

@D!G Ejercicios D!G!; "rear una Q2ugerenciaR para una "aja de +ngreso de Texto D!G!: &adir una Ha$egaci'n por )estaas

>F E ectos @F!; +ntroducci'n @F!: E ectos +ncorporados en la 0iblioteca F!:!; "ambiar la Duraci'n de los E ectos F!:!;!; jQuery! x!speeds

F!:!: Reali8ar una &cci'n "uando un E ecto ue Ejecutado

@F!4 E ectos )ersonali8ados con M! n!animate F!4!; Easing

@F!C "ontrol de los E ectos @F!D Ejercicios F!D!; Mostrar Texto Oculto F!D!: "rear un Men% Desplegable

F!D!4 "rear un 2lideshoA

>G &jax @G!; +ntroducci'n @G!: "onceptos "la$e G!:!; #ET $s! )O2T G!:!: Tipos de Datos G!:!4 &sincronismo G!:!C )olPticas de Mismo Origen y *2OH) G!:!D &jax y Firebug

@G!4 MOtodos &jax de jQuery G!4!; M!ajax G!4!;!; Opciones del mOtodo M!ajax

G!4!: MOtodos "on$enientes G!4!4 M! n!load

@G!C &jax y Formularios @G!D Trabajar con *2OH) @G!F E$entos &jax @G!G Ejercicios G!G!; "argar "ontenido Externo G!G!: "argar "ontenido 6tili8ando *2OH

>I Extensiones @I!; .QuO es una Extensi'n/ @I!: "rear una Extensi'n 0Bsica @I!4 Encontrar y E$aluar Extensiones @I!C Escribir Extensiones @I!D Escribir Extensiones con Mantenimiento de Estado 6tili8ando Kidget Factory de jQuery 6+ I!D!; &adir MOtodos a un Kidget

I!D!: Trabajar con las Opciones del Kidget I!D!4 &adir Funciones de De$oluci'n de Llamada I!D!C Limpie8a I!D!D "onclusi'n

@I!F Ejercicios I!F!; Reali8ar una Tabla Ordenable I!F!: Escribir una Extensi'n )ara "ambiar el "olor de Fondo en Tablas

>L Mejores )rBcticas para &umentar el Rendimiento @L!; #uardar la Longitud en 0ucles @L!: &adir Hue$o "ontenido por Fuera de un 0ucle @L!4 Ho Repetirse @L!C "uidado con las Funciones &n'nimas @L!D Optimi8aci'n de 2electores L!D!; 2electores basados en +D L!D!: Especi icidad L!D!4 E$itar el 2elector 6ni$ersal

@L!F 6tili8ar la Delegaci'n de E$entos @L!G 2eparar Elementos para Trabajar con Ellos @L!I 6tili8ar Estilos en "ascada para "ambios de "22 en Jarios Elementos @L!L 6tili8ar M!data en Lugar de M! n!data @L!;5 Ho &ctuar en Elementos no Existentes @L!;; De inici'n de Jariables @L!;: "ondicionales @L!;4 Ho Tratar a jQuery como si uera una "aja Hegra

>;5 Organi8aci'n del "'digo @;5!; +ntroducci'n ;5!;!; "onceptos "la$e

@;5!: Encapsulaci'n ;5!:!; El Objeto Literal ;5!:!: El )atr'n Modular

@;5!4 #esti'n de Dependencias ;5!4!; Obtener ReSuire*2 ;5!4!: 6tili8ar ReSuire*2 con jQuery ;5!4!4 "rear M'dulos Reusables con ReSuire*2 ;5!4!C Optimi8ar el "'digo con las ,erramientas de ReSuire*2

@;5!C Ejercicios ;5!C!; "rear un M'dulo )ortlet

>;; E$entos )ersonali8ados @;;!; +ntroducci'n a los E$entos )ersonali8ados ;;!;!; 6n Ejemplo de &plicaci'n ;;!;!;!; +niciaci'n ;;!;!;!: "onclusi'n

>;: Funciones y ejecuciones di eridas a tra$Os del objeto M!De erred @;:!; +ntroducci'n @;:!: El objeto di erido y &jax ;:!:!; de erred!then

@;:!4 "reaci'n de objetos di eridos con M!De erred ;:!4!; de erred!pipe ;:!4!: M!Ahen

11111111111111111111111111111111111111111111111111111111111111111111111111111111

; 0ien$enido?a

jQuery se estB con$irtiendo rBpidamente en una herramienta Sue todo desarrollador de inter aces Aeb deberPa de conocer! El prop'sito de este libro es pro$eer un resumen de la biblioteca( de tal orma Sue para cuando lo haya terminado de leer( serB capa8 de reali8ar tareas bBsicas utili8ando jQuery y tendrB una s'lida base para continuar el aprendi8aje! El libro ue diseado para ser utili8ado como material en un sal'n de clases( pero tambiOn puede ser %til para estudiarlo de orma indi$idual!

La modalidad de trabajo es la siguiente9 En primer lugar se dedicarB tiempo a comprender un concepto para luego reali8ar un ejercicio relacionado! &lgunos de los ejercicios pueden llegar a ser tri$iales( mientras Sue otros no tanto! El objeti$o es aprender a resol$er de manera Bcil lo Sue normalmente se resol$erPa con jQuery! Las soluciones a todos los ejercicios estBn incluidas en el mismo material de aprendi8aje!

;!; Obtener el Material de &prendi8aje

El material de aprendi8aje y el c'digo uente de los ejemplos Sue se utili8an en el libro estBn hospedados en un repositorio de #ithub! Desde allP es posible descargar un archi$o !8ip o !tar con el c'digo para utili8ar en un ser$idor Aeb!

2i usted suele utili8ar #it( es bien$enido de clonar o modi icar el repositorio!

;!: 2o tAare

)ara trabajar con los contenidos del libro( necesitarB las siguientes herramientas9 > Ha$egador Aeb Fire ox

> La extensi'n Firebug( para Fire ox

> 6n editor de textos planos <como HotepadTT?2ublime Text : para KindoAs( gedit?Uate para Linux o TextMate para Mac O2 V=

> )ara las secciones dedicadas a &jax9 6n ser$idor local <como K&M) o M&M)= o un cliente FT)?22, <como FileWilla= para acceder a un ser$idor remoto!

;!4 &adir *a$a2cript a una )Bgina

Existen dos ormas de insertar c'digo *a$a2cript dentro de una pBgina9 escribiendo c'digo en la misma <en ingles inline= o a tra$Os de un archi$o externo utili8ando la etiSueta script! El orden en el cual se incluye el c'digo es importante9 un c'digo Sue depende de otro debe ser incluido despuOs del Sue re erencia <Ejemplo9 2i la unci'n 0 depende de &( el orden debe ser &(0 y no 0(&=!

)ara mejorar el rendimiento de la pBgina( el c'digo *a$a2cript debe ser incluido al inal del ,TML! &demBs( cuando se trabaja en un ambiente de producci'n con m%ltiples archi$os *a$a2cript( Ostos deben ser combinados en un solo archi$o!

Ejemplo de c'digo *a$a2cript en lPnea XscriptY console!log<'hello'=Z X?scriptY Ejemplo de inclusi'n de un archi$o externo *a$a2cript Xscript src['?js?jSuery!js'YX?scriptY

;!C Depuraci'n del "'digo *a$a2cript

La utili8aci'n de una herramienta de depuraci'n es esencial para trabajar con *a$a2cript! Fire ox pro$ee un depurador a tra$Os de la extensi'n FirebugZ mientras Sue 2a ari y "hrome ya traen uno integrado!

"ada depurador o rece9 > 6n editor multi1linea para experimentar con *a$a2criptZ

> 6n inspector para re$isar el c'digo generado en la pBginaZ

> 6n $isuali8ador de red o recursos( para examinar las peticiones Sue se reali8an!

"uando usted este escribiendo c'digo *a$a2cript( podrB utili8ar alguno de los siguientes mOtodos para en$iar mensajes a la consola del depurador9 > console!log<= para en$iar y registrar mensajes generalesZ

> console!dir<= para registrar un objeto y $isuali8ar sus propiedadesZ

> console!Aarn<= para registrar mensajes de alertaZ

> console!error<= para registrar mensajes de errorZ

Existen otros mOtodos para utili8ar desde la consola( pero estos pueden $ariar seg%n el na$egador! La consola ademBs pro$ee la posibilidad de establecer puntos de interrupci'n y obser$ar expresiones en el c'digo con el in de acilitar su depuraci'n!

;!D Ejercicios

La mayorPa de los capPtulos concluyen con uno o mBs ejercicios! En algunos( podrB trabajar directamente con FirebugZ en otros deberB escribir c'digo *a$a2cript luego de incluir la biblioteca jQuery en el documento!

&%n asP( para completar ciertos ejercicios( necesitarB consultar la documentaci'n o icial de jQuery! &prender a encontrar respuestas( es una parte importante del proceso de aprendi8aje!

Estas son algunas sugerencias para hacer rente a los problemas9 > En primer lugar( aseg%rese de entender bien el problema Sue estB tratando de resol$er!

> Luego( a$erig\e a SuO elementos tendrB Sue acceder con el in de resol$er el problema( y determine c'mo accederlos! )uede utili8ar Firebug para $eri icar Sue esta obteniendo el resultado esperado!

> Finalmente( a$erig\e SuO necesita hacer con esos elementos para resol$er el problema! )uede ser %til( antes de comen8ar( escribir comentarios explicando lo Sue $a a reali8ar!

Ho tenga miedo de cometer errores! Tampoco trate en el primer intento escribir de orma per ecta su c'digo! "ometer errores y experimentar con soluciones es parte del proceso de aprendi8aje y le ayudarB a Sue sea un mejor desarrollador!

)odrB encontrar en la carpeta ?ejercicios?soluciones ejemplos de soluciones a los ejercicios del libro!

;!F "on$enciones 6tili8adas en el Libro

Existen una serie de con$enciones utili8adas en el libro9

Los mOtodos Sue pueden ser llamados desde el objeto jQuery( serBn re erenciados como M! n!nombreDelMetodo! Los mOtodos Sue existen en el espacio de nombres <en inglOs namespace= de jQuery pero Sue no pueden ser llamados desde el objeto jQuery serBn re erenciados como M!nombreDelMetodo! 2i esto no signi ica mucho para usted( no se preocupe ] serB mBs claro a medida Sue $aya progresando en el libro!

Ejemplo de un c'digo ?? el c'digo de ejemplo aparecerB de esta orma Las remarcaciones aparecerBn de esta orma!

Hota

Las notas sobre alg%n tema aparecerBn de esta orma!

;!G Hotas de la Traducci'n

> Debido a Sue el material tiene como in el aprendi8aje y la ensean8a( el mismo se encuentra traducido a espaol ormal <usted=!

> Muchos conceptos tOcnicos son nombrados en su $ersi'n traducida a espaol! 2in embargo( para tener de re erencia( tambiOn se explica como es llamado en inglOs!

> Los ejemplos y soluciones a ejercicios no estBn completamente traducidos! Esto es debido a Sue( cuando estO trabajando en un proyecto real( el c'digo Sue encuentre en otros sitios probablemente estO en inglOs! &%n asP( se han traducido los comentarios incorporados en los c'digos de ejemplos y algunos textos particulares para acilitar la comprensi'n!

;!I Material de Re erencia

Existe una gran cantidad de artPculos Sue se ocupan de alg%n aspecto de jQuery! &lgunos son excelentes pero otros( rancamente( son err'neos! "uando lea un artPculo sobre jQuery( este seguro Sue se estB abarcando la misma $ersi'n de la biblioteca Sue estB utili8ando( y resPstase a la tentaci'n de copiar y pegar el c'digo ] t'mese un tiempo para poder entenderlo!

& continuaci'n se listan una serie de excelentes recursos para utili8ar durante el aprendi8aje! El mBs importante de todos es el c'digo uente de jQuery( el cual contiene <en su ormato sin comprimir= una completa documentaci'n a tra$Os de comentarios! La biblioteca no es una caja negra ] el entendimiento de ella irB incrementBndose exponencialmente si la re$isa de $e8 en cuando ] y es muy recomendable Sue la guarde en los a$oritos de su na$egador para tenerla como guPa de re erencia! > El c'digo uente de jQuery

>

Documentaci'n de jQuery

> Foro de jQuery

> Fa$oritos en Delicious

> "anal +R" ^jSuery en Freenode

: "onceptos 0Bsicos de *a$a2cript

:!; +ntroducci'n

jQuery se encuentra escrito en *a$a2cript( un lenguaje de programaci'n muy rico y expresi$o!

El capPtulo estB orientado a personas sin experiencia en el lenguaje( abarcando conceptos bBsicos y problemas recuentes Sue pueden presentarse al trabajar con el mismo! )or otro lado( la secci'n puede ser bene iciosa para Suienes utilicen otros lenguajes de programaci'n para entender las peculiaridades de *a$a2cript!

2i usted esta interesado en aprender el lenguaje mBs en pro undidad( puede leer el libro *a$a2cript9 The #ood )arts escrito por Douglas "roc3 ord!

:!: 2intaxis 0Bsica

"omprensi'n de declaraciones( nombres de $ariables( espacios en blanco( y otras sintaxis bBsicas de *a$a2cript!

Declaraci'n simple de $ariable $ar oo [ 'hello Aorld'Z Los espacios en blanco no tienen $alor uera de las comillas $ar oo [ 'hello Aorld'Z

Los parOntesis indican prioridad : _ 4 T DZ ?? es igual a ;;Z la multiplicaci'n ocurre primero : _ <4 T D=Z ?? es igual a ;FZ por lo parOntesis( la suma ocurre primero La tabulaci'n mejora la lectura del c'digo( pero no posee ning%n signi icado especial $ar oo [ unction<= ` console!log<'hello'=Z aZ

:!4 Operadores

:!4!; Operadores 0Bsicos

Los operadores bBsicos permiten manipular $alores!

"oncatenaci'n $ar oo [ 'hello'Z $ar bar [ 'Aorld'Z

console!log< oo T ' ' T bar=Z ?? la consola de depuraci'n muestra 'hello Aorld' Multiplicaci'n y di$isi'n : _ 4Z : ? 4Z +ncrementaci'n y decrementaci'n $ar i [ ;Z

$ar j [ TTiZ ?? incrementaci'n pre$ia9 j es igual a :Z i es igual a : $ar 3 [ iTTZ ?? incrementaci'n posterior9 3 es igual a :Z i es igual a 4

:!4!: Operaciones con H%meros y "adenas de "aracteres

En *a$a2cript( las operaciones con n%meros y cadenas de caracteres <en inglOs strings= pueden ocasionar resultados no esperados!

2uma $s! concatenaci'n $ar oo [ ;Z $ar bar [ ':'Z

console!log< oo T bar=Z ?? error9 La consola de depuraci'n muestra ;: For8ar a una cadena de caracteres actuar como un n%mero $ar oo [ ;Z $ar bar [ ':'Z

?? el constructor 'Humber' obliga a la cadena comportarse como un n%mero console!log< oo T Humber<bar==Z ?? la consola de depuraci'n muestra 4 El constructor Humber( cuando es llamado como una unci'n <como se muestra en el ejemplo= obliga a su argumento a comportarse como un n%mero! TambiOn es posible utili8ar el operador de suma unaria( entregando el mismo resultado9

For8ar a una cadena de caracteres actuar como un n%mero <utili8ando el operador de suma unaria= console!log< oo T Tbar=Z

:!4!4 Operadores L'gicos

Los operadores l'gicos permiten e$aluar una serie de operandos utili8ando operaciones &HD y OR!

Operadores l'gicos &HD y OR $ar oo [ ;Z $ar bar [ 5Z $ar ba8 [ :Z

oo -- barZ ?? de$uel$e ;( el cual es $erdadero <true= bar -- ooZ ?? de$uel$e ;( el cual es $erdadero <true=

oo NN barZ ?? de$uel$e 5( el cual es also < alse= oo NN ba8Z ?? de$uel$e :( el cual es $erdadero <true= ba8 NN ooZ ?? de$uel$e ;( el cual es $erdadero <true= El operador -- <OR l'gico= de$uel$e el $alor del primer operando( si Oste es $erdaderoZ caso contrario de$uel$e el segundo operando! 2i ambos operandos son alsos de$uel$e also < alse=! El operador NN <&HD l'gico= de$uel$e el $alor del primer operando si Oste es alsoZ caso contrario de$uel$e el segundo operando! "uando ambos $alores son $erdaderos de$uel$e $erdadero <true=( sino de$uel$e also!

)uede consultar la secci'n Elementos Jerdaderos y Falsos para mBs detalles sobre Sue $alores se e$al%an como true y cuales se e$al%an como alse!

Hota

)uede Sue a $eces note Sue algunos desarrolladores utili8an esta l'gica en lujos de control en lugar de utili8ar la declaraci'n i ! )or ejemplo9 ?? reali8ar algo con oo si oo es $erdadero oo NN do2omething< oo=Z

?? establecer bar igual a ba8 si ba8 es $erdaderoZ ?? caso contrario( establecer a bar igual al ?? $alor de create0ar<= $ar bar [ ba8 -- create0ar<=Z Este estilo de declaraci'n es muy elegante y concisoZ pero puede ser di Pcil para leer <sobretodo para principiantes=! )or eso se explPcita( para reconocerlo cuando este leyendo c'digo! 2in embargo su utili8aci'n no es recomendable a menos Sue estO c'modo con el concepto y su comportamiento!

:!4!C Operadores de "omparaci'n

Los operadores de comparaci'n permiten comprobar si determinados $alores son eSui$alentes o idOnticos!

Operadores de "omparaci'n $ar oo [ ;Z $ar bar [ 5Z $ar ba8 [ ';'Z $ar bim [ :Z

oo [[ barZ ?? de$uel$e also < alse= oo b[ barZ ?? de$uel$e $erdadero <true= oo [[ ba8Z ?? de$uel$e $erdadero <true=Z tenga cuidado

oo [[[ ba8Z oo b[[ ba8Z

?? de$uel$e also < alse= ?? de$uel$e $erdadero <true=

oo [[[ parse+nt<ba8=Z ?? de$uel$e $erdadero <true=

oo Y bimZ ?? de$uel$e also < alse= bim Y ba8Z ?? de$uel$e $erdadero <true= oo X[ ba8Z ?? de$uel$e $erdadero <true=

:!C "'digo "ondicional

& $eces se desea ejecutar un bloSue de c'digo bajo ciertas condiciones! Las estructuras de control de lujo ] a tra$Os de la utili8aci'n de las declaraciones i y else permiten hacerlo!

"ontrol del lujo $ar oo [ trueZ $ar bar [ alseZ

i <bar= ` ?? este c'digo nunca se ejecutarB console!log<'hellob'=Z a

i <bar= ` ?? este c'digo no se ejecutarB

a else ` i < oo= ` ?? este c'digo se ejecutarB a else ` ?? este c'digo se ejecutarB si oo y bar son alsos < alse= a a

Hota

En una lPnea singular( cuando se escribe una declaraci'n i ( las lla$es no son estrictamente necesariasZ sin embargo es recomendable su utili8aci'n( ya Sue hace Sue el c'digo sea mucho mBs legible!

Debe tener en cuenta de no de inir unciones con el mismo nombre m%ltiples $eces dentro de declaraciones i ?else( ya Sue puede obtener resultados no esperados!

:!C!; Elementos Jerdaderos y Falsos

)ara controlar el lujo adecuadamente( es importante entender SuO tipos de $alores son Q$erdaderosR y cuales Q alsosR! & $eces( algunos $alores pueden parecer una cosa pero al inal terminan siendo otra!

Jalores Sue de$uel$en $erdadero <true= '5'Z 'any string'Z ?? cualSuier cadena cdZ ?? un $ector $acPo `aZ ?? un objeto $acPo

;Z ?? cualSuier n%mero distinto a cero Jalores Sue de$uel$en also < alse= 5Z ''Z ?? una cadena $acPa HaHZ ?? la $ariable *a$a2cript enot1a1numbere <Ho es un n%mero= nullZ ?? un $alor nulo unde inedZ ?? tenga cuidado 11 inde inido <unde ined= puede ser rede inido

:!C!: Jariables "ondicionales 6tili8ando el Operador Ternario

& $eces se desea establecer el $alor de una $ariable dependiendo de cierta condici'n! )ara hacerlo se puede utili8ar una declaraci'n i ?else( sin embargo en muchos casos es mBs con$eniente utili8ar el operador ternario! cDe inici'n9 El operador ternario e$al%a una condici'nZ si la condici'n es $erdadera( de$uel$e cierto $alor( caso contrario de$uel$e un $alor di erente!d

El operador ternario ?? establecer a oo igual a ; si bar es $erdaderoZ ?? caso contrario( establecer a oo igual a 5 $ar oo [ bar / ; 9 5Z El operador ternario puede ser utili8ado sin de$ol$er un $alor a la $ariable( sin embargo este uso generalmente es desaprobado!

:!C!4 Declaraci'n 2Aitch

En lugar de utili8ar una serie de declaraciones i ?else?else i ?else( a $eces puede ser %til la utili8aci'n de la declaraci'n sAitch! cDe inici'n9 La declaraci'n 2Aitch e$al%a el $alor de una $ariable o expresi'n( y ejecuta di erentes bloSues de c'digo dependiendo de ese $alor!d

6na declaraci'n 2Aitch sAitch < oo= `

case 'bar'9 alert<'el $alor es bar'=Z brea3Z

case 'ba8'9 alert<'el $alor es ba8'=Z brea3Z

de ault9 alert<'de orma predeterminada se ejecutarB este c'digo'=Z brea3Z

a Las declaraciones sAitch son poco utili8adas en *a$a2cript( debido a Sue el mismo comportamiento es posible obtenerlo creando un objeto( el cual posee mBs potencial ya Sue es posible reutili8arlo( usarlo para reali8ar pruebas( etc! )or ejemplo9 $ar stu ToDo [ ` 'bar' 9 unction<= ` alert<'el $alor es bar'=Z a(

'ba8' 9 unction<= ` alert<'el $alor es ba8'=Z a(

'de ault' 9 unction<= ` alert<'de orma predeterminada se ejecutarB este c'digo'=Z a aZ

i <stu ToDoc ood= ` stu ToDoc ood<=Z a else ` stu ToDoc'de ault'd<=Z a MBs adelante se abarcarB el concepto de objetos!

:!D 0ucles

Los bucles <en inglOs loops= permiten ejecutar un bloSue de c'digo un determinado n%mero de $eces!

0ucles ?? muestra en la consola 'intento 5'( 'intento ;'( !!!( 'intento C' or <$ar i[5Z iXDZ iTT= ` console!log<'intento ' T i=Z a _Hote Sue en el ejemplo se utili8a la palabra $ar antes de la $ariable i( esto hace Sue dicha $ariable Suede dentro del QalcanceR <en inglOs scope= del bucle! MBs adelante en este capPtulo se examinarB en pro undidad el concepto de alcance!_

:!D!; 0ucles 6tili8ando For

6n bucle utili8ando or se compone de cuatro estados y posee la siguiente estructura9 or <cexpresi'n+nicialdZ ccondici'ndZ cincrementoDeLaExpresi'nd= ccuerpod El estado expresi'n+nicial es ejecutado una sola $e8( antes Sue el bucle comience! Oste otorga la oportunidad de preparar o declarar $ariables!

El estado condici'n es ejecutado antes de cada repetici'n( y retorna un $alor Sue decide si el bucle debe continuar ejecutBndose o no! 2i el estado condicional e$al%a un $alor also el bucle se detiene!

El estado incrementoDeLaExpresi'n es ejecutado al inal de cada repetici'n y otorga la oportunidad de cambiar el estado de importantes $ariables! )or lo general( este estado implica la incrementaci'n o decrementaci'n de un contador!

El cuerpo es el c'digo a ejecutar en cada repetici'n del bucle!

6n tPpico bucle utili8ando or or <$ar i [ 5( limit [ ;55Z i X limitZ iTT= ` ?? Este bloSue de c'digo serB ejecutado ;55 $eces console!log<'"urrently at ' T i=Z ?? Hota9 el %ltimo registro Sue se mostrarB ?? en la consola serB e&ctualmente en LLe a

:!D!: 0ucles 6tili8ando Khile

6n bucle utili8ando Ahile es similar a una declaraci'n condicional i ( excepto Sue el cuerpo $a a continuar ejecutBndose hasta Sue la condici'n a e$aluar sea alsa! Ahile <ccondici'nd= ccuerpod

6n tPpico bucle utili8ando Ahile $ar i [ 5Z Ahile <i X ;55= ` ?? Este bloSue de c'digo se ejecutarB ;55 $eces console!log<'&ctualmente en ' T i=Z iTTZ ?? incrementa la $ariable i a )uede notar Sue en el ejemplo se incrementa el contador dentro del cuerpo del bucle( pero tambiOn es posible combinar la condici'n y la incrementaci'n( como se muestra a continuaci'n9

0ucle utili8ando Ahile con la combinaci'n de la condici'n y la incrementaci'n $ar i [ 1;Z Ahile <TTi X ;55= ` ?? Este bloSue de c'digo se ejecutarB ;55 $eces console!log<'&ctualmente en ' T i=Z a 2e comien8a en 1; y luego se utili8a la incrementaci'n pre$ia <TTi=!

:!D!4 0ucles 6tili8ando Do1Ahile

Este bucle es exactamente igual Sue el bucle utili8ando Ahile excepto Sue el cuerpo es ejecutado al menos una $e8 antes Sue la condici'n sea e$aluada! do ccuerpod Ahile <ccondici'nd= 6n bucle utili8ando do1Ahile do `

?? +ncluso cuando la condici'n sea alsa

?? el cuerpo del bucle se ejecutarB al menos una $e8!

alert<',ello'=Z

a Ahile < alse=Z Este tipo de bucles son bastantes atPpicos ya Sue en pocas ocasiones se necesita un bucle Sue se ejecute al menos una $e8! De cualSuier orma debe estar al tanto de ellos!

:!D!C 0rea3 y "ontinue

6sualmente( el in de la ejecuci'n de un bucle resultarB cuando la condici'n no siga e$aluando un $alor $erdadero( sin embargo tambiOn es posible parar un bucle utili8ando la declaraci'n brea3 dentro del cuerpo!

Detener un bucle con brea3 or <$ar i [ 5Z i X ;5Z iTT= ` i <something= ` brea3Z a a TambiOn puede suceder Sue Suiera continuar con el bucle sin tener Sue ejecutar mBs sentencias del cuerpo del mismo bucle! Esto puede reali8arse utili8ando la declaraci'n continue!

2altar a la siguiente iteraci'n de un bucle or <$ar i [ 5Z i X ;5Z iTT= `

i <something= `

continueZ a

?? La siguiente declaraci'n serB ejecutada ?? si la condici'n 'something' no se cumple console!log<',ello'=Z

:!F )alabras Reser$adas

*a$a2cript posee un n%mero de Qpalabras reser$adasR( o palabras Sue son especiales dentro del mismo lenguaje! Debe utili8ar estas palabras cuando las necesite para su uso especP ico! >abstract >boolean >brea3 >byte >case >catch >char >class >const >continue >debugger >de ault >delete >do >double

>else >enum >export >extends > inal > inally > loat > or > unction >goto >i >implements >import >in >instanceo >int >inter ace >long >nati$e >neA >pac3age >pri$ate >protected >public >return >short >static

>super >sAitch >synchroni8ed >this >throA >throAs >transient >try >typeo >$ar >$oid >$olatile >Ahile >Aith

:!G Jectores

Los $ectores <en espaol tambiOn llamados matrices o arreglos y en inglOs arrays= son listas de $alores con Pndice1cero <en inglOs 8ero1index=( es decir( Sue el primer elemento del $ector estB en el Pndice 5! fstos son una orma prBctica de almacenar un conjunto de datos relacionados <como cadenas de caracteres=( aunSue en realidad( un $ector puede incluir m%ltiples tipos de datos( incluso otros $ectores!

6n $ector simple $ar my&rray [ c 'hello'( 'Aorld' dZ &cceder a los Ptems del $ector a tra$Os de su Pndice $ar my&rray [ c 'hello'( 'Aorld'( ' oo'( 'bar' dZ console!log<my&rrayc4d=Z ?? muestra en la consola 'bar'

Obtener la cantidad de Ptems del $ector $ar my&rray [ c 'hello'( 'Aorld' dZ console!log<my&rray!length=Z ?? muestra en la consola : "ambiar el $alor de un Ptem de un $ector $ar my&rray [ c 'hello'( 'Aorld' dZ my&rrayc;d [ 'changed'Z "omo se muestra en el ejemplo Q"ambiar el $alor de un Ptem de un $ectorR es posible cambiar el $alor de un Ptem de un $ector( sin embargo( por lo general( no es aconsejable!

&adir elementos a un $ector $ar my&rray [ c 'hello'( 'Aorld' dZ my&rray!push<'neA'=Z Trabajar con $ectores $ar my&rray [ c 'h'( 'e'( 'l'( 'l'( 'o' dZ $ar my2tring [ my&rray!join<''=Z ?? 'hello' $ar my2plit [ my2tring!split<''=Z ?? c 'h'( 'e'( 'l'( 'l'( 'o' d

:!I Objetos

Los objetos son elementos Sue pueden contener cero o mBs conjuntos de pares de nombres cla$es y $alores asociados a dicho objeto! Los nombres cla$es pueden ser cualSuier palabra o n%mero $Blido! El $alor puede ser cualSuier tipo de $alor9 un n%mero( una cadena( un $ector( una unci'n( incluso otro objeto!

cDe inici'n9 "uando uno de los $alores de un objeto es una unci'n( Osta es nombrada como un mOtodo del objeto!d De lo contrario( se los llama propiedades!

"uriosamente( en *a$a2cript( casi todo es un objeto ] $ectores( unciones( n%meros( incluso cadenas ] y todos poseen propiedades y mOtodos!

"reaci'n de un Qobjeto literalR $ar myObject [ ` say,ello9 unction<= ` console!log<'hello'=Z a(

myHame9 'Rebecca' aZ

myObject!say,ello<=Z ?? se llama al mOtodo say,ello( ?? el cual muestra en la consola 'hello'

console!log<myObject!myHame=Z ?? se llama a la propiedad myHame( ?? la cual muestra en la consola 'Rebecca'

Hota

Hotar Sue cuando se crean objetos literales( el nombre de la propiedad puede ser cualSuier identi icador *a$a2cript( una cadena de caracteres <encerrada entre comillas= o un n%mero9 $ar myObject [ ` $alid+denti ier9 ;:4( 'some string'9 CDF( LLLLL9 GIL aZ Los objetos literales pueden ser muy %tiles para la organi8aci'n del c'digo( para mBs in ormaci'n puede leer el artPculo <en inglOs= 6sing Objects to Organi8e gour "ode por Rebecca Murphey!

:!L Funciones

Las unciones contienen bloSues de c'digo Sue se ejecutaran repetidamente! & las mismas se le pueden pasar argumentos( y opcionalmente la unci'n puede de$ol$er un $alor!

Las unciones pueden ser creadas de $arias ormas9

Declaraci'n de una unci'n unction oo<= ` ?_ hacer algo _? a Declaraci'n de una unci'n nombrada $ar oo [ unction<= ` ?_ hacer algo _? a Es pre erible el mOtodo de unci'n nombrada debido a algunas pro undas ra8ones tOcnicas! +gualmente( es probable encontrar a los dos mOtodos cuando se re$ise c'digo *a$a2cript!

:!L!; 6tili8aci'n de Funciones

6na unci'n simple $ar greet [ unction<person( greeting= ` $ar text [ greeting T '( ' T personZ console!log<text=Z aZ

greet<'Rebecca'( ',ello'=Z ?? muestra en la consola ',ello( Rebecca' 6na unci'n Sue de$uel$e un $alor $ar greet [ unction<person( greeting= ` $ar text [ greeting T '( ' T personZ

return textZ aZ

console!log<greet<'Rebecca'('hello'==Z ?? la unci'n de$uel$e ',ello( Rebecca'( ?? la cual se muestra en la consola 6na unci'n Sue de$uel$e otra unci'n $ar greet [ unction<person( greeting= ` $ar text [ greeting T '( ' T personZ return unction<= ` console!log<text=Z aZ aZ

$ar greeting [ greet<'Rebecca'( ',ello'=Z greeting<=Z ?? se muestra en la consola ',ello( Rebecca'

:!L!: Funciones &n'nimas &utoejecutables

6n patr'n com%n en *a$a2cript son las unciones an'nimas autoejecutables! Este patr'n consiste en crear una expresi'n de unci'n e inmediatamente ejecutarla! El mismo es muy %til para casos en Sue no se desea inter$enir espacios de nombres globales( debido a Sue ninguna $ariable declarada dentro de la unci'n es $isible desde a uera!

Funci'n an'nima autoejecutable < unction<=` $ar oo [ ',ello Aorld'Z a=<=Z

console!log< oo=Z ?? inde inido <unde ined=

:!L!4 Funciones como &rgumentos

En *a$a2cript( las unciones son Qciudadanos de primera claseR ] pueden ser asignadas a $ariables o pasadas a otras unciones como argumentos! En jQuery( pasar unciones como argumentos es una prBctica muy com%n!

)asar una unci'n an'nima como un argumento $ar myFn [ unction< n= ` $ar result [ n<=Z console!log<result=Z aZ

myFn< unction<= ` return 'hello Aorld'Z a=Z ?? muestra en la consola 'hello Aorld' )asar una unci'n nombrada como un argumento $ar myFn [ unction< n= ` $ar result [ n<=Z console!log<result=Z aZ

$ar myOtherFn [ unction<= ` return 'hello Aorld'Z aZ

myFn<myOtherFn=Z ?? muestra en la consola 'hello Aorld'

:!;5 Determinaci'n del Tipo de Jariable

*a$a2cript o rece una manera de poder comprobar el QtipoR <en inglOs type= de una $ariable! 2in embargo( el resultado puede ser con uso ] por ejemplo( el tipo de un $ector es QobjectR!

)or eso( es una prBctica com%n utili8ar el operador typeo cuando se trata de determinar el tipo de un $alor especP ico!

Determinar el tipo en di erentes $ariables $ar myFunction [ unction<= ` console!log<'hello'=Z aZ

$ar myObject [ ` oo 9 'bar' aZ

$ar my&rray [ c 'a'( 'b'( 'c' dZ

$ar my2tring [ 'hello'Z

$ar myHumber [ 4Z

typeo myFunctionZ ?? de$uel$e ' unction' typeo myObjectZ typeo my&rrayZ typeo my2tringZ typeo myHumberZ ?? de$uel$e 'object' ?? de$uel$e 'object' 11 tenga cuidado ?? de$uel$e 'string' ?? de$uel$e 'number'

typeo nullZ

?? de$uel$e 'object' 11 tenga cuidado

i <my&rray!push NN my&rray!slice NN my&rray!join= ` ?? probablemente sea un $ector ?? <este estilo es llamado( en inglOs( educ3 typinge= a

i <Object!prototype!to2tring!call<my&rray= [[[ 'cobject &rrayd'= ` ?? de initi$amente es un $ectorZ ?? esta es considerada la orma mBs robusta ?? de determinar si un $alor es un $ector! a jQuery o rece mOtodos para ayudar a determinar el tipo de un determinado $alor! Estos mOtodos serBn $istos mBs adelante!

:!;; La palabra cla$e this

En *a$a2cript( asP como en la mayorPa de los lenguajes de programaci'n orientados a objetos( this es una palabra cla$e especial Sue hace re erencia al objeto en donde el mOtodo estB siendo in$ocado! El $alor de this es determinado utili8ando una serie de simples pasos9 ;!2i la unci'n es in$ocada utili8ando Function!call o Function!apply( this tendrB el $alor del primer argumento pasado al mOtodo! 2i el argumento es nulo <null= o inde inido <unde ined=( this harB re erencia el objeto global <el objeto AindoA=Z :!2i la unci'n a in$ocar es creada utili8ando Function!bind( this serB el primer argumento Sue es pasado a la unci'n en el momento en Sue se la creaZ 4!2i la unci'n es in$ocada como un mOtodo de un objeto( this re erenciarB a dicho objetoZ C!De lo contrario( si la unci'n es in$ocada como una unci'n independiente( no unida a alg%n objeto( this re erenciarB al objeto global!

6na unci'n in$ocada utili8ando Function!call $ar myObject [ ` say,ello 9 unction<= ` console!log<',ola( mi nombre es ' T this!myHame=Z a(

myHame 9 'Rebecca' aZ

$ar secondObject [ ` myHame 9 '"olin' aZ

myObject!say,ello<=Z

?? registra ',ola( mi nombre es Rebecca'

myObject!say,ello!call<secondObject=Z ?? registra ',ola( mi nombre es "olin' 6na unci'n creada utili8ando Function!bind $ar myHame [ 'el objeto global'(

say,ello [ unction <= ` console!log<',ola( mi nombre es ' T this!myHame=Z a(

myObject [ ` myHame 9 'Rebecca' aZ

$ar myObject,ello [ say,ello!bind<myObject=Z

say,ello<=Z

?? registra ',ola( mi nombre es el objeto global'

myObject,ello<=Z ?? registra ',ola( mi nombre es Rebecca' 6na unci'n $inculada a un objeto $ar myHame [ 'el objeto global'(

say,ello [ unction<= ` console!log<',ola( mi nombre es ' T this!myHame=Z a(

myObject [ ` myHame 9 'Rebecca' a(

secondObject [ ` myHame 9 '"olin' aZ

myObject!say,ello [ say,elloZ secondObject!say,ello [ say,elloZ

say,ello<=Z

?? registra ',ola( mi nombre es el objeto global' ?? registra ',ola( mi nombre es Rebecca'

myObject!say,ello<=Z

secondObject!say,ello<=Z ?? registra ',ola( mi nombre es "olin'

Hota

En algunas oportunidades( cuando se in$oca una unci'n Sue se encuentra dentro de un espacio de nombres <en inglOs namespace= amplio( puede ser una tentaci'n guardar la re erencia a la unci'n actual en una $ariable mBs corta y accesible! 2in embargo( es importante no reali8arlo en instancias de mOtodos( ya Sue puede lle$ar a la ejecuci'n de c'digo incorrecto! )or ejemplo9 $ar myHamespace [ ` myObject9 ` say,ello9 unction<= ` console!log<',ola( mi nombre es ' T this!myHame=Z a(

myHame9 'Rebecca' a aZ

$ar hello [ myHamespace!myObject!say,elloZ

hello<=Z ?? registra ',ola( mi nombre es unde ined' )ara Sue no ocurran estos errores( es necesario hacer re erencia al objeto en donde el mOtodo es in$ocado9 $ar myHamespace [ ` myObject 9 ` say,ello 9 unction<= ` console!log<',ola( mi nombre es ' T this!myHame=Z a(

myHame 9 'Rebecca' a aZ

$ar obj [ myHamespace!myObjectZ

obj!say,ello<=Z ?? registra ',ola( mi nombre es Rebecca'

:!;: &lcance

El QalcanceR <en inglOs scope= se re iere a las $ariables Sue estBn disponibles en un bloSue de c'digo en un tiempo determinado! La alta de comprensi'n de este concepto puede lle$ar a una rustrante experiencia de depuraci'n!

"uando una $ariable es declarada dentro de una unci'n utili8ando la palabra cla$e $ar( Osta %nicamente esta disponible para el c'digo dentro de la unci'n ] todo el c'digo uera de dicha unci'n no puede acceder a la $ariable! )or otro lado( las unciones de inidas dentro de la unci'n podrBn acceder a la $ariable declarada!

Las $ariables Sue son declaradas dentro de la unci'n sin la palabra cla$e $ar no Suedan dentro del Bmbito de la misma unci'n ] *a$a2cript buscarB el lugar en donde la $ariable ue pre$iamente declarada( y en caso de no haber sido declarada( es de inida dentro del alcance global( lo cual puede ocasionar consecuencias inesperadasZ

Funciones tienen acceso a $ariables de inidas dentro del mismo alcance $ar oo [ 'hello'Z

$ar say,ello [ unction<= ` console!log< oo=Z aZ

say,ello<=Z

?? muestra en la consola 'hello'

console!log< oo=Z ?? tambiOn muestra en la consola 'hello' El c'digo de a uera no tiene acceso a la $ariable de inida dentro de la unci'n

$ar say,ello [ unction<= ` $ar oo [ 'hello'Z console!log< oo=Z aZ

say,ello<=Z

?? muestra en la consola 'hello'

console!log< oo=Z ?? no muestra nada en la consola Jariables con nombres iguales pero $alores di erentes pueden existir en di erentes alcances $ar oo [ 'Aorld'Z

$ar say,ello [ unction<= ` $ar oo [ 'hello'Z console!log< oo=Z aZ

say,ello<=Z

?? muestra en la consola 'hello'

console!log< oo=Z ?? muestra en la consola 'Aorld' Las unciones pueden Q$erR los cambios en las $ariables antes de Sue la unci'n sea de inida $ar myFunction [ unction<= ` $ar oo [ 'hello'Z

$ar myFn [ unction<= ` console!log< oo=Z aZ

oo [ 'Aorld'Z

return myFnZ aZ

$ar [ myFunction<=Z <=Z ?? registra 'Aorld' 11 error &lcance ?? una unci'n an'nima autoejecutable < unction<= ` $ar ba8 [ ;Z $ar bim [ unction<= ` alert<ba8=Z aZ bar [ unction<= ` alert<ba8=Z aZ a=<=Z

console!log<ba8=Z ?? La consola no muestra nada( ya Sue ba8 ?? esta de inida dentro del alcance de la unci'n an'nima

bar<=Z ?? bar esta de inido uera de la unci'n an'nima ?? ya Sue ue declarada sin la palabra cla$e $arZ ademBs( ?? como ue de inida dentro del mismo alcance Sue ba8( ?? se puede consultar el $alor de ba8 a pesar Sue ?? Osta este de inida dentro del alcance de la unci'n an'nima

bim<=Z ?? bim no esta de inida para ser accesible uera de la unci'n an'nima( ?? por lo cual se mostrarB un error

:!;4 "lausuras

Las clausuras <en inglOs closures= son una extensi'n del concepto de alcance <scope= ] unciones Sue tienen acceso a las $ariables Sue estBn disponibles dentro del Bmbito en donde se cre' la unci'n! 2i este concepto es con uso( no debe preocuparse9 se entiende mejor a tra$Os de ejemplos!

En el ejemplo :!CG se muestra la orma en Sue unciones tienen acceso para cambiar el $alor de las $ariables! El mismo comportamiento sucede en unciones creadas dentro de bucles ] la unci'n Qobser$aR el cambio en la $ariable( incluso despuOs de Sue la unci'n sea de inida( resultando Sue en todos los clic3s apare8ca una $entana de alerta mostrando el $alor D!

."'mo establecer el $alor de i/ ?_ esto no se comporta como se deseaZ _? ?_ cada clic3 mostrarB una $entana de alerta con el $alor D _? or <$ar i[5Z iXDZ iTT= ` M<'XpYhacer clic3X?pY'=!appendTo<'body'=!clic3< unction<= ` alert<i=Z a=Z a Establecer el $alor de i utili8ando una clausura ?_ soluci'n9 QclausurarR el $alor de i dentro de createFunction _? $ar createFunction [ unction<i= ` return unction<= ` alert<i=Z aZ aZ

or <$ar i [ 5Z i X DZ iTT= ` M<'XpYhacer clic3X?pY'=!appendTo<'body'=!clic3<createFunction<i==Z a

Las clausuras tambiOn pueden ser utili8adas para resol$er problemas con la palabra cla$e this( la cual es %nica en cada alcance!

6tili8ar una clausura para acceder simultBneamente a instancias de objetos internos y externos! $ar outerObj [ ` myHame9 'externo'( outerFunction9 unction<= `

?? pro$ee una re erencia al mismo objeto outerObj ?? para utili8ar dentro de innerFunction $ar sel [ thisZ

$ar innerObj [ ` myHame9 'interno'( innerFunction9 unction<= ` console!log<sel !myHame( this!myHame=Z ?? registra 'externo interno' a aZ

innerObj!innerFunction<=Z

console!log<this!myHame=Z ?? registra 'externo' a aZ

outerObj!outerFunction<=Z

Este mecanismo puede ser %til cuando trabaje con unciones de de$oluci'n de llamadas <en inglOs callbac3s=! 2in embargo( en estos casos( es pre erible Sue utilice Function!bind ya Sue e$itarB cualSuier sobrecarga asociada con el alcance <scope=!

4 "onceptos 0Bsicos de jQuery

4!; M<document=!ready<=

Ho es posible interactuar de orma segura con el contenido de una pBgina hasta Sue el documento no se encuentre preparado para su manipulaci'n! jQuery permite detectar dicho estado a tra$Os de la declaraci'n M<document=!ready<= de orma tal Sue el bloSue se ejecutarB s'lo una $e8 Sue la pBgina este disponible!

El bloSue M<document=!ready<= M<document=!ready< unction<= ` console!log<'el documento estB preparado'=Z a=Z Existe una orma abre$iada para M<document=!ready<= la cual podrB encontrar algunas $ecesZ sin embargo( es recomendable no utili8arla en caso Sue este escribiendo c'digo para gente Sue no conoce jQuery!

Forma abre$iada para M<document=!ready<= M< unction<= ` console!log<'el documento estB preparado'=Z a=Z &demBs es posible pasarle a M<document=!ready<= una unci'n nombrada en lugar de una an'nima9

)asar una unci'n nombrada en lugar de una unci'n an'nima

unction readyFn<= ` ?? c'digo a ejecutar cuando el documento este listo a

M<document=!ready<readyFn=Z

4!: 2elecci'n de Elementos

El concepto mBs bBsico de jQuery es el de Qseleccionar algunos elementos y reali8ar acciones con ellosR! La biblioteca soporta gran parte de los selectores "224 y $arios mBs no estandari8ados! En http9??api!jSuery!com?category?selectors? se puede encontrar una completa re erencia sobre los selectores de la biblioteca!

& continuaci'n se muestran algunas tOcnicas comunes para la selecci'n de elementos9

2elecci'n de elementos en base a su +D M<'^my+d'=Z ?? notar Sue los +Ds deben ser %nicos por pBgina 2elecci'n de elementos en base al nombre de clase M<'di$!my"lass'=Z ?? si se especi ica el tipo de elemento( ?? se mejora el rendimiento de la selecci'n 2elecci'n de elementos por su atributo M<'inputcname[ irsthnamed'=Z ?? tenga cuidado( Sue puede ser muy lento 2elecci'n de elementos en orma de selector "22 M<'^contents ul!people li'=Z )seudo1selectores M<'a!external9 irst'=Z ?? selecciona el primer elemento XaY ?? con la clase 'external' M<'tr9odd'=Z ?? selecciona todos los elementos XtrY

?? impares de una tabla M<'^myForm 9input'=Z ?? selecciona todos los elementos del tipo input ?? dentro del ormulario ^myForm M<'di$9$isible'=Z M<'di$9gt<:='=Z M<'di$9animated'=Z ?? selecciona todos los di$s $isibles ?? selecciona todos los di$s excepto los tres primeros ?? selecciona todos los di$s actualmente animados

Hota

"uando se utili8an los pseudo1selectores 9$isible y 9hidden( jQuery comprueba la $isibilidad actual del elemento pero no si Oste posee asignados los estilos "22 $isibility o display ] en otras palabras( $eri ica si el alto y ancho Psico del elemento es mayor a cero! 2in embargo( esta comprobaci'n no unciona con los elementos XtrYZ en este caso( jQuery comprueba si se estB aplicando el estilo display y $a a considerar al elemento como oculto si posee asignado el $alor none! &demBs( los elementos Sue a%n no ueron aadidos al DOM serBn tratados como ocultos( incluso si tienen aplicados estilos indicando Sue deben ser $isibles <En la secci'n Manipulaci'n de este manual( se explica como crear y aadir elementos al DOM=!

"omo re erencia( este es el ragmento de c'digo Sue utili8a jQuery para determinar cuando un elemento es $isible o no! 2e incorporaron los comentarios para Sue Suede mBs claro su entendimiento9 jQuery!expr! ilters!hidden [ unction< elem = ` $ar Aidth [ elem!o setKidth( height [ elem!o set,eight( s3ip [ elem!nodeHame!toLoAer"ase<= [[[ etreZ

?? .el elemento posee alto 5( ancho 5 y no es un XtrY/ return Aidth [[[ 5 NN height [[[ 5 NN bs3ip /

?? entonces debe estar oculto <hidden= true 9

?? pero si posee ancho y alto ?? y no es un XtrY Aidth Y 5 NN height Y 5 NN bs3ip /

?? entonces debe estar $isible alse 9

?? si nos encontramos aSuP( es porSue el elemento posee ancho ?? y alto( pero ademBs es un XtrY( ?? entonces se $eri ica el $alor del estilo display ?? aplicado a tra$Os de "22 ?? para decidir si estB oculto o no jQuery!cur"22<elem( edisplaye= [[[ enoneeZ aZ

jQuery!expr! ilters!$isible [ unction< elem = ` return bjQuery!expr! ilters!hidden< elem =Z aZ Elecci'n de 2electores

La elecci'n de buenos selectores es un punto importante cuando se desea mejorar el rendimiento del c'digo! 6na peSuea especi icidad ] por ejemplo( incluir el tipo de elemento <como di$= cuando se reali8a una selecci'n por el nombre de clase ] puede ayudar bastante! )or eso( es recomendable darle algunas QpistasR a jQuery sobre en Sue lugar del documento puede encontrar lo Sue desea seleccionar! )or otro lado( demasiada especi icidad puede ser perjudicial! 6n selector como ^miTabla thead tr th!especial es un exceso( lo mejor serPa utili8ar ^miTabla th!especial!

jQuery o rece muchos selectores basados en atributos( Sue permiten reali8ar selecciones basadas en el contenido de los atributos utili8ando simpli icaciones de expresiones regulares!

?? encontrar todos los XaY cuyo atributo rel terminan en ethingere M<eacrelM['thinger'de=Z Estos tipos de selectores pueden resultar %tiles pero tambiOn ser muy lentos! "uando sea posible( es recomendable reali8ar la selecci'n utili8ando +Ds( nombres de clases y nombres de etiSuetas!

2i desea conocer mBs sobre este asunto( )aul +rish reali8' una gran presentaci'n sobre mejoras de rendimiento en *a$a2cript <en ingles=( la cual posee $arias diapositi$as centradas en selectores!

4!:!; "omprobar 2elecciones

6na $e8 reali8ada la selecci'n de los elementos( SuerrB conocer si dicha selecci'n entreg' alg%n resultado! )ara ello( pueda Sue escriba algo asP9 i <M<'di$! oo'== ` !!! a 2in embargo esta orma no uncionarB! "uando se reali8a una selecci'n utili8ando M<=( siempre es de$uelto un objeto( y si se lo e$al%a( Oste siempre de$ol$erB true! +ncluso si la selecci'n no contiene ning%n elemento( el c'digo dentro del bloSue i se ejecutarB!

En lugar de utili8ar el c'digo mostrado( lo Sue se debe hacer es preguntar por la cantidad de elementos Sue posee la selecci'n Sue se ejecut'! Esto es posible reali8arlo utili8ando la propiedad *a$a2cript length! 2i la respuesta es 5( la condici'n e$aluarB also( caso contrario <mBs de 5 elementos=( la condici'n serB $erdadera!

E$aluar si una selecci'n posee elementos i <M<'di$! oo'=!length= ` !!! a

4!:!: #uardar 2elecciones

"ada $e8 Sue se hace una selecci'n( una gran cantidad de c'digo es ejecutado! jQuery no guarda el resultado por si solo( por lo tanto( si $a a reali8ar una selecci'n Sue luego se harB de nue$o( deberB sal$ar la selecci'n en una $ariable!

#uardar selecciones en una $ariable $ar Mdi$s [ M<'di$'=Z

Hota

En el ejemplo Q#uardar selecciones en una $ariableR( la $ariable comien8a con el signo de d'lar! "ontrariamente a otros lenguajes de programaci'n( en *a$a2cript este signo no posee ning%n signi icado especial ] es solamente otro carBcter! 2in embargo aSuP se utili8arB para indicar Sue dicha $ariable posee un objeto jQuery! Esta prBctica ] una especie de Hotaci'n ,%ngara ] es solo una con$enci'n y no es obligatoria!

6na $e8 Sue la selecci'n es guardada en la $ariable( se la puede utili8ar en conjunto con los mOtodos de jQuery y el resultado serB igual Sue utili8ando la selecci'n original!

Hota

La selecci'n obtiene s'lo los elementos Sue estBn en la pBgina cuando se reali8' dicha acci'n! 2i luego se aaden elementos al documento( serB necesario repetir la selecci'n o aadir los elementos nue$os a la selecci'n guardada en la $ariable! En otras palabras( las selecciones guardadas no se actuali8an QmBgicamenteR cuando el DOM de modi ica!

4!:!4 Re inamiento y Filtrado de 2elecciones

& $eces( puede obtener una selecci'n Sue contiene mBs de lo Sue necesitaZ en este caso( es necesario re inar dicha selecci'n! jQuery o rece $arios mOtodos para poder obtener exactamente lo Sue desea!

Re inamiento de selecciones M<'di$! oo'=!has<'p'=Z M<'h;'=!not<'!bar'=Z ?? el elemento di$! oo contiene elementos XpY ?? el elemento h; no posse la clase 'bar'

M<'ul li'=! ilter<'!current'=Z ?? un item de una lista desordenada ?? Sue posse la clase 'current' M<'ul li'=! irst<=Z M<'ul li'=!eS<D=Z ?? el primer item de una lista desordenada ?? el sexto item de una lista desordenada

4!:!C 2elecci'n de Elementos de un Formulario

jQuery o rece $arios pseudo1selectores Sue ayudan a encontrar elementos dentro de los ormularios( Ostos son especialmente %tiles ya Sue dependiendo de los estados de cada elemento o su tipo( puede ser di Pcil distinguirlos utili8ando selectores "22 estBndar! 9button 2elecciona elementos XbuttonY y con el atributo type['button' 9chec3box 2elecciona elementos XinputY con el atributo type['chec3box' 9chec3ed 2elecciona elementos XinputY del tipo chec3box seleccionados 9disabled 2elecciona elementos del ormulario Sue estBn deshabitados 9enabled 2elecciona elementos del ormulario Sue estBn habilitados 9 ile 2elecciona elementos XinputY con el atributo type[' ile' 9image 2elecciona elementos XinputY con el atributo type['image'

9input 2elecciona elementos XinputY( XtextareaY y XselectY 9passAord 2elecciona elementos XinputY con el atributo type['passAord' 9radio 2elecciona elementos XinputY con el atributo type['radio' 9reset 2elecciona elementos XinputY con el atributo type['reset' 9selected 2elecciona elementos XoptionsY Sue estBn seleccionados 9submit 2elecciona elementos XinputY con el atributo type['submit' 9text 2elecciona elementos XinputY con el atributo type['text'

6tili8ando pseudo1selectores en elementos de ormularios M<'^myForm 9input'=Z ?? obtiene todos los elementos inputs ?? dentro del ormulario ^myForm

4!4 Trabajar con 2elecciones

6na $e8 reali8ada la selecci'n de los elementos( es posible utili8arlos en conjunto con di erentes mOtodos! Ostos( generalmente( son de dos tipos9 obtenedores <en inglOs getters= y establecedores <en inglOs setters=! Los mOtodos obtenedores de$uel$en una propiedad del elemento seleccionadoZ mientras Sue los mOtodos establecedores ijan una propiedad a todos los elementos seleccionados!

4!4!; Encadenamiento

2i en una selecci'n se reali8a una llamada a un mOtodo( y Oste de$uel$e un objeto jQuery( es posible seguir un QencadenadoR de mOtodos en el objeto!

Encadenamiento M<'^content'=! ind<'h4'=!eS<:=!html<'nue$o texto para el tercer elemento h4'=Z )or otro lado( si se estB escribiendo un encadenamiento de mOtodos Sue incluyen muchos pasos( es posible escribirlos lPnea por lPnea( haciendo Sue el c'digo lu8ca mBs agradable para leer!

Formateo de c'digo encadenado M<'^content'= ! ind<'h4'= !eS<:= !html<'nue$o texto para el tercer elemento h4'=Z 2i desea $ol$er a la selecci'n original en el medio del encadenado( jQuery o rece el mOtodo M! n!end para poder hacerlo!

Restablecer la selecci'n original utili8ando el mOtodo M! n!end M<'^content'= ! ind<'h4'= !eS<:= !html<'nue$o texto para el tercer elemento h4'= !end<= ?? reestablece la selecci'n a todos los elementos h4 en ^content !eS<5= !html<'nue$o texto para el primer elemento h4'=Z

Hota

El encadenamiento es muy poderoso y es una caracterPstica Sue muchas bibliotecas *a$a2cript han adoptado desde Sue jQuery se hi8o popular! 2in embargo( debe ser utili8ado con cuidado! 6n encadenamiento de mOtodos extensi$o pueden hacer un c'digo extremadamente di Pcil de modi icar y depurar! Ho existe una regla Sue indiSue Sue tan largo o corto debe ser el encadenado ] pero es recomendable Sue tenga en cuenta este consejo!

4!4!: Obtenedores <#etters= N Establecedores <2etters=

jQuery QsobrecargaR sus mOtodos( en otras palabras( el mOtodo para establecer un $alor posee el mismo nombre Sue el mOtodo para obtener un $alor! "uando un mOtodo es utili8ado para establecer un $alor( es llamado mOtodo establecedor <en inglOs setter=! En cambio( cuando un mOtodo es utili8ado para obtener <o leer= un $alor( es llamado obtenedor <en inglOs getter=!

El mOtodo M! n!html utili8ado como establecedor M<'h;'=!html<'hello Aorld'=Z El mOtodo html utili8ado como obtenedor M<'h;'=!html<=Z Los mOtodos establecedores de$uel$en un objeto jQuery( permitiendo continuar con la llamada de mBs mOtodos en la misma selecci'n( mientras Sue los mOtodos obtenedores de$uel$en el $alor por el cual se consult'( pero no permiten seguir llamando a mBs mOtodos en dicho $alor!

4!C "22( Estilos( N Dimensiones

jQuery incluye una manera %til de obtener y establecer propiedades "22 a los elementos!

Hota

Las propiedades "22 Sue incluyen como separador un gui'n del medio( en *a$a2cript deben ser trans ormadas a su estilo "amel"ase! )or ejemplo( cuando se la utili8a como propiedad de un mOtodo( el estilo "22 ont1si8e deberB ser expresado como ont2i8e! 2in embargo( esta regla no es aplicada cuando se pasa el nombre de la propiedad "22 al mOtodo M! n!css ] en este caso( los dos ormatos <en "amel"ase o con el gui'n del medio= uncionarBn!

Obtener propiedades "22 M<'h;'=!css<' ont2i8e'=Z ?? de$uel$e una cadena de caracteres como e;Lpxe M<'h;'=!css<' ont1si8e'=Z ?? tambiOn unciona Establecer propiedades "22 M<'h;'=!css<' ont2i8e'( ';55px'=Z ?? establece una propiedad indi$idual "22 M<'h;'=!css<` ' ont2i8e' 9 ';55px'( 'color' 9 'red' a=Z ?? establece m%ltiples propiedades "22 Hotar Sue el estilo del argumento utili8ado en la segunda lPnea del ejemplo ] es un objeto Sue contiene m%ltiples propiedades! Esta es una orma com%n de pasar m%ltiples argumentos a una unci'n( y muchos mOtodos establecedores de la biblioteca aceptan objetos para ijar $arias propiedades de una sola $e8!

& partir de la $ersi'n ;!F de la biblioteca( utili8ando M! n!css tambiOn es posible establecer $alores relati$os en las propiedades "22 de un elemento determinado9

Establecer $alores "22 relati$os M<'h;'=!css<` ' ont2i8e' 9 'T[;Dpx'( ?? suma ;Dpx al tamao original del elemento 'paddingTop' 9 'T[:5px' ?? suma :5px al padding superior original del elemento a=Z

4!C!; 6tili8ar "lases para &plicar Estilos "22

)ara obtener $alores de los estilos aplicados a un elemento( el mOtodo M! n!css es muy %til( sin embargo( su utili8aci'n como mOtodo establecedor se debe e$itar <ya Sue( para aplicar estilos a un elemento( se puede hacer directamente desde "22=! En su lugar( lo ideal( es escribir reglas "22 Sue se apliSuen a clases Sue describan los di erentes estados $isuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo Sue se desea mostrar!

Trabajar con clases $ar Mh; [ M<'h;'=Z

Mh;!add"lass<'big'=Z Mh;!remo$e"lass<'big'=Z Mh;!toggle"lass<'big'=Z

i <Mh;!has"lass<'big'== ` !!! a Las clases tambiOn pueden ser %tiles para guardar in ormaci'n del estado de un elemento( por ejemplo( para indicar Sue un elemento ue seleccionado!

4!C!: Dimensiones

jQuery o rece una $ariedad de mOtodos para obtener y modi icar $alores de dimensiones y posici'n de un elemento!

El c'digo mostrado en el ejemplo QMOtodos bBsicos sobre DimensionesR es solo un bre$e resumen de las uncionalidades relaciones a dimensiones en jQueryZ para un completo detalle puede consultar http9??api!jSuery!com?category?dimensions?!

MOtodos bBsicos sobre Dimensiones M<'h;'=!Aidth<'D5px'=Z ?? establece el ancho de todos los elementos ,; M<'h;'=!Aidth<=Z ?? obtiene el ancho del primer elemento ,;

M<'h;'=!height<'D5px'=Z ?? establece el alto de todos los elementos ,; M<'h;'=!height<=Z ?? obtiene el alto del primer elemento ,;

M<'h;'=!position<=Z

?? de$uel$e un objeto conteniendo

?? in ormaci'n sobre la posici'n ?? del primer elemento relati$o al ?? eo sete <posici'n= de su elemento padre

4!D &tributos

Los atributos de los elementos ,TML Sue con orman una aplicaci'n pueden contener in ormaci'n %til( por eso es importante poder establecer y obtener esa in ormaci'n!

El mOtodo M! n!attr act%a tanto como mOtodo establecedor como obtenedor! &demBs( al igual Sue el mOtodo M! n!css( cuando se lo utili8a como mOtodo establecedor( puede aceptar un conjunto de palabra cla$e1$alor o un objeto conteniendo mBs conjuntos!

Establecer atributos M<'a'=!attr<'hre '( 'allMy,re s&reThe2ameHoA!html'=Z M<'a'=!attr<` 'title' 9 'all titles are the same too'( 'hre ' 9 'somethingHeA!html' a=Z En el ejemplo( el objeto pasado como argumento estB escrito en $arias lPneas! "omo se explic' anteriormente( los espacios en blanco no importan en *a$a2cript( por lo cual( es libre de utili8arlos para hacer el c'digo mBs legible! En entornos de producci'n( se pueden utili8ar herramientas de mini icaci'n( los cuales Suitan los espacios en blanco <entre otras cosas= y comprimen el archi$o inal!

Obtener atributos

M<'a'=!attr<'hre '=Z ?? de$uel$e el atributo hre perteneciente ?? al primer elemento XaY del documento

4!F Recorrer el DOM

6na $e8 obtenida la selecci'n( es posible encontrar otros elementos utili8ando a la misma selecci'n!

En http9??api!jSuery!com?category?tra$ersing? puede encontrar una completa documentaci'n sobre los mOtodos de recorrido de DOM <en inglOs tra$ersing= Sue posee jQuery!

Hota

Debe ser cuidadoso en recorrer largas distancias en un documento ] recorridos complejos obligan Sue la estructura del documento sea siempre la misma( algo Sue es di Pcil de garanti8ar! 6no 1o dos1 pasos para el recorrido esta bien( pero generalmente hay Sue e$itar atra$esar desde un contenedor a otro!

Mo$erse a tra$Os del DOM utili8ando mOtodos de recorrido M<'h;'=!next<'p'=Z ?? seleccionar el inmediato y pr'ximo ?? elemento XpY con respecto a ,; M<'di$9$isible'=!parent<=Z ?? seleccionar el elemento contenedor

?? a un di$ $isible M<'inputcname[ irsthnamed'=!closest<' orm'=Z ?? seleccionar el elemento ?? X ormY mBs cercano a un input M<'^myList'=!children<=Z ?? seleccionar todos los elementos

?? hijos de ^myList M<'li!selected'=!siblings<=Z ?? seleccionar todos los items

?? hermanos del elemento XliY TambiOn es posible interactuar con la selecci'n utili8ando el mOtodo M! n!each! Dicho mOtodo interact%a con todos los elementos obtenidos en la selecci'n y ejecuta una unci'n por cada uno! La unci'n recibe como argumento el Pndice del elemento actual y al mismo elemento! De orma predeterminada( dentro de la unci'n( se puede hacer re erencia al elemento DOM a tra$Os de la declaraci'n this!

+nteractuar en una selecci'n M<'^myList li'=!each< unction<idx( el= ` console!log< 'El elemento ' T idx T 'contiene el siguiente ,TML9 ' T M<el=!html<= =Z a=Z

4!G Manipulaci'n de Elementos

6na $e8 reali8ada la selecci'n de los elementos Sue desea utili8ar( Qla di$ersi'n comien8aR! Es posible cambiar( mo$er( remo$er y duplicar elementos! TambiOn crear nue$os a tra$Os de una sintaxis simple!

La documentaci'n completa sobre los mOtodos de manipulaci'n puede encontrarla en la secci'n Manipulation9 http9??api!jSuery!com?category?manipulation?!

4!G!; Obtener y Establecer +n ormaci'n en Elementos

Existen muchas ormas por las cuales de puede modi icar un elemento! Entre las tareas mBs comunes estBn las de cambiar el ,TML interno o alg%n atributo del mismo! )ara este tipo de tareas( jQuery o rece mOtodos simples( uncionales en todos los na$egadores modernos!

+ncluso es posible obtener in ormaci'n sobre los elementos utili8ando los mismos mOtodos pero en su orma de mOtodo obtenedor!

Hota

Reali8ar cambios en los elementos( es un trabajo tri$ial( pero hay debe recordar Sue el cambio a ectarB a todos los elementos en la selecci'n( por lo Sue( si desea modi icar un s'lo elemento( tiene Sue estar seguro de especi icarlo en la selecci'n antes de llamar al mOtodo establecedor!

Hota

"uando los mOtodos act%an como obtenedores( por lo general( solamente trabajan con el primer elemento de la selecci'n! &demBs no de$uel$en un objeto jQuery( por lo cual no es posible encadenar mBs mOtodos en el mismo! 6na excepci'n es el mOtodo M! n!text( el cual permite obtener el texto de los elementos de la selecci'n! M! n!html Obtiene o establece el contenido ,TML de un elemento! M! n!text Obtiene o establece el contenido en texto del elementoZ en caso se pasarle como argumento c'digo ,TML( este es despojado! M! n!attr Obtiene o establece el $alor de un determinado atributo! M! n!Aidth Obtiene o establece el ancho en pixeles del primer elemento de la selecci'n como un entero! M! n!height Obtiene o establece el alto en pixeles del primer elemento de la selecci'n como un entero! M! n!position Obtiene un objeto con in ormaci'n sobre la posici'n del primer elemento de la selecci'n( relati$o al primer elemento padre posicionado! Este mOtodo es solo obtenedor!

M! n!$al Obtiene o establece el $alor <$alue= en elementos de ormularios!

"ambiar el ,TML de un elemento M<'^myDi$ p9 irst'= !html<'Hue$o XstrongYprimerX?strongY pBrra o'=Z

4!G!: Mo$er( "opiar y Remo$er Elementos

Existen $arias maneras para mo$er elementos a tra$Os del DOMZ las cuales se pueden separar en dos en oSues9 > Querer colocar el?los elementos seleccionados de orma relati$a a otro elemento

> Querer colocar un elemento relati$o a el?los elementos seleccionados!

)or ejemplo( jQuery pro$ee los mOtodos M! n!insert& ter y M! n!a ter! El mOtodo M! n!insert& ter coloca a el?los elementos seleccionados despuOs del elemento Sue se haya pasado como argumentoZ mientras Sue el mOtodo M! n!a ter coloca al elemento pasado como argumento despuOs del elemento seleccionado! Otros mOtodos tambiOn siguen este patr'n9 M! n!insert0e ore y M! n!be oreZ M! n!appendTo y M! n!appendZ y M! n!prependTo y M! n!prepend!

La utili8aci'n de uno u otro mOtodo dependerB de los elementos Sue tenga seleccionados y el tipo de re erencia Sue se Suiera guardar con respecto al elemento Sue se esta mo$iendo!

Mo$er elementos utili8ando di erentes en oSues ?? hacer Sue el primer item de la lista sea el %ltimo $ar Mli [ M<'^myList li9 irst'=!appendTo<'^myList'=Z

?? otro en oSue para el mismo problema M<'^myList'=!append<M<'^myList li9 irst'==Z

?? debe tener en cuenta Sue no hay orma de acceder a la ?? lista de items Sue se ha mo$ido( ya Sue de$uel$e ?? la lista en sP

4!G!:!; "lonar Elementos

"uando se utili8a un mOtodo como M! n!appendTo( lo Sue se estB haciendo es mo$er al elementoZ pero a $eces en lugar de eso( se necesita mo$er un duplicado del mismo elemento! En este caso( es posible utili8ar el mOtodo M! n!clone!

Obtener una copia del elemento ?? copiar el primer elemento de la lista y mo$erlo al inal de la misma M<'^myList li9 irst'=!clone<=!appendTo<'^myList'=Z

Hota

2i se necesita copiar in ormaci'n y e$entos relacionados al elemento( se debe pasar true como argumento de M! n!clone!

4!G!:!: Remo$er elementos

Existen dos ormas de remo$er elementos de una pBgina9 6tili8ando M! n!remo$e o M! n!detach! "uando desee remo$er de orma permanente al elemento( utili8e el mOtodo M! n!remo$e! )or otro lado( el mOtodo M! n!detach tambiOn remue$e el elemento( pero

mantiene la in ormaci'n y e$entos asociados al mismo( siendo %til en el caso Sue necesite reinsertar el elemento en el documento!

Hota

El mOtodo M! n!detach es muy %til cuando se esta manipulando de orma se$era un elemento( ya Sue es posible eliminar al elemento( trabajarlo en el c'digo y luego restaurarlo en la pBgina nue$amente! Esta orma tiene como bene icio no tocar el DOM mientras se estB modi icando la in ormaci'n y e$entos del elemento!

)or otro lado( si se desea mantener al elemento pero se necesita eliminar su contenido( es posible utili8a el mOtodo M! n!empty( el cual Q$aciarBR el contenido ,TML del elemento!

4!G!4 "rear Hue$os Elementos

jQuery pro$ee una orma Bcil y elegante para crear nue$os elementos a tra$Os del mismo mOtodo M<= Sue se utili8a para reali8ar selecciones!

"rear nue$os elementos M<'XpY6n nue$o pBrra oX?pY'=Z M<'Xli class[eneAeYnue$o item de la listaX?liY'=Z "rear un nue$o elemento con atributos utili8ando un objeto M<'Xa?Y'( ` html 9 '6n XstrongYnue$oX?strongY enlace'( 'class' 9 'neA'( hre 9 ' oo!html' a=Z

Hote Sue en el objeto Sue se pasa como argumento( la propiedad class estB entre comillas( mientras Sue la propiedad hre y html no lo estBn! )or lo general( los nombres de propiedades no deben estar entre comillas( excepto en el caso Sue se utilice como nombre una palabra reser$ada <como es el caso de class=!

"uando se crea un elemento( Oste no es aadido inmediatamente a la pBgina( sino Sue se debe hacerlo en conjunto con un mOtodo!

"rear un nue$o elemento en la pBgina $ar MmyHeAElement [ M<'XpYHue$o elementoX?pY'=Z MmyHeAElement!appendTo<'^content'=Z

MmyHeAElement!insert& ter<'ul9last'=Z ?? eliminarB al elemento XpY ?? existente en ^content M<'ul'=!last<=!a ter<MmyHeAElement!clone<==Z ?? clonar al elemento XpY ?? para tener las dos $ersiones Estrictamente hablando( no es necesario guardar al elemento creado en una $ariable ] es posible llamar al mOtodo para aadir el elemento directamente despuOs de M<=! 2in embargo( la mayorPa de las $eces se desearB hacer re erencia al elemento aadido( por lo cual( si se guarda en una $ariable no es necesario seleccionarlo despuOs!

"rear y aadir al mismo tiempo un elemento a la pBgina M<'ul'=!append<'XliYitem de la listaX?liY'=Z

Hota

La sintaxis para aadir nue$os elementos a la pBgina es muy Bcil de utili8ar( pero es tentador ol$idar Sue hay un costo enorme de rendimiento al agregar elementos al DOM de orma repetida! 2i esta aadiendo muchos elementos al mismo contenedor( en lugar de aadir cada elemento uno por $e8( lo mejor es concatenar todo el ,TML en una %nica cadena de caracteres para luego anexarla al contenedor! 6na posible soluci'n es utili8ar un $ector Sue posea todos los elementos( luego reunirlos utili8ando join y inalmente anexarla!

$ar my+tems [ cd( MmyList [ M<'^myList'=Z

or <$ar i[5Z iX;55Z iTT= ` my+tems!push<'XliYitem ' T i T 'X?liY'=Z a

MmyList!append<my+tems!join<''==Z

4!G!C Manipulaci'n de &tributos

Las capacidades para la manipulaci'n de atributos Sue o rece la biblioteca son extensos! La reali8aci'n de cambios bBsicos son simples( sin embargo el mOtodo M! n!attr permite manipulaciones mBs complejas!

Manipular un simple atributo M<'^myDi$ a9 irst'=!attr<'hre '( 'neADestination!html'=Z Manipular m%ltiples atributos M<'^myDi$ a9 irst'=!attr<` hre 9 'neADestination!html'( rel 9 'super1special' a=Z 6tili8ar una unci'n para determinar el $alor del nue$o atributo M<'^myDi$ a9 irst'=!attr<` rel 9 'super1special'( hre 9 unction<idx( hre = ` return '?neA?' T hre Z a a=Z

M<'^myDi$ a9 irst'=!attr<'hre '( unction<idx( hre = ` return '?neA?' T hre Z a=Z

4!I Ejercicios

4!I!; 2elecciones

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?sandbox!js o trabaje directamente con Firebug para cumplir los siguientes puntos9 ;! 2eleccionar todos los elementos di$ Sue poseen la clase QmoduleR!

:! Especi icar tres selecciones Sue puedan seleccionar el tercer Ptem de la lista desordenada ^myList! ."uBl es el mejor para utili8ar/ .)orSuO/

4! 2eleccionar el elemento label del elemento input utili8ando un selector de atributo!

C! &$eriguar cuantos elementos en la pBgina estBn ocultos <ayuda9 !length=

D! &$eriguar cuantas imBgenes en la pBgina poseen el atributo alt!

F! 2eleccionar todas las ilas impares del cuerpo de la tabla!

4!I!: Recorrer el DOM

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?sandbox!js o trabaje directamente con Firebug para cumplir los siguientes puntos9 ;! 2eleccionar todas las imBgenes en la pBginaZ registrar en la consola el atributo alt de cada imagen!

:! 2eleccionar el elemento input( luego dirigirse hacia el ormulario y aadirle una clase al mismo!

4! 2eleccionar el Ptem Sue posee la clase QcurrentR dentro de la lista ^myList y remo$er dicha clase en el elementoZ luego aadir la clase QcurrentR al siguiente Ptem de la lista!

C! 2eleccionar el elemento select dentro de ^specialsZ luego dirigirse hacia el bot'n submit!

D! 2eleccionar el primer Ptem de la lista en el elemento ^slideshoAZ aadirle la clase QcurrentR al mismo y luego aadir la clase QdisabledR a los elementos hermanos!

4!I!4 Manipulaci'n

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?sandbox!js o trabaje directamente con Firebug para cumplir los siguientes puntos9 ;!&adir D nue$os Ptems al inal de la lista desordenada ^myList! &yuda9 or <$ar i [ 5Z iXDZ iTT= ` !!! a :! Remo$er los Ptems impares de la lista!

4! &adir otro elemento h: y otro pBrra o al %ltimo di$!module!

C! &adir otra opci'n al elemento selectZ darle a la opci'n aadida el $alor QKednesdayR!

D! &adir un nue$o di$!module a la pBgina despuOs del %ltimoZ luego aadir una copia de una de las imBgenes existentes dentro del nue$o di$!

C El n%cleo de jQuery

C!; M $s M<=

,asta ahora( se ha tratado completamente con mOtodos Sue se llaman desde el objeto jQuery! )or ejemplo9

M<'h;'=!remo$e<=Z Dichos mOtodos son parte del espacio de nombres <en inglOs namespace= M! n( o del prototipo <en inglOs prototype= de jQuery( y son considerados como mOtodos del objeto jQuery!

2in embargo( existen mOtodos Sue son parte del espacio de nombres de M y se consideran como mOtodos del n%cleo de jQuery!

Estas distinciones pueden ser bastantes con usas para usuarios nue$os! )ara e$itar la con usi'n( debe recordar estos dos puntos9 > Los mOtodos utili8ados en selecciones se encuentran dentro del espacio de nombres M! n( y automBticamente reciben y de$uel$en una selecci'n en sP!

> MOtodos en el espacio de nombres M son generalmente mOtodos para di erentes utilidades( no trabajan con selecciones( no se les pasa ning%n argumento y el $alor Sue de$uel$en puede $ariar!

Existen algunos casos en donde mOtodos del objeto y del n%cleo poseen los mismos nombres( como sucede con M!each y M! n!each! En estos casos( debe ser cuidadoso de leer bien la documentaci'n para saber Sue objeto utili8ar correctamente!

C!: MOtodos 6tilitarios

jQuery o rece $arios mOtodos utilitarios dentro del espacio de nombres M! Estos mOtodos son de gran ayuda para lle$ar a cabo tareas rutinarias de programaci'n! & continuaci'n se muestran algunos ejemplos( para una completa documentaci'n sobre ellos( $isite http9??api!jSuery!com?category?utilities?! M!trim Remue$e los espacios en blanco del principio y inal! M!trim<' $arios espacios en blanco '=Z

?? de$uel$e '$arios espacios en blanco' M!each +nteract%a en $ectores y objetos! M!each<c ' oo'( 'bar'( 'ba8' d( unction<idx( $al= ` console!log<'elemento ' T idx T 'es ' T $al=Z a=Z

M!each<` oo 9 'bar'( ba8 9 'bim' a( unction<3( $= ` console!log<3 T ' 9 ' T $=Z a=Z

Hota

"omo se dijo antes( existe un mOtodo llamado M! n!each( el cual interact%a en una selecci'n de elementos! M!in&rray De$uel$e el Pndice de un $alor en un $ector( o 1; si el $alor no se encuentra en el $ector! $ar my&rray [ c ;( :( 4( D dZ

i <M!in&rray<C( my&rray= b[[ 1;= ` console!log<'$alor encontrado'=Z a M!extend "ambia la propiedades del primer objeto utili8ando las propiedades de los subsecuentes objetos! $ar irstObject [ ` oo 9 'bar'( a 9 'b' aZ $ar secondObject [ ` oo 9 'ba8' aZ

$ar neAObject [ M!extend< irstObject( secondObject=Z console!log< irstObject! oo=Z ?? 'ba8' console!log<neAObject! oo=Z ?? 'ba8' 2i no se desea cambiar las propiedades de ninguno de los objetos Sue se utili8an en M!extend( se debe incluir un objeto $acPo como primer argumento! $ar irstObject [ ` oo 9 'bar'( a 9 'b' aZ $ar secondObject [ ` oo 9 'ba8' aZ

$ar neAObject [ M!extend<`a( irstObject( secondObject=Z console!log< irstObject! oo=Z ?? 'bar' console!log<neAObject! oo=Z ?? 'ba8' M!proxy De$uel$e una unci'n Sue siempre se ejecutarB en el alcance <scope= pro$isto ] en otras palabras( establece el signi icado de this <incluido dentro de la unci'n= como el segundo argumento! $ar myFunction [ unction<= ` console!log<this=Z aZ $ar myObject [ ` oo 9 'bar' aZ

myFunction<=Z ?? de$uel$e el objeto AindoA

$ar my)roxyFunction [ M!proxy<myFunction( myObject=Z my)roxyFunction<=Z ?? de$uel$e el objeto myObject 2i se posee un objeto con mOtodos( es posible pasar dicho objeto y el nombre de un mOtodo para de$ol$er una unci'n Sue siempre se ejecuta en el alcance de dicho objeto! $ar myObject [ ` myFn 9 unction<= ` console!log<this=Z a aZ

M<'^ oo'=!clic3<myObject!myFn=Z ?? registra el elemento DOM ^ oo M<'^ oo'=!clic3<M!proxy<myObject( 'myFn'==Z ?? registra myObject

C!4 "omprobaci'n de Tipos

"omo se mencion' en el capPtulo Q"onceptos 0Bsicos de *a$a2criptR( jQuery o rece $arios mOtodos %tiles para determinar el tipo de un $alor especP ico!

"omprobar el tipo de un determinado $alor $ar myJalue [ c;( :( 4dZ

?? 6tili8ar el operador typeo de *a$a2cript para comprobar tipos primiti$os typeo myJalue [[ 'string'Z ?? also < alse= typeo myJalue [[ 'number'Z ?? also < alse= typeo myJalue [[ 'unde ined'Z ?? also < alse= typeo myJalue [[ 'boolean'Z ?? also < alse=

?? 6tili8ar el operador de igualdad estricta para comprobar $alores nulos <null= myJalue [[[ nullZ ?? also < alse=

?? 6tili8ar los mOtodos jQuery para comprobar tipos no primiti$os jQuery!isFunction<myJalue=Z ?? also < alse= jQuery!is)lainObject<myJalue=Z ?? also < alse= jQuery!is&rray<myJalue=Z ?? $erdadero <true= jQuery!isHumeric<;F=Z ?? $erdadero <true=! Ho disponible en $ersiones in eriores a jQuery ;!G

C!C El MOtodo Data

& menudo encontrarB Sue existe in ormaci'n acerca de un elemento Sue necesita guardar! En *a$a2cript es posible hacerlo aadiendo propiedades al DOM del elemento( pero esta prBctica conlle$a en rentarse a pOrdidas de memoria <en inglOs memory lea3s= en algunos na$egadores! jQuery o rece una manera sencilla para poder guardar in ormaci'n relacionada a un elemento( y la misma biblioteca se ocupa de manejar los problemas Sue pueden surgir por alta de memoria!

#uardar y recuperar in ormaci'n relacionada a un elemento M<'^myDi$'=!data<'3eyHame'( ` oo 9 'bar' a=Z

M<'^myDi$'=!data<'3eyHame'=Z ?? ` oo 9 'bar' a & tra$Os del mOtodo M! n!data es posible guardar cualSuier tipo de in ormaci'n sobre un elemento! Es di Pcil exagerar la importancia de este concepto cuando se estB desarrollando una aplicaci'n compleja!

)or ejemplo( si desea establecer una relaci'n entre el Ptem de una lista y el di$ Sue hay dentro de este Ptem( es posible hacerlo cada $e8 Sue se interact%a con el Ptem( pero una mejor soluci'n es hacerlo una sola $e8( guardando un puntero al di$ utili8ando el mOtodo M! n!data9

Establecer una relaci'n entre elementos utili8ando el mOtodo M! n!data M<'^myList li'=!each< unction<= ` $ar Mli [ M<this=( Mdi$ [ Mli! ind<'di$!content'=Z Mli!data<'contentDi$'( Mdi$=Z a=Z

?? luego( no se debe $ol$er a buscar al di$Z ?? es posible leerlo desde la in ormaci'n asociada al item de la lista $ar M irstLi [ M<'^myList li9 irst'=Z M irstLi!data<'contentDi$'=!html<'nue$o contenido'=Z &demBs es posible pasarle al mOtodo un objeto conteniendo uno o mBs pares de conjuntos palabra cla$e1$alor!

& partir de la $ersi'n ;!D de la biblioteca( jQuery permite utili8ar al mOtodo M! n!data para obtener la in ormaci'n asociada a un elemento Sue posea el atributo ,TMLD data1_9

Elementos con el atributo data1_ Xa id[' oo' data1 oo['ba8' hre ['^'YFooX?aY

Xa id[' oobar' data1 oo1bar[' ol' hre ['^'YFoo 0arX?aY Obtener los $alores asociados a los atributos data1_ con M! n!data

?? obtiene el $alor del atributo data1 oo ?? utili8ando el mOtodo M! n!data console!log<M<'^ oo'=!data<' oo'==Z ?? registra 'ba8'

?? obtiene el $alor del segundo elemento console!log<M<'^ oobar'=!data<' oo0ar'==Z ?? registra ' ol'

Hota

& partir de la $ersi'n ;!F de la biblioteca( para obtener el $alor del atributo data1 oo1bar del segundo elemento( el argumento en M! n!data se debe pasar en estilo "amel"ase!

Hota

)ara mBs in ormaci'n sobre el atributo ,TMLD data1_ $isite http9??AAA!A4!org?TR?htmlD?global1attributes!html^embedding1custom1non1$isible1data1 Aith1the1data1attributes!

C!D Detecci'n de Ha$egadores y "aracterPsticas

MBs allB Sue jQuery elimine la mayorPa de las peculiaridades de *a$a2cript entre cada na$egador( existen ocasiones en Sue se necesita ejecutar c'digo en un na$egador especP ico!

)ara este tipo de situaciones( jQuery o rece el objeto M!support y M!broAser <este %ltimo en desuso=! 6na completa documentaci'n sobre estos objetos puede encontrarla en http9??api!jSuery!com?jQuery!support? y http9??api!jSuery!com?jQuery!broAser?

El objeti$o de M!support es determinar SuO caracterPsticas soporta el na$egador Aeb!

El objeto M!broAser permite detectar el tipo de na$egador y su $ersi'n! Dicho objeto estB en desuso <aunSue en el corto pla8o no estB plani icada su eliminaci'n del n%cleo de la biblioteca= y se recomienda utili8ar al objeto M!support para estos prop'sitos!

C!F E$itar "on lictos con Otras 0ibliotecas *a$a2cript

2i esta utili8ando jQuery en conjunto con otras bibliotecas *a$a2cript( las cuales tambiOn utili8an la $ariable M( pueden llegar a ocurrir una serie de errores! )ara poder solucionarlos( es necesario poner a jQuery en su modo Qno1con lictoR! Esto se debe reali8ar inmediatamente despuOs Sue jQuery se cargue en la pBgina y antes del c'digo Sue se $a a ejecutar!

"uando se pone a jQuery en modo Qno1con lictoR( la biblioteca o rece la opci'n de asignar un nombre para reempla8ar a la $ariable M!

)oner a jQuery en modo no1con licto Xscript src[eprototype!jseYX?scriptY ?? la biblioteca prototype

?? tambiOn utili8a M Xscript src[ejSuery!jseYX?scriptY ?? se carga jSuery

?? en la pBgina XscriptY$ar Mj [ jQuery!no"on lict<=ZX?scriptY ?? se iniciali8a ?? el modo eno1con lictoe TambiOn es posible seguir utili8ando M conteniendo el c'digo en una unci'n an'nima autoejecutable! fste es un patr'n estBndar para la creaci'n de extensiones para la biblioteca( ya Sue M Sueda encerrada dentro del alcance de la misma unci'n an'nima!

6tili8ar M dentro de una unci'n an'nima autoejecutable Xscript src[eprototype!jseYX?scriptY Xscript src[ejSuery!jseYX?scriptY XscriptY

jQuery!no"on lict<=Z

< unction<M= ` ?? el c'digo $a aSuP( pudiendo utili8ar M a=<jQuery=Z X?scriptY

D E$entos

D!; +ntroducci'n

jQuery pro$ee mOtodos para asociar controladores de e$entos <en inglOs e$ent handlers= a selectores! "uando un e$ento ocurre( la unci'n pro$ista es ejecutada! Dentro de la unci'n( la palabra cla$e this hace re erencia al elemento en Sue el e$ento ocurre!

)ara mBs detalles sobre los e$entos en jQuery( puede consultar http9??api!jSuery!com?category?e$ents?!

La unci'n del controlador de e$entos puede recibir un objeto! Este objeto puede ser utili8ado para determinar la naturale8a del e$ento o( por ejemplo( pre$enir el comportamiento predeterminado de Oste! )ara mBs detalles sobre el objeto del e$ento( $isite http9??api!jSuery!com?category?e$ents?e$ent1object?!

D!: Jincular E$entos a Elementos

jQuery o rece mOtodos para la mayorPa de los e$entos ] entre ellos M! n!clic3( M! n! ocus( M! n!blur( M! n!change( etc! Estos %ltimos son ormas reducidas del mOtodo M! n!on de jQuery <M! n!bind en $ersiones anteriores a jQuery ;!G=! El mOtodo M! n!on es %til para $incular <en inglOs binding= la misma unci'n de controlador a m%ltiples e$entos( para cuando se desea

pro$eer in ormaci'n al controlador de e$ento( cuando se estB trabajando con e$entos personali8ados o cuando se desea pasar un objeto a m%ltiples e$entos y controladores!

Jincular un e$ento utili8ando un mOtodo reducido M<'p'=!clic3< unction<= ` console!log<'clic3'=Z a=Z Jincular un e$ento utili8ando el mOtodo M! n!on M<'p'=!on<'clic3'( unction<= ` console!log<'clic3'=Z a=Z Jincular un e$ento utili8ando el mOtodo M! n!on con in ormaci'n asociada M<'input'=!on< 'clic3 blur'( ?? es posible $incular m%ltiples e$entos al elemento ` oo 9 'bar' a( ?? se debe pasar la in ormaci'n asociada como argumento

unction<e$entObject= ` console!log<e$entObject!type( e$entObject!data=Z ?? registra el tipo de e$ento y la in ormaci'n asociada ` oo 9 'bar' a a =Z

D!:!; Jincular E$entos para Ejecutar una $e8

& $eces puede necesitar Sue un controlador particular se ejecute solo una $e8 ] y despuOs de eso( necesite Sue ninguno mBs se ejecute( o Sue se ejecute otro di erente! )ara este prop'sito jQuery pro$ee el mOtodo M! n!one!

"ambiar controladores utili8ando el mOtodo M! n!one

M<'p'=!one<'clic3'( unction<= ` console!log<'2e clic3e' al elemento por primera $e8'=Z M<this=!clic3< unction<= ` console!log<'2e ha clic3eado nue$amente'=Z a=Z a=Z El mOtodo M! n!one es %til para situaciones en Sue necesita ejecutar cierto c'digo la primera $e8 Sue ocurre un e$ento en un elemento( pero no en los e$entos sucesi$os!

D!:!: Des$incular E$entos

)ara des$incular <en ingles unbind= un controlador de e$ento( puede utili8ar el mOtodo M! n!o pasBndole el tipo de e$ento a desconectar! 2i se pas' como adjunto al e$ento una unci'n nombrada( es posible aislar la desconexi'n de dicha unci'n pasBndola como segundo argumento!

Des$incular todos los controladores del e$ento clic3 en una selecci'n M<'p'=!o <'clic3'=Z Des$incular un controlador particular del e$ento clic3 $ar oo [ unction<= ` console!log<' oo'=Z aZ $ar bar [ unction<= ` console!log<'bar'=Z aZ

M<'p'=!on<'clic3'( oo=!on<'clic3'( bar=Z M<'p'=!o <'clic3'( bar=Z ?? oo esta atado a%n al e$ento clic3

D!:!4 Espacios de Hombres para E$entos

"uando se esta desarrollando aplicaciones complejas o extensiones de jQuery( puede ser %til utili8ar espacios de nombres para los e$entos( y de esta orma e$itar Sue se des$inculen e$entos cuando no lo desea!

&signar espacios de nombres a e$entos M<'p'=!on<'clic3!myHamespace'( unction<= ` ?_ !!! _? a=Z M<'p'=!o <'clic3!myHamespace'=Z M<'p'=!o <'!myHamespace'=Z ?? des$incula todos los e$entos con ?? el espacio de nombre 'myHamespace'

D!:!C Jinculaci'n de M%ltiples E$entos

Muy a menudo( elementos en una aplicaci'n estarBn $inculados a m%ltiples e$entos( cada uno con una unci'n di erente! En estos casos( es posible pasar un objeto dentro de M! n!on con uno o mBs pares de nombres cla$es?$alores! "ada cla$e serB el nombre del e$ento mientras Sue cada $alor serB la unci'n a ejecutar cuando ocurra el e$ento!

Jincular m%ltiples e$entos a un elemento M<'p'=!on<` 'clic3'9 unction<= ` console!log<'clic3eado'=Z a( 'mouseo$er'9 unction<= ` console!log<'sobrepasado'=Z a a=Z

D!4 El Objeto del E$ento

"omo se menciona en la introducci'n( la unci'n controladora de e$entos recibe un objeto del e$ento( el cual contiene $arios mOtodos y propiedades! El objeto es com%nmente utili8ado para pre$enir la acci'n predeterminada del e$ento a tra$Os del mOtodo pre$entDe ault! 2in embargo( tambiOn contiene $arias propiedades y mOtodos %tiles9 pageV( pageg

La posici'n del puntero del rat'n en el momento Sue el e$ento ocurri'( relati$o a las 8onas superiores e i8Suierda de la pBgina! type El tipo de e$ento <por ejemplo Qclic3R=! Ahich El bot'n o tecla presionada! data &lguna in ormaci'n pasada cuando el e$ento es ejecutado! target El elemento DOM Sue iniciali8' el e$ento! pre$entDe ault<= "ancela la acci'n predeterminada del e$ento <por ejemplo9 seguir un enlace=! stop)ropagation<= Detiene la propagaci'n del e$ento sobre otros elementos!

)or otro lado( la unci'n controladora tambiOn tiene acceso al elemento DOM Sue iniciali8' el e$ento a tra$Os de la palabra cla$e this! )ara con$ertir a dicho elemento DOM en un objeto jQuery <y poder utili8ar los mOtodos de la biblioteca= es necesario escribir M<this=( como se muestra a continuaci'n9 $ar Mthis [ M<this=Z "ancelar Sue al hacer clic3 en un enlace( Oste se siga M<'a'=!clic3< unction<e= ` $ar Mthis [ M<this=Z i <Mthis!attr<'hre '=!match<'e$il'== ` e!pre$entDe ault<=Z Mthis!add"lass<'e$il'=Z a a=Z

D!C Ejecuci'n automBtica de "ontroladores de E$entos

& tra$Os del mOtodo M! n!trigger( jQuery pro$ee una manera de disparar controladores de e$entos sobre alg%n elemento sin reSuerir la acci'n del usuario! 2i bien este mOtodo tiene sus usos( no deberPa ser utili8ado para simplemente llamar a una unci'n Sue pueda ser ejecutada con un clic3 del usuario! En su lugar( deberPa guardar la unci'n Sue se necesita llamar en una $ariable( y luego pasar el nombre de la $ariable cuando reali8a el $inculo <binding=! De esta orma( podrB llamar a la unci'n cuando lo desee en lugar de ejecutar M! n!trigger!

Disparar un controlador de e$entos de la orma correcta $ar oo [ unction<e= ` i <e= ` console!log<e=Z a else ` console!log<'esta ejecucci'n no pro$ino desde un e$ento'=Z a aZ

M<'p'=!clic3< oo=Z

oo<=Z ?? en lugar de reali8ar M<'p'=!trigger<'clic3'=

D!D +ncrementar el Rendimiento con la Delegaci'n de E$entos

"uando trabaje con jQuery( recuentemente aadirB nue$os elementos a la pBgina( y cuando lo haga( necesitarB $incular e$entos a dichos elementos! En lugar de repetir la tarea cada $e8 Sue se aade un elemento( es posible utili8ar la delegaci'n de e$entos para hacerlo! "on ella( podrB enla8ar un e$ento a un elemento contenedor( y luego( cuando el e$ento ocurra( podrB $er en Sue elemento sucede!

La delegaci'n de e$entos posee algunos bene icios( incluso si no se tiene pensando aadir mBs elementos a la pBgina! El tiempo reSuerido para enla8ar controladores de e$entos a cientos de elementos no es un trabajo tri$ialZ si posee un gran conjunto de elementos( deberPa considerar utili8ar la delegaci'n de e$entos a un elemento contenedor!

Hota

& partir de la $ersi'n ;!C!:( se introdujo M! n!delegate( sin embargo a partir de la $ersi'n ;!G es pre erible utili8ar el e$ento M! n!on para la delegaci'n de e$entos!

Delegar un e$ento utili8ando M! n!on M<'^my6norderedList'=!on<'clic3'( 'li'( unction<e= ` $ar MmyList+tem [ M<this=Z ?? !!! a=Z Delegar un e$ento utili8ando M! n!delegate M<'^my6norderedList'=!delegate<'li'( 'clic3'( unction<e= ` $ar MmyList+tem [ M<this=Z ?? !!! a=Z

D!D!; Des$incular E$entos Delegados

2i necesita remo$er e$entos delegados( no puede hacerlo simplemente des$inculBndolos! )ara eso( utilice el mOtodo M! n!o para e$entos conectados con M! n!on( y M! n!undelegate para e$entos conectados con M! n!delegate! &l igual Sue cuando se reali8a un $inculo( opcionalmente( se puede pasar el nombre de una unci'n $inculada!

Des$incular e$entos delegados

M<'^my6norderedList'=!o <'clic3'( 'li'=Z M<'^my6norderedList'=!undelegate<'li'( 'clic3'=Z

D!F Funciones &uxiliares de E$entos

jQuery o rece dos unciones auxiliares para el trabajo con e$entos9

D!F!; M! n!ho$er

El mOtodo M! n!ho$er permite pasar una o dos unciones Sue se ejecutarBn cuando los e$entos mouseenter y mouselea$e ocurran en el elemento seleccionado! 2i se pasa una sola unci'n( estB serB ejecutada en ambos e$entosZ en cambio si se pasan dos( la primera serB ejecutada cuando ocurra el e$ento mouseenter( mientras Sue la segunda serB ejecutada cuando ocurra mouselea$e!

Hota

& partir de la $ersi'n ;!C de jQuery( el mOtodo reSuiere obligatoriamente dos unciones!

La unci'n auxiliar ho$er M<'^menu li'=!ho$er< unction<= ` M<this=!toggle"lass<'ho$er'=Z a=Z

D!F!: M! n!toggle

&l igual Sue el mOtodo anterior( M! n!toggle recibe dos o mBs uncionesZ cada $e8 Sue un e$ento ocurre( la unci'n siguiente en la lista se ejecutarB! #eneralmente( M! n!toggle es utili8ada con solo dos unciones! En caso Sue utili8a mBs de dos unciones( tenga cuidado( ya Sue puede ser di icultar la depuraci'n del c'digo!

La unci'n auxiliar toggle M<'p!expander'=!toggle< unction<= ` M<this=!pre$<=!add"lass<'open'=Z a( unction<= ` M<this=!pre$<=!remo$e"lass<'open'=Z a =Z

D!G Ejercicios

D!G!; "rear una Q2ugerenciaR para una "aja de +ngreso de Texto

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejericio utili8ando el archi$o ?ejercicios?js?input,int!js o trabaje directamente con Firebug! La tarea a reali8ar es utili8ar el texto del elemento label y aplicar una QsugerenciaR en la caja de ingreso de texto! Los pasos ha seguir son los siguientes9 ;! Establecer el $alor del elemento input igual al $alor del elemento labelZ

:! &adir la clase QhintR al elemento inputZ

4! Remo$er el elemento labelZ

C! Jincular un e$ento ocus en el input para remo$er el texto de sugerencia y la clase QhintRZ

D! Jincular un e$ento blur en el input para restaurar el texto de sugerencia y la clase QhintR en caso Sue no se haya ingresado alg%n texto!

.QuO otras consideraciones debe considerar si se desea aplicar esta uncionalidad a un sitio real/

D!G!: &adir una Ha$egaci'n por )estaas

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejericio utili8ando el archi$o ?ejercicios?js?tabs!js o trabaje directamente con Firebug! La tarea a reali8ar es crear una na$egaci'n por pestaas para los dos elementos di$!module! Los pasos ha seguir son los siguientes9 ;! Ocultar todos los elementos di$!moduleZ

:! "rear una lista desordenada antes del primer di$!module para utili8ar como pestaasZ

4!+nteractuar con cada di$ utili8ando M! n!each! )or cada uno( utili8ar el texto del elemento h: como el texto para el Ptem de la lista desordenadaZ C!

Jincular un e$ento clic3 a cada Ptem de la lista de orma Sue9 @ Muestre el di$ correspondiente y oculte el otroZ

@ &ada la clase QcurrentR al Ptem seleccionadoZ

@ Remue$a la clase QcurrentR del otro Ptem de la listaZ

D! Finalmente( mostrar la primera pestaa!

F E ectos

F!; +ntroducci'n

"on jQuery( agregar e ectos a una pBgina es muy Bcil! Estos e ectos poseen una con iguraci'n predeterminada pero tambiOn es posible pro$eerles parBmetros personali8ados! &demBs es posible crear animaciones particulares estableciendo $alores de propiedades "22!

)ara una completa documentaci'n sobre los di erentes tipos de e ectos puede $isitar la secci'n e ects9 http9??api!jSuery!com?category?e ects?!

F!: E ectos +ncorporados en la 0iblioteca

Los e ectos mBs utili8ado ya $ienen incorporados dentro de la biblioteca en orma de mOtodos9 M! n!shoA Muestra el elemento seleccionado! M! n!hide Oculta el elemento seleccionado! M! n! ade+n De orma animada( cambia la opacidad del elemento seleccionado al ;55i! M! n! adeOut De orma animada( cambia la opacidad del elemento seleccionado al 5 M! n!slideDoAn Muestra el elemento seleccionado con un mo$imiento de desli8amiento $ertical! M! n!slide6p Oculta el elemento seleccionado con un mo$imiento de desli8amiento $ertical! M! n!slideToggle Muestra o oculta el elemento seleccionado con un mo$imiento de desli8amiento $ertical( dependiendo si actualmente el elemento estB $isible o no!

6so bBsico de un e ecto incorporado M<'h;'=!shoA<=Z

F!:!; "ambiar la Duraci'n de los E ectos

"on la excepci'n de M! n!shoA y M! n!hide( todos los mOtodos tienen una duraci'n predeterminada de la animaci'n en C55ms! Este $alor es posible cambiarlo!

"on igurar la duraci'n de un e ecto

M<'h;'=! ade+n<455=Z

?? des$anecimiento en 455ms

M<'h;'=! adeOut<'sloA'=Z ?? utili8ar una de inici'n de $elocidad interna

F!:!;!; jQuery! x!speeds

jQuery posee un objeto en jQuery! x!speeds el cual contiene la $elocidad predeterminada para la duraci'n de un e ecto( asP como tambiOn los $alores para las de iniciones QsloAR y Q astR! speeds9 ` sloA9 F55( ast9 :55( ?? $elocidad predeterminada hde ault9 C55 a )or lo tanto( es posible sobrescribir o aadir nue$os $alores al objeto! )or ejemplo( puede Sue Suiera cambiar el $alor predeterminado del e ecto o aadir una $elocidad personali8ada!

&adir $elocidades personali8adas a jQuery! x!speeds jQuery! x!speeds!muyRapido [ ;55Z jQuery! x!speeds!muyLento [ :555Z

F!:!: Reali8ar una &cci'n "uando un E ecto ue Ejecutado

& menudo( SuerrB ejecutar una acci'n una $e8 Sue la animaci'n haya terminado ] ya Sue si ejecuta la acci'n antes Sue la animaci'n haya acabado( puede llegar a alterar la calidad del e ecto o a ectar a los elementos Sue orman parte de la misma! cDe inici'n9 Las unciones de de$oluci'n de llamada <en inglOs callbac3 unctions= pro$een una orma para ejecutar c'digo una $e8 Sue un e$ento haya terminado!d En este caso( el e$ento Sue responderB a la unci'n serB la conclusi'n de la animaci'n! Dentro de la unci'n de de$oluci'n( la palabra cla$e this hace re erencia al elemento en donde el e ecto ue ejecutado y al igual Sue sucede con los e$entos( es posible trans ormarlo a un objeto jQuery utili8ando M<this=!

Ejecutar cierto c'digo cuando una animaci'n haya concluido M<'di$!old'=! adeOut<455( unction<= ` M<this=!remo$e<=Z a=Z Hote Sue si la selecci'n no retorna ning%n elemento( la unci'n nunca se ejecutarB! Este problema lo puede resol$er comprobando si la selecci'n de$uel$e alg%n elementoZ y en caso Sue no lo haga( ejecutar la unci'n de de$oluci'n inmediatamente!

Ejecutar una unci'n de de$oluci'n incluso si no hay elementos para animar $ar Mthing [ M<'^nonexistent'=Z

$ar cb [ unction<= ` console!log<'reali8ado'=Z aZ

i <Mthing!length= ` Mthing! ade+n<455( cb=Z a else ` cb<=Z a

F!4 E ectos )ersonali8ados con M! n!animate

Es posible reali8ar animaciones en propiedades "22 utili8ando el mOtodo M! n!animate! Dicho mOtodo permite reali8ar una animaci'n estableciendo $alores a propiedades "22 o cambiando sus $alores actuales!

E ectos personali8ados con M! n!animate M<'di$! untimes'=!animate< ` le t 9 eT[D5e(

opacity 9 5!:D a( 455( ?? duration unction<= ` console!log<'reali8ado'=Z ?? unci'n de de$oluci'n de llamada a=Z

Hota

Las propiedades relacionadas al color no pueden ser animadas utili8ando el mOtodo M! n!animate( pero es posible hacerlo a tra$Os de la extensi'n color plugin! MBs adelante en el libro de discutirB la utili8aci'n de extensiones!

F!4!; Easing

cDe inici'n9 El concepto de Easing describe la manera en Sue un e ecto ocurre ] es decir( si la $elocidad durante la animaci'n es constante o no!d jQuery incluye solamente dos mOtodos de easing9 sAing y linear! 2i desea transiciones mBs naturales en las animaciones( existen $arias extensiones Sue lo permiten!

& partir de la $ersi'n ;!C de la biblioteca( es posible establecer el tipo de transici'n por cada propiedad utili8ando el mOtodo M! n!animate!

Transici'n de easing por cada propiedad M<'di$! untimes'=!animate< ` le t 9 c eT[D5e( esAinge d( opacity 9 c 5!:D( elineare d a( 455

=Z )ara mBs detalles sobre las opciones de easing( consulte http9??api!jSuery!com?animate?!

F!C "ontrol de los E ectos

jQuery pro$ee $arias herramientas para el manejo de animaciones! M! n!stop Detiene las animaciones Sue se estBn ejecutando en el elemento seleccionado! M! n!delay Espera un tiempo determinado antes de ejecutar la pr'xima animaci'n! M<'h;'=!shoA<455=!delay<;555=!hide<455=Z jQuery! x!o 2i el $alor es $erdadero <true=( no existirBn transiciones para las animacionesZ y a los elementos se le establecerB el estado inal de la animaci'n! Este mOtodo puede ser especialmente %til cuando se esta trabajando con na$egadores antiguos!

F!D Ejercicios

F!D!; Mostrar Texto Oculto

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?blog!js! La tarea es aadir alguna interacti$idad a la secci'n blog de la pBgina9 > &l hacer clic3 en alguno de los titulares del di$ ^blog( se debe mostrar el pBrra o correspondiente con un e ecto de desli8amientoZ

>

&l hacer clic3 en otro titular( se debe ocultar el pBrra o mostrado con un e ecto de desli8amiento y mostrar nue$amente el pBrra o correspondiente tambiOn con un e ecto de desli8amiento! &yuda9 Ho se ol$ide de utili8ar el selector 9$isible!

F!D!: "rear un Men% Desplegable

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?na$igation!js! La tarea es poder desplegar los Ptems del men% superior de la pBgina9 > &l pasar el puntero del rat'n por encima de un Ptem del men%( se debe mostrar su submen% en caso Sue existaZ

> &l no estar mBs encima de un Ptem( el submen% se debe ocultar!

)ara poder reali8arlo( utilice el mOtodo M! n!ho$er para aadir o remo$er una clase en el submen% para poder controlar si debe estar oculto o $isible <El archi$o ?ejercicios?css?styles!css incluye una clase Qho$erR para este prop'sito=

F!D!4 "rear un 2lideshoA

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?slideshoA!js! La tarea es aadir un slideshoA a la pBgina con *a$a2cript! ;! Mo$er el elemento ^slideshoA a la parte superior de la pBginaZ

:! Escribir un c'digo Sue permita mostrar los Ptems de orma cPclica( mostrando un Ptem por unos segundos( luego ocultBndolo con un e ecto ade out y mostrando el siguiente con un e ecto ade inZ

4! 6na $e8 llegado al %ltimo Ptem de la lista( comen8ar de nue$o con el primeroZ

)ara un desa Po mayor( realice un Brea de na$egaci'n por debajo del slideshoA Sue muestre cuantas imBgenes existen y en cual se encuentra <ayuda9 M! n!pre$&llj puede resultar %til=!

G &jax

G!; +ntroducci'n

El mOtodo VML,ttpReSuest <V,R= permite a los na$egadores comunicarse con el ser$idor sin la necesidad de recargar la pBgina! Este mOtodo( tambiOn conocido como &jax <&synchronous *a$a2cript and VML=( permite la creaci'n de aplicaciones ricas en interacti$idad!

Las peticiones &jax son ejecutadas por el c'digo *a$a2cript( el cual en$Pa una petici'n a una 6RL y cuando recibe una respuesta( una unci'n de de$oluci'n puede ser ejecutada la cual recibe como argumento la respuesta del ser$idor y reali8a algo con ella! Debido a Sue la respuesta es asPncrona( el resto del c'digo de la aplicaci'n continua ejecutBndose( por lo cual( es imperati$o Sue una unci'n de de$oluci'n sea ejecutada para manejar la respuesta!

& tra$Os de $arios mOtodos( jQuery pro$ee soporte para &jax( permitiendo abstraer las di erencias Sue pueden existir entre na$egadores! Los mOtodos en cuesti'n son M!get<=( M!get2cript<=( M!get*2OH<=( M!post<= y M<=!load<=!

& pesar Sue la de inici'n de &jax posee la palabra QVMLR( la mayorPa de las aplicaciones no utili8an dicho ormato para el transporte de datos( sino Sue en su lugar se utili8a ,TML plano o in ormaci'n en ormato *2OH <*a$a2cript Object Hotation=!

En general( &jax no trabaja a tra$Os de dominios di erentes! 2in embargo( existen excepciones( como los ser$icios Sue pro$een in ormaci'n en ormato *2OH) <*2OH Aith )adding=( los cuales permiten una uncionalidad limitada a tra$Os de di erentes dominios!

G!: "onceptos "la$e

La utili8aci'n correcta de los mOtodos &jax reSuiere primero la comprensi'n de algunos conceptos cla$e!

G!:!; #ET $s! )O2T

Los dos mOtodos ,TT) mBs comunes para en$iar una petici'n a un ser$idor son #ET y )O2T! Es importante entender la utili8aci'n de cada uno!

El mOtodo #ET debe ser utili8ado para operaciones no1destructi$as ] es decir( operaciones en donde se esta QobteniendoR datos del ser$idor( pero no modi icando! )or ejemplo( una consulta a un ser$icio de b%sSueda podrPa ser una petici'n #ET! )or otro lado( las solicitudes #ET pueden ser almacenadas en la cache del na$egador( pudiendo conducir a un comportamiento impredecible si no se lo espera! #eneralmente( la in ormaci'n en$iada al ser$idor( es en$iada en una cadena de datos <en inglOs Suery string=!

El mOtodo )O2T debe ser utili8ado para operaciones destructi$as ] es decir( operaciones en donde se estB incorporando in ormaci'n al ser$idor! )or ejemplo( cuando un usuario guarda un artPculo en un blog( esta acci'n deberPa utili8ar )O2T! )or otro lado( este tipo de mOtodo no se guarda en la cache del na$egador! &demBs( una cadena de datos puede ser parte de la 6RL( pero la in ormaci'n tiende a ser en$iada de orma separada!

G!:!: Tipos de Datos

#eneralmente( jQuery necesita algunas instrucciones sobre el tipo de in ormaci'n Sue se espera recibir cuando se reali8a una petici'n &jax! En algunos casos( el tipo de dato es especi icado por el nombre del mOtodo( pero en otros casos se lo debe detallar como parte de la con iguraci'n del mOtodo9 text )ara el transporte de cadenas de caracteres simples! html )ara el transporte de bloSues de c'digo ,TML Sue serBn ubicados en la pBgina! script )ara aadir un nue$o script con c'digo *a$a2cript a la pBgina! json )ara transportar in ormaci'n en ormato *2OH( el cual puede incluir cadenas de caracteres( $ectores y objetos!

Hota

& partir de la $ersi'n ;!C de la biblioteca( si la in ormaci'n *2OH no estB correctamente ormateada( la petici'n podrPa allar! Jisite http9??json!org para obtener detalles sobre un correcto ormateo de datos en *2OH!

Es recomendable utili8ar los mecanismos Sue posea el lenguaje del lado de ser$idor para la generaci'n de in ormaci'n en ormato *2OH! jsonp )ara transportar in ormaci'n *2OH de un dominio a otro! xml )ara transportar in ormaci'n en ormato VML!

& pesar de los di erentes tipos de datos de Sue se puede utili8ar( es recomendable utili8ar el ormato *2OH( ya Sue es muy lexible( permitiendo por ejemplo( en$iar al mismo tiempo in ormaci'n plana y ,TML!

G!:!4 &sincronismo

Debido a Sue( de orma predeterminada( las llamadas &jax son asPncronas( la respuesta del ser$idor no esta disponible de orma inmediata! )or ejemplo( el siguiente c'digo no deberPa uncionar9 $ar responseZ M!get<' oo!php'( unction<r= ` response [ rZ a=Z console!log<response=Z ?? inde inido <unde ined= En su lugar( es necesario especi icar una unci'n de de$oluci'n de llamadaZ dicha unci'n se ejecutarB cuando la petici'n se haya reali8ado de orma correcta ya Sue es en ese momento cuando la respuesta del ser$idor esta lista! M!get<' oo!php'( unction<response= ` console!log<response=Z a=Z

G!:!C )olPticas de Mismo Origen y *2OH)

En general( las peticiones &jax estBn limitadas a utili8ar el mismo protocolo <http o https=( el mismo puerto y el mismo dominio de origen! Esta limitaci'n no se aplica a los scripts cargados a tra$Os del mOtodo &jax de jQuery!

La otra excepci'n es cuando se hace una petici'n Sue recibirB una respuesta en ormato *2OH)! En este caso( el pro$eedor de la respuesta debe responder la petici'n con un script Sue puede ser cargado utili8ando la etiSueta XscriptY( e$itando asP la limitaci'n de reali8ar peticiones desde el mismo dominio! Dicha respuesta contendrB la in ormaci'n solicitada( contenida en una unci'n

G!:!D &jax y Firebug

Firebug <o el inspector KebUit Sue $iene incluido en "hrome o 2a ari= son herramientas imprescindibles para trabajar con peticiones &jax( ya Sue es posible obser$arlas desde la pestaa "onsola de Firebug <o yendo a Recursos Y )anel V,R desde el inspector de Keb3it= y re$isar los detalles de dichas peticiones! 2i algo esta allando cuando trabaja con &jax( este es el primer lugar en donde debe dirigirse para saber cual es el problema!

G!4 MOtodos &jax de jQuery

"omo se indic' anteriormente( jQuery posee $arios mOtodos para trabajar con &jax! 2in embargo( todos estBn basados en el mOtodo M!ajax( por lo tanto( su comprensi'n es obligatoria! & continuaci'n se abarcarB dicho mOtodo y luego se indicarB un bre$e resumen sobre los demBs mOtodos!

#eneralmente( es pre erible utili8ar el mOtodo M!ajax en lugar de los otros( ya Sue o rece mBs caracterPsticas y su con iguraci'n es muy comprensible!

G!4!; M!ajax

El mOtodo M!ajax es con igurado a tra$Os de un objeto( el cual contiene todas las instrucciones Sue necesita jQuery para completar la petici'n! Dicho mOtodo es particularmente %til debido a Sue o rece la posibilidad de especi icar acciones en caso Sue la petici'n haya allado o no! &demBs( al estar con igurado a tra$Os de un objeto( es posible de inir sus propiedades de orma separada( haciendo Sue sea mBs Bcil la reutili8aci'n del c'digo! )uede $isitar http9??api!jSuery!com?jQuery!ajax? para consultar la documentaci'n sobre las opciones disponibles en el mOtodo!

6tili8ar el mOtodo M!ajax M!ajax<` ?? la 6RL para la petici'n

url 9 'post!php'(

?? la in ormaci'n a en$iar ?? <tambiOn es posible utili8ar una cadena de datos= data 9 ` id 9 ;:4 a(

?? especi ica si serB una petici'n )O2T o #ET type 9 '#ET'(

?? el tipo de in ormaci'n Sue se espera de respuesta dataType 9 'json'(

?? c'digo a ejecutar si la petici'n es satis actoriaZ ?? la respuesta es pasada como argumento a la unci'n success 9 unction<json= ` M<'Xh;?Y'=!text<json!title=!appendTo<'body'=Z M<'Xdi$ class[econtente?Y'= !html<json!html=!appendTo<'body'=Z a(

?? c'digo a ejecutar si la petici'n allaZ ?? son pasados como argumentos a la unci'n ?? el objeto jSV,R <extensi'n de VML,ttpReSuest=( un texto con el estatus ?? de la petici'n y un texto con la descripci'n del error Sue haya dado el ser$idor error 9 unction<jSV,R( status( error= ` alert<'Disculpe( existi' un problema'=Z a(

?? c'digo a ejecutar sin importar si la petici'n all' o no complete 9 unction<jSV,R( status= ` alert<')etici'n reali8ada'=Z a a=Z

Hota

6na aclaraci'n sobre el parBmetro dataType9 2i el ser$idor de$uel$e in ormaci'n Sue es di erente al ormato especi icado( el c'digo allarB( y la ra8'n de porSue lo hace no siempre SuedarB clara debido a Sue la respuesta ,TT) no mostrarB ning%n tipo de error! "uando estO trabajando con peticiones &jax( debe estar seguro Sue el ser$idor esta en$iando el tipo de in ormaci'n Sue esta solicitando y $eri iSue Sue la cabecera "ontent1type es exacta al tipo de dato! )or ejemplo( para in ormaci'n en ormato *2OH( la cabecera "ontent1type deberPa ser application?json!

G!4!;!; Opciones del mOtodo M!ajax

El mOtodo M!ajax posee muchas opciones de con iguraci'n( y es justamente esta caracterPstica la Sue hace Sue sea un mOtodo muy %til! )ara una lista completa de las opciones disponibles( puede consultar http9??api!jSuery!com?jQuery!ajax?Z a continuaci'n se muestran las mBs comunes9 async Establece si la petici'n serB asPncrona o no! De orma predeterminada el $alor es true! Debe tener en cuenta Sue si la opci'n se establece en alse( la petici'n bloSuearB la ejecuci'n de otros c'digos hasta Sue dicha petici'n haya inali8ado! cache Establece si la petici'n serB guardada en la cache del na$egador! De orma predeterminada es true para todos los dataType excepto para QscriptR y QjsonpR! "uando posee el $alor alse( se agrega una cadena de caracteres anti1cache al inal de la 6RL de la petici'n! complete

Establece una unci'n de de$oluci'n de llamada Sue se ejecuta cuando la petici'n esta completa( aunSue haya allado o no! La unci'n recibe como argumentos el objeto jSV,R <en $ersiones anteriores o iguales a jQuery ;!C( recibe en su lugar el objeto de la petici'n en crudo VML,TT)ReSuest= y un texto especi icando el estatus de la misma petici'n <success( notmodi ied( error( timeout( abort( o parsererror=! context Establece el alcance en Sue la?las unciones de de$oluci'n de llamada se ejecutaran <por ejemplo( de ine el signi icado de this dentro de las unciones=! De manera predeterminada this hace re erencia al objeto originalmente pasado al mOtodo M!ajax! data Establece la in ormaci'n Sue se en$iarB al ser$idor! Esta puede ser tanto un objeto como una cadena de datos <por ejemplo oo[barNba8[bim!= dataType Establece el tipo de in ormaci'n Sue se espera recibir como respuesta del ser$idor! 2i no se especi ica ning%n $alor( de orma predeterminada( jQuery re$isa el tipo de M+ME Sue posee la respuesta! error Establece una unci'n de de$oluci'n de llamada a ejecutar si resulta alg%n error en la petici'n! Dicha unci'n recibe como argumentos el objeto jSV,R <en $ersiones anteriores o iguales a jQuery ;!C( recibe en su lugar el objeto de la petici'n en crudo VML,TT)ReSuest=( un texto especi icando el estatus de la misma petici'n <timeout( error( abort( o parsererror= y un texto con la descripci'n del error Sue haya en$iado el ser$idor <por ejemplo Hot Found o +nternal 2er$er Error=! jsonp Establece el nombre de la unci'n de de$oluci'n de llamada a en$iar cuando se reali8a una petici'n *2OH)! De orma predeterminada el nombre es ecallbac3 success Establece una unci'n a ejecutar si la petici'n a sido satis actoria! Dicha unci'n recibe como argumentos el objeto jSV,R <en $ersiones anteriores o iguales a jQuery ;!C( recibe en su lugar el objeto de la petici'n en crudo VML,TT)ReSuest=( un texto especi icando el estatus de la misma petici'n y la in ormaci'n de la petici'n <con$ertida a objeto *a$a2cript en el caso Sue dataType sea *2OH=( el estatus de la misma! timeout Establece un tiempo en milisegundos para considerar a una petici'n como allada! traditional

2i su $alor es true( se utili8a el estilo de seriali8aci'n de datos utili8ado antes de jQuery ;!C! )ara mBs detalles puede $isitar http9??api!jSuery!com?jQuery!param?! type De orma predeterminada su $alor es Q#ETR! Otros tipos de peticiones tambiOn pueden ser utili8adas <como )6T y DELETE=( sin embargo pueden no estar soportados por todos los na$egadores! url Establece la 6RL en donde se reali8a la petici'n!

La opci'n url es obligatoria para el mOtodo M!ajaxZ

"omo se coment' anteriormente( para una lista completa de las opciones disponibles( puede consultar http9??api!jSuery!com?jQuery!ajax?!

Hota

& partir de la $ersi'n ;!D de jQuery( las opciones be ore2end( success( error y complete reciben como uno de sus argumentos el objeto jSV,R siendo este una extensi'n del objeto nati$o VML,TT)ReSuest! El objeto jSV,R posee una serie de mOtodos y propiedades Sue permiten modi icar u obtener in ormaci'n particular de la petici'n a reali8ar( como por ejemplo sobreescribir el tipo de M+ME Sue posee la respuesta Sue se espera por parte del ser$idor! )ara in ormaci'n sobre el objeto jSV,R puede consultar http9??api!jSuery!com?jQuery!ajax?^jSV,R!

Hota

& partir de la $ersi'n ;!D de jQuery( las opciones success( error y complete pueden recibir un $ector con $arias unciones de de$oluci'n( las cuales serBn ejecutadas en turnos!

G!4!: MOtodos "on$enientes

En caso Sue no Suiera utili8ar el mOtodo M!ajax( y no necesite los controladores de errores( existen otros mOtodos mBs con$enientes para reali8ar peticiones &jax <aunSue( como se indic' antes( estos estBn basados el mOtodo M!ajax con $alores pre1establecidos de con iguraci'n=!

Los mOtodos Sue pro$ee la biblioteca son9 M!get Reali8a una petici'n #ET a una 6RL pro$ista! M!post Reali8a una petici'n )O2T a una 6RL pro$ista! M!get2cript &ade un script a la pBgina! M!get*2OH Reali8a una petici'n #ET a una 6RL pro$ista y espera Sue un dato *2OH sea de$uelto!

Los mOtodos deben tener los siguientes argumentos( en orden9 url La 6RL en donde se reali8arB la petici'n! 2u $alor es obligatorio! data La in ormaci'n Sue se en$iarB al ser$idor! 2u $alor es opcional y puede ser tanto un objeto como una cadena de datos <como oo[barNba8[bim=!

Hota

Esta opci'n no es $alida para el mOtodo M!get2cript! success callbac3

6na unci'n opcional Sue se ejecuta en caso Sue petici'n haya sido satis actoria! Dicha unci'n recibe como argumentos la in ormaci'n de la petici'n y el objeto en bruto de dicha petici'n! data type El tipo de dato Sue se espera recibir desde el ser$idor! 2u $alor es opcional!

Hota

Esta opci'n es solo aplicable para mOtodos en Sue no estB especi icado el tipo de dato en el nombre del mismo mOtodo!

6tili8ar mOtodos con$enientes para peticiones &jax ?? obtiene texto plano o html M!get<'?users!php'( ` user+d 9 ;:4C a( unction<resp= ` console!log<resp=Z a=Z

?? aade un script a la pBgina y luego ejecuta la unci'n especi icada M!get2cript<'?static?js?my2cript!js'( unction<= ` unctionFromMy2cript<=Z a=Z

?? obtiene in ormaci'n en ormato *2OH desde el ser$idor M!get*2OH<'?details!php'( unction<resp= ` M!each<resp( unction<3( $= ` console!log<3 T ' 9 ' T $=Z a=Z a=Z

G!4!4 M! n!load

El mOtodo M! n!load es el %nico Sue se puede llamar desde una selecci'n! Dicho mOtodo obtiene el c'digo ,TML de una 6RL y rellena a los elementos seleccionados con la in ormaci'n obtenida! En conjunto con la 6RL( es posible especi icar opcionalmente un selector( el cual obtendrB el c'digo especi icado en dicha selecci'n!

6tili8ar el mOtodo M! n!load para rellenar un elemento M<'^neA"ontent'=!load<'? oo!html'=Z 6tili8ar el mOtodo M! n!load para rellenar un elemento basado en un selector M<'^neA"ontent'=!load<'? oo!html ^myDi$ h;9 irst'( unction<html= ` alert<'"ontenido actuali8ado'=Z a=Z

G!C &jax y Formularios

Las capacidades de jQuery con &jax pueden ser especialmente %tiles para el trabajo con ormularios! )or ejemplo( la extensi'n jQuery Form )lugin es una extensi'n para aadir capacidades &jax a ormularios! Existen dos mOtodos Sue debe conocer para cuando este reali8ando este tipo de trabajos9 M! n!seriali8e y M! n!seriali8e&rray!

Trans ormar in ormaci'n de un ormulario a una cadena de datos M<'^myForm'=!seriali8e<=Z "rear un $ector de objetos conteniendo in ormaci'n de un ormulario M<'^myForm'=!seriali8e&rray<=Z

?? crea una estructura como esta9 c ` name 9 ' ield;'( $alue 9 ;:4 a(

` name 9 ' ield:'( $alue 9 'hello Aorld' a d

G!D Trabajar con *2OH)

En los %ltimos tiempos( la introducci'n de *2OH)( ha permitido la creaci'n de aplicaciones hPbridas de contenidos! Muchos sitios importantes o recen *2OH) como ser$icio de in ormaci'n( el cual se accede a tra$Os de una &)+ <en inglOs &pplication programming inter ace= prede inida! 6n ser$icio particular Sue permite obtener in ormaci'n en ormato *2OH) es gahoob Query Language( el cual se utili8a a continuaci'n para obtener( por ejemplo( noticias sobre gatos9

6tili8ar gQL y *2OH) M!ajax<` url 9 'http9??Suery!yahooapis!com?$;?public?ySl'(

?? se agrega como parBmetro el nombre de la unci'n de de$oluci'n( ?? seg%n se especi ica en el ser$icio de gQL jsonp 9 'callbac3'(

?? se le indica a jQuery Sue se espera in ormaci'n en ormato *2OH) dataType 9 'jsonp'(

?? se le indica al ser$icio de gQL cual es la in ormaci'n ?? Sue se desea y Sue se la Suiere en ormato *2OH data 9 ` S 9 'select title(abstract(url rom search!neAs Ahere Suery[ecate'( ormat 9 'json' a(

?? se ejecuta una unci'n al ser satis actoria la petici'n success 9 unction<response= ` console!log<response=Z a a=Z jQuery se encarga de solucionar todos los aspectos complejos de la petici'n *2OH)! Lo %nico Sue debe hacer es especi icar el nombre de la unci'n de de$oluci'n <en este caso Qcallbac3R( seg%n lo especi ica gQL= y el resultado inal serB como una petici'n &jax normal!

G!F E$entos &jax

& menudo( SuerrB ejecutar una unci'n cuando una petici'n haya comen8ado o terminado( como por ejemplo( mostrar o ocultar un indicador! En lugar de de inir estas unciones dentro de cada petici'n( jQuery pro$ee la posibilidad de $incular e$entos &jax a elementos seleccionados! )ara una lista completa de e$entos &jax( puede consultar http9??docs!jSuery!com?&jaxhE$ents!

Mostrar?Ocultar un indicador utili8ando E$entos &jax M<'^loadinghindicator'= !ajax2tart< unction<= ` M<this=!shoA<=Z a= !ajax2top< unction<= ` M<this=!hide<=Z a=Z

G!G Ejercicios

G!G!; "argar "ontenido Externo

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?load!js! La tarea es cargar el contenido de un artPculo de blog cuando el usuario haga clic3 en el tPtulo del Ptem! ;!"rear un elementos di$ despuOs del titulo de cada titulo de artPculo de blog y guardar una re erencia hacia ellos en el elemento de titulo utili8ando M! n!data! :!Jincular un e$ento clic3 al titulo( el cual utili8arB el mOtodo M! n!load para cargar en cada di$ creado el contenido apropiado desde el archi$o ?ejercicios?data?blog!html! Ho ol$ide de deshabilitar el comportamiento predeterminado del e$ento clic3!

Hotar Sue cada titulo de artPculo de blog en index!html incluye un enlace hacia el artPculo! HecesitarB apro$echar el atributo hre de cada enlace para obtener el contenido propio de blog!html! 6na $e8 obtenida el $alor del atributo( puede utili8ar la siguiente orma para procesar la in ormaci'n y con$ertirla en un selector para utili8ar en conjunto con M! n!load9 $ar hre [ 'blog!html^post;'Z $ar temp&rray [ hre !split<'^'=Z $ar id [ '^' T temp&rrayc;dZ Recuerde utili8ar console!log para asegurarse Sue esta reali8ando lo correcto!

G!G!: "argar "ontenido 6tili8ando *2OH

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?specials!js! La tarea es mostrar los detalles del usuario para un dPa determinado cuando se selecciona desde la lista desplegable! ;!&adir un elemento di$ despuOs del ormulario Sue se encuentra dentro del elemento ^specialsZ allP serB el lugar en donde se colocarB la in ormaci'n a obtener! :!Jincular el e$ento change en el elemento selectZ cuando se reali8a un cambio en la selecci'n( en$iar una petici'n &jax a ?ejercicios?data?specials!json! 4!"uando la petici'n de$uel$e una respuesta( utili8ar el $alor seleccionado en el select <ayuda9 M! n!$al= para buscar la in ormaci'n correspondiente en la respuesta *2OH! C!&adir alg%n ,TML con la in ormaci'n obtenida en el di$ creado anteriormente! D!Finalmente remo$er el bot'n submit del ormulario!

Hotar Sue cada $e8 Sue la selecci'n cambia( se reali8a una petici'n &jax! ."'mo cambiarPa el c'digo para reali8ar solo una petici'n y guardar la in ormaci'n para apro$echarla cuando se $uel$e a cambiar la opci'n seleccionada/

I Extensiones

I!; .QuO es una Extensi'n/

6na extensi'n de jQuery es simplemente un nue$o mOtodo Sue se utili8arB para extender el prototipo <prototype= del objeto jQuery! "uando se extiende el prototipo( todos los objetos jQuery hereden los mOtodos aadidos! )or lo tanto( cuando se reali8a una llamada jQuery<=( es creado un nue$o objeto jQuery con todos los mOtodos heredados!

El objeti$o de una extensi'n es reali8ar una acci'n utili8ando una colecci'n de elementos( de la misma orma Sue lo hacen( por ejemplo( los mOtodos adeOut o add"lass de la biblioteca!

6sted puede reali8ar sus propias extensiones y utili8arlas de orma pri$ada en su proyecto o tambiOn puede publicarlas para Sue otras personas le saSuen pro$echo!

I!: "rear una Extensi'n 0Bsica

El c'digo para reali8ar una extensi'n bBsica es la siguiente9 < unction<M=` M! n!myHeA)lugin [ unction<= ` return this!each< unction<=` ?? reali8ar algo a=Z

aZ a=<jQuery=Z La extensi'n del prototipo del objeto jQuery ocurre en la siguiente lPnea9 M! n!myHeA)lugin [ unction<= ` ??!!! La cual es encerrada en una unci'n autoejecutable9 < unction<M=` ??!!! a=<jQuery=Z Esta posee la $entaja de crear un alcance Qpri$adoR( permitiendo utili8ar el signo dolar sin tener la preocupaci'n de Sue otra biblioteca tambiOn este utili8ando dicho signo!

)or ahora( internamente la extensi'n Sueda9 M! n!myHeA)lugin [ unction<= ` return this!each< unction<=` ?? reali8ar algo a=Z aZ Dentro de ella( la palabra cla$e this hace re erencia al objeto jQuery en donde la extensi'n es llamada! $ar somejQueryObject [ M<'^something'=Z

M! n!myHeA)lugin [ unction<= ` alert<this [[[ somejQueryObject=Z aZ

somejQueryObject!myHeA)lugin<=Z ?? muestra un alerta con 'true' El objeto jQuery( normalmente( contendrB re erencias a $arios elementos DOM( es por ello Sue a menudo se los re iere como una colecci'n!

)ara interactuar con la colecci'n de elementos( es necesario reali8ar un bucle( el cual se logra Bcilmente con el mOtodo each<=9 M! n!myHeA)lugin [ unction<= ` return this!each< unction<=`

a=Z aZ &l igual Sue otros mOtodos( each<= de$uel$e un objeto jQuery( permitiendo utili8ar el encadenado de mOtodos <M<!!!=!css<=!attr<=!!!=! )ara no romper esta con$enci'n( la extensi'n a crear deberB de$ol$er el objeto this( para permitir seguir con el encadenamiento! & continuaci'n se muestra un peSueo ejemplo9 < unction<M=` M! n!shoALin3Location [ unction<= ` return this! ilter<'a'=!each< unction<=` M<this=!append< ' <' T M<this=!attr<'hre '= T '=' =Z a=Z aZ a=<jQuery=Z

?? Ejemplo de utili8aci'n9 M<'a'=!shoALin3Location<=Z La extensi'n modi icarB todos los enlaces dentro de la colecci'n de elementos y les aadirB el $alor de su atributo hre entre parOntesis! Xb11 &ntes Sue la extensi'n sea llamada9 11Y Xa hre [epage!htmleYFooX?aY

Xb11 DespuOs Sue la extensi'n es llamada9 11Y

Xa hre [epage!htmleYFoo <page!html=X?aY TambiOn es posible optimi8ar la extensi'n9 < unction<M=` M! n!shoALin3Location [ unction<= ` return this! ilter<'a'=!append< unction<=` return ' <' T this!hre T '='Z a=Z aZ a=<jQuery=Z El mOtodo append permite especi icar una unci'n de de$oluci'n de llamada( y el $alor de$uelto determinarB Sue es lo Sue se aadirB a cada elemento! Hote tambiOn Sue no se utili8a el mOtodo attr( debido a Sue la &)+ nati$a del DOM permite un Bcil acceso a la propiedad hre !

& continuaci'n se muestra otro ejemplo de extensi'n! En este caso( no se reSuiere reali8ar un bucle en cada elemento ya Sue se delega la uncionalidad directamente en otro mOtodo jQuery9 < unction<M=` M! n! ade+n&nd&dd"lass [ unction<duration( classHame= ` return this! ade+n<duration( unction<=` M<this=!add"lass<classHame=Z a=Z aZ a=<jQuery=Z

?? Ejemplo de utili8aci'n9 M<'a'=! ade+n&nd&dd"lass<C55( ' inishedFading'=Z

I!4 Encontrar y E$aluar Extensiones

6no de los aspectos mBs populares de jQuery es la di$ersidad de extensiones Sue existen!

2in embargo( la calidad entre extensiones puede $ariar enormemente! Muchas son intensi$amente probadas y bien mantenidas( pero otras son creadas de orma apresurada y luego ignoradas( sin seguir buenas prBcticas!

#oogle es la mejor herramienta para encontrar extensiones <aunSue el eSuipo de jQuery este trabajando para mejorar su repositorio de extensiones=! 6na $e8 encontrada la extensi'n( posiblemente Suiera consultar la lista de correos de jQuery o el canal +R" ^jSuery para obtener la opini'n de otras personas sobre dicha extensi'n!

&seg%rese Sue la extensi'n este bien documentada( y Sue se o recen ejemplos de su utili8aci'n! TambiOn tenga cuidado con las extensiones Sue reali8an mBs de lo Sue necesita( estas pueden llegar a sobrecargar su pBgina! )ara mBs consejos sobre como detectar una extensi'n mediocre( puede leer el artPculo <en inglOs= 2igns o a poorly Aritten jQuery plugin por Remy 2harp!

6na $e8 seleccionada la extensi'n( necesitarB aadirla a su pBgina! )rimero( descargue la extensi'n( descomprimala <si es necesario= y muO$ala a la carpeta de su aplicaci'n! Finalmente insertela utili8ando el elemento script <luego de la inclusi'n de jQuery=!

I!C Escribir Extensiones

& $eces( desee reali8ar una uncionalidad disponible en todo el c'digo( por ejemplo( un mOtodo Sue pueda ser llamado desde una selecci'n el cual realice una serie de operaciones!

La mayorPa de las extensiones son mOtodos creados dentro del espacio de nombres M! n! jQuery garanti8a Sue un mOtodo llamado sobre el objeto jQuery sea capa8 de acceder a dicho objeto a tra$Os de this! En contrapartida( la extensi'n debe garanti8ar de de$ol$er el mismo objeto recibido <a menos Sue se explicite lo contrario=!

& continuaci'n se muestra un ejemplo9

"rear una extensi'n para aadir y remo$er una clase en un elemento al suceder el e$ento ho$er ?? de inici'n de la extensi'n < unction<M=` M! n!ho$er"lass [ unction<c= ` return this!ho$er< unction<= ` M<this=!toggle"lass<c=Z a =Z aZ a=<jQuery=Z

?? utili8ar la extensi'n M<'li'=!ho$er"lass<'ho$er'=Z )ara mBs in ormaci'n sobre el desarrollo de extensiones( puede consultar el artPculo <en inglOs= & )lugin De$elopment )attern de Mi3e &lsup! En dicho artPculo( se desarrolla una extensi'n llamada M! n!hilight( la cual pro$ee soporte para la extensi'n metadata <en caso de estar presente= y pro$ee un mOtodo descentrali8ado para establecer opciones globales o de instancias de la extensi'n!

El patr'n de desarrollo de extensiones para jQuery explicado por Mi3e &lsup ?? ?? crear una clausura ?? < unction<M= ` ?? ?? de inici'n de la extensi'n ??

M! n!hilight [ unction<options= ` debug<this=Z ?? generaci'n de las opciones principales antes de interactuar $ar opts [ M!extend<`a( M! n!hilight!de aults( options=Z ?? se iteractua y ormatea cada elemento return this!each< unction<= ` Mthis [ M<this=Z ?? generaci'n de las opciones especi icas de cada elemento $ar o [ M!meta / M!extend<`a( opts( Mthis!data<== 9 optsZ ?? actuali8aci'n de los estilos de cada elemento Mthis!css<` bac3ground"olor9 o!bac3ground( color9 o! oreground a=Z $ar mar3up [ Mthis!html<=Z ?? se llama a la unci'n de ormateo mar3up [ M! n!hilight! ormat<mar3up=Z Mthis!html<mar3up=Z a=Z aZ ?? ?? unci'n pri$ada para reali8ar depuraci'n ?? unction debug<Mobj= ` i <AindoA!console NN AindoA!console!log= AindoA!console!log<'hilight selection count9 ' T Mobj!si8e<==Z aZ

?? ?? de inir y exponer la unci'n de ormateo ?? M! n!hilight! ormat [ unction<txt= ` return 'XstrongY' T txt T 'X?strongY'Z aZ ?? ?? opciones predeterminadas ?? M! n!hilight!de aults [ ` oreground9 'red'( bac3ground9 'yelloA' aZ ?? ?? in de la clausura ?? a=<jQuery=Z

I!D Escribir Extensiones con Mantenimiento de Estado 6tili8ando Kidget Factory de jQuery 6+

Hota

Esta secci'n esta basada( con permiso del autor( en el artPculo 0uilding 2tate ul jQuery )lugins de 2cott #on8ale8!

Mientras Sue la mayorPa de las extensiones para jQuery son sin mantenimiento de estado <en inglOs stateless= ] es decir( extensiones Sue se ejecutan solamente sobre un elemento( siendo

esa su %nica interacci'n ] existe un gran conjunto de uncionalidades Sue no se apro$echan en el patr'n bBsico con Sue se desarrollan las extensiones!

"on el in de llenar ese $acPo( jQuery 6+ <jQuery 6ser +nter ace= ha implementado un sistema mBs a$an8ado de extensiones! Este sistema permite manejar estados y admite m%ltiples unciones para ser expuestas en una %nica extensi'n! Dicho sistema es llamado Aidget actory y orma parte de la $ersi'n ;!I de jQuery 6+ a tra$Os de jQuery!Aidget( aunSue tambiOn puede ser utili8ado sin depender de jQuery 6+!

)ara demostrar las capacidades de Aidget actory( se crearB una extensi'n Sue tendrB como uncionalidad ser una barra de progreso!

)or ahora( la extensi'n solo permitirB establecer el $alor de la barra de progreso una sola $e8! Esto se reali8arB llamando a jQuery!Aidget con dos parBmetros9 el nombre de la extensi'n a crear y un objeto literal Sue contendrB las unciones soportadas por la extensi'n! "uando la extensi'n es llamada( una instancia de ella es creada y todas las unciones se ejecutaran en el contexto de esa instancia!

Existen dos importantes di erencias en comparaci'n con una extensi'n estBndar de jQuery9 En primer lugar( el contexto es un objeto( no un elemento DOM! En segundo lugar( el contexto siempre es un %nico objeto( nunca una colecci'n!

6na simple extensi'n con mantenimiento de estado utili8ando Aidget actory de jQuery 6+ M!Aidget<enm3!progressbare( ` hcreate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element !add"lass<eprogressbare= !text<progress=Z a a=Z El nombre de la extensi'n debe contener un espacio de nombres( en este caso se utili8a nm3! Los espacios de nombres tienen una limitaci'n de un solo ni$el de pro undidad ] es decir Sue

por ejemplo( no es posible utili8ar nm3! oo! "omo se puede $er en el ejemplo( Aidget actory pro$ee dos propiedades para ser utili8adas! La primera( this!element es un objeto jQuery Sue contiene exactamente un elemento! En caso Sue la extensi'n sea ejecutada en mBs de un elemento( una instancia separada de la extensi'n serB creada por cada elemento y cada una tendrB su propio this!element! La segunda propiedad( this!options( es un conjunto de pares cla$e?$alor con todas las opciones de la extensi'n! Estas opciones pueden pasarse a la extensi'n como se muestra a continuaci'n9

Hota

"uando estO reali8ando sus propias extensiones es recomendable utili8ar su propio espacio de nombres( ya Sue deja en claro de donde pro$iene la extensi'n y si es parte de una colecci'n mayor! )or otro lado( el espacio de nombres ui estB reser$ado para las extensiones o iciales de jQuery 6+!

)asar opciones al Aidget M<eXdi$YX?di$Ye= !appendTo< ebodye = !progressbar<` $alue9 :5 a=Z "uando se llama a jQuery!Aidget se extiende a jQuery aadiendo el mOtodo a jQuery! n <de la misma orma Sue cuando se crea una extensi'n estBndar=! El nombre de la unci'n Sue se aade esta basado en el nombre Sue se pasa a jQuery!Aidget( sin el espacio de nombres <en este caso el nombre serB jQuery! n!progressbar=!

"omo se muestra a continuaci'n( es posible especi icar $alores predeterminados para cualSuier opci'n! Estos $alores deberPan basarse en la utili8aci'n mBs com%n de la extensi'n!

Establecer opciones predeterminadas para un Aidget M!Aidget<enm3!progressbare( ` ?? opciones predeterminadas options9 ` $alue9 5

a(

hcreate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element !add"lass< eprogressbare = !text< progress =Z a a=Z

I!D!; &adir MOtodos a un Kidget

&hora Sue es posible iniciali8ar la extensi'n( es necesario aadir la habilidad de reali8ar acciones a tra$Os de mOtodos de inidos en la extensi'n! )ara de inir un mOtodo en la extensi'n es necesario incluir la unci'n en el objeto literal Sue se pasa a jQuery!Aidget! TambiOn es posible de inir mOtodos Qpri$adosR anteponiendo un gui'n bajo al nombre de la unci'n!

"rear mOtodos en el Kidget M!Aidget<enm3!progressbare( ` options9 ` $alue9 5 a(

hcreate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element !add"lass<eprogressbare= !text<progress=Z a(

?? crear un mOtodo p%blico $alue9 unction<$alue= ` ?? no se pasa ning%n $alor( entonces act%a como mOtodo obtenedor i <$alue [[[ unde ined= ` return this!options!$alueZ ?? se pasa un $alor( entonces act%a como mOtodo establecedor a else ` this!options!$alue [ this!hconstrain<$alue=Z $ar progress [ this!options!$alue T eieZ this!element!text<progress=Z a a(

?? crear un mOtodo pri$ado hconstrain9 unction<$alue= ` i <$alue Y ;55= ` $alue [ ;55Z a i <$alue X 5= ` $alue [ 5Z a return $alueZ a a=Z )ara llamar a un mOtodo en una instancia de la extensi'n( se debe pasar el nombre de dicho mOtodo a la extensi'n! En caso Sue se llame a un mOtodo Sue acepta parBmetros( estos se deben pasar a continuaci'n del nombre del mOtodo!

Llamar a mOtodos en una instancia de extensi'n $ar bar [ M<eXdi$YX?di$Ye= !appendTo<ebodye= !progressbar<` $alue9 :5 a=Z

?? obtiene el $alor actual alert<bar!progressbar<e$aluee==Z

?? actuali8a el $alor bar!progressbar<e$aluee( D5=Z

?? obtiene el $alor nue$amente alert<bar!progressbar<e$aluee==Z

Hota

Ejecutar mOtodos pasando el nombre del mOtodo a la misma unci'n jQuery Sue se utili8a para iniciali8ar la extensi'n puede parecer extrao( sin embargo es reali8ado asP para pre$enir la Qcontaminaci'nR del espacio de nombres de jQuery manteniendo al mismo tiempo la capacidad de llamar a mOtodos en cadena!

I!D!: Trabajar con las Opciones del Kidget

6no de los mOtodos disponibles automBticamente para la extensi'n es option! Este mOtodo permite obtener y establecer opciones despuOs de la iniciali8aci'n y unciona exactamente igual Sue los mOtodos attr y css de jQuery9 pasando %nicamente un nombre como argumento el mOtodo unciona como obtenedor( mientras Sue pasando uno o mBs conjuntos de nombres y $alores el mOtodo unciona como establecedor! "uando es utili8ado como mOtodo obtenedor( la extensi'n de$ol$erB el $alor actual de la opci'n correspondiente al nombre

pasado como argumento! )or otro lado( cuando es utili8ado como un mOtodo establecedor( el mOtodo hsetOption de la extensi'n serB llamado por cada opci'n Sue se desea establecer!

Responder cuando una opci'n es establecida M!Aidget<enm3!progressbare( ` options9 ` $alue9 5 a(

hcreate9 unction<= ` this!element!add"lass<eprogressbare=Z this!hupdate<=Z a(

hsetOption9 unction<3ey( $alue= ` this!optionsc3eyd [ $alueZ this!hupdate<=Z a(

hupdate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element!text<progress=Z a a=Z

I!D!4 &adir Funciones de De$oluci'n de Llamada

6no de las maneras mBs Bciles de extender una extensi'n es aadir unciones de de$oluci'n de llamada( para Sue de esta orma el usuario puede reaccionar cuando el estado de la extensi'n cambie! & continuaci'n se mostrarB como aadir una unci'n de de$oluci'n de llamada a la extensi'n creada para indicar cuando la barra de progreso haya alcan8ado el ;55i! El mOtodo htrigger obtiene tres parBmetros9 el nombre de la unci'n de de$oluci'n( el objeto de e$ento nati$o Sue iniciali8a la unci'n de de$oluci'n y un conjunto de in ormaci'n rele$ante al e$ento! El nombre de la unci'n de de$oluci'n es el %nico parBmetro obligatorio( pero los otros pueden ser muy %tiles si el usuario desea implementar uncionalidades personali8adas!

)ro$eer unciones de de$oluci'n de llamada M!Aidget<enm3!progressbare( ` options9 ` $alue9 5 a(

hcreate9 unction<= ` this!element!add"lass<eprogressbare=Z this!hupdate<=Z a(

hsetOption9 unction<3ey( $alue= ` this!optionsc3eyd [ $alueZ this!hupdate<=Z a(

hupdate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element!text<progress=Z i <this!options!$alue [[ ;55= ` this!htrigger<ecompletee( null( ` $alue9 ;55 a=Z

a a a=Z Las unciones de de$oluci'n son esencialmente s'lo opciones adicionales( por lo cual( pueden ser establecidas como cualSuier otra opci'n! "ada $e8 Sue una unci'n de de$oluci'n es ejecutada( un e$ento correspondiente se acti$a tambiOn! El tipo de e$ento se determina mediante la concatenaci'n del nombre de la extensi'n y el nombre de la unci'n de de$oluci'n! Dicha unci'n y e$ento reciben dos mismos parBmetros9 un objeto de e$ento y un conjunto de in ormaci'n rele$ante al e$ento!

2i la extensi'n tendrB alguna uncionalidad Sue podrB ser cancelada por el usuario( la mejor manera de hacerlo es creando unciones de de$oluci'n cancelables! El usuario podrB cancelar una unci'n de de$oluci'n o su e$ento asociado de la misma manera Sue se cancela cualSuier e$ento nati$o9 llamando a e$ent!pre$entDe ault<= o utili8ando return alse!

Jincular a e$entos del Aidget $ar bar [ M<eXdi$YX?di$Ye= !appendTo<ebodye= !progressbar<` complete9 unction<e$ent( data= ` alert< eFunci'n de de$oluci'ne =Z a a= !on<eprogressbarcompletee( unction<e$ent( data= ` alert<eEl $alor de la barra de progreso es e T data!$alue=Z a=Z

bar!progressbar<eoptione( e$aluee( ;55=Z En pro undidad9 Kidget Factory

"uando se llama a jQuery!Aidget( Osta crea una unci'n constructora para la extensi'n y establece el objeto literal Sue se pasa como el prototipo para todas las instancias de la extensi'n! Todas las uncionalidades Sue automBticamente se aaden a la extensi'n pro$ienen del prototipo base del Aidget( el cual es de inido como jQuery!Kidget!prototype! "uando una instancia de la extensi'n es creada( es guardada en el elemento DOM original utili8ando jQuery!data( con el nombre de la extensi'n como palabra cla$e!

Debido a Sue la instancia de la extensi'n esta directamente $inculada al elemento DOM( es posible acceder a la instancia de la extensi'n de orma directa! Esto permite llamar a mOtodos directamente en la instancia de la extensi'n en lugar de pasar el nombre del mOtodo como una cadena de caracteres( dando la posibilidad de acceder a las propiedades de la extensi'n! $ar bar [ M<eXdi$YX?di$Ye= !appendTo<ebodye= !progressbar<= !data<eprogressbare =Z

?? llamar a un mOtodo directamente en la instancia de la extensi'n bar!option<e$aluee( D5=Z

?? acceder a propiedades en la instancia de la extensi'n alert<bar!options!$alue=Z 6no de los mayores bene icios de tener un constructor y un prototipo para una extensi'n es la acilidad de extender la extensi'n! El hecho de aadir o cambiar mOtodos en el prototipo de la extensi'n( permite tambiOn modi icarlos en todas las instancias de la extensi'n! )or ejemplo( si deseamos aadir un mOtodo a la extensi'n de barra de progreso para permitir restablecer el progreso a 5i( es posible hacerlo aadiendo este mOtodo al prototipo y automBticamente estarB disponible para ser llamada desde cualSuier instancia de la extensi'n! M!nm3!progressbar!prototype!reset [ unction<= ` this!hsetOption<e$aluee( 5=Z aZ

I!D!C Limpie8a

En algunos casos( tendrB sentido permitir a los usuarios aplicar y desaplicar la extensi'n! Esto es posible hacerlo a tra$Os del mOtodo destroy! "on dicho mOtodo( es posible deshacer todo lo reali8ado con la extensi'n! TambiOn Oste es llamado automBticamente si el elemento $inculado a la extensi'n es eliminado del DOM <por lo cual tambiOn es posible utili8arlo para la Qrecolecci'n de basuraR=! El mOtodo destroy predeterminado remue$e el $Pnculo entre el elemento DOM y la instancia de la extensi'n

&adir un mOtodo destroy al Aidget M!Aidget< enm3!progressbare( ` options9 ` $alue9 5 a(

hcreate9 unction<= ` this!element!add"lass<eprogressbare=Z this!hupdate<=Z a(

hsetOption9 unction<3ey( $alue= ` this!optionsc3eyd [ $alueZ this!hupdate<=Z a(

hupdate9 unction<= ` $ar progress [ this!options!$alue T eieZ this!element!text<progress=Z i <this!options!$alue [[ ;55 = ` this!htrigger<ecompletee( null( ` $alue9 ;55 a=Z a

a(

destroy9 unction<= ` this!element !remo$e"lass<eprogressbare= !text<ee=Z

?? llama a la unci'n base destroy M!Kidget!prototype!destroy!call<this=Z a a=Z

I!D!D "onclusi'n

La utili8aci'n de Kidget actory es solo una manera de crear extensiones con mantenimiento de estado! Existen algunos modelos di erentes Sue pueden ser utili8ados y cada uno posee sus $entajas y des$entajas! Kidget actory resuel$e muchos problemas comunes( mejora signi icati$amente la producti$idad y la reutili8aci'n de c'digo!

I!F Ejercicios

I!F!; Reali8ar una Tabla Ordenable

)ara este ejercicio( la tarea es identi icar( descargar e implementar una extensi'n Sue permita ordenar la tabla existente en la pBgina index!html! "uando estO listo( todas las columnas de la tabla deben poder ser ordenables!

I!F!: Escribir una Extensi'n )ara "ambiar el "olor de Fondo en Tablas

&bra el archi$o ?ejercicios?index!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?stripe!js! La tarea es escribir una extensi'n llamada QstripeR la cual podrB ser llamada desde cualSuier elemento table y deberB cambiar el color de ondo de las ilas impares en el cuerpo de la tabla! El color podrB ser especi icado como parBmetro de la extensi'n! M<'^myTable'=!stripe<'^cccccc'=Z Ho ol$ide de de$ol$er la tabla para Sue otros mOtodos puedan ser encadenados luego de la llamada a la extensi'n!

L Mejores )rBcticas para &umentar el Rendimiento

Este capPtulo cubre numerosas mejores prBcticas de *a$a2cript y jQuery(sin un orden en particular! Muchas de estas prBcticas estBn basadas en la presentaci'n jQuery &nti1)atterns or )er ormance <en inglOs= de )aul +rish!

L!; #uardar la Longitud en 0ucles

En un bucle( no es necesario acceder a la longitud de un $ector cada $e8 Sue se e$al%a la condici'nZ dicho $alor se puede guardar pre$iamente en una $ariable! $ar myLength [ my&rray!lengthZ

or <$ar i [ 5Z i X myLengthZ iTT= ` ?? do stu a

L!: &adir Hue$o "ontenido por Fuera de un 0ucle

2i $a a insertar muchos elementos en el DOM( hBgalo todo de una sola $e8( no de una por $e8! ?? mal M!each<my&rray( unction<i( item= ` $ar neAList+tem [ 'XliY' T item T 'X?liY'Z M<'^ballers'=!append<neAList+tem=Z a=Z

?? mejor9 reali8ar esto $ar rag [ document!createDocumentFragment<=Z

M!each<my&rray( unction<i( item= ` $ar neAList+tem [ 'XliY' T item T 'X?liY'Z rag!append"hild<neAList+tem=Z a=Z M<'^ballers'=c5d!append"hild< rag=Z

?? o esto9 $ar my,tml [ ''Z

M!each<my&rray( unction<i( item= ` my,tml T[ 'XliY' T item T 'X?liY'Z a=Z M<'^ballers'=!html<my,tml=Z

L!4 Ho Repetirse

Ho se repitaZ realice las cosas una $e8 y s'lo una( caso contrario lo estarB haciendo mal! ?? M&L i <Me$ent ade!data<'currently'= b[ 'shoAing'= ` Me$ent ade!stop<=Z a

i <Me$entho$er!data<'currently'= b[ 'shoAing'= ` Me$entho$er!stop<=Z a

i <Mspans!data<'currently'= b[ 'shoAing'= ` Mspans!stop<=Z a

?? 0+EH $ar Melems [ cMe$ent ade( Me$entho$er( MspansdZ M!each<Melems( unction<i(elem= ` i <elem!data<'currently'= b[ 'shoAing'= ` elem!stop<=Z a a=Z

L!C "uidado con las Funciones &n'nimas

Ho es aconsejable utili8ar de sobremanera las unciones an'nimas! Estas son di Pciles de depurar( mantener( probar o reutili8ar! En su lugar(utilice un objeto literal para organi8ar y nombrar sus controladores y unciones de de$oluci'n de llamada! ?? M&L

M<document=!ready< unction<= ` M<'^magic'=!clic3< unction<e= ` M<'^yaye ects'=!slide6p< unction<= ` ?? !!! a=Z a=Z

M<'^happiness'=!load<url T ' ^unicorns'( unction<= ` ?? !!! a=Z a=Z

?? ME*OR $ar )+ [ ` onReady 9 unction<= ` M<'^magic'=!clic3<)+!candyMtn=Z M<'^happiness'=!load<)+!url T ' ^unicorns'( )+!unicorn"b=Z a(

candyMtn 9 unction<e= ` M<'^yaye ects'=!slide6p<)+!slide"b=Z a(

slide"b 9 unction<= ` !!! a(

unicorn"b 9 unction<= ` !!! a aZ

M<document=!ready<)+!onReady=Z

L!D Optimi8aci'n de 2electores

La optimi8aci'n de selectores es menos importante de lo Sue solPa ser( debido a la implementaci'n en algunos na$egadores dedocument!Suery2elector&ll<=( pasando la carga de jQuery hacia el na$egador! 2in embargo( existen algunos consejos Sue debe tener en cuenta!

L!D!; 2electores basados en +D

2iempre es mejor comen8ar las selecciones con un +D! ?? rBpido M<'^container di$!robotarm'=Z

?? super1rBpido M<'^container'=! ind<'di$!robotarm'=Z El ejemplo Sue utili8a M! n! ind es mBs rBpido debido a Sue la primera selecci'n utili8a el motor de selecci'n interno 2i88le ] mientras Sue la selecci'n reali8ada %nicamente por +D utili8a document!getElement0y+d<=( el cual es extremadamente rBpido debido a Sue es una unci'n nati$a del na$egador!

L!D!: Especi icidad

Trate de ser especi ico para el lado derecho de la selecci'n y menos especP ico para el i8Suierdo! ?? no optimi8ado M<'di$!data !gon8ale8'=Z

?? optimi8ado M<'!data td!gon8ale8'=Z 6se en lo posible etiSueta!clase del lado derecho de la selecci'n( y solo etiSueta o !clase en la parte i8Suierda! M<'!data table!attendees td!gon8ale8'=Z

?? mucho mejor9 eliminar la parte media de ser posible M<'!data td!gon8ale8'=Z La segunda selecci'n tiene mejor rendimiento debido a Sue atra$iesa menos capas para buscar el elemento!

L!D!4 E$itar el 2elector 6ni$ersal

2elecciones en donde se especi ica de orma implPcita o explPcita una selecci'n uni$ersal puede resultar muy lento! M<'!buttons Y _'=Z ?? muy lento

M<'!buttons'=!children<=Z ?? mucho mejor

M<'!gender 9radio'=Z M<'!gender _9radio'=Z

?? selecci'n uni$ersal implPcita ?? misma orma( pero de orma explPcita

M<'!gender input9radio'=Z ?? mucho mejor

L!F 6tili8ar la Delegaci'n de E$entos

La delegaci'n de e$entos permite $incular un controlador de e$ento a un elemento contenedor <por ejemplo( una lista desordenada= en lugar de m%ltiples elementos contenidos <por ejemplo( los Ptems de una lista=! jQuery hace Bcil este trabajo a tra$Os de M! n!li$e yM! n!delegate! En lo posible( es recomendable utili8ar M! n!delegate en lugar de M! n!li$e( ya

Sue elimina la necesidad de una selecci'n y su contexto explPcito reduce la carga en aproximadamente un I5i!

&demBs( la delegaci'n de e$entos permite aadir nue$os elementos contenedores a la pBgina sin tener Sue $ol$er a $incular sus controladores de e$entos! ?? mal <si existen muchos items en la lista= M<'li!trigger'=!clic3<handlerFn=Z

?? mejor9 delegaci'n de e$entos con M! n!li$e M<'li!trigger'=!li$e<'clic3'( handlerFn=Z

?? mucho mejor9 delegaci'n de e$entos con M! n!delegate ?? permite especi icar un contexto de orma Bcil M<'^myList'=!delegate<'li!trigger'( 'clic3'( handlerFn=Z

L!G 2eparar Elementos para Trabajar con Ellos

En lo posible( hay Sue e$itar la manipulaci'n del DOM! )ara ayudar con este prop'sito( a partir de la $ersi'n ;!C( jQuery introduce M! n!detach el cual permite trabajar elementos de orma separada del DOM para luego insertarlos! $ar Mtable [ M<'^myTable'=Z $ar Mparent [ Mtable!parent<=Z

Mtable!detach<=Z ?? !!! se aaden muchas celdas a la tabla Mparent!append<table=Z

L!I 6tili8ar Estilos en "ascada para "ambios de "22 en Jarios Elementos

2i $a a cambiar el "22 en mBs de :5 elementos utili8ando M! n!css( considere reali8ar los cambios de estilos aadiOndolos en una etiSueta style! De esta orma se incrementa un F5i el rendimiento! ?? correcto hasta :5 elementos( lento en mBs elementos M<'a!sAedberg'=!css<'color'( '^asd;:4'=Z M<'Xstyle type[etext?csseYa!sAedberg ` color 9 ^asd;:4 aX?styleY'= !appendTo<'head'=Z

L!L 6tili8ar M!data en Lugar de M! n!data

6tili8ar M!data en un elemento del DOM en lugar de M! n!data en una selecci'n puede ser hasta ;5 $eces mBs rBpido! &ntes de reali8arlo( este seguro de comprender la di erencia entre un elemento DOM y una selecci'n jQuery! ?? regular M<elem=!data<3ey($alue=Z

?? ;5 $eces mBs rBpido M!data<elem(3ey($alue=Z

L!;5 Ho &ctuar en Elementos no Existentes

jQuery no le dirB si esta tratando de ejecutar c'digo en una selecci'n $acPa ] esta se ejecutarB como si nada estu$iera mal! DependerB de usted comprobar si la selecci'n contiene elementos! ?? M&L9 el c'digo a continuaci'n ejecuta tres unciones ?? sin comprobar si existen elementos ?? en la selecci'n M<'^nosuchthing'=!slide6p<=Z

?? Mejor

$ar Mmy2election [ M<'^nosuchthing'=Z i <Mmy2election!length= ` Mmy2election!slide6p<=Z a

?? M6",O ME*OR9 aadir una extensi'n doOnce jQuery! n!doOnce [ unction< unc=` this!length NN unc!apply<this=Z return thisZ

M<'li!cartitems'=!doOnce< unction<=`

?? reali8ar algo

a=Z Este consejo es especialmente aplicable para Aidgets de jQuery 6+( los cuales poseen mucha carga incluso cuando la selecci'n no contiene elementos!

L!;; De inici'n de Jariables

Las $ariables pueden ser de inidas en una sola declaraci'n en lugar de $arias! ?? antiguo $ar test [ ;Z $ar test: [ unction<= ` !!! aZ $ar test4 [ test:<test=Z

?? mejor orma $ar test [ ;( test: [ unction<= ` !!! a( test4 [ test:<test=Z En unciones autoejecutables( las de iniciones de $ariables pueden pasarse todas juntas! < unction< oo( bar= ` !!! a=<;( :=Z

L!;: "ondicionales ?? antiguo i <type [[ ' oo' -- type [[ 'bar'= ` !!! a

?? mejor i <?k< oo-bar=M?!test<type== ` !!! a

?? b%sSueda en objeto literal i <<` oo 9 ;( bar 9 ; a=ctyped= ` !!! a

L!;4 Ho Tratar a jQuery como si uera una "aja Hegra

6tilice el c'digo uente de la biblioteca como si uera su documentaci'n ] guarde el enlace http9??bit!ly?jSsource como marcador para tener de re erencia!

;5 Organi8aci'n del "'digo

;5!; +ntroducci'n

"uando se emprende la tarea de reali8ar aplicaciones complejas del lado del cliente( es necesario considerar la orma en Sue se organi8arB el c'digo! Este capitulo estB dedicado a anali8ar algunos patrones de organi8aci'n de c'digo para utili8ar en una aplicaci'n reali8ada con jQuery! &demBs se explorarB el sistema de gesti'n de dependencias de ReSuire*2!

;5!;!; "onceptos "la$e

&ntes de comen8ar con los patrones de organi8aci'n de c'digo( es importante entender algunos conceptos cla$e! > El c'digo debe estar di$ido en unidades uncionales ] m'dulos( ser$icios( etc! g se debe e$itar la tentaci'n de tener todo en un %nico bloSue M<document=!ready<=! Este concepto se conoce como encapsulaci'n!

> Ho repetir c'digo! +denti icar pie8as similares y utili8ar tOcnicas de heredaci'n!

> & pesar de la naturale8a de jQuery( no todas las aplicaciones *a$a2cript trabajan <o tienen la necesidad de poseer una representaci'n= en el DOM!

> Las unidades de uncionalidad deben tener una articulaci'n lexible <en inglOs loosely coupled= ] es decir( una unidad de uncionalidad debe ser capa8 de existir por si misma y la comunicaci'n con otras unidades debe ser a tra$Os de un sistema de mensajes como los e$entos personali8ados o pub?sub! )or otro lado( siempre Sue sea posible( de debe mantener alejada la comunicaci'n directa entre unidades uncionales!

El concepto de articulaci'n lexible puede ser especialmente problemBtico para desarrolladores Sue hacen su primera incursi'n en aplicaciones complejas! )or lo tanto( si

usted esta empe8ando a crear aplicaciones( solamente sea consciente de este concepto!

;5!: Encapsulaci'n

El primer paso para la organi8aci'n del c'digo es separar la aplicaci'n en distintas pie8as!

Muchas $eces( este es uer8o suele ser su iciente para mantener al c'digo en orden!

;5!:!; El Objeto Literal

6n objeto literal es tal $e8 la manera mBs simple de encapsular c'digo relacionado! Este no o rece ninguna pri$acidad para propiedades o mOtodos( pero es %til para eliminar unciones an'nimas( centrali8ar opciones de con iguraci'n( y acilitar el camino para la reutili8aci'n y re actori8aci'n!

6n objeto literal $ar myFeature [ ` my)roperty 9 'hello'(

myMethod 9 unction<= ` console!log<myFeature!my)roperty=Z a(

init 9 unction<settings= ` myFeature!settings [ settingsZ a(

read2ettings 9 unction<= ` console!log<myFeature!settings=Z a aZ

myFeature!my)ropertyZ ?? 'hello' myFeature!myMethod<=Z ?? registra 'hello' myFeature!init<` oo 9 'bar' a=Z myFeature!read2ettings<=Z ?? registra ` oo 9 'bar' a El objeto posee una propiedad y $arios mOtodos( los cuales son p%blicos <es decir( cualSuier parte de la aplicaci'n puede $erlos=! ."'mo se puede aplicar este patr'n con jQuery/ )or ejemplo( en el siguiente c'digo escrito en el estilo tradicional9 ?? haciendo clic3 en un item de la lista se carga cierto contenido( ?? luego utili8ando el +D de dicho item se ocultan ?? los items aledaos M<document=!ready< unction<= ` M<'^myFeature li'= !append<'Xdi$?Y'= !clic3< unction<= ` $ar Mthis [ M<this=Z $ar Mdi$ [ Mthis! ind<'di$'=Z Mdi$!load<' oo!php/item[' T Mthis!attr<'id'=( unction<= ` Mdi$!shoA<=Z Mthis!siblings<= ! ind<'di$'=!hide<=Z

a =Z a=Z a=Z 2i el ejemplo mostrado representa el ;55i de la aplicaci'n( es con$eniente dejarlo como esta( ya Sue no amerita hacer una reestructuraci'n! En cambio( si la pie8a es parte de una aplicaci'n mBs grande( estarPa bien separar dicha uncionalidad de otras no relacionadas! )or ejemplo( es con$eniente mo$er la 6RL a la cual se hace la petici'n uera del c'digo y pasarla al Brea de con iguraci'n! TambiOn romper la cadena de mOtodos para hacer luego mBs Bcil la modi icaci'n!

6tili8ar un objeto literal para una uncionalidad jQuery $ar myFeature [ ` init 9 unction<settings= ` myFeature!con ig [ ` Mitems 9 M<'^myFeature li'=( Mcontainer 9 M<'Xdi$ class[econtainereYX?di$Y'=( url0ase 9 '? oo!php/item[' aZ

?? permite sobreescribir la con iguraci'n predeterminada M!extend<myFeature!con ig( settings=Z

myFeature!setup<=Z a(

setup 9 unction<= ` myFeature!con ig!Mitems !each<myFeature!create"ontainer=

!clic3<myFeature!shoA+tem=Z a(

create"ontainer 9 unction<= ` $ar Mi [ M<this=( Mc [ myFeature!con ig!Mcontainer!clone<= !appendTo<Mi=Z

Mi!data<'container'( Mc=Z a(

build6rl 9 unction<= ` return myFeature!con ig!url0ase T myFeature!Mcurrent+tem!attr<'id'=Z a(

shoA+tem 9 unction<= ` $ar myFeature!Mcurrent+tem [ M<this=Z myFeature!get"ontent<myFeature!shoA"ontent=Z a(

get"ontent 9 unction<callbac3= ` $ar url [ myFeature!build6rl<=Z myFeature!Mcurrent+tem !data<'container'=!load<url( callbac3=Z a(

shoA"ontent 9 unction<= ` myFeature!Mcurrent+tem !data<'container'=!shoA<=Z myFeature!hide"ontent<=Z a(

hide"ontent 9 unction<= ` myFeature!Mcurrent+tem!siblings<= !each< unction<= ` M<this=!data<'container'=!hide<=Z a=Z a aZ

M<document=!ready<myFeature!init=Z La primera caracterPstica a notar es Sue el c'digo es mBs largo Sue el original ] como se dijo anteriormente( si este uera el alcance de la aplicaci'n( utili8ar un objeto literal seria probablemente una exageraci'n!

"on la nue$a organi8aci'n( las $entajas obtenidas son9 > 2eparaci'n de cada uncionalidad en peSueos mOtodos! En un uturo( si se Suiere cambiar la orma en Sue el contenido se muestra( serB claro en donde habrB Sue hacerlo! En el c'digo original( este paso es mucho mBs di Pcil de locali8ar!

> 2e eliminaron los usos de unciones an'nimas!

>

Las opciones de con iguraci'n se mo$ieron a una ubicaci'n central!

> 2e eliminaron las limitaciones Sue poseen las cadenas de mOtodos( haciendo Sue el c'digo sea mBs Bcil para re actori8ar( me8clar y reorgani8ar!

)or sus caracterPsticas( la utili8aci'n de objetos literales permiten una clara mejora para tramos largos de c'digo insertados en un bloSue M<document=!ready<=! 2in embargo( no son mBs a$an8ados Sue tener $arias declaraciones de unciones dentro de un bloSue M<document=!ready<=!

;5!:!: El )atr'n Modular

El patr'n modular supera algunas limitaciones del objeto literal( o reciendo pri$acidad para $ariables y unciones( exponiendo a su $e8 <si se lo desea= una &)+ p%blica!

El patr'n modular $ar eature [< unction<= `

?? $ariables y unciones pri$adas $ar pri$ateThing [ 'secret'( publicThing [ 'not secret'(

change)ri$ateThing [ unction<= ` pri$ateThing [ 'super secret'Z a(

say)ri$ateThing [ unction<= ` console!log<pri$ateThing=Z change)ri$ateThing<=Z aZ

?? &)+ publica return ` publicThing 9 publicThing( say)ri$ateThing 9 say)ri$ateThing a

a=<=Z

eature!publicThingZ ?? registra 'not secret'

eature!say)ri$ateThing<=Z ?? registra 'secret' y cambia el $alor ?? de pri$ateThing En el ejemplo( se autoejecuta una unci'n an'nima la cual de$uel$e un objeto! Dentro de la unci'n( se de inen algunas $ariables! Debido a Sue ellas son de inidas dentro de la unci'n( desde a uera no se tiene acceso a menos Sue se pongan dentro del objeto Sue se de$uel$e! Esto implica Sue ning%n c'digo uera de la unci'n tiene acceso a la $ariable pri$ateThing o a la unci'n say)ri$ateThing! 2in embargo( say)ri$ateThing posee acceso a pri$ateThing y change)ri$ateThing debido a estar de inidos en el mismo alcance!

El patr'n es poderoso debido a Sue permite tener $ariables y unciones pri$adas( exponiendo una &)+ limitada consistente en de$ol$er propiedades y mOtodos de un objeto!

& continuaci'n se muestra una re$isi'n del ejemplo $isto anteriormente( con las mismas caracterPsticas( pero exponiendo un %nico mOtodo p%blico del modulo( shoA+tem0y+ndex<=!

6tili8ar el patr'n modular para una uncionalidad jQuery M<document=!ready< unction<= ` $ar eature [ < unction<= `

$ar Mitems [ M<'^myFeature li'=( Mcontainer [ M<'Xdi$ class[econtainereYX?di$Y'=( Mcurrent+tem(

url0ase [ '? oo!php/item['(

create"ontainer [ unction<= ` $ar Mi [ M<this=( Mc [ Mcontainer!clone<=!appendTo<Mi=Z

Mi!data<'container'( Mc=Z a(

build6rl [ unction<= ` return url0ase T Mcurrent+tem!attr<'id'=Z a(

shoA+tem [ unction<= ` $ar Mcurrent+tem [ M<this=Z get"ontent<shoA"ontent=Z a(

shoA+tem0y+ndex [ unction<idx= ` M!proxy<shoA+tem( Mitems!get<idx==Z a(

get"ontent [ unction<callbac3= ` Mcurrent+tem!data<'container'=!load<build6rl<=( callbac3=Z a(

shoA"ontent [ unction<= ` Mcurrent+tem!data<'container'=!shoA<=Z hide"ontent<=Z a(

hide"ontent [ unction<= ` Mcurrent+tem!siblings<= !each< unction<= ` M<this=!data<'container'=!hide<=Z a=Z aZ

Mitems !each<create"ontainer= !clic3<shoA+tem=Z

return ` shoA+tem0y+ndex 9 shoA+tem0y+ndex aZ a=<=Z

eature!shoA+tem0y+ndex<5=Z a=Z

;5!4 #esti'n de Dependencias

Hota

Esta secci'n esta basada en la excelente documentaci'n de ReSuire*2 y es utili8ada con el permiso de *ames 0ur3e( autor de ReSuire*2!

"uando un proyecto alcan8a cierto tamao( comien8a a ser di Pcil el manejo de los m'dulos de una aplicaci'n( ya Sue es necesario saber ordenarlos de orma correcta( y comen8ar a combinarlos en un %nico archi$o para lograr la menor cantidad de peticiones! TambiOn es posible Sue se Suiera cargar c'digo Qal $ueloR luego de la carga de la pBgina!

ReSuire*2 es una herramienta de gesti'n de dependencias creada por *ames 0ur3e( la cual ayuda a manejar los m'dulos( cargarlos en un orden correcto y combinarlos de orma Bcil sin tener Sue reali8ar ning%n cambio! & su $e8( otorga una manera Bcil de cargar c'digo una $e8 cargada la pBgina( permitiendo minimi8ar el tiempo de descarga!

ReSuire*2 posee un sistema modular( Sue sin embargo( no es necesario seguirlo para obtener sus bene icios! El ormato modular de ReSuire*2 permite la escritura de c'digo encapsulado( incorporaci'n de internacionali8aci'n <i;In= a los paSuetes <para permitir utili8arlos en di erentes lenguajes= e incluso la utili8aci'n de ser$icios *2OH) como dependencias!

;5!4!; Obtener ReSuire*2

La manera mBs Bcil de utili8ar ReSuire*2 con jQuery es descargando el paSuete de jQuery con ReSuire*2 ya incorporado en Ol! Este paSuete excluye porciones de c'digo Sue duplican unciones de jQuery! TambiOn es %til descargar un ejemplo de proyecto jQuery Sue utili8a ReSuire*2!

;5!4!: 6tili8ar ReSuire*2 con jQuery

6tili8ar ReSuire*2 es simple( tan solo es necesario incorporar en la pBgina la $ersi'n de jQuery Sue posee ReSuire*2 incorporado y a continuaci'n solicitar los archi$os de la aplicaci'n! El siguiente ejemplo asume Sue tanto jQuery como los otros archi$os estBn dentro de la carpeta scripts?!

6tili8ar ReSuire*29 6n ejemplo simple XbDO"Tg)E htmlY XhtmlY XheadY XtitleYjQueryTReSuire*2 2ample )ageX?titleY Xscript src[escripts?reSuire1jSuery!jseYX?scriptY XscriptYreSuire<ceapped=ZX?scriptY X?headY XbodyY Xh;YjQueryTReSuire*2 2ample )ageX?h;Y X?bodyY X?htmlY La llamada a reSuire<ceapped= le dice a ReSuire*2 Sue cargue el archi$o scripts?app!js! ReSuire*2 cargarB cualSuier dependencia pasada a reSuire<= sin la extensi'n !js desde el mismo directorio Sue en Sue se encuentra el archi$o reSuire1jSuery!js( aunSue tambiOn es posible especi icar la ruta de la siguiente orma9 XscriptYreSuire<cescripts?app!jsed=ZX?scriptY El archi$o app!js es otra llamada a reSuire!js para cargar todos los archi$os necesarios para la aplicaci'n! En el siguiente ejemplo( app!js solicita dos extensiones jSuery!alpha!js y jSuery!beta!js <no son extensiones reales( solo ejemplos=! Estas extensiones estBn en la misma carpeta Sue reSuire1jSuery!js9

6n simple archi$o *a$a2cript con dependencias reSuire<cejSuery!alphae( ejSuery!betaed( unction<= ` ??las extensiones jSuery!alpha!js y jSuery!beta!js han sido cargadas! M< unction<= ` M<'body'=!alpha<=!beta<=Z a=Z a=Z

;5!4!4 "rear M'dulos Reusables con ReSuire*2

ReSuire*2 hace Sue sea Bcil de inir m'dulos reusables a tra$Os de reSuire!de <=! 6n modulo ReSuire*2 puede tener dependencias Sue pueden ser utili8adas para de inir un m'dulo( ademBs de poder de$ol$er un $alor ] un objeto( una unci'n( u otra cosa ] Sue puede ser incluso utili8ado otros m'dulos!

2i el m'dulo no posee ninguna dependencia( tan solo se debe especi icar el nombre como primer argumento de reSuire!de <=! El segundo argumento es un objeto literal Sue de ine las propiedades del m'dulo! )or ejemplo9

De inici'n de un m'dulo ReSuire*2 Sue no posee dependencias reSuire!de <emy?simpleshirte( ` color9 eblac3e( si8e9 eunisi8ee a =Z El ejemplo debe ser guardado en el archi$o my?simpleshirt!js!

2i el modulo posee dependencias( es posible especi icarlas en el segundo argumento de reSuire!de <= a tra$Os de un $ector= y luego pasar una unci'n como tercer argumento! Esta

unci'n serB llamada para de inir el m'dulo una $e8 cargadas todos las dependencias! Dicha unci'n recibe los $alores de$ueltos por las dependencias como un argumento <en el mismo orden en Sue son reSueridas en el $ector= y luego la misma debe de$ol$er un objeto Sue de ina el m'dulo!

De inici'n de un m'dulo ReSuire*2 con dependencias reSuire!de <emy?shirte( cemy?carte( emy?in$entoryed( unction<cart( in$entory= ` ??de$uel$e un objeto Sue de ine a emy?shirte return ` color9 ebluee( si8e9 elargee addTo"art9 unction<= ` in$entory!decrement<this=Z cart!add<this=Z a a a =Z En este ejemplo( el modulo my?shirt es creado! Este depende de my?cart y my?in$entory! En el disco( los archi$os estBn estructurados de la siguiente orma9 my?cart!js my?in$entory!js my?shirt!js La unci'n Sue de ine my?shirt no es llamada hasta Sue my?cart y my?in$entory hayan sido cargadas( y dicha unci'n recibe como argumentos a los m'dulos como cart y in$entory! El orden de los argumentos de la unci'n debe coincidir con el orden en Sue las dependencias se reSuieren en el $ector! El objeto de$uelto de ine el m'dulo my?shirt! De iniendo los m'dulos de esta orma( my?shirt no existe como un objeto global( ya Sue m%ltiples m'dulos pueden existir en la pBgina al mismo tiempo!

Los m'dulos no tienen Sue de$ol$er un objetoZ cualSuier tipo de $alor es permitido!

De inici'n de un m'dulo ReSuire*2 Sue de$uel$e una unci'n reSuire!de <emy?titlee( cemy?dependency;e( emy?dependency:ed( unction<dep;( dep:= ` ?? de$uel$e una unci'n para de inir emy?titlee! ?? Este de$uel$e o establece ?? el titulo de la $entana return unction<title= ` return title / <AindoA!title [ title= 9 AindoA!titleZ a a =Z 2olo un m'dulo debe ser reSuerido por archi$o *a$a2cript!

;5!4!C Optimi8ar el "'digo con las ,erramientas de ReSuire*2

6na $e8 incorporado ReSuire*2 para el manejo de dependencias( la optimi8aci'n del c'digo es muy Bcil! Descargue el paSuete de ReSuire*2 y col'Suelo en cualSuier lugar( pre erentemente uera del Brea de desarrollo Aeb! )ara los prop'sitos de este ejemplo( el paSuete de ReSuire*2 esta ubicado en una carpeta paralela al directorio Aebapp <la cual contiene la pBgina ,TML y todos los archi$os *a$a2cript de la aplicaci'n=! La estructura de directorios es9 reSuirejs? <utili8ado para ejecutar las herramientas= Aebapp?app!html Aebapp?scripts?app!js Aebapp?scripts?reSuire1jSuery!js

Aebapp?scripts?jSuery!alpha!js Aebapp?scripts?jSuery!beta!js Luego( en la carpeta en donde se encuentran reSuire1jSuery!js y app!js( crear un archi$o llamado app!build!js con el siguiente contenido9

&rchi$o de con iguraci'n para las herramientas de optimi8aci'n de ReSuire*2 ` appDir9 e!!?e( base6rl9 escripts?e( dir9 e!!?!!?Aebapp1builde( ??"omentar la siguiente lPnea si se desea ??mini icar el c'digo por el compilador ??en su modo esimplee optimi8e9 enonee(

modules9 c ` name9 eappe a d a )ara utili8ar la herramienta( es necesario tener instalado *a$a F! "losure "ompiler es utili8ado para la mini icaci'n del c'digo <en caso Sue optimi8e9 enonee estO comentado=!

)ara comen8ar a procesar los archi$os( abrir una $entana de comandos( dirigirse al directorio Aebapp?scripts y ejecutar9 ^ para sistemas Sue no son AindoAs !!?!!?reSuirejs?build?build!sh app!build!js

^ para sistemas AindoAs !!l!!lreSuirejslbuildlbuild!bat app!build!js 6na $e8 ejecutado( el archi$o app!js de la carpeta Aebapp1build contendrB todo el c'digo de app!js mBs el de jSuery!alpha!js y jSuery!beta!js! 2i se abre el archi$o app!html <tambiOn en la carpeta Aebapp1build= podrB notar Sue ninguna petici'n se reali8a para cargar jSuery!alpha!js y jSuery!beta!js!

;5!C Ejercicios

;5!C!; "rear un M'dulo )ortlet

&bra el archi$o ?ejercicios?portlets!html en el na$egador! Realice el ejercicio utili8ando el archi$o ?ejercicios?js?portlets!js! El ejercicio consiste en crear una unci'n creadora de portlet Sue utilice el patr'n modular( de tal manera Sue el siguiente c'digo uncione9 $ar my)ortlet [ )ortlet<` title 9 '"urry'( source 9 'data?html?curry!html'( initial2tate 9 'open' ?? or 'closed' a=Z

my)ortlet!Melement!appendTo<'body'=Z "ada portlet deberB ser un di$ con un tPtulo( un Brea de contenido( un bot'n para abrir?cerrar el portlet( un bot'n para remo$erlo y otro para actuali8arlo! El portlet de$uelto por la unci'n deberB tener la siguiente &)+ p%blica9 my)ortlet!open<=Z ?? uer8a a abrir my)ortlet!close<=Z ?? uer8a a cerrar my)ortlet!toggle<=Z ?? alterna entre los estados abierto y cerrado my)ortlet!re resh<=Z ?? actuali8a el contenido

my)ortlet!destroy<=Z ?? remue$e el portlet de la pBgina my)ortlet!set2ource<'data?html?onions!html'=Z ?? cambia el c'digo

;; E$entos )ersonali8ados

;;!; +ntroducci'n a los E$entos )ersonali8ados

Todos estamos amiliari8ados con los e$entos bBsicos ] clic3( mouseo$er( ocus( blur( submit( etc! ] Sue surgen a partir de la interacci'n del usuario con el na$egador!

Los e$entos personali8ados permiten conocer el mundo de la programaci'n orientada a e$entos <en inglOs e$ent1dri$en programming=! En este capPtulo( se utili8arB el sistema de e$entos personali8ados de jQuery para crear una simple aplicaci'n de b%sSueda en TAitter!

En un primer momento puede ser di Pcil entender el reSuisito de utili8ar e$entos personali8ados( ya Sue los e$entos con$encionales permiten satis acer todas las necesidades! 2in embargo( los e$entos personali8ados o recen una nue$a orma de pensar la programaci'n en *a$a2cript! En lugar de en ocarse en el elemento Sue ejecuta una acci'n( los e$entos personali8ados ponen la atenci'n en el elemento en donde la acci'n $a a ocurrir! Este concepto brinda $arios bene icios9 >Los comportamientos del elemento objeti$o pueden ser ejecutados por di erentes elementos utili8ando el mismo c'digo! >Los comportamientos pueden ser ejecutados en m%ltiples( similares elementos objeti$os a la $e8! >Los comportamientos son asociados de orma mBs clara con el elemento objeti$o( haciendo Sue el c'digo sea mBs Bcil de leer y mantener!

6n ejemplo es la mejor orma de explicar el asunto! 2uponga Sue posee una lBmpara incandescente en una habitaci'n de una casa! La lBmpara actualmente esta encendida! La misma es controlada por dos interruptores de tres posiciones y un clapper <interruptor acti$ado por aplausos=9 Xdi$ class[eroome id[e3itcheneY

Xdi$ class[elightbulb oneYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[eclappereYX?di$Y X?di$Y Ejecutando el clapper o alguno de los interruptores( el estado de la lampara cambia! & los interruptores o al clapper no le interesan si la lBmpara esta prendida o apagada( tan solo Suieren cambiar su estado

2in la utili8aci'n de e$entos personali8ados( es posible escribir la rutina de la siguiente manera9 M<'!sAitch( !clapper'=!clic3< unction<= ` $ar Mlight [ M<this=!parent<=! ind<'!lightbulb'=Z i <Mlight!has"lass<'on'== ` Mlight!remo$e"lass<'on'=!add"lass<'o '=Z a else ` Mlight!remo$e"lass<'o '=!add"lass<'on'=Z a a=Z )or otro lado( utili8ando e$entos personali8ados( el c'digo Sueda asP9 M<'!lightbulb'=!on<'change2tate'( unction<e= ` $ar Mlight [ M<this=Z i <Mlight!has"lass<'on'== ` Mlight!remo$e"lass<'on'=!add"lass<'o '=Z a else ` Mlight!remo$e"lass<'o '=!add"lass<'on'=Z a a=Z

M<'!sAitch( !clapper'=!clic3< unction<= ` M<this=!parent<=! ind<'!lightbulb'=!trigger<'change2tate'=Z a=Z &lgo importante ha sucedido9 el comportamiento de la lBmpara se ha mo$ido( antes estaba en los interruptores y en el clapper( ahora se encuentra en la misma lBmpara!

TambiOn es posible hacer el ejemplo un poco mBs interesante! 2uponga Sue se ha aadido otra habitaci'n a la casa( junto con un interruptor general( como se muestra a continuaci'n9 Xdi$ class[eroome id[e3itcheneY Xdi$ class[elightbulb oneYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[eclappereYX?di$Y X?di$Y Xdi$ class[eroome id[ebedroomeY Xdi$ class[elightbulb oneYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[esAitcheYX?di$Y Xdi$ class[eclappereYX?di$Y X?di$Y Xdi$ id[emasterhsAitcheYX?di$Y 2i existe alguna lBmpara prendida en la casa( es posible apagarlas a tra$Os del interruptor general( de igual orma si existen luces apagadas( es posible prenderlas con dicho interruptor! )ara reali8ar esta tarea( se agregan dos e$entos personali8ados mBs a la lBmpara9 turnOn y turnO ! & tra$Os de una l'gica en el e$ento change2tate se decide SuO e$ento personali8ado utili8ar9 M<'!lightbulb'= !on<'change2tate'( unction<e= ` $ar Mlight [ M<this=Z i <Mlight!has"lass<'on'== `

Mlight!trigger<'turnO '=Z a else ` Mlight!trigger<'turnOn'=Z a a= !on<'turnOn'( unction<e= ` M<this=!remo$e"lass<'o '=!add"lass<'on'=Z a= !on<'turnO '( unction<e= ` M<this=!remo$e"lass<'o '=!add"lass<'on'=Z a=Z

M<'!sAitch( !clapper'=!clic3< unction<= ` M<this=!parent<=! ind<'!lightbulb'=!trigger<'change2tate'=Z a=Z

M<'^masterhsAitch'=!clic3< unction<= ` i <M<'!lightbulb!on'=!length= ` M<'!lightbulb'=!trigger<'turnO '=Z a else ` M<'!lightbulb'=!trigger<'turnOn'=Z a a=Z Hote como el comportamiento del interruptor general se ha $inculado al interruptor general mientras Sue el comportamiento de las lBmparas pertenece a las lBmparas!

Hota

2i esta acostumbrado a la programaci'n orientada a objetos( puede resultar %til pensar de los e$entos personali8ados como mOtodos de objetos! En tOrminos generales( el objeto al Sue pertenece el mOtodo se crea a partir del selector jQuery! Jincular el e$ento personali8ado change2tate a todos los elementos M<m!lightn= es similar a tener una clase llamada Light con un mOtodo change2tate( y luego instanciar nue$os objetos Light por cada elemento!

Recapitulaci'n9 M! n!on y M! n!trigger

En el mundo de los e$entos personali8ados( existen dos mOtodos importantes de jQuery9 M! n!on y M! n!trigger! En el capPtulo dedicado a e$entos se explic' la utili8aci'n de estos dos mOtodos para trabajar con e$entos del usuarioZ en este capPtulo es importante recordar : puntos9 >El mOtodo M! n!on toma como argumentos un tipo de e$ento y una unci'n controladora de e$ento! Opcionalmente( puede recibir in ormaci'n asociada al e$ento como segundo argumento( despla8ando como tercer argumento a la unci'n controladora de e$ento! "ualSuier in ormaci'n pasada estarB disponible a la unci'n controladora a tra$Os de la propiedad data del objeto del e$ento! & su $e8( la unci'n controladora recibe el objeto del e$ento como primer argumento! >El mOtodo M! n!trigger toma como argumentos el tipo de e$ento y opcionalmente( puede tomar un $ector con $alores! Estos $alores serBn pasados a la unci'n controladora de e$entos como argumentos luego del objeto del e$ento!

& continuaci'n se muestra un ejemplo de utili8aci'n de M! n!on y M! n!trigger en donde se utili8a in ormaci'n personali8ada en ambos casos9 M<document=!on<'my"ustomE$ent'( ` oo 9 'bar' a( unction<e( arg;( arg:= ` console!log<e!data! oo=Z ?? 'bar' console!log<arg;=Z ?? 'bim' console!log<arg:=Z ?? 'ba8' a=Z

M<document=!trigger<'my"ustomE$ent'( c 'bim'( 'ba8' d=Z

;;!;!; 6n Ejemplo de &plicaci'n

)ara demostrar el poder de los e$entos personali8ados( se desarrollarB una simple herramienta para buscar en TAitter! Dicha herramienta o recerB $arias maneras para Sue el usuario realice una b%sSueda9 ingresando el tOrmino a buscar en una caja de texto o consultando los Qtemas de modaR de TAitter!

Los resultados de cada tOrmino se mostrarBn en un contenedor de resultadosZ dichos resultados podrBn expandirse( colapsarse( re rescarse y remo$erse( ya sea de orma indi$idual o conjunta!

El resultado inal de la aplicaci'n serB el siguiente9

Figura ;;!;! La aplicaci'n inali8ada

La aplicaci'n inali8ada

;;!;!;!; +niciaci'n

2e empie8a con un ,TML bBsico9 Xh;YTAitter 2earchX?h;Y Xinput type[ebuttone id[egethtrendse $alue[eLoad Trending Termse ?Y

X ormY Xinput type[etexte class[einputhtexte id[esearchhterme ?Y

Xinput type[esubmite class[einputhsubmite $alue[e&dd 2earch Terme ?Y X? ormY

Xdi$ id[etAittereY Xdi$ class[etemplate resultseY Xh:Y2earch Results or Xspan class[esearchhtermeYX?spanYX?h:Y X?di$Y X?di$Y El ,TML posee un contenedor <^tAitter= para el Aidget( una plantilla para los resultados <oculto con "22= y un simple ormulario en donde el usuario puede escribir el tOrmino a buscar!

Existen dos tipos de elementos en los cuales actuar9 los contenedores de resultados y el contenedor TAitter!

Los contenedores de resultados son el cora8'n de la aplicaci'n! 2e crearB una extensi'n para preparar cada contenedor una $e8 Sue Oste se agrega al contenedor TAitter! &demBs( entre otras cosas( la extensi'n $incularB los e$entos personali8ados por cada contenedor y aadirB en la parte superior derecha de cada contenedor botones Sue ejecutarBn acciones! "ada contenedor de resultados tendrB los siguientes e$entos personali8ados9 re resh 2eala Sue la in ormaci'n del contenedor se esta actuali8ando y dispara la petici'n Sue busca los datos para el tOrmino de b%sSueda! populate Recibe la in ormaci'n *2OH y la utili8a para rellenar el contenedor! remo$e Remue$e el contenedor de la pBgina luego de Sue el usuario con irme la acci'n! Dicha con irmaci'n puede omitirse si se pasa true como segundo argumento del controlador de e$ento! El e$ento ademBs remue$e el tOrmino asociado con el contenedor de resultados del objeto global Sue contiene los tOrminos de b%sSueda!

collapse &ade una clase al contenedor( la cual ocultarB el resultado a tra$Os de "22! &demBs cambiarB el bot'n de Q"olapsarR a QExpandirR! expand Remue$e la clase del contenedor Sue aade el e$ento collapse! &demBs cambiarB el bot'n de QExpandirR a Q"olapsarR!

&demBs( la extensi'n es responsable de aadir los botones de acciones al contenedor( $inculando un e$ento clic3 a cada bot'n y utili8ando la clase de cada Ptem para determinar SuO e$ento personali8ado serB ejecutado en cada contenedor de resultados! M! n!tAitterResult [ unction<settings= ` return this!each< unction<= ` $ar Mresults [ M<this=( Mactions [ M! n!tAitterResult!actions [ M! n!tAitterResult!actions -M! n!tAitterResult!create&ctions<=( Ma [ Mactions!clone<=!prependTo<Mresults=( term [ settings!termZ

Mresults! ind<'span!searchhterm'=!text<term=Z

M!each< c're resh'( 'populate'( 'remo$e'( 'collapse'( 'expand'd( unction<i( e$= ` Mresults!bind< e$( ` term 9 term a( M! n!tAitterResult!e$entsce$d =Z

a =Z

?? utili8a la clase de cada acci'n para determinar ?? Sue e$ento se ejecutarB en el panel de resultados Ma! ind<'li'=!clic3< unction<= ` ?? pasa el elemento XliY clic3eado en la unci'n ?? para Sue se pueda manipular en caso de ser necesario Mresults!trigger<M<this=!attr<'class'=( c M<this= d=Z a=Z a=Z aZ

M! n!tAitterResult!create&ctions [ unction<= ` return M<'Xul class[eactionse ?Y'=!append< 'Xli class[ere resheYRe reshX?liY' T 'Xli class[eremo$eeYRemo$eX?liY' T 'Xli class[ecollapseeY"ollapseX?liY' =Z aZ

M! n!tAitterResult!e$ents [ ` re resh 9 unction<e= ` ?? indica Sue los resultados se estan actuali8ando $ar Mthis [ M<this=!add"lass<'re reshing'=Z

Mthis! ind<'p!tAeet'=!remo$e<=Z

Mresults!append<'Xp class[eloadingeYLoading !!!X?pY'=Z

?? obtiene la in ormaci'n de TAitter en ormato jsonp M!get*2OH< 'http9??search!tAitter!com?search!json/S[' T escape<e!data!term= T 'Nrpp[DNcallbac3[/'( unction<json= ` Mthis!trigger<'populate'( c json d=Z a =Z a(

populate 9 unction<e( json= ` $ar results [ json!resultsZ $ar Mthis [ M<this=Z

Mthis! ind<'p!loading'=!remo$e<=Z

M!each<results( unction<i(result= ` $ar tAeet [ 'Xp class[etAeeteY' T 'Xa hre [ehttp9??tAitter!com?' T result! romhuser T 'eY' T result! romhuser T 'X?aY9 ' T result!text T ' Xspan class[edateeY' T

result!createdhat T 'X?spanY' T 'X?pY'Z Mthis!append<tAeet=Z a=Z

?? indica Sue los resultados ?? ya se han actuali8ado Mthis!remo$e"lass<'re reshing'=Z a(

remo$e 9 unction<e( orce= ` i < b orce NN bcon irm<'Remo$e panel or term ' T e!data!term T '/'= =` returnZ a M<this=!remo$e<=Z

?? indica Sue ya no se tendrB ?? un panel para el tOrmino searchhtermsce!data!termd [ 5Z a(

collapse 9 unction<e= ` M<this=! ind<'li!collapse'=!remo$e"lass<'collapse'=

!add"lass<'expand'=!text<'Expand'=Z

M<this=!add"lass<'collapsed'=Z a(

expand 9 unction<e= ` M<this=! ind<'li!expand'=!remo$e"lass<'expand'= !add"lass<'collapse'=!text<'"ollapse'=Z

M<this=!remo$e"lass<'collapsed'=Z a aZ El contenedor TAitter( posee solo dos e$entos personali8ados9 getResults Recibe un tOrmino de b%sSueda y comprueba si ya no existe un contenedor de resultados para dicho tOrmino! En caso de no existir( aade un contenedor utili8ando la plantilla de resultados( lo con igura utili8ando la extensi'n M! n!tAitterResult <mostrada anteriormente= y luego ejecuta el e$ento re resh con el in de cargar correctamente los resultados! Finalmente( guarda el tOrmino buscado para no tener $ol$er a pedir los datos sobre la b%sSueda! getTrends "onsulta a TAitter el listado de los ;5 primeros QtOrminos de modaR( interact%a con ellos y ejecuta el e$ento getResults por cada uno( de tal modo Sue aade un contenedor de resultados por cada tOrmino!

Jinculaciones en el contenedor TAitter9 M<'^tAitter'= !on<'getResults'( unction<e( term= ` ?? se comprueba Sue ya no exista una caja para el tOrmino i <bsearchhtermsctermd= ` $ar Mthis [ M<this=Z

$ar Mtemplate [ Mthis! ind<'di$!template'=Z

?? reali8a una copia de la plantilla ?? y la inserta como la primera caja de resultados Mresults [ Mtemplate!clone<=! remo$e"lass<'template'=! insert0e ore<Mthis! ind<'di$9 irst'==! tAitterResult<` 'term' 9 term a=Z

?? carga el contenido utili8ando el e$ento personali8ado ere reshe ?? $inculado al contenedor de resultados Mresults!trigger<'re resh'=Z searchhtermsctermd [ ;Z a a= !on<'getTrends'( unction<e= ` $ar Mthis [ M<this=Z M!get*2OH<'http9??api!tAitter!com?;?trends?;!json/callbac3[/'( unction<json= ` $ar trends [ jsonc5d!trendsZ M!each<trends( unction<i( trend= ` Mthis!trigger<'getResults'( c trend!name d=Z a=Z a=Z a=Z

,asta ahora( se ha escrito una gran cantidad de c'digo Sue no reali8a nada( lo cual no esta mal! 2e han especi icado todos los comportamientos Sue se desean para los elementos n%cleos y se ha creado un s'lido marco para la creaci'n rBpida de la inter a8!

& continuaci'n( se conecta la caja de b%sSueda y el bot'n para cargar los QTemas de modaR! En la caja de texto( se captura el tOrmino ingresado y se pasa al mismo tiempo Sue se ejecuta el e$ento getResults! )or otro lado( haciendo clic3 en el bot'n para cargar los QTemas de modaR( se ejecuta el e$ento getTrends9 M<' orm'=!submit< unction<e= ` e!pre$entDe ault<=Z $ar term [ M<'^searchhterm'=!$al<=Z M<'^tAitter'=!trigger<'getResults'( c term d=Z a=Z

M<'^gethtrends'=!clic3< unction<= ` M<'^tAitter'=!trigger<'getTrends'=Z a=Z &adiendo botones con un +D apropiado( es posible remo$er( colapsar( expandir y re rescar todos los contenedores de resultados al mismo tiempo! )ara el bot'n Sue remue$e el contenedor( notar Sue se esta pasando true al controlador del e$ento como segundo argumento( indicando Sue no se desea una con irmaci'n del usuario para remo$er el contenedor! M!each<c're resh'( 'expand'( 'collapse'd( unction<i( e$= ` M<'^' T e$=!clic3< unction<e= ` M<'^tAitter di$!results'=!trigger<e$=Z a=Z a=Z

M<'^remo$e'=!clic3< unction<e= ` i <con irm<'Remo$e all results/'== ` M<'^tAitter di$!results'=!trigger<'remo$e'( c true d=Z a a=Z

;;!;!;!: "onclusi'n

Los e$entos personali8ados o recen una nue$a manera de pensar el c'digo9 ellos ponen el On asis en el objeti$o de un comportamiento( no en el elemento Sue lo acti$a! 2i se toma el tiempo desde el principio para explicar las pie8as de su aplicaci'n( asP como los comportamientos Sue esas pie8as necesitan exhibir( los e$entos personali8ados pro$een una manera poderosa para QhablarR con esas pie8as( ya sea de una en una o en masa!

6na $e8 Sue los comportamientos se han descripto( se con$ierte en algo tri$ial ejecutarlos desde cualSuier lugar( lo Sue permite la rBpida creaci'n y experimentaci'n de opciones de inter a8! Finalmente( los e$entos personali8ados tambiOn permiten mejorar la lectura del c'digo y su mantenimiento( haciendo clara la relaci'n entre un elemento y su comportamiento!

)uede $er la aplicaci'n completa en los archi$os demos?custom1e$ents?custom1e$ents!html y demos?custom1e$ents?js?custom1e$ents!js del material Sue componen este libro!

;: Funciones y ejecuciones di eridas a tra$Os del objeto M!De erred

;:!; +ntroducci'n

& partir de la $ersi'n ;!D de jQuery( la biblioteca introdujo una nue$a utilidad9 El objeto di erido M!De erred <en inglOs De erred Object=! Este objeto introduce nue$as ormas para la in$ocaci'n y ejecuci'n de las unciones de de$oluci'n <callbac3s=( permitiendo crear aplicaciones mBs robustas y lexibles! )ara mBs detalles sobre M!De erred( puede consultar http9??api!jSuery!com?category?de erred1object?!

;:!: El objeto di erido y &jax

El caso mBs com%n en donde se puede apreciar la utilidad del objeto di erido es en el manejo de las unciones de de$oluci'n en peticiones &jax!

2eg%n se pudo apreciar en el capPtulo dedicado( una manera de in$ocar una petici'n &jax es9

Manera tradicional de utili8ar el mOtodo M!ajax M!ajax<` ?? la 6RL para la petici'n url 9 'post!php'(

?? unci'nes de de$oluci'n a ejecutar ?? en caso Sue la petici'n haya sido ?? satis actoria( con error y?o completada success 9 unction<data= ` alert<')etici'n reali8ada satis actoriamente'=Z a( error 9 unction<jSV,R( status( error= ` alert<'Disculpe( existi' un problema'=Z a( complete 9 unction<jSV,R( status= ` alert<')etici'n reali8ada'=Z a a=Z "omo se puede obser$ar( las unciones de de$oluci'n son con iguradas dentro del mismo objeto M!ajax! Esta manera es incomoda y poco lexible ya Sue no permite desacoplar las unciones de de$oluci'n de la misma petici'n &jax! g en grandes aplicaciones esto puede llegar a ser un problema!

El objeto di erido nos permite reescribir el c'digo anterior de la siguiente manera9

El objeto di erido en una petici'n &jax ?? dentro de una $ariable se de ine ?? la con iguraci'n de la petici'n ajax $ar ajax [ M!ajax<` url 9 'post!php' a=Z

?? a tra$Os del mOtodo done<= ejecutamos ?? la unci'n de de$oluci'n satis actoria <sucess= ajax!done< unction<=` alert<')etici'n reali8ada satis actoriamente'=Z a=Z

?? a tra$Os del mOtodo ail<= ejecutamos ?? la unci'n de de$oluci'n de error <error= ajax! ail< unction<=` alert<'Disculpe( existi' un problema'=Z a=Z

?? a tra$Os del mOtodo alAays<= ejecutamos ?? la unci'n de de$oluci'n de petici'n completada <complete= ajax!alAays< unction<=` alert<')etici'n reali8ada'=Z a=Z & tra$Os de los mOtodos de erred!done( de erred! ail y de erred!alAays es posible desacoplar las unciones de de$oluci'n de la misma petici'n &jax( permitiendo un manejo mBs comodo de las mismas!

Hotar Sue en en ning%n momento se llama al objeto di erido M!De erred! Esto es porSue jQuery ya lo incorpora implicitamente dentro del manejo del objeto M!ajax! MBs adelante se explicarB como utili8ar al objeto M!De erred de manera explPcita!

De la misma orma es posible crear colas de unciones de de$oluci'n o atarlas a di erentes l'gicas?acciones9

"olas de unciones de de$oluci'n en una petici'n &jax ?? de inici'n de la petici'n &jax $ar ajax [ M!ajax<` url 9 'post!php' a=Z

?? primera unci'n de de$oluci'n a ejecutar ajax!done< unction<=` alert<')rimera unci'n de de$oluci'n en caso satis actorio'=Z a=Z

?? segunda unci'n de de$oluci'n a ejecutar ?? inmediatamente despuOs de la primera ajax!done< unction<=` alert<'2egunda unci'n de de$oluci'n en caso satis actorio'=Z a=Z

?? si el usuario hace clic3 en ^element se ?? agrega una tercera unci'n de de$oluci'n M<'^element'=!clic3< unction<=`

ajax!done< unction<=` alert<'Tercera unci'n de de$oluci'n si el usuario hace clic3'=Z a=Z

a=Z

?? en caso Sue exista un error se de ine otra ?? unci'n de de$oluci'n ajax! ail< unction<=` alert<'Disculpe( existi' un problema'=Z a=Z &l ejecutarse la petici'n &jax( y en caso de Sue Osta haya sido satis actoria( se ejecutan dos unciones de de$oluci'n( una detrBs de la otra! 2in embargo si el usuario hace clic3 en ^element se agrega una tercera unci'n de de$oluci'n( la cual tambiOn se ejecuta inmediatamente( sin $ol$er a reali8ar la petici'n &jax! Esto es porSue el objeto di erido <Sue se encuentra implicitamente en la $ariable ajax= ya tiene in ormaci'n asociada sobre Sue la petici'n &jax se reali8' correctamente!

;:!:!; de erred!then

Otra manera de utili8ar los mOtodos de erred!done y de erred! ail es a tra$Os de de erred!then( el cual permite de inir en un mismo bloSue de c'digo las unciones de de$oluci'n a suceder en los casos satis actorios y erroneos!

6tili8aci'n del mOtodo de erred!then ?? de inici'n de la petici'n &jax $ar ajax [ M!ajax<` url 9 'post!php' a=Z

?? el mOtodo espera dos unciones de de$oluci'n ajax!then<

?? la primera es la unci'n de de$oluci'n satis actoria unction<=` alert<')etici'n reali8ada satis actoriamente'=Z a(

?? la segunda es la unci'n de de$oluci'n erronea unction<=` alert<'Disculpe( existi' un problema'=Z a

=Z

;:!4 "reaci'n de objetos di eridos con M!De erred

&sP como es posible desacoplar las unciones de de$oluci'n en una petici'n &jax( tambiOn es posible reali8arlo en otras unciones utili8ando de manera explPcita el objeto M!De erred!

)or ejemplo( una unci'n Sue $eri ica si un n%mero es par( de la manera tradicional puede escribirse de la siguiente manera9

Funci'n sin utili8ar el objeto M!De erred ?? unci'n Sue calcula si un n%mero entero es par o impar $ar isE$en [ unction<number= `

i <numberi: [[ 5=` return trueZ a else ` return alseZ a

?? si es par registra un mensaje( ?? en caso contrario registra otro i <isE$en<:==` console!log<'Es par'=Z a else ` console!log<'Es impar'=Z a 6tili8ando el objeto M!De erred( el mismo ejemplo puede reescribirse de la siguiente orma9

Funci'n utili8ando el objeto M!De erred ?? unci'n Sue calcula si un n%mero entero es par o impar $ar isE$en [ unction<number= `

?? guarda en una $ariable al objeto M!De erred<= $ar d d [ M!De erred<=Z

?? si es par( resuel$e al objeto utili8ando de erred!resol$e( ?? caso contrario( lo recha8a utili8ando de erred!reject i <numberi: [[ 5=`

d d!resol$e<=Z a else ` d d!reject<=Z a

?? de$uel$e al objeto di erido con su estado de inido return d d!promise<=Z

?? con de erred!then se manejan las unciones de de$oluci'n ?? en los casos Sue el numero sea par o impar isE$en<:=!then<

?? la primera es la unci'n de de$oluci'n satis actoria unction<=` console!log<'Es par'=Z a(

?? la segunda es la unci'n de de$oluci'n erronea unction<=` console!log<'Es impar'=Z a

=Z Los mOtodos de erred!resol$e y de erred!reject permiten de inir el estado interno del objeto M!De erred<=! Esta de inici'n es permanente( es decir( no es posible modi icarla despuOs y es lo Sue permite manejar el comportamiento y ejecuci'n de las unciones de de$oluci'n posteriores para cada uno de los casos!

Hotar Sue la unci'n isE$en de$uel$e el mOtodo de erred!promise! El mismo es una $ersi'n del objeto di erido( pero Sue s'lo permite leer su estado o aadir nue$as unciones de de$oluci'n!

Hota

En los ejemplos Sue utili8aban &jax mostrados anteriormente( los mOtodos de erred!resol$e y de erred!reject son llamados de manera interna por jQuery dentro de la con iguraci'n sucess y error de la petici'n! )or eso mismos se decPa Sue el objeto di erido estaba incorporado implicitamente dentro del objeto M!ajax!

Los mOtodos de erred!resol$e y de erred!reject ademBs permiten de$ol$er $alores para ser utili8ados por las unciones de de$oluci'n!

Funci'n con de erred!resol$e y de erred!reject de$ol$iendo $alores reutili8ables ?? unci'n Sue calcula si un numero entero es par o impar $ar isE$en [ unction<number= `

$ar d d [ M!De erred<=Z

?? resuel$e o recha8a al objeto utili8ando ?? y de$uel$e un texto con el resultado i <numberi: [[ 5=` d d!resol$e<'El n%mero ' T number T ' es par'=Z a else ` d d!reject<'El n%mero ' T number T ' es impar'=Z a

?? de$uel$e al objeto di erido con su estado de inido return d d!promise<=Z

isE$en<:=!then<

unction<result=` console!log<result=Z ?? Registra 'El n%mero : es par' a(

unction<result=` console!log<result=Z a

=Z

Hota

Es posible determinar el estado de un objeto di erido a tra$Os del mOtodo de erred!state! El mismo de$uel$e un string con alguno de estos tres $alores9 pending( resol$ed o rejected! )ara mBs detalles sobre de erred!state( puede consultar http9??api!jSuery!com?de erred!state?!

;:!4!; de erred!pipe

Existen casos en Sue se necesita modi icar el estado de un objeto di erido o iltrar la in ormaci'n Sue $iene asociada! )ara estos casos existe de erred!pipe! 2u uncionamiento es

similar a de erred!then( con la di erencia Sue de erred!pipe de$uel$e un nue$o objeto di erido modi icado a tra$Os de una unci'n interna!

Funci'n iltrando $alores utili8ando de erred!pipe ?? unci'n Sue calcula si un n%mero entero es par o impar $ar isE$en [ unction<number= `

$ar d d [ M!De erred<=Z

i <numberi: [[ 5=` d d!resol$e<number=Z a else ` d d!reject<number=Z a

return d d!promise<=Z

?? $ector con una serie de n%meros pares e impares $ar numbers [ c5( :( L( ;5( D( I( ;:dZ

?? a tra$Os de de erred!pipe se pregunta si n%mero se encuentra ?? dentro del $ector numbers isE$en<:=!pipe<

unction<number=`

?? crea un nue$o objeto di erido $ar d d [ M!De erred<=Z

i <M!in&rray<number( numbers= b[[ 1;=` d d!resol$e<=Z a else ` d d!reject<=Z a

?? de$uel$e un nue$o objeto di erido return d d!promise<=Z

=!then<

unction<=` ?? al estar dentro del $ector numbers y ser par( ?? se registra este mensaje console!log<'El n%mero es par y se encuentra dentro de numbers'=Z a(

unction<=` console!log<'El n%mero es impar o no se encuentra dentro de numbers'=Z a

=Z

)ara mBs detalles sobre de erred!pipe( puede consultar http9??api!jSuery!com?de erred!pipe?!

;:!4!: M!Ahen

El mOtodo M!Ahen permite ejecutar unciones de de$oluci'n( cuando uno o mBs objetos di eridos posean algun estado de inido!

6n caso com%n de utili8aci'n de M!Ahen es cuando se Suiere $eri icar Sue dos peticiones &jax separadas se han reali8ado!

6tili8aci'n de M!Ahen ?? primera petici'n ajax $ar comments [ M!ajax<` url 9 '?echo?json?' a=Z

?? segunda petici'n ajax $ar $alidation [ M!ajax<` url 9 '?echo?json?' a=Z

?? cuando las dos peticiones sean reali8adas ?? ejecuta alguna unci'n de de$oluci'n de inida ?? dentro de de erred!then M!Ahen<comments( $alidation=!then< unction<=` alert<')eticiones reali8adas'=Z

a( unction<=` alert<'Disculpe( existi' un problema'=Z a =Z )ara mBs detalles sobre M!Ahen( puede consultar http9??api!jSuery!com?jQuery!Ahen?!

"opyright o :5;;

Material licenciado por Rebecca Murphey bajo la licencia "reati$e "ommons &ttribution12hare &li3e 4!5 6nited 2tates! 6sted es libre de copiarlo( distribuirlo( transmitirlo y modi icarlo( siempre y cuando haga re erencia a este repositorio y atribuya la autorPa original a Rebecca Murphey! 2i altera( trans orma o crea una obra deri$ada( deberB distribuir el resultado bajo una licencia igual( similar o compatible! "ualSuiera de las condiciones mencionadas pueden no aplicarse si obtiene permisos del autor! )ara cualSuier reutili8aci'n o distribuci'n( deberB dejar en claro la licencia la mejor manera para hacerlo es a tra$Os de un enlace hacia la licencia "reati$e "ommons &ttribution12hare &li3e 4!5 6nited 2tates!

7ltima actuali8aci'n del libro9 Diciembre :5;: <$er cambios=!