22/12/12

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

LibrosWeb.es
Inicio Introduccin a AJAX Captulo 3. JavaScript avanzado

Captulo 3. JavaScript avanzado

3.1. Objetos
Al igual que sucede con otros lenguajes de programacin, los objetos se emplean en JavaScript para organizar el cdigo fuente de una forma ms clara y para encapsular mtodos y funciones comunes. La forma ms sencilla de crear un objeto es mediante la palabra reservada n e w seguida del nombre de la clase que se quiere instanciar:
v a re l O b j e t o=n e wO b j e c t ( ) ; v a rl a C a d e n a=n e wS t r i n g ( ) ;

El objeto l a C a d e n acreado mediante el objeto nativo S t r i n gpermite almacenar una cadena de texto y aprovechar todas las herramientas y utilidades que proporciona JavaScript para su manejo. Por otra parte, la variable e l O b j e t oalmacena un objeto genrico de JavaScript, al que se pueden aadir propiedades y mtodos propios para definir su comportamiento.

3.1.1. Definicin de un objeto

Tcnicamente, un objeto de JavaScript es un array asociativo formado por las propiedades y los mtodos del objeto. As, la forma ms directa para definir las propiedades y mtodos de un objeto es mediante la notacin de puntos de los arrays asociativos. Un array asociativo es aquel en el que cada elemento no est asociado a su posicin numrica dentro del array, sino que est asociado a otro valor especfico. Los valores de los arrays normales se asocian a ndices que siempre son numricos. Los valores de los arrays asociativos se asocian a claves que siempre son cadenas de texto. La forma tradicional de definir los arrays asociativos es mediante la clase A r r a y :
v a re l A r r a y=n e wA r r a y ( ) ; e l A r r a y [ ' p r i m e r o ' ]=1 ; e l A r r a y [ ' s e g u n d o ' ]=2 ; a l e r t ( e l A r r a y [ ' p r i m e r o ' ] ) ; a l e r t ( e l A r r a y [ 0 ] ) ;

El primer a l e r t ( )muestra el valor 1correspondiente al valor asociado con la clave p r i m e r o . El segundo a l e r t ( )muestra u n d e f i n e d , ya que como no se trata de un array normal, sus elementos no se pueden acceder mediante su posicin numrica. Afortunadamente, existen mtodos alternativos abreviados para crear array asociativos. El ejemplo anterior se puede rehacer de la siguiente forma:
v a re l A r r a y=n e wA r r a y ( ) ; e l A r r a y . p r i m e r o=1 ; e l A r r a y . s e g u n d o=2 ; a l e r t ( e l A r r a y [ ' p r i m e r o ' ] ) ; a l e r t ( e l A r r a y . p r i m e r o ) ; a l e r t ( e l A r r a y [ 0 ] ) ;

El mtodo seguido en el ejemplo anterior para crear el array asociativo se denomina "notacin de puntos". Para acceder y/o establecer cada valor, se indica el nombre del array seguido de un punto y seguido del nombre de cada clave. De forma genrica, la notacin de puntos tiene el siguiente formato:
n o m b r e A r r a y . n o m b r e C l a v e=v a l o r ;

Para acceder a un determinado valor, tambin se puede utilizar la notacin de puntos en vez de la tradicional notacin de los arrays, de forma que las dos instrucciones siguientes son equivalentes:

www.librosweb.es/ajax/capitulo3.html

1/8

22/12/12
e l A r r a y [ ' p r i m e r o ' ] ; e l A r r a y . p r i m e r o ;

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

Ms adelante se muestra otra forma an ms abreviada y directa de establecer el valor tanto de los arrays "normales" como de los arrays asociativos.

3.1.1.1. Propiedades
Como los objetos son en realidad arrays asociativos que almacenan sus propiedades y mtodos, la forma ms directa para definir esas propiedades y mtodos es la notacin de puntos:
e l O b j e t o . i d=" 1 0 " ; e l O b j e t o . n o m b r e=" O b j e t od ep r u e b a " ;

Al contrario de lo que sucede en otros lenguajes orientados a objetos, como por ejemplo Java, para asignar el valor de una propiedad no es necesario que la clase tenga definida previamente esa propiedad. Tambin es posible utilizar la notacin tradicional de los arrays para definir el valor de las propiedades:
e l O b j e t o [ ' i d ' ]=" 1 0 " ; e l O b j e t o [ ' n o m b r e ' ]=" O b j e t od ep r u e b a " ;

3.1.1.2. Mtodos
Adems de las propiedades, los mtodos de los objetos tambin se pueden definir mediante la notacin de puntos:
e l O b j e t o . m u e s t r a I d=f u n c t i o n ( ){ a l e r t ( " E lI Dd e lo b j e t oe s"+t h i s . i d ) ; }

Los mtodos se definen asignando funciones al objeto. Si la funcin no est definida previamente, es posible crear una funcin annima para asignarla al nuevo mtodo del objeto, tal y como muestra el ejemplo anterior. Uno de los aspectos ms importantes del ejemplo anterior es el uso de la palabra reservada t h i s . La palabra t h i sse suele utilizar habitualmente dentro de los mtodos de un objeto y siempre hace referencia al objeto que est llamado a ese mtodo. De esta forma, en el ejemplo anterior:
v a re l O b j e t o=n e wO b j e c t ( ) ; e l O b j e t o . i d=" 1 0 " ; e l O b j e t o . m u e s t r a I d=f u n c t i o n ( ){ a l e r t ( " E lI Dd e lo b j e t oe s"+t h i s . i d ) ; }

Dentro del mtodo, t h i sapunta al objeto que llama a ese mtodo. En este caso, t h i shace referencia a e l O b j e t o . Por tanto, la instruccin del mtodo m u e s t r a I des equivalente a indicar:
a l e r t ( " E lI Dd e lo b j e t oe s"+e l O b j e t o . i d ) ;

El uso de t h i ses imprescindible para crear aplicaciones reales. El motivo es que nunca se puede suponer el nombre que tendr la variable (el objeto) que incluye ese mtodo. Como los programadores pueden elegir libremente el nombre de cada objeto, no hay forma de asegurar que la siguiente instruccin funcione siempre correctamente:
a l e r t ( " E lI Dd e lo b j e t oe s"+e l O b j e t o . i d ) ;

Si el objeto se llamara o t r o O b j e t o , el cdigo anterior no funcionara correctamente. Sin embargo, utilizando la palabra reservada t h i s , el mtodo funciona siempre bien independientemente del nombre del objeto. Adems, la palabra t h i sse debe utilizar siempre que se quiera acceder a una propiedad de un objeto, ya que en otro caso, no se est accediendo correctamente a la propiedad:
www.librosweb.es/ajax/capitulo3.html 2/8

22/12/12
v a re l O b j e t o=n e wO b j e c t ( ) ; e l O b j e t o . i d=" 1 0 " ;

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

e l O b j e t o . m u e s t r a I d=f u n c t i o n ( ){ a l e r t ( " E lI Dd e lo b j e t oe s" +i d ) ; }

Si se ejecuta el ejemplo anterior, se muestra el error " i di sn o td e f i n e d "( la variable id no est definida). Adems de las funciones annimas, tambin es posible asignar a los mtodos de un objeto funciones definidas con anterioridad:
f u n c t i o no b t i e n e I d ( ){ r e t u r nt h i s . i d ; } e l O b j e t o . o b t i e n e I d=o b t i e n e I d ;

Para asignar una funcin externa al mtodo de un objeto, slo se debe indicar el nombre de la funcin externa sin parntesis. Si se utilizaran los parntesis:
f u n c t i o no b t i e n e I d ( ){ r e t u r nt h i s . i d ; } e l O b j e t o . o b t i e n e I d=o b t i e n e I d ( ) ;

En el ejemplo anterior, se ejecuta la funcin o b t i e n e I d ( )y el resultado de la ejecucin se asigna a la propiedad o b t i e n e I ddel objeto. As, el objeto no tendra un mtodo llamado o b t i e n e I d , sino una propiedad con ese nombre y con un valor igual al resultado devuelto por la funcin externa. Por otra parte, no es obligatorio que el mtodo del objeto se llame igual que la funcin externa, aunque es posible que as sea. A continuacin se muestra un objeto completo formado por varias propiedades y mtodos y creado con la notacin de puntos:
v a re l O b j e t o=n e wO b j e c t ( ) ; e l O b j e t o . i d=" 1 0 " ; e l O b j e t o . n o m b r e=" O b j e t od ep r u e b a " ; e l O b j e t o . m u e s t r a I d=f u n c t i o n ( ){ a l e r t ( " E lI Dd e lo b j e t oe s" +t h i s . i d ) ; } e l O b j e t o . m u e s t r a N o m b r e=f u n c t i o n ( ){ a l e r t ( t h i s . n o m b r e ) ; }

Siguiendo este mismo procedimiento, es posible crear objetos complejos que contengan otros objetos:
v a rA p l i c a c i o n=n e wO b j e c t ( ) ; A p l i c a c i o n . M o d u l o s=n e wA r r a y ( ) ; A p l i c a c i o n . M o d u l o s [ 0 ]=n e wO b j e c t ( ) ; A p l i c a c i o n . M o d u l o s [ 0 ] . t i t u l o=" L e c t o rR S S " ; v a ri n i c i a l=n e wO b j e c t ( ) ; i n i c i a l . e s t a d o=1 ; i n i c i a l . p u b l i c o=0 ; i n i c i a l . n o m b r e=" M o d u l o _ R S S " ; i n i c i a l . d a t o s=n e wO b j e c t ( ) ; A p l i c a c i o n . M o d u l o s [ 0 ] . o b j e t o I n i c i a l=i n i c i a l ;

En el ejemplo anterior, se define un objeto principal llamado A p l i c a c i o nque a su vez contiene varios objetos. La propiedad M o d u l o sde la aplicacin es un array en el que cada elemento es un objeto que representa a un mdulo. A su vez, cada objeto M o d u l otiene una propiedad llamada t i t u l oy otra llamada o b j e t o I n i c i a lque tambin es un objeto con las propiedades y valores iniciales del mdulo.

www.librosweb.es/ajax/capitulo3.html

3/8

22/12/12

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

La notacin tradicional de JavaScript puede llegar a ser tediosa cuando se desarrollan aplicaciones complejas con objetos que contienen otros muchos objetos y arrays. Por este motivo, JavaScript define un mtodo alternativo de notacin llamado JSON (JavaScript Object Notation) y que se ver ms adelante.

3.1.1.3. Mtodos apply() y call()

JavaScript define un par de mtodos denominados a p p l y ( )y c a l l ( )que son muy tiles para las funciones. Ambos mtodos permiten ejecutar una funcin como si fuera un mtodo de otro objeto. La nica diferencia entre los dos mtodos es la forma en la que se pasan los argumentos a la funcin. El siguiente ejemplo muestra cmo utilizar el mtodo c a l l ( )para ejecutar una funcin como si fuera un mtodo del objeto e l O b j e t o :
f u n c t i o nm i F u n c i o n ( x ){ r e t u r nt h i s . n u m e r o+x ; } v a re l O b j e t o=n e wO b j e c t ( ) ; e l O b j e t o . n u m e r o=5 ; v a rr e s u l t a d o=m i F u n c i o n . c a l l ( e l O b j e t o ,4 ) ; a l e r t ( r e s u l t a d o ) ;

El primer parmetro del mtodo c a l l ( )es el objeto sobre el que se va a ejecutar la funcin. Como la funcin se trata como si fuera un mtodo del objeto, la palabra reservada t h i shace referencia al objeto indicado en la llamada a c a l l ( ) . De esta forma, si en la funcin se utiliza
t h i s . n u m e r o , en

realidad se est obteniendo el valor de la propiedad n u m e r odel objeto.

El resto de parmetros del mtodo c a l l ( )son los parmetros que se pasan a la funcin. En este caso, solamente es necesario un parmetro, que es el nmero que se sumar a la propiedad n u m e r odel objeto. El mtodo a p p l y ( )es idntico al mtodo c a l l ( ) , salvo que en este caso los parmetros se pasan como un array:
f u n c t i o nm i F u n c i o n ( x ){ r e t u r nt h i s . n u m e r o+x ; } v a re l O b j e t o=n e wO b j e c t ( ) ; e l O b j e t o . n u m e r o=5 ; v a rr e s u l t a d o=m i F u n c i o n . a p p l y ( e l O b j e t o ,[ 4 ] ) ; a l e r t ( r e s u l t a d o ) ;

3.1.2. Notacin JSON

JSON (JavaScript Object Notation) es un formato sencillo para el intercambio de informacin. El formato JSON permite representar estructuras de datos (arrays) y objetos (arrays asociativos) en forma de texto. La notacin de objetos mediante JSON es una de las caractersticas principales de JavaScript y es un mecanismo definido en los fundamentos bsicos del lenguaje. En los ltimos aos, JSON se ha convertido en una alternativa al formato XML, ya que es ms fcil de leer y escribir, adems de ser mucho ms conciso. No obstante, XML es superior tcnicamente porque es un lenguaje de marcado, mientras que JSON es simplemente un formato para intercambiar datos. La especificacin completa de JSON se puede consultar en RFC 4627 (http://tools.ietf.org/html/rfc4627) y su tipo MIME oficial es
a p p l i c a t i o n / j s o n .

Como ya se sabe, la notacin tradicional de los arrays es tediosa cuando existen muchos elementos:
v a rm o d u l o s=n e wA r r a y ( ) ; m o d u l o s [ 0 ]=" L e c t o rR S S " ; m o d u l o s [ 1 ]=" G e s t o re m a i l " ; m o d u l o s [ 2 ]=" A g e n d a " ; m o d u l o s [ 3 ]=" B u s c a d o r " ; m o d u l o s [ 4 ]=" E n l a c e s " ;

www.librosweb.es/ajax/capitulo3.html

4/8

22/12/12

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

Para crear un array normal mediante JSON, se indican sus valores separados por comas y encerrados entre corchetes. Por lo tanto, el ejemplo anterior se puede reescribir de la siguiente manera utilizando la notacin JSON:
v a rm o d u l o s=[ " L e c t o rR S S " ," G e s t o re m a i l " ," A g e n d a " ," B u s c a d o r " ," E n l a c e s " ] ;

Por su parte, la notacin tradicional de los arrays asociativos es igual de tediosa que la de los arrays normales:
v a rm o d u l o s=n e wA r r a y ( ) ; m o d u l o s . t i t u l o s=n e wA r r a y ( ) ; m o d u l o s . t i t u l o s [ ' r s s ' ]=" L e c t o rR S S " ; m o d u l o s . t i t u l o s [ ' e m a i l ' ]=" G e s t o rd ee m a i l " ; m o d u l o s . t i t u l o s [ ' a g e n d a ' ]=" A g e n d a " ;

En este caso, se puede utilizar la notacin de puntos para abreviar ligeramente su definicin:
v a rm o d u l o s=n e wA r r a y ( ) ; m o d u l o s . t i t u l o s=n e wA r r a y ( ) ; m o d u l o s . t i t u l o s . r s s=" L e c t o rR S S " ; m o d u l o s . t i t u l o s . e m a i l=" G e s t o rd ee m a i l " ; m o d u l o s . t i t u l o s . a g e n d a=" A g e n d a " ;

En cualquier caso, la notacin JSON permite definir los arrays asociativos de una forma mucho ms concisa. De hecho, el ejemplo anterior se puede reescribir de la siguiente manera utilizando la notacin JSON:
v a rm o d u l o s=n e wA r r a y ( ) ; m o d u l o s . t i t u l o s={ r s s :" L e c t o rR S S " ,e m a i l :" G e s t o rd ee m a i l " ,a g e n d a :" A g e n d a " } ;

La notacin JSON para los arrays asociativos se compone de tres partes: 1. Los contenidos del array asociativo se encierran entre llaves ({y } ) 2. Los elementos del array se separan mediante una coma (, ) 3. La clave y el valor de cada elemento se separan mediante dos puntos (: ) Si la clave no contiene espacios en blanco, es posible prescindir de las comillas que encierran sus contenidos. Sin embargo, las comillas son obligatorias cuando las claves pueden contener espacios en blanco:
v a rt i t u l o s M o d u l o s={ " L e c t o rR S S " :" r s s " ," G e s t o rd ee m a i l " :" e m a i l " ," A g e n d a " :" a g e n d a " } ;

Como JavaScript ignora los espacios en blanco sobrantes, es posible reordenar las claves y valores para que se muestren ms claramente en el cdigo fuente de la aplicacin. El ejemplo anterior se puede rehacer de la siguiente manera aadiendo nuevas lneas para separar los elementos y aadiendo espacios en blanco para tabular las claves y para alinear los valores:
v a rt i t u l o s={ r s s : " L e c t o rR S S " , e m a i l : " G e s t o rd ee m a i l " , a g e n d a :" A g e n d a " } ;

Combinando la notacin de los arrays simples y asociativos, es posible construir objetos muy complejos de forma sencilla. Con la notacin tradicional, un objeto complejo se puede crear de la siguiente manera:
v a rm o d u l o=n e wO b j e c t ( ) ; m o d u l o . t i t u l o=" L e c t o rR S S " ; m o d u l o . o b j e t o I n i c i a l=n e wO b j e c t ( ) ; m o d u l o . o b j e t o I n i c i a l . e s t a d o=1 ; m o d u l o . o b j e t o I n i c i a l . p u b l i c o=0 ; m o d u l o . o b j e t o I n i c i a l . n o m b r e=" M o d u l o _ R S S " ; m o d u l o . o b j e t o I n i c i a l . d a t o s=n e wO b j e c t ( ) ;

Utilizando JSON, es posible reescribir el ejemplo anterior de forma mucho ms concisa:

www.librosweb.es/ajax/capitulo3.html 5/8

22/12/12
v a rm o d u l o={ t i t u l o:" L e c t o rR S S " ,

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

o b j e t o I n i c i a l:{e s t a d o:1 ,p u b l i c o:0 ,n o m b r e:" M o d u l oR S S " ,d a t o s:{ }} } ;

Los objetos se pueden definir en forma de pares clave/valor separados por comas y encerrados entre llaves. Para crear objetos vacos, se utilizan un par de llaves sin contenido en su interior { } . A continuacin se muestra la notacin JSON genrica para crear arrays y objetos: Arrays
v a ra r r a y=[ v a l o r 1 ,v a l o r 2 ,v a l o r 3 ,. . . ,v a l o r N ] ;

Objetos
v a ro b j e t o={c l a v e 1 :v a l o r 1 ,c l a v e 2 :v a l o r 2 ,c l a v e 3 :v a l o r 3 ,. . . ,c l a v e N :v a l o r N} ;

La notacin abreviada se puede combinar para crear arrays de objetos, objetos con arrays, objetos con objetos y arrays, etc. A continuacin se muestran algunos ejemplos de aplicaciones web reales que crean objetos mediante esta notacin. Ejemplo extrado del cdigo fuente de Blinksale.com
v a rI n v o i c e=C l a s s . c r e a t e ( ) ; I n v o i c e . p r o t o t y p e={ i n i t i a l i z e :f u n c t i o n ( l i n e _ h t m l ,c u r r e n c y _ s y m b o l ){ t h i s . l i n e _ h t m l=l i n e _ h t m l ; t h i s . c u r r e n c y _ s y m b o l=c u r r e n c y _ s y m b o l ; t h i s . l i n e _ i n d e x=1 ; t h i s . u p d a t e ( ) ; } , k i n d s :[ ' S e r v i c e ' , ' H o u r s ' , ' D a y s ' , ' P r o d u c t ' ] , c h a n g e _ k i n d :f u n c t i o n ( i ){ i f ( $ F ( ' l i n e s _ ' + i + ' _ k i n d ' ) = = ' H o u r s ' ){ $ ( ' l i n e s _ ' + i + ' _ u n i t _ p r i c e ' ) . v a l u e=$ F ( ' d e f a u l t _ h o u r l y _ r a t e ' ) ; t h i s . u p d a t e ( ) ; } } , f o c u s _ n u m :f u n c t i o n ( ){ $ ( ' i n v o i c e _ n u m b e r ' ) . f o c u s ( ) ; } , u s e _ f r e i g h t :f u n c t i o n ( ){ r e t u r n$ ( ' i n v o i c e _ u s e _ f r e i g h t ' ) . c h e c k e d } , f r e i g h t :f u n c t i o n ( ){ r e t u r nt h i s . u s e _ f r e i g h t ( )?N u m b e r ( n o C o m m a s ( $ ( ' i n v o i c e _ f r e i g h t ' ) . v a l u e ) ):0; } , . . . }

Ejemplo extrado del cdigo fuente de Gmail.com

p f . p r o t o t y p e={ E d : f u n c t i o n ( a ) { t h i s . h m = a } , d h : f u n c t i o n ( ) { i f ( t h i s . e b . T h > 0 ){ v a ra = M a t h . r a n d o m ( ) * 1 0 0 ;r e t u r na < t h i s . e b . T h }r e t u r nf a l s e} , S g : f u n c t i o n ( a , b , c ) {t h i s . V d = 2 ;t h i s . k b = I c ( a , t r u e ) ;t h i s . P c = b ;t h i s . V l = c ;t h i s . B e ( )} , n e : f u n c t i o n ( a , b , c ) {t h i s . V d = 2 ;t h i s . k b = I c ( a , t r u e ) ;t h i s . P c = n u l l ;t h i s . V l = b ;i f ( c ) { t h i s . v m = f a l s e }t h i s . B e ( ) } ,

www.librosweb.es/ajax/capitulo3.html

6/8

22/12/12
. . . }

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

Ejemplo extrado del cdigo fuente de la librera prototype.js

v a rP r o t o t y p e={ V e r s i o n :' 1 . 6 . 0 . 2 ' , S c r i p t F r a g m e n t :' < s c r i p t [ ^ > ] * > ( [ \ \ S \ \ s ] * ? ) < \ / s c r i p t > ' , J S O N F i l t e r :/ ^ \ / \ * s e c u r e ( [ \ s \ S ] * ) \ * \ / \ s * $ / , e m p t y F u n c t i o n :f u n c t i o n ( ){} , K :f u n c t i o n ( x ){r e t u r nx} } ;

Ejemplo extrado del cdigo fuente de Netvibes.com

v a rA p p=n e wO b j e c t ( ) ; A p p . m o d e=' u s e r P a g e ' ; A p p . l a n g=' e s ' ; A p p . M o d u l e s=n e wO b j e c t ( ) ; A p p . M o d u l e s . R s s R e a d e r I n f o s={ i n f o s :A p p . L o c . d e f a u l t R s s R e a d e r _ i n f o s , d e f a u l t O b j :{ s t a t u s : 1 ,s h a r e : 0 ,t i t l e : " " ,m o d u l e N a m e : " R s s R e a d e r " ,d a t a : { } } } A p p . M o d u l e s . G m a i l I n f o s={ t i t l e :A p p . L o c . d e f a u l t G m a i l _ t i t l e , i n f o s :A p p . L o c . d e f a u l t G m a i l _ i n f o s , d e f a u l t O b j : { s t a t u s : 1 ,s h a r e : 0 ,t i t l e : A p p . L o c . d e f a u l t G m a i l _ t i t l e ,m o d u l e N a m e : " G m a i l " ,d a t a : { } } , p a t h :N V _ P A T H + " m o d u l e s / g m a i l / g m a i l . j s ? v = 5 " , i c o :N V _ P A T H + " i m g / g m a i l . g i f " } A p p . M o d u l e s . W e a t h e r I n f o s={ t i t l e :A p p . L o c . d e f a u l t W e a t h e r _ t i t l e , i n f o s :A p p . L o c . d e f a u l t W e a t h e r _ i n f o s , d e f a u l t O b j : { s t a t u s : 1 ,s h a r e : 0 ,t i t l e : A p p . L o c . d e f a u l t W e a t h e r _ t i t l e ,m o d u l e N a m e : " W e a t h e r " ,d a t a : { t o w n : " F R X X 0 0 7 6 " } } , p a t h :N V _ P A T H + " m o d u l e s / w e a t h e r / w e a t h e r . j s ? v = 2 " , i c o :N V _ P A T H + " i m g / w e a t h e r . g i f " }

Ejemplo extrado del cdigo fuente de Writeboard.com

/ /= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / /E X P O R TM A N A G E R / /= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = v a re x p o r t M a n a g e r={ s h o w :f u n c t i o n ( ){ $ ( ' e x p o r t B u t t o n ' ) . s r c=" / i m a g e s / b e x p o r t o n . g i f " s h o w E l e m e n t ( ' d o w n l o a d _ e x p o r t ' ) } , h i d e :f u n c t i o n ( ){ $ ( ' e x p o r t B u t t o n ' ) . s r c=" / i m a g e s / b e x p o r t . g i f " h i d e E l e m e n t ( ' d o w n l o a d _ e x p o r t ' ) } , t o g g l e :f u n c t i o n ( ){ E l e m e n t . v i s i b l e ( ' d o w n l o a d _ e x p o r t ' )?t h i s . h i d e ( ):t h i s . s h o w ( ) } }

Ejemplo extrado del cdigo fuente del framework Dojo

www.librosweb.es/ajax/capitulo3.html 7/8

22/12/12
v a rd o j o ;

Captulo 3. JavaScript avanzado | Introduccin a AJAX | LibrosWeb.es

i f ( d j _ u n d e f ( " d o j o " ) ) {d o j o={ } ;} d o j o . v e r s i o n={ m a j o r :0 ,m i n o r :2 ,p a t c h :2 ,f l a g :" " , r e v i s i o n :N u m b e r ( " $ R e v :2 8 3 6$ " . m a t c h ( / [ 0 9 ] + / ) [ 0 ] ) , t o S t r i n g :f u n c t i o n ( ){ w i t h( d o j o . v e r s i o n ){ r e t u r nm a j o r+" . "+m i n o r+" . "+p a t c h+f l a g+"( "+r e v i s i o n+" ) " ; } } } ;

A partir de los ejemplos anteriores, se deduce que la forma habitual para definir los objetos en JavaScript se basa en el siguiente modelo creado con la notacin JSON:
v a ro b j e t o={ " p r o p i e d a d 1 " :v a l o r _ s i m p l e _ 1 , " p r o p i e d a d 2 " :v a l o r _ s i m p l e _ 2 , " p r o p i e d a d 3 " :[ a r r a y 1 _ v a l o r 1 ,a r r a y 1 _ v a l o r 2 ] , " p r o p i e d a d 4 " :{" p r o p i e d a da n i d a d a " :v a l o r} , " m e t o d o 1 " :n o m b r e _ f u n c i o n _ e x t e r n a , " m e t o d o 2 " :f u n c t i o n ( ){. . .} , " m e t o d o 3 " :f u n c t i o n ( ){. . .} , " m e t o d o 4 " :f u n c t i o n ( ){. . .} } ;

En un mismo objeto se puede utilizar de forma simultnea la notacin tradicional de JavaScript y la notacin JSON:
v a rl i b r o=n e wO b j e c t ( ) ; l i b r o . n u m e r o P a g i n a s=1 5 0 ; l i b r o . a u t o r e s=[{ i d :5 0 } ,{ i d :6 7 }] ;

El ejemplo anterior se puede reescribir utilizando solamente la notacin tradicional:

v a rl i b r o={n u m e r o P a g i n a s :1 5 0} ; l i b r o . a u t o r e s=n e wA r r a y ( ) ; l i b r o . a u t o r e s [ 0 ]=n e wO b j e c t ( ) ; l i b r o . a u t o r e s [ 0 ] . i d=5 0 ; l i b r o . a u t o r e s [ 1 ]=n e wO b j e c t ( ) ; l i b r o . a u t o r e s [ 1 ] . i d=6 7 ;

El ejemplo anterior tambin se puede reescribir utilizando exclusivamente la notacin JSON:

v a rl i b r o={n u m e r o P a g i n a s :1 5 0 ,a u t o r e s :[ { i d :5 0 } ,{ i d :6 7 } ]} ;

Ejercicio 1
Definir la estructura de un objeto que almacena una factura. Las facturas estn formadas por la informacin de la propia empresa (nombre de la empresa, direccin, telfono, NIF), la informacin del cliente (similar a la de la empresa), una lista de elementos (cada uno de los cuales dispone de descripcin, precio, cantidad) y otra informacin bsica de la factura (importe total, tipo de iva, forma de pago). Una vez definidas las propiedades del objeto, aadir un mtodo que calcule el importe total de la factura y actualice el valor de la propiedad correspondiente. Por ltimo, aadir otro mtodo que muestre por pantalla el importe total de la factura. Ver solucin (http://www.librosweb.es/ajax/capitulo14/ejercicio_1.html)

Los contenidos originales de este sitio estn bajo una licencia de Creative Commons (http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es) . Las traducciones disponen cada una de su propia licencia.

www.librosweb.es/ajax/capitulo3.html

8/8