Captulo 2. JavaScript bsico 2.1.

- Sintaxis La sintaxis de un lenguaje de programacin se define como el conjunto de reglas que deben seguirse al escribir el cdigo fuente de los programas para considerarse como correctos para ese lenguaje de programacin. La sintaxis de JavaScript es muy similar a la de otros lenguajes como Java y C. Las normas bsicas que definen la sintaxis de JavaScript son las siguientes: !o se tienen en cuenta los espacios en blanco y las nuevas l"neas: como sucede con #$%&L' el int(rprete de JavaScript ignora cualquier espacio en blanco sobrante' por lo que el cdigo se puede ordenar de forma adecuada para su manejo )tabulando las l"neas' a*adiendo espacios' creando nuevas l"neas' etc.+ Se distinguen las may,sculas y min,sculas: al igual que sucede con la sintaxis de las etiquetas y elementos #$%&L. Sin embargo' si en una pgina #$%&L se utili-an indistintamente may,sculas y min,sculas' la pgina se visuali-a correctamente y el ,nico problema es que la pgina no valida. .or el contrario' si en JavaScript se intercambian may,sculas y min,sculas' las aplicaciones no funcionan correctamente. !o se define el tipo de las variables: al definir una variable' no es necesario indicar el tipo de dato que almacenar. /e esta forma' una misma variable puede almacenar diferentes tipos de datos durante la ejecucin del programa. !o es obligatorio terminar cada sentencia con el carcter del punto y coma )0+: al contrario de la mayor"a de lenguajes de programacin' en JavaScript no es obligatorio terminar cada sentencia con el carcter del punto y coma )0+. !o obstante' es muy recomendable seguir la tradicin de terminar cada sentencia con el carcter 0 Se pueden incluir comentarios: los comentarios se utili-an para a*adir alguna informacin relevante al cdigo fuente del programa. 1unque no se visuali-an por pantalla' su contenido se env"a al navegador del usuario junto con el resto del programa' por lo que es necesario extremar las precauciones sobre el contenido de los comentarios. JavaScript define dos tipos de comentarios: los de una sola l"nea y los que ocupan varias l"neas. Los comentarios de una sola l"nea se definen a*adiendo dos barras oblicuas )22+ al principio de cada l"nea que forma el comentario: 2.2.- Variables Las variables se definen mediante la palabra reservada var' que permite definir una o varias variables simultneamente: var variable3 4 350 var variable6 4 78ola9' variable: 4 7mundo90 var variable; 4 35' variable< 4 78ola90 =l nombre de las variables debe cumplir las dos siguientes condiciones: =l primer carcter debe ser una letra o un guin bajo ) > + o un dlar )?+

=l resto de caracteres pueden ser letras' n,meros' guiones bajos y s"mbolos de dlar !o es obligatorio iniciali-ar una variable al declararla: var variable50 Si la variable no se declara mediante el operador var' automticamente se crea una variable global con ese identificador y su valor. =jemplo: var variable3 4 350 variable6 4 variable3 @ ;0 =n el ejemplo anterior' la variable6 no 8a sido declarada' por lo que al llegar a esa instruccin' JavaScript crea automticamente una variable global llamada variable6 y le asigna el valor correspondiente. =l mbito de una variable )llamado scope en ingl(s+ es la -ona del programa en la que se define la variable. JavaScript define dos mbitos para las variables: global y local. =l siguiente ejemplo ilustra el comportamiento de los mbitos: function muestra&ensaje)+ A var mensaje 4 7&ensaje de prueba90 B muestra&ensaje)+0 alert)mensaje+0 Cuando se ejecuta el cdigo JavaScript anterior' su resultado no es el esperado' ya que no se muestra por pantalla ning,n mensaje. La variable mensaje se 8a definido dentro de la funcin y por tanto es una variable local que solamente est definida dentro de la funcin. Cualquier instruccin que se encuentre dentro de la funcin puede 8acer uso de la variable. Sin embargo' cualquier instruccin que se encuentre en otras funciones o fuera de cualquier funcin no tendr definida la variable mensaje. 1dems de variables locales' tambi(n existe el concepto de variable global' que est definida en cualquier punto del programa )incluso dentro de cualquier funcin+. var mensaje 4 7&ensaje de prueba90 function muestra&ensaje)+ A alert)mensaje+0 B muestra&ensaje)+0 alert)mensaje+0 =l cdigo JavaScript anterior define una variable fuera de cualquier funcin. =ste tipo de variables automticamente se transforman en variables globales y estn disponibles en cualquier punto del programa.

/e esta forma' aunque en el interior de la funcin no se 8a definido ninguna variable llamada mensaje' la variable global creada anteriormente permite que la instruccin alert)+ dentro de la funcin muestre el mensaje correctamente. Si una variable se declara fuera de cualquier funcin' automticamente se transforma en variable global independientemente de si se define utili-ando la palabra reservada var o no. Sin embargo' en el interior de una funcin' las variables declaradas mediante var se consideran locales y el resto se transforman tambi(n automticamente en variables globales. .or lo tanto' el siguiente ejemplo si que funciona como se espera: function muestra&ensaje)+ A mensaje 4 7&ensaje de prueba90 B muestra&ensaje)+0 alert)mensaje+0 =n caso de colisin entre las variables globales y locales' dentro de una funcin prevalecen las variables locales: var mensaje 4 7gana la de fuera90 function muestra&ensaje)+ A var mensaje 4 7gana la de dentro90 alert)mensaje+0 B alert)mensaje+0 muestra&ensaje)+0 alert)mensaje+0 =l cdigo anterior muestra por pantalla los siguientes mensajes: gana la de fuera gana la de dentro gana la de fuera La variable local llamada mensaje dentro de la funcin tiene ms prioridad que la variable global del mismo nombre' pero solamente dentro de la funcin. Si no se define la variable dentro de la funcin con la palabra reservada var' en realidad se est modificando el valor de la variable global: var mensaje 4 7gana la de fuera90 function muestra&ensaje)+ A mensaje 4 7gana la de dentro90 alert)mensaje+0 B alert)mensaje+0 muestra&ensaje)+0 alert)mensaje+0 =n este caso' los mensajes mostrados son:

gana la de fuera gana la de dentro gana la de dentro La recomendacin general es definir como variables locales todas las variables que sean de uso exclusivo para reali-ar las tareas encargadas a cada funcin. Las variables globales se utili-an para compartir variables entre funciones de forma rpida. 2.4.- Tipos de variables JavaScript divide los distintos tipos de variables en dos grupos: tipos primitivos y tipos de referencia o clases. 2.4.1.- Tipos primitivos JavaScript define cinco tipos primitivos: undefined' null' boolean' number y string. 1dems de estos tipos' JavaScript define el operador typeof para averiguar el tipo de una variable. 2.4.1.1.- El operador t peo! =l operador typeof se emplea para determinar el tipo de dato que almacena una variable. Su uso es muy sencillo' ya que slo es necesario indicar el nombre de la variable cuyo tipo se quiere averiguar: var variable3 4 C0 typeof variable30 22 7number9 var variable6 4 78ola mundo90 typeof variable60 22 7string9 Los posibles valores de retorno del operador son: undefined' boolean' number' string para cada uno de los tipos primitivos y object para los valores de referencia y tambi(n para los valores de tipo null. 2.4.1.2.- Variables de tipo unde!ined =l tipo undefined corresponde a las variables que 8an sido definidas y todav"a no se les 8a asignado un valor: var variable30 typeof variable30 22 devuelve 7undefined9

=l operador typeof no distingue entre las variables declaradas pero no iniciali-adas y las variables que ni siquiera 8an sido declaradas: var variable30 typeof variable30 typeof variable60 22 devuelve 7undefined9' aunque la variable3 8a sido declarada 22 devuelve 7undefined9' la variable6 no 8a sido declarada

2.4.1.".- Variables de tipo null Se trata de un tipo similar a undefined' y de 8ec8o en JavaScript se consideran iguales )undefined 44 null+. =l tipo null se suele utili-ar para representar objetos que en ese momento no existen. var nombreDsuario 4 null0

2.4.1.4.- Variables de tipo boolean 1dems de variables de tipo boolean' tambi(n se suelen llamar variables lgicas y variables booleanas. Se trata de una variable que slo puede almacenar uno de los dos valores especiales definidos y que representan el valor 7verdadero9 y el valor 7falso9. var variable3 4 true0 var variable6 4 false0 Los valores true y false son valores especiales' de forma que no son palabras ni n,meros ni ning,n otro tipo de valor. =ste tipo de variables son esenciales para crear cualquier aplicacin' tal y como se ver ms adelante. Cuando es necesario convertir una variable num(rica a una variable de tipo boolean' JavaScript aplica la siguiente conversin: el n,mero E se convierte en false y cualquier otro n,mero distinto de E se convierte en true. .or este motivo en ocasiones se asocia el n,mero E con el valor false y el n,mero 3 con el valor true. Sin embargo' es necesario insistir en que true y false son valores especiales que no se corresponden ni con n,meros ni con ning,n otro tipo de dato. 2.4.1.#.- Variables de tipo num$rico Las variables num(ricas son muy utili-adas en las aplicaciones 8abituales' ya que permiten almacenar cualquier valor num(rico. Si el n,mero es entero' se indica directamente. Si el n,mero es decimal' se debe utili-ar el punto ).+ para separar la parte entera de la decimal. var variable3 4 3E0 var variable6 4 :.3;3<F65<0 1dems del sistema num(rico decimal' tambi(n se pueden indicar valores en el sistema octal )si se incluye un cero delante del n,mero+ y en sistema 8exadecimal )si se incluye un cero y una x delante del n,mero+. var variable3 4 3E0 var variable>octal 4 E:;0 var variable>8exadecimal 4 Ex1:0 JavaScript define tres valores especiales muy ,tiles cuando se trabaja con n,meros. =n primer lugar se definen los valores Gnfinity y HGnfinity para representar n,meros demasiado grandes )positivos y negativos+ y con los que JavaScript no puede trabajar. var variable3 4 :' variable6 4 E0 alert)variable3 2 variable6+0 22 muestra 7Gnfinity9

=l otro valor especial definido por JavaScript es !a!' que es el acrnimo de 7!ot a !umber9. /e esta forma' si se reali-an operaciones matemticas con variables no num(ricas' el resultado ser de tipo !a!. .ara manejar los valores !a!' se utili-a la funcin relacionada is!a!)+' que devuelve true si el parmetro que se le pasa no es un n,mero: var variable3 4 :0 var variable6 4 78ola90

is!a!)variable3+0 22 false is!a!)variable6+0 22 true is!a!)variable3 @ variable6+0

22 true

.or ,ltimo' JavaScript define algunas constantes matemticas que representan valores num(ricos significativos: Constante &at8.= &at8.L!6 &at8.L!3E &at8..G Ialor 6.C3J6J3J6J;< Significado Constante de =uler' base de los logaritmos naturales y tambi(n llamado n,mero e Logaritmo natural de 6 Logaritmo natural de 3E .i' relacin entre el radio de una circunferencia y su dimetro

/e esta forma' para calcular el rea de un c"rculo de radio r' se debe utili-ar la constante que representa el n,mero .G: var area 4 &at8..G K r K r0 2.4.1.%.- Variables de tipo cadena de texto Las variables de tipo cadena de texto permiten almacenar cualquier sucesin de caracteres' por lo que se utili-an ampliamente en la mayor"a de aplicaciones JavaScript. Cada carcter de la cadena se encuentra en una posicin a la que se puede acceder individualmente' siendo el primer carcter el de la posicin E. =l valor de las cadenas de texto se indica encerrado entre comillas simples o dobles: var variable3 4 78ola90 var variable6 4 LmundoM0 var variable: 4 78ola mundo' esta es una frase mas larga90 .ara resolver estos problemas' JavaScript define un mecanismo para incluir de forma sencilla caracteres especiales )=!%=N' %abulador+ y problemticos )comillas+. =sta estrategia se denomina 7mecanismo de escape9' ya que se sustituyen los caracteres problemticos por otros caracteres seguros que siempre empie-an con la barra O: Si se quiere incluir Dna nueva l"nea Dn tabulador Dna comilla simple Dna comilla doble Dna barra inclinada Se debe sustituir porP On Ot OM O9 OO

2.4.1.&.- Conversi'n entre tipos de variables JavaScript es un lenguaje de programacin 7no tipado9' lo que significa que una misma variable puede guardar diferentes tipos de datos a lo largo de la ejecucin de la aplicacin. /e esta forma' una variable se podr"a iniciali-ar con un valor

num(rico' despu(s podr"a almacenar una cadena de texto y podr"a acabar la ejecucin del programa en forma de variable booleanas. !o obstante' en ocasiones es necesario que una variable almacene un dato de un determinado tipo. .ara asegurar que as" sea' se puede convertir una variable de un tipo a otro' lo que se denomina typecasting: 1s"' JavaScript incluye un m(todo llamado toString)+ que permite convertir variables de cualquier tipo a variables de cadena de texto' tal y como se muestra en el siguiente ejemplo: var variable3 4 true0 variable3.toString)+0 var variable6 4 <0 variable6.toString)+0 22 devuelve 7true9 como cadena de texto 2C devuelve 7<9 como cadena de texto

JavaScript tambi(n incluye m(todos para convertir los valores de las variables en valores num(ricos. Los m(todos definidos son parseGnt)+ y parseQloat)+' que convierten la variable que se le indica en n,mero entero o un n,mero decimal respectivamente. La conversin num(rica de una cadena se reali-a carcter a carcterempe-ando pro el de la primera posicin. Si ese carcter no es un n,mero' la funcin devuelve el valor !a!. Si el primer carcter es un n,mero' se contin,a con los siguientes caracteres mientras que estos sean n,meros. var variable3 4 78ola90 parseGnt)variable3+0 var variable6 4 7:;90 parseGnt)variable6+0 22 devuelve !a! 22 devuelve :;

var variable: 4 7:;8ola6:90 parseGnt)variable:+0 22 devuelve :; var variable; 4 7:;.6:90 parseGnt)variable;+0 22 devuelve :;

=n el caso de parseQloat)+' el comportamiento es el mismo salvo que tambi(n se considera vlido el carcter . que indica la parte decimal del n,mero: var variable3 4 78ola90 parseQloat)variable3+0 var variable6 4 7:;90 parseQloat)variable6+0 22 devuelve !a! 22 devuelve :;.E

var variable: 4 7:;8ola6:90 parseQloat)variable:+0 22 devuelve :;.E var variable; 4 7:;.6:90 parseQloat)variable;+0 22 devuelve :;.6:

2.4.2.- Tipos de re!erencia 1unque JavaScript no define el concepto de clase' los tipos de referencia se asemejan a las clases de otros lenguajes de programacin. Los objetos en JavaScript se crean mediante la palabra reservada neR y el nombre de la clase que se va a instanciar. /e esta forma' para crear un objeto de tipo String se indica lo siguiente )los par(ntesis solamente son obligatorios cuando se utili-an argumentos' aunque se recomienda incluirlos incluso cuando no se utilicen+: var variable3 4 neR String)78ola mundo9+0 JavaScript define una clase para cada uno de los tipos de datos primitivos. /e esta forma' existen objetos de tipo Soolean para las variables booleanas' !umber para las variables num(ricas y String para las variables de cadenas de texto. Las clases Soolean' !umber y String almacenan los mismos valores de los tipos de datos primitivos y a*aden propiedades y m(todos para manipular sus valores. 1unque ms adelante se explica en detalle' el siguiente ejemplo determina el n,mero de caracteres de una cadena de texto: var longitud 4 78ola mundo9.lengt80 La propiedad lengt8 slo est disponible en la clase String' por lo que en principio no deber"a poder utili-arse en un dato primitivo de tipo cadena de texto. Sin embargo' JavaScript convierte el tipo de dato primitivo al tipo de referencia String' obtiene el valor de la propiedad lengt8 y devuelve el resultado. =ste proceso se reali-a de forma automtica y transparente para el programador. =n realidad' con una variable de tipo String no se pueden 8acer muc8as ms cosas que con su correspondiente tipo de dato primitivo. .or este motivo' no existen muc8as diferencias prcticas entre utili-ar el tipo de referencia o el tipo primitivo' salvo en el caso del resultado del operador typeof y en el caso de la funcin eval)+' como se ver ms adelante. La principal diferencia entre los tipos de datos es que los datos primitivos se manipulan por valor y los tipos de referencia se manipulan' como su propio nombre indica' por referencia. Los conceptos 7por valor9 y 7por diferencia9 son iguales que en el resto de lenguajes de programacin' aunque existen diferencias importantes )no existe por ejemplo el concepto de puntero+. Cuando un dato se manipula por valor' lo ,nico que importa es el valor en s". Cuando se asigna una variable por valor a otra variable' se copia directamente el valor de la primera variable en la segunda. Cualquier modificacin que se realice en la segunda variable es independiente de la primera variable. /e la misma forma' cuando se pasa una variable por valor a una funcin )como se explicar ms adelante+ slo se pasa una copia del valor. 1s"' cualquier modificacin que realice la funcin sobre el valor pasado no se refleja en el valor de la variable original. =n el siguiente ejemplo' una variable se asigna por valor a otra variable: var variable3 4 :0 var variable6 4 variable30 variable6 4 variable6 @ <0 22 18ora variable6 4 J y variable3 sigue valiendo :

La variable3 se asigna por valor en la variable3. 1unque las dos variables almacenan en ese momento el mismo valor' son independientes y cualquier cambio en una de ellas no afecta a la otra. =l motivo es que los tipos de datos primitivos siempre se asignan )y se pasan+ por valor. Sin embargo' en el siguiente ejemplo' se utili-an tipos de datos de referencia: Sin embargo' en el siguiente ejemplo' se utili-an tipos de datos de referencia: var variable3 4 neR /ate)6EEF' 33' 6<+0 22 variable3 4 6< diciembre de 6EEF var variable6 4 variable30 variable6.setQullTear)6E3E' 33' :3+0 22 variable6 4 :3 diciembre de 6E3E

22 18ora variable3 tambi(n es :3 diciembre de 6E3E =n el ejemplo anterior' se utili-a un tipo de dato primitivo que se ver ms adelante' que se llama /ate y que se utili-a para manejar fec8as. Se crea una variable llamada variable3 y se iniciali-a la fec8a a 6< de diciembre de 6EEF. 1 continuacin' se asigna el valor de la variable3 a otra variable llamada variable6. Como /ate es un tipo de referencia' la asignacin se reali-a por referencia. .or lo tanto' las dos variables quedan 7unidas9 y 8acen referencia al mismo objeto' al mismo dato de tipo /ate. /e esta forma' si se modifica el valor de variable6 )y se cambia su fec8a a :3 de diciembre de 6E3E+ el valor de variable3 se ver automticamente modificado. 2.4.2.1.- Variables de tipo (b)ect La clase Ubject por s" sola no es muy ,til' ya que su ,nica funcin es la de servir de base a partir de la cual 8eredan el resto de clases. Los conceptos fundamentales de los objetos son los constructores y la propiedad prototype' tal y como se explicarn en el siguiente cap"tulo. Dna utilidad prctica de Ubject es la conversin entre tipos de datos primitivos y sus correspondientes tipos de referencia: var numero 4 neR Ubject)<+0 22 numero es de tipo !umber var cadena 4 neR Ubject)78ola mundo9+0 22 cadena es de tipo String var conectado 4 neR Ubject)false+0 22 conectado es de tipo Soolean 2.4.2.2.- Variables de tipo *oolean Dtili-ando el tipo de referencia Soolean' es posible crear objetos de tipo lgico o booleano: var variable3 4 neR Soolean)false+0 Sin embargo' en general no se utili-an objetos de tipo Soolean porque su comportamiento no siempre es id(ntico al de los tipos de datos primitivos: var variable3 4 true' variable6 4 false0 var variable: 4 neR Soolean)false+0 variable6 VV variable30 22 el resultado es false variable: VV variable30 22 el resultado es true

=l resultado de la ,ltima operacin es realmente sorprendente' ya que se esperaba un resultado false. =l problema reside en que los objetos no se comportan igual que los tipos primitivos. =n una operacin lgica' cualquier objeto que exista se convierte a true' independientemente de su valor. .or este motivo' con los valores booleanos normalmente se utili-an tipos de datos primitivos en ve- de objetos de tipo Soolean. 2.4.2.".- Variable de tipo +umber La clase !umber permite definir variables de tipo num(rico independientemente de si el valor es entero o decimal: var variable3 4 neR !umber)35+0 var variable6 4 neR !umber):.3;3<F6+0 .ara obtener el valor num(rico almacenado' se puede utili-ar el m(todo valueUf)+: var variable3 4 neR !umber)35+0 var variable6 4 variable3.valueUf)+0 22 variable6 4 35

Dno de los m(todos ms ,tiles para los n,meros es toQixed)+' que trunca el n,mero de decimales de un n,mero al valor indicado como parmetro: var var var var variable3 variable6 variable: variable; 4 4 4 4 neR !umber):.3;3<F6+0 variable3.toQixed)+0 variable3.toQixed)6+0 variable3.toQixed)3E+0 22 variable6 4 : 22 variable: 4 :.3; 22 variable; 4 :.3;3<F6EEEE

=n ocasiones' el m(todo toQixed)+ no funciona como deber"a' debido a los problemas que sufren la mayor"a de lenguajes de programacin con los n,meros decimales )en realidad' se denominan 7n,meros de coma flotante9+: var numero3 4 neR !umber)E.6:<+0 var numero6 4 neR !umber)3.6:<+0 numero: 4 numero3.toQixed)6+0 numero: 4 numero3.toQixed)6+0 22 numero: 4 E.6: 22 numero: 4 3.6;

Como se ve en el ejemplo anterior' el redondeo de los decimales no funciona de forma consistente' ya que el n,mero < a veces incrementa el decimal anterior y otras veces no. /e la misma forma' se pueden producir errores de precisin en operaciones aparentemente sencillas' como en la siguiente multiplicacin: var numero3 4 neR !umber)356.6F<+0 var numero6 4 numero3 K neR !umber)3EE+0 22 numero6 no es igual a 3566F.< 22 numero6 4 3566F.;FFFFFFFFFFJ Los errores de redondeo afectan de la misma forma a las variables num(ricas creadas con tipos de datos primitivos. =n cualquier caso' al igual que sucede con Soolean' se recomienda utili-ar el tipo de dato primitivo para los n,meros' ya que la clase !umber no aporta mejoras significativas.

10

2.4.2.4.- Variables de tipo Strin, La clase String representa una cadena de texto' de forma similar a los tipos de datos primitivos: var variable3 4 neR String)78ola mundo9+0 =l objeto de tipo String es el ms complejo de JavaScript y contiene decenas de m(todos y utilidades' algunos de los cuales se vern ms adelante. Como ya se 8a comentado' siempre que sea necesario JavaScript convierte de forma automtica las cadenas de texto de dato primitivo a dato de referencia. /e esta forma' no es obligatoria crear objetos de tipo String para acceder a todas las utilidades disponibles para las cadenas de texto. 2.4.2.#.- (perador instanceo! =l operador typeof no es suficiente para trabajar con tipos de referencia' ya que devuelve el valor object para cualquier objeto independientemente de su tipo. .or este motivo' JavaScript define el operador instanceof para determinar la clase concreta de un objeto. var variable3 4 neR String)78ola mundo9+0 typeof variable30 22 devuelve 7object9 instanceof String0 22 devuelve true =l operador instanceof solo devuelve como valor true o false. /e esta forma' instanceof no devuelve directamente la clase de la que 8a instanciado la variable' sino que se debe comprobar cada posible tipo de clase individualmente. 2.#.- (peradores 2.%.- (b)etos nativos de JavaScript JavaScript define algunos objetos de forma nativa' por lo que pueden ser utili-ados directamente por las aplicaciones sin tener que declararlos. 1dems de las clases de tipo Ubject' !umber' Soolean y String que ya se 8an visto' JavaScript define otras clases como Qunction' 1rray' /ate y Neg=xp. 2.%.1.- -a clase .rra JavaScript permite definir los arrays de forma abreviada )como se ver en el cap"tulo de JavaScript avan-ado+ y tambi(n de forma tradicional mediante la clase 1rray: var variable3 4 neR 1rray)+0 Si al instanciar la clase 1rray)+ se pasa un ,nico argumento y es de tipo num(rico' se crea un array con el n,mero de elementos indicado: var variable3 4 neR 1rray)3E+0 =n el primer ejemplo' la variable3 simplemente crea un array vac"o' mientras que el segundo ejemplo crea un array de 3E elementos que todav"a no estn definidos. Los elementos de un array no tienen por qu( ser todos del mismo tipo. 1dems' si al declarar el array se conocen los elementos que va a contener' es posible incluirlos en la declaracin del array:

11

var variable3 4 neR 1rray)6' 78ola9' true' ;<.:;+0 Utra forma 8abitual de a*adir nuevos elementos al array es mediante la notacin con corc8etes que tambi(n se utili-an en otros lenguajes de programacin: var variable3 4 neR 1rray)+0 variable3WEX 4 60 variable3W3X 4 78ola90 variable3W6X 4 true0 variable3W:X 4 ;<.:;0 =l primer elemento del array siempre ocupa la posicin E )cero+ y el tama*o del array aumenta de forma dinmica a medida que se a*aden nuevos elementos. Los arrays contienen decenas de propiedades y m(todos muy ,tiles para manipular sus contenidos y reali-ar operaciones complejas' tal y como se ver ms adelante. 2.%.2.- -a clase /ate =ntre las utilidades que proporciona JavaScript' se encuentran la clase /ate que permite representar y manipular valores relacionados con fec8as. .ara obtener la representacin de la fec8a actual' slo es necesario instanciar la clase sin parmetros: var fec8a 4 neR /ate)+0 1dems de la fec8a' la instruccin anterior representa la 8ora en la que 8a sido ejecutada la instruccin. Gnternamente' y como sucede en otros lenguajes de programacin y otros sistemas' la fec8a y 8ora se almacena como el n,mero de milisegundos que 8an transcurrido desde el 3 de =nero de 3FCE a las EE:EE:EE. .or este motivo' se puede construir una fec8a cualquiera indicando el n,mero de milisegundos a partir de esa referencia temporal: var fec8a 4 neR /ate)E+0 22 7%8u Jan E3 3FCE E3:EE:EE Y&%@E3EE9

1fortunadamente' existen otras formas ms sencillas de establecer la fec8a y 8ora que se van a utili-ar: var fec8a 4 neR /ate)6EEF' <' 3+0 22 3 de Junio de 6EEF )EE:EE:EE+ var fec8a 4 neR /ate)6EEF' <' 3' 3F' 6F' :F+0 22 3 de Junio de 6EEF )3F:6F::F+ =l constructor de la clase /ate permite establecer slo una fec8a o la fec8a y 8ora a la ve-. =l formato es )a*o' mes' dia+ o )a*o' mes' dia' 8ora' minuto' segundo+. Los meses se indican mediante un valor num(rico que empie-a en el E )=nero+ y termina en el 33 )/iciembre+. Los d"as del mes se cuentan de forma natural desde el d"a 3 8asta el 6J' 6F' :E o :3 dependiendo de cada mes. 1 continuacin se muestran algunos de los m(todos ms ,tiles disponibles para la clase /ate: get%ime)+ H devuelve un n,mero que representa la fec8a como el n,mero de milisegundos transcurridos desde la referencia de tiempos )3 de =nero de 3FCE+. get&ont8)+ H devuelve el n,mero del mes de la fec8a )empe-ando por E para =nero y acabando en 33 para /iciembre+ getQullTear)+ H devuelve el a*o de la fec8a como un n,mero de ; cifras. getTear)+ H devuelve el a*o de la fec8a como un n,mero de 6 cifras

12

get/ate)+ H devuelve el n,mero del d"a del mes get/ay)+ H devuelve el n,mero del d"a de la semana )E para /omingo' 3 para Lunes' P' 5 para Sbado+ get$ours)+' get&inutes)+' getSeconds)+' get&illiseconds)+ H devuelve respectivamente las 8oras' minutos' segundos y milisegundos de la 8ora correspondiente a la fec8a. Cada m(todo get)+ mostrado anteriormente tiene su correspondiente m(todo set)+ que permite establecer el valor de cada una de las propiedades. 2.%.".- -a clase 0unction La clase Qunction raramente se utili-a de forma expl"cita para crear funciones. Dtili-ada de esta forma' se deben indicar todos los parmetros de la funcin y sus instrucciones como parmetros al instanciar la clase: var miQuncion 4 neR Qunction)7a9' 7b9' 7return a @ b9+0 =l ,ltimo argumento de la llamada se considera como las instrucciones de la funcin y todos los anteriores son los argumentos de la misma. =n cuanto se complica un poco el cdigo de la funcin' este m(todo se 8ace inviable. 2.&.- 0unciones Las funciones de JavaScript no suelen definirse mediante la clase Qunction' sino que se crean mediante la palabra reservada function: function suma)a' b+ A return a @ b0 B !o es obligatorio que las funciones tengan una instruccin de tipo return para devolver valores. /e 8ec8o' cuando una funcin no devuelve ning,n valor o cuando en la instruccin return no se indica ning,n valor' automticamente se devuelve el valor undefined. .ara llamar a la funcin en cualquier instruccin' se indica su nombre junto con la lista de parmetros esperados: var resultado 4 suma)6' :+0 Los parmetros que se pasan pueden estar definidos mediante operaciones que se eval,an antes de pasarlos a la funcin: var resultado 4 suma)6 @ 3' : H ; K : @ ;+0 Como JavaScript no define tipos de variables' no es posible asegurar que los parmetros que se pasan a una funcin sean los del tipo adecuado para las operaciones que reali-a la funcin. Si a una funcin se le pasan ms parmetros que los que 8a definido' los parmetros sobrantes se ignoran. Si se pasan menos parmetros que los que 8a definido la funcin' al resto de parmetros 8asta completar el n,mero correcto se les asigna el valor undefined. Dna funcin puede contener en su interior otras funciones anidadas:

13

function sumaCuadrados)a' b+ A function cuadrado)x+ A return x K x0 B return cuadrado)a+ @ cuadrado)b+0 B La funcin anterior calcula la suma del cuadrado de dos n,meros. .ara ello' define en el interior de la funcin otra funcin que calcula el cuadrado del n,mero que se le pasa. .ara obtener el resultado final' la funcin sumaCuadrados)+ 8ace uso de la funcin anidada cuadrado)+. Las funciones tambi(n se pueden crear mediante lo que se conoce como 7function literals9 y que consiste en definir la funcin con una expresin en la que el nombre de la funcin es opcional. /ebido a esta ,ltima caracter"stica' tambi(n se conocen como funciones annimas. 1 continuacin se muestra una misma funcin definida mediante el m(todo tradicional y mediante una funcin annima: function suma)a' b+ A return a @ b0 B var miQuncion 4 function)a' b+ A return a @ b0 B Las funciones annimas son ideales para los casos en los que se necesita definir funciones sencillas que solamente se utili-an una ve- y para las que no es necesario crear una funcin tradicional con nombre. &s adelante en el cap"tulo de JavaScript avan-ado se muestra en detalle el uso de funciones annimas con objetos. Como se 8a comentado' cuando una funcin recibe menos parmetros de los que necesita' iniciali-a el valor del resto de parmetros a undefined. /e esta forma' puede ser necesario proteger a la aplicacin frente a posibles valores incorrectos en sus parmetros. =l m(todo 8abitual es reali-ar una comprobacin sencilla: function suma)a' b+ A if )is!a!)b++ A b 4 E0 B return a @ b0 B La funcin del ejemplo anterior comprueba que b sea un n,mero para poder reali-ar correctamente la suma. =n caso de que no lo sea )es decir' que sea null' undefined o cualquier valor vlido distinto de un n,mero+ se le asigna el valor E para que la funcin pueda devolver un resultado vlido. JavaScript permite prescindir de la comprobacin anterior y obtener el mismo resultado mediante el siguiente truco que 8ace uso del operador UN )ZZ+: function suma)a' b+ A b 4 b ZZ E0 return a @ b0 B =n el ejemplo anterior' si a la funcin no se le pasa el parmetro b' automticamente se asigna el valor E a ese parmetro. =l truco funciona porque el comportamiento del operador lgico UN )y tambi(n del operador 1!/+ es ms complejo de lo que se 8a explicado anteriormente.

14

=n realidad' el operador lgico UN funciona de la siguiente manera: 3. Si el primer operando es true o cualquier otro valor que se puede transformar en true' se devuelve directamente el valor de ese operando. 6. =n otro caso' se eval,a el segundo operando y se devuelve directamente su valor. .or lo tanto: alert)true ZZ false+0 alert): ZZ false+0 alert)true ZZ <+0 alert)false ZZ true+0 alert)false ZZ <+0 alert): ZZ <+0 22 22 22 22 22 22 muestra muestra muestra muestra muestra muestra true : true true < :

/e esta forma' si se utili-an las siguientes llamadas a la funcin: suma):+0 suma):' null+0 suma):' false+0 =n todos los casos anteriores la variable b vale E. Si no se indica un parmetro' su valor es undefined' que se transforma en false y por tanto el resultado de b ZZ E es E. Si se indica null como valor del parmetro' tambi(n se transforma en false' por lo que nuevamente el resultado de b ZZ E es E. .or ,ltimo' si se indica directamente el valor false al parmetro' tambi(n provoca que el resultado de b ZZ E sea E. =n cualquier otro caso' el parmetro b valdr lo mismo que se le 8aya pasado en la llamada a la funcin. Como el n,mero de argumentos que se pasan a una funcin de JavaScript puede ser variable e independiente del n,mero de parmetros incluidos en su definicin' JavaScript proporciona una variable especial que contiene todos los parmetros con los que se 8a invocado a la funcin. Se trata de un array que se llama arguments y solamente est definido dentro de cualquier funcin. function suma)a' b+ A alert)arguments.lengt8+0 alert)argumentsW6X+0 return a @ b0 B suma):' <+0 La propiedad arguments.lengt8 devuelve el n,mero de parmetros con los que se 8a llamado a la funcin. =n el caso del ejemplo anterior' se mostrar"a el valor 6. Como arguments es un array' se puede acceder directamente a cualquier parmetro mediante la notacin tradicional de los arrays. =n este caso' el valor argumentsW6X devuelve undefined' ya que la funcin se llama con dos parmetros y por tanto el tercer parmetro no est definido. =l array arguments permite crear funciones con un n,mero variable de argumentos:

15

function mayor)+ A var el&ayor 4 argumentsWEX0 for )var i 4 30 i [ arguments.lengt80 i@@+ A if )argumentsWiX \ el&ayor+ A el&ayor 4 argumentsWiX0 B B return el&ayor0 B var variable3 4 mayor)3' :' <' J+0 var variable6 4 mayor);' 5' J' 3' 6' :' ;' <+0 %(cnicamente' arguments no es un array' sino que es un objeto de tipo 1rguments. Sin embargo' por sus propiedades y sus m(todos de acceso' se puede considerar como si fuera un array. Dna ,ltima propiedad del objeto arguments que no suele utili-arse 8abitualmente' pero que puede ser necesaria en ocasiones es la propiedad callee. La propiedad callee 8ace referencia a la funcin que se est ejecutando. =n el siguiente ejemplo se utili-a la propiedad callee para mostra el cdigo fuente de la funcin que se est ejecutando: function suma)a' b+ A alert)arguments.callee+0 return a @ b0 B suma):' <+0 La propiedad callee se puede utili-ar para determinar el n,mero de parmetros que espera la funcin: function suma)a' b+ A alert)arguments.callee.lengt8+0 alert)arguments.lengt8+0 return a @ b0 B suma):' <' C' F+0 La propiedad arguments.callee.lengt8 indica el n,mero de parmetros que se incluyen en la definicin de la funcin' en este caso 6. Como se 8a visto anteriormente' la propiedad arguments.lengt8 indica el n,mero de parmetros con los que se 8a llamado a la funcin' en este caso ;. 2.1.- 0unciones propiedades bsicas de JavaScript

JavaScript incluye numerosas propiedades y m(todos muy ,tiles para cada uno de los tipos de variables y clases que define. 2.1.1.- Cadenas de texto 1 continuacin se muestran algunas de las funciones ms ,tiles para el manejo de cadenas de texto:

16

lengt8' calcula la longitud de una cadena de texto )el n,mero de caracteres que la forman+ var mensaje 4 7$ola &undo90 var numeroLetras 4 mensaje.lengt80 22 numeroLetras 4 3E @' se emplea para concatenar varias cadenas de texto. var mensaje3 4 7$ola90 var mensaje6 4 7 &undo90 var mensaje 4 mensaje3 @ mensaje0

22 mensaje 4 7$ola &undo9

1dems del operador @' tambi(n se puede utili-ar la funcin concat)+ var mensaje3 4 7$ola90 var mensaje6 4 mensaje3.concat)7 &undo9+0 22 mensaje6 4 7$ola &undo9

Las cadenas tambi(n se pueden unir con variables num(ricas: var variable3 4 7$ola 70 var variable6 4 :0 var mensaje 4 variable3 @ variable60

22 mensaje 4 7$ola :9

Cuando se unen varias cadenas de texto es 8abitual olvidar a*adir un espacio de separacin entre las palabras: toDpperCase)+' transforma todos los caracteres de la cadena a sus correspondientes caracteres en may,sculas. var mensaje3 4 7$ola90 var mensaje6 4 mensaje3.toDpperCase)+0 22 mensaje 4 7$UL19

toLoRerCase)+' transforma todos los caracteres de la cadena a sus correspondientes caracteres en min,sculas: c8ar1t)posicin+' obtiene el carcter que se encuentra en la posicin indicada: indexUf)letra+' calcula la primera posicin en la que se encuentra el carcter indicado dentro de la cadena de texto. Si la cadena no contiene el carcter' la funcin devuelve el valor 3. La funcin indexUf)+ comien-a su b,squeda desde el principio de la palabra y solo devuelve la primera posicin de todas las existentes. Su funcin anloga es lastGndexUf)+. lastGndexUf)letra+' calcula la ,ltima posicin en la que se encuentra el carcter indicado dentro de la cadena de texto. Si la cadena no contiene el carcter' la funcin devuelve el valor 3. var mensaje 4 7$ola90 var posicin 4 mensaje.lastGndexUf)LaM+0 posicin 4 mensaje.lastGndexUf)LbM+0 22 posicin 4 : 22 posicin 4 3

La funcin lastGndexUf)+ comien-a su b,squeda desde el final de la cadena 8acia el principio' aunque la posicin devuelta es la correcta empe-ando a contar desde el principio de la palabra.

17

substring)inicio' final+' extrae una porcin de una cadena de texto. =l segundo parmetro es opcional. Si solo se indica el parmetro inicio' la funcin devuelve la parte de la cadena original correspondiente desde esa posicin 8asta el final: var mensaje 4 7$ola &undo90 var porcion 4 mensaje.substring)6+0 porcion 4 mensaje.substring)<+0 porcion 4 mensaje.substring)C+0 22 porcion 4 7la &undo9 22 porcion 4 7&undo9 22 porcion 4 7ndo9

Si se indica un inicio negativo' se devuelve la misma cadena original: var mensaje 4 7$ola &undo90 var porcion 4 mensaje.substring) 6+0 22 porcion 4 7$ola &undo9

Si se indica el inicio y el final' se devuelve la parte de la cadena original comprendida entre la posicin inicial y la inmediatamente anterior a la posicin final )es decir' la posicin inicio est incluida y la posicin final no+: var mensaje 4 7$ola &undo90 var porcion 4 mensaje.substring)3' J+0 22 porcion 4 7ola &un9

Si se indica un final ms peque*o que un inicio' JavaScript los considera de forma inversa' ya que automticamente asigna el valor ms peque*o al inicio y el ms grande al final: split)separador+' convierte una cadena de texto en un array de cadenas de texto. La funcin parte una cadena de texto dividiendo sus tro-os a partir del carcter delimitador indicado: var mensaje 4 7$ola &undo' soy una cadena de texto]90 var palabras 4 mensaje.split)7 7+0 22 palabras 4 W7$ola9' 7&undo'9' 7soy9' 7una9' 7cadena9' 7de9' 7texto]9X0 Con esta funcin se pueden extraer fcilmente las letras que forman una palabra: var palabra 4 7$ola90 var letras 4 palabra.split)79+0 2.1.2.- .rra s 1 continuacin se muestran algunas de las funciones ms ,tiles para el manejo de arrays: lengt8' calcula el n,mero de elementos de un array: var vocales 4 W7a9' 7e9' 7i9' 7o9' 7u9X0 var numeroIocales 4 vocale.lengt80 22 numeroIocales 4 < 22 letras 4 W7$9' 7o9' 7l9' 7a9X

concat)+' se emplea para concatenar los elementos de varios arrays: var array3 4 W3' 6' :X0 array6 4 array3.concat);' <' 5+0 22 array6 4 W3' 6' :' ;' <' 5X array: 4 array3.concat)W;' <' 5X+0 22 array: 4 W3' 6' :' ;' <' 5X join)separador+' es la funcin contraria a split)+. Dne todos los elementos de un array para formar una cadena de texto. .ara unir los elementos se utili-a el carcter separador:

18

var array 4 W78ola9' 7mundo9X0 var mensaje 4 array.join)79+0 mensaje 4 array.join)7 7+0

22 mensaje 4 78olamundo9 22 mensaje 4 78ola mundo9

pop)+' elimina el ,ltimo elemento del array y lo devuelve. =l array original se modifica y su longitud disminuye una unidad. var array 4 W3' 6' :X0 var ultimo 4 array.pop)+0 22 a8ora array 4 W3' 6X pus8)+' a*ade un elemento al final del array. =l array original se modifica y aumenta su longitud una unidad. %ambi(n es posible a*adir ms de un elemento a la ve-. var array 4 W3' 6' :X0 array.pus8);+0 22 a8ora array 4 W3' 6' :' ;X s8ift)+' elimina el primer elemento del array y lo devuelve. =l array original se modifica y su longitud disminuye una unidad. uns8ift)+' a*ade un elemento al principio del array. =l array original se modifica y aumenta su longitud en una unidad. %ambi(n es posible a*adir ms de un elemento a la ve-. var array 4 W3' 6' :X0 array.uns8ift)E+0 22 a8ora array 4 WE' 3' 6' :X reverse)+' modifica un array colocando sus elementos en el orden inverso a su posicin original: var array 4 W3' 6' :X0 array.reverse)+0 22 a8ora array 4 W:' 6' 3X

19

20

21