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 )?+
1
=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.
2
/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:
3
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 tpeo!
=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 22 devuelve 7undefined9' aunque la variable3 8a sido declarada
typeof variable60 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
4
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
5
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 Ialor Significado
&at8.= 6.C3J6J3J6J;< Constante de =uler' base de los logaritmos
naturales y tambi(n llamado n,mero e
&at8.L!6 Logaritmo natural de 6
&at8.L!3E Logaritmo natural de 3E
&at8..G .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 Se debe sustituir porP
Dna nueva l"nea On
Dn tabulador Ot
Dna comilla simple OM
Dna comilla doble O9
Dna barra inclinada 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
6
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 22 devuelve 7true9 como cadena de texto
var variable6 4 <0
variable6.toString)+0 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 22 devuelve !a!
var variable6 4 7:;90
parseGnt)variable6+0 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 22 devuelve !a!
var variable6 4 7:;90
parseQloat)variable6+0 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:
7
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 :
8
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
9
=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 variable3 4 neR !umber):.3;3<F6+0
var variable6 4 variable3.toQixed)+0 22 variable6 4 :
var variable: 4 variable3.toQixed)6+0 22 variable: 4 :.3;
var variable; 4 variable3.toQixed)3E+0 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 22 numero: 4 E.6:
numero: 4 numero3.toQixed)6+0 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 22 muestra true
alert): ZZ false+0 22 muestra :
alert)true ZZ <+0 22 muestra true
alert)false ZZ true+0 22 muestra true
alert)false ZZ <+0 22 muestra <
alert): ZZ <+0 22 muestra :
/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 22 posicin 4 :
posicin 4 mensaje.lastGndexUf)LbM+0 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 22 porcion 4 7la &undo9
porcion 4 mensaje.substring)<+0 22 porcion 4 7&undo9
porcion 4 mensaje.substring)C+0 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 22 letras 4 W7$9' 7o9' 7l9' 7a9X
2.1.2.- .rras
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 <
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 22 mensaje 4 78olamundo9
mensaje 4 array.join)7 7+0 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