Manual Programacion Javascript Parte1

!" $%&'( )*"+) ,)() ),(%-+%( ) .
)/%( 0%12
0003+%2)(('44'0%13/'$
!"#$"%&%'()* ,*
-%.%/'"(01 234 5*1",$%6
0escubre el lenyuc]e de proyrcmccon del lcdo clente por excelencc, 1cvcscrpt. Estc es lc
prmerc pcrte del Mcnucl de 1cvcscrpt donde veremos lcs ccrccterstccs del lenyuc]e, como lc
sntcxs, vcrcbles, estructurcs de control, ]uncones, crrcys, etc.
!"#$%&' )&* +,-",*
Este manual ha sIdo realIzado por los sIguIentes colaboradores de 0esarrolloWeb.com:
./0"&* !-0&* !*1,%&2
0Irector de 0esarrolloWeb.com
http://www.desarrolloweb.com
(J6 capitulos)
.,-" 3"#/&%%&2
http://www.tufuncIon.com
(1 capitulo)
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
Los manuales de 0esarrolloWeb.com tIenen el copyrIght de sus autores. No reproducIr sIn autorIzacIon.
1
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, 37
8*1"#9:''(#*,; %
-%.%;'"(01
Articulos que nos servIrn para IntroducIrnos en este lenguaje, aprendIendo los
conceptos ms bsIcos de JavascrIpt y la programacIon del lado del clIente.
45456 7-#%$)"88/9- , :,1,'8%/;#
\ecmos qu es 1cvcScrpt y lcs posbldcdes que nos o]rece utlzcr este lenyuc]e c lc horc de descrrollcr
pcyncs web.
Ante todo, gracias por leer este Manual de Jaascript, en el que esperamos orecer un punto de partida para las personas que
quieren introducirse en el mundo de la programacin y que quieren aplicar un mayor dinamismo a su pagina web.
Ll curso de Jaascript que hemos preparado en Desarrollo\eb.com esta diidido en dos partes undamentales. Ln este
primer manual pretendemos orecer la inormacin mas esencial para aprender a programar en Jaascript, oreciendo
inormacin sobre cmo incluir scripts y lidiar con los elementos mas basicos de cualquier lenguaje de programacin, como
son las ariables, operadores, estructuras de control, unciones, etc. La segunda parte del manual la dedicaremos a explorar
temas mas especicos sobre cmo Jaascript nos puede ayudar a aplicar dinamismo a una pagina web, a tras del control
dinamico de elementos de la pagina y la interaccin con el usuario.
!"#$% Por tanto, en este primer manual encontraris que se orece mucha mas inormacin terica tpica sobre lenguajes de programacin.
Sera esencial para saber cmo dar los primeros pasos en la programacin, pero quizas resulte un poco mas aburrida que la segunda parte,
donde aprenderemos a alterar dinamicamente la pagina web, responder a acciones del usuario, etc.
Nosotros hemos querido explicar las cosas con detenimiento, para que aprender Jaascript con este manual est al alcance de personas incluso
sin conocimientos de programacin. No obstante, en Desarrollo\eb.com existen diersos manuales mas basicos todaa para aprender a
programar, como puede ser el manual de Paginas dinamicas o la introduccin a la programacin.,
Sin embargo, quizas personas mas experimentadas puedan preerir pasar directamente a la segunda parte de este manual, donde explicaremos
cosas mas practicas y oler sobre artculos puntuales de este manual para utilizarlos como reerencia a medida que ayan necesitando
conocer la sintaxis de determinadas estructuras de control, operadores del lenguaje, construccin de unciones, etc.
Ln este artculo pretendemos explicar qu Jaascript y para qu sire este lenguaje, al menos en lneas generales. A lo
largo de ste y los prximos artculos pretendemos que las personas tengan una idea mas o menos clara sobre qu es
Jaascript, las posibilidades de del lenguaje o usos mas comunes y los modos de trabajo que podemos emplear para
desarrollar nuestros propios scripts.
!"#$% Otro recurso que queremos recomendar para aprender Jaascript, especialmente indicado para las personas con menos experiencia, es
el Videotutorial de Jaascript.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
2
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
4545456 <"= &' :,1,'8%/;#
Jaascript es un lenguaje de programacin utilizado para crear pequenos programitas encargados de realizar acciones dentro
del ambito de una pagina web. Con Jaascript podemos crear eectos especiales en las paginas y deinir interactiidades con
el usuario. Ll naegador del cliente es el encargado de interpretar las instrucciones Jaascript y ejecutarlas para realizar estos
eectos e interactiidades, de modo que el mayor recurso, y tal ez el nico, con que cuenta este lenguaje es el propio
naegador.
Jaascript es el siguiente paso, despus del l1ML, que puede dar un programador de la web que decida mejorar sus paginas
y la potencia de sus proyectos. Ls un lenguaje de programacin bastante sencillo y pensado para hacer las cosas con rapidez,
a eces con ligereza. Incluso las personas que no tengan una experiencia preia en la programacin podran aprender este
lenguaje con acilidad y utilizarlo en toda su potencia con slo un poco de practica.
Lntre las acciones tpicas que se pueden realizar en Jaascript tenemos dos ertientes. Por un lado los eectos especiales
sobre paginas web, para crear contenidos dinamicos y elementos de la pagina que tengan moimiento, cambien de color o
cualquier otro dinamismo. Por el otro, jaascript nos permite ejecutar instrucciones como respuesta a las acciones del
usuario, con lo que podemos crear paginas interactias con programas como calculadoras, agendas, o tablas de calculo.
Jaascript es un lenguaje con muchas posibilidades, permite la programacin de pequenos scripts, pero tambin de
programas mas grandes, orientados a objetos, con unciones, estructuras de datos complejas, etc. 1oda esta potencia de
Jaascript se pone a disposicin del programador, que se conierte en el erdadero dueno y controlador de cada cosa que
ocurre en la pagina.
Ln este manual amos a tratar de acercarnos a este lenguaje en proundidad y conocer todos sus secretos y mtodos de
trabajo. Al inal del manual seremos capaces de controlar el lujo en nuestros programas Jaascript y saber cmo colocar
scripts para resoler distintas necesidades que podamos tener. 1odo lo que eremos a continuacin nos serira de base para
adentrarnos mas adelante en el desarrollo de paginas enriquecidas del lado del cliente.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
45>56 !*0$ )& ?/'#$%/, '$@%& :,1,'8%/;#
Alyuncs curosdcdes relctvcs c lc hstorc de 1cvcscrpt. Relctcmos los oryenes y etmoloycs de este
lenyuc]e de proyrcmccon de pcyncs web.
Ln Internet se han creado multitud de sericios para realizar muchos tipos de comunicaciones, como correo, charlas,
bsquedas de inormacin, etc. Pero ninguno de estos sericios se ha desarrollado tanto como el \eb. Si estamos leyendo
estas lneas no amos a necesitar ninguna explicacin de lo que es el web, pero si podemos hablar un poco sobre cmo se ha
ido desarrollando con el paso de los anos.
Ll \eb es un sistema lipertexto, una cantidad de dimensiones gigantes de textos interrelacionados por medio de enlaces.
Cada una de las unidades basicas donde podemos encontrar inormacin son las paginas web. Ln un principio, para disenar
este sistema de paginas con enlaces se pens en un lenguaje que permitiese presentar cada una de estas inormaciones junto
con unos pequenos estilos, este lenguaje ue el l1ML.
Conorme ue creciendo el \eb y sus distintos usos se ueron complicando las paginas y las acciones que se queran realizar
a tras de ellas. Al poco tiempo qued patente que l1ML no era suiciente para realizar todas las acciones que se pueden
llegar a necesitar en una pagina web. Ln otras palabras, l1ML se haba quedado corto ya que slo sire para presentar el
texto en un pagina, deinir su estilo y poco mas.
Al complicarse los sitios web, una de las primeras necesidades ue que las paginas respondiesen a algunas acciones del
usuario, para desarrollar pequenas uncionalidades mas alla de los propios enlaces. Ll primer ayudante para cubrir las
necesidades que estaban surgiendo ue Jaa, que es un lenguaje de propsito general, pero que haba creado una manera de
incrustar programas en paginas web. A tras de la tecnologa de los Applets, se poda crear pequenos programas que se
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
3
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
ejecutaban en el naegador dentro de las propias paginas web, pero que tenan posibilidades similares a los programas de
propsito general. La programacin de Applets ue un gran aance y Netscape, por aquel entonces el naegador mas
popular, haba roto la primera barrera del l1ML al hacer posible la programacin dentro de las paginas web. No cabe duda
que la aparicin de los Applets supuso un gran aance en la historia del web, pero no ha sido una tecnologa deinitia y
muchas otras han seguido implementando el camino que comenz con ellos.
45>5456 A*&0, :,1,'8%/;#
Netscape, despus de hacer sus naegadores compatibles con los applets, comenz a desarrollar un lenguaje de
programacin al que llam LieScript que permitiese crear pequenos programas en las paginas y que uese mucho mas
sencillo de utilizar que Jaa. De modo que el primer Jaascript se llamo LieScript, pero no dur mucho ese nombre, pues
antes de lanzar la primera ersin del producto se orj una alianza con Sun Microsystems, creador de Jaa, para desarrollar
en conjunto ese nueo lenguaje.
La alianza hizo que Jaascript se disenara como un hermano pequeno de Jaa, solamente til dentro de las paginas web y
mucho mas acil de utilizar, de modo que cualquier persona, sin conocimientos de programacin pudiese adentrase en el
lenguaje y utilizarlo a sus anchas. Ademas, para programar Jaascript no es necesario un kit de desarrollo, ni compilar los
scripts, ni realizarlos en icheros externos al cdigo l1ML, como ocurra con los applets.
Netscape 2.0 ue el primer naegador que entenda Jaascript y su estela ue seguida por otros clientes web como Internet
Lxplorer a partir de la ersin 3.0. Sin embargo, la compana Microsot nombr a este lenguaje como JScript y tena ligeras
dierencias con respecto a Jaascript, algunas de las cuales perduran hasta el da de hoy.
45>5>56 B/C&%&-8/,' &-#%& )/'#/-#$' -,1&0,)$%&'
Como hemos dicho el Jaascript de Netscape y el de Microsot Internet Lxplorer tena ligeras dierencias, pero es que
tambin el propio lenguaje ue eolucionando a medida que los naegadores presentaban sus distintas ersiones y a medida
que las paginas web se hacan mas dinamicas y mas exigentes las necesidades de uncionalidades.
Las dierencias de uncionamiento de Jaascript han marcado las historia del lenguaje y el modo en el que los desarrolladores
se relacionan con l, debido a que estaban obligados a crear cdigo que uncionase correctamente en dierentes plataormas
y dierentes ersiones de las mismas. A da de hoy, siguen habiendo muchas dierencias y para solucionarlo han surgido
muchos productos como los lrameworks Jaascript, que ayudan a realizar uncionalidades aanzadas de Dl1ML sin tener
que preocuparse en hacer ersiones distintas de los scripts, para cada uno de los naegadores posibles del mercado.
A continuacin seguiremos aprendiendo curiosidades del lenguaje y aclararemos que Jaa y Jaascript son dos cosas
distintas, en el artculo sobre las dierencias de Jaa y Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
45D56 B/C&%&-8/,' &-#%& :,1, E :,1,'8%/;#
1cvc y 1cvcscrpt son dos productos dstntos. Ponemos de mcn]esto lc d]erencc entre estos dos
lenyuc]es con un nombre smlcr.
Lstamos contando diersos asuntos interesantes y curiosidades que siren de introduccin para el Manual de Jaascript y
queremos tratar una de las mas tpicas asociaciones que se se hacen al oir hablar de Jaascript. Nos reerimos a relacionarlo
con otro lenguaje de programacin, llamado Jaa, que no tiene mucho que er. Realmente Jaascript se llam as porque
Netscape, que estaba aliado a los creadores de Jaa en la poca, quiso aproechar el conocimiento y la percepcin que las
personas tenan del popular lenguaje. Con todo, se cre un producto que tena ciertas similitudes, como la sintaxis del
lenguaje o el nombre. Se hizo entender que era un hermano pequeno y orientado especicamente para hacer cosas en las
paginas web, pero tambin se hizo caer a muchas personas en el error de pensar que son lo mismo.
Queremos que quede claro que '$($)*+,-# ." #,/./ .$0$ 12/ (/+ *". '$($, salo en sus orgenes, como se ha podido leer
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
4
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
hace unas lneas. Actualmente son productos totalmente distintos y no guardan entre si mas relacin que la sintaxis idntica
y poco mas. Algunas dierencias entre estos dos lenguajes son las siguientes:
! 3"4-,5$0"+. Para programar en Jaa necesitamos un Kit de desarrollo y un compilador. Sin embargo, Jaascript
no es un lenguaje que necesite que sus programas se compilen, sino que stos se interpretan por parte del
naegador cuando ste lee la pagina.
! 6+,/.#$0" $ "78/#"). Jaa es un lenguaje de programacin orientado a objetos. ,Mas tarde eremos que quiere
decir orientado a objetos, para el que no lo sepa todaa, Jaascript no es orientado a objetos, esto quiere decir que
podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programacin
estructurada como C o Pascal.
! 9+"-:),#". Jaa es mucho mas potente que Jaascript, esto es debido a que Jaa es un lenguaje de propsito
general, con el que se pueden hacer aplicaciones de lo mas ariado, sin embargo, con Jaascript slo podemos
escribir programas para que se ejecuten en paginas web.
! ;)#+2*#2+$) <2/+#/). Jaa es un lenguaje de programacin uertemente tipado, esto quiere decir que al declarar una
ariable tendremos que indicar su tipo y no podra cambiar de un tipo a otro automaticamente. Por su parte
Jaascript no tiene esta caracterstica, y podemos meter en una ariable la inormacin que deseemos,
independientemente del tipo de sta. Ademas, podremos cambiar el tipo de inormacin de una arible cuando
queramos.
! 6#+$) *$+$*#/+=)#,*$). Como emos Jaa es mucho mas complejo, aunque tambin mas potente, robusto y seguro.
1iene mas uncionalidades que Jaascript y las dierencias que los separan son lo suicientemente importantes
como para distinguirlos acilmente.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
45F56 !-#&' )& &+;&2,%
Mostrcmos e]emplos de pcyncs que emplecn 1cvcScrpt en su descrrollo y comentcmos lcs cplcccones
necescrcs pcrc empezcr c proyrcmcr.
lay arios puntos que queremos comentar como introduccin en el Manual de Jaascript y que podras querer conocer antes
de comenzar a programar. Primero sera bueno hacernos una idea mas concreta de las posibles aplicaciones que podra tener
el lenguaje y que se pueden encontrar en innumerables sitios web. Ademas tambin queremos comentar las herramientas y
conocimientos preios que necesitamos para ponernos manos a la obra.
45F5456 G'$' )& :,1,'8%/;#
Quizas a da de hoy sobra decir para qu sire Jaascript, pero eamos breemente algunos usos de este lenguaje que
podemos encontrar en el web para hacernos una idea de las posibilidades que tiene.
Sin ir mas lejos, Desarrollo\eb.com utiliza Jaascript para el men superior, que muestra dierentes enlaces dentro de cada
opcin principal. Vamos cambiando la pagina cada cierto tiempo, pero en el diseno actual de este sitio web, elementos como
el recuadro de "Login" tambin tienen su dinamismo con Jaascript.
Actualmente casi todas las paginas un poco aanzadas utilizan Jaascript, pues se ha uelto una de las insignias de lo que se
denomina la \eb 2.0 y la experiencia enriquecida de usuario. Por ejemplo, webs tan populares como lacebook, 1witter o
\outube usan Jaascript a raudales. Para ser mas concretos, cuando en la red social apretamos un enlace para comentar algo,
se muestra en la pagina un pequeno ormulario que aparece como por arte de magia y luego se ena sin salirse de la propia
pagina. 1ambin cuando otamos por un deo en \outube o cuando se cuentan los caracteres que lleamos escritos en los
mini-post de 1witter, se utiliza Jaascript para realizar pequenas uncionalidades que no es posible realizar con l1ML slo.
Ln realidad se pueden er ejemplos de Jaascript dentro de cualquier pagina un poco compleja. Algunos que habremos isto
en innumerables ocasiones son calendarios dinamicos para seleccionar echas, calculadoras o conertidores de diisas,
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
5
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
editores de texto enriquecido, naegadores dinamicos, etc.
Ls mucho mas habitual encontrar Jaascript para realizar eectos simples sobre paginas web, o no tan simples, como pueden
ser naegadores dinamicos, apertura de entanas secundarias, alidacin de ormularios, etc. Nos atreemos a decir que este
lenguaje es realmente til para estos casos, pues estos tpicos eectos tienen la complejidad justa para ser implementados en
cuestin de minutos sin posibilidad de errores. Sin embargo, aparte de esos unos simples ejemplos, podemos encontrar
dentro de Internet muchas aplicaciones que basan parte de su uncionamiento en Jaascript, que hacen que una pagina web
se conierta en un erdadero programa interactio de gestin de cualquier recurso. Ljemplos claros son las aplicaciones de
oimatica online, como Google Docs, Oice Online o Google Calendar.
45F5>56 <"= -&8&'/#,' ;,%, #%,@,H,% 8$- :,1,'8%/;#
Para programar en Jaascript necesitamos basicamente lo mismo que para desarrollar paginas web con l1ML. Un editor de
textos y un naegador compatible con Jaascript. Cualquier ordenador mnimamente actual posee de salida todo lo necesario
para poder programar en Jaascrip. Por ejemplo, un usuario de \indows dispone dentro de su instalacin tpica de sistema
operatio, de un editor de textos, el Bloc de notas, y de un naegador: Internet Lxplorer.
!"#$% Usuarios que deseen herramientas mas aanzadas pueden encontrar en Internet acilmente programas similares en la seccin de
programas para desarrolladores.
Permitidme una recomendacin con respecto al editor de textos. Se trata de que, aunque el Bloc de Notas es suiciente para
empezar, tal ez sea muy til contar con otros programas que nos orecen mejores prestaciones a la hora de escribir las
lneas de cdigo. Lstos editores aanzados tienen algunas entajas como que colorean los cdigos de nuestros scripts, nos
permiten trabajar con arios documentos simultaneamente, tienen ayudas, etc. Lntre otros queremos destacar Komodo Ldit,
Notepad-- o UltraLdit.
45F5D56 I$-$8/+/&-#$' ;%&1/$' %&8$+&-),@*&'
Lo cierto es que no hace alta tener mucha base de conocimientos para ponerse a programar en Jaascript. Lo mas seguro es
que si lees estas lneas ya sepas todo lo necesario para trabajar, puesto que ya habras tenido alguna relacin con el desarrollo
de sitios web y habras detectado que para hacer ciertas cosas te iene bien conocer un poco de Jaascript.
No obstante, sera bueno tener un dominio aanzado de l1ML, al menos el suiciente para escribir cdigo en ese lenguaje
sin tener que pensar qu es lo que estas haciendo. 1ambin sera til un conocimiento medio sobre CSS y quizas alguna
experiencia preia sobre algn lenguaje de programacin, aunque en este manual de Desarrollo\eb.com amos a tratar de
explicar Jaascript incluso para personas que no hayan programado nunca.
Ln el siguiente artculo seguiremos con temas que siren de introduccin al lenguaje de scripting del lado del cliente iendo
las algunas dierencias de Jaascript que existen en las ersiones de naegadores que han ido apareciendo.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
45J56 K&%'/$-&' )& -,1&0,)$%&' E )& :,1,'8%/;#
Presentcmos lcs d]erentes versones de 1cvcScrpt, los ncveycdores que lcs cceptcn y sus contrbucones
con respecto c lcs predecesorcs.
Para continuar con la introduccin al lenguaje que estamos iendo en el Manual de Jaascript, tambin resulta apropiado
introducir las distintas ersiones de Jaascript que existen y que han eolucionado en conjunto con las ersiones de
naegadores. Ll lenguaje ha ido aanzando durante sus anos de ida e incrementando sus capacidades. Ln un principio
poda realizar muchas cosas en la pagina web, pero tena pocas instrucciones para crear eectos especiales.
Con el tiempo tambin el l1ML ha aanzado y se han creado nueas caractersticas como las capas, que permiten tratar y
maquetar los documentos de manera distinta. Jaascript ha aanzado tambin y para manejar todas estas nueas
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
6
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
caractersticas se han creado nueas instrucciones y recursos. Para resumir amos a comentar las distintas ersiones de
Jaascript:
>*#2$5,?$0"% Ln el momento de actualizar este artculo, podemos decir que no tenemos que preocuparnos mucho de las ersiones de
Jaascript que puedan haber existido. Realmente cualquier naegador medianamente moderno tendra ahora todas las uncionalidades de
Jaascript que ayamos a necesitar y sobre todo, las que podamos utilizar en nuestros primeros pasos con el lenguaje. No obstante puede enir
bien conocer las primeras ersiones de Jaascript que comentamos en este artculo, a modo de curiosidad.
! '$($)*+,-# @: naci con el Netscape 2.0 y soportaba gran cantidad de instrucciones y unciones, casi todas las que
existen ahora ya se introdujeron en el primer estandar.
! '$($)*+,-# @A@: Ls la ersin de Jaascript que se disen con la llegada de los naegadores 3.0. Implementaba poco
mas que su anterior ersin, como por ejemplo el tratamiento de imagenes dinamicamente y la creacin de arrays.
! '$($)*+,-# @AB: La ersin de los naegadores 4.0. Lsta tiene como desentaja que es un poco distinta en
plataormas Microsot y Netscape, ya que ambos naegadores crecieron de distinto modo y estaban en plena lucha
por el mercado.
! '$($)*+,-# @AC: Versin que implementan los naegadores 5.0. Ln esta ersin se han limado algunas dierencias y
asperezas entre los dos naegadores.
! '$($)*+,-# @AD: Versin actual, en el momento de escribir estas lneas, que implementa Netscape 6.
! Por su parte, E,*+")"<# tambin ha eolucionado hasta presentar su (/+),:. DAD 0/ 'F*+,-# ,as llaman al jaascript
utilizado por los naegadores de Microsot,.
Ls obio que todaa, despus de escribir estas lneas, se presentaran o habran presentado muchas otras ersiones de
Jaascript, pues, a medida que se an mejorando los naegadores y an saliendo ersiones de l1ML, surgen nueas
necesidades para programacin de elementos dinamicos. No obstante, todo lo que amos a aprender en este manual, incluso
otros usos mucho mas aanzados, ya esta implementado en cualquier Jaascript que existan en la actualidad.
Ln el siguiente artculo comenzaremos ya a mostrar pequenos cdigos Jaascript que seriran para hacer eectos simples en
paginas web.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
45L56 MC&8#$' %N;/)$' 8$- :,1,'8%/;#
En este ltmo crtculo de ntroduccon c 1cvcscrpt veremos clyunos e]emplos de codyos sencllos de
yrcn utldcd.
Antes de meternos de lleno en materia podemos er una serie de eectos rapidos que se pueden programar con Jaascript, lo
que nos puede hacer una idea mas clara de las capacidades y potencia del lenguaje. A continuacin eremos arios ejemplos,
que hemos destacado para esta introduccin en el Manual de Jaascript, por tener un mnimo de complejidad y aunque sean
muy basicos, nos endran bien para tener una idea mas exacta de lo que es Jaascript a la hora de recorrer los siguientes
captulos.
45L5456 !@%/% "-, 1&-#,-, '&8"-),%/,
Primero amos a er que con una lnea de Jaascript podemos hacer cosas bastante atractias. Por ejemplo podemos er
cmo abrir una entana secundaria sin barras de mens que muestre el buscador Google. Ll cdigo sera el siguiente.
<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
7
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Podemos er el ejemplo en marcha aqu.
45L5>56 G- +&-',H& )& @/&-1&-/),
Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web, que podra dar la
bienenida a los isitantes.
<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>
Puedes er el ejemplo en una pagina a parte.
45L5D56 O&8?, ,8#",*
Veamos ahora un sencillo script para mostrar la echa de hoy. A eces es muy interesante mostrarla en las webs para dar un
eecto de que la pagina esta al "al da", es decir, esta actualizada.
<script> document.write(new Date()) </script>
Lstas lneas deberan introducirse dentro del cuerpo de la pagina en el lugar donde queramos que aparezca la echa de ltima
actualizacin. Podemos er el ejemplo en marcha aqu.
!"#$% Un detalle a destacar es que la echa aparece en un ormato un poco raro, indicando tambin la hora y otros atributos de la misma,
pero ya aprenderemos a obtener exactamente lo que deseemos en el ormato correcto.
45L5F56 P$#9- )& 1$*1&%
Otro ejemplo rapido se puede er a continuacin. Se trata de un botn para oler hacia atras, como el que tenemos en la
barra de herramientas del naegador. Ahora eremos una lnea de cdigo que mezcla l1ML y Jaascript para crear este
botn que muestra la pagina anterior en el historial, si es que la hubiera.
<input type=button value=Atrs onclick="history.go(-1)">
Ll botn sera parecido al siguiente. Podemos pulsarlo para er su uncionamiento ,debera llearnos a la pagina anterior,.

Como dierencia con los ejemplos anteriores, hay que destacar que en este caso la instruccin Jaascript se encuentra dentro
de un atributo de l1ML, onclick, que indica que esa instruccin se tiene que ejecutar como respuesta a la pulsacin del
botn.
Se ha podido comprobar la acilidad con la que se pueden realizar algunas acciones interesantes. Como podris imaginar,
existiran muchas otras muestras sencillas de Jaascript que nos reseramos para captulos posteriores.
Si lo deseas, puedes er cmo hemos desarrollado algunos de estos eectos rapidos Jaascript paso por paso y en deo. Ln
el siguiente artculo empezaremos ya a hablar del propio lenguaje de programacin Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
8
!"#$%
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, <7
!"(&,"#; 0%;#; '#* ,=
=,*$:%>, -%.%;'"(01
Comenzamos a aprender cosas que tIenen que ver dIrectamente con la programacIon en
el lenguaje JavascrIpt y la manera con la que se Integra ste en una pgIna web.
>5456 M* *&-0",H& :,1,'8%/;#
\ecmos como se escrbe el codyo en 1cvcscrpt y pcrc ello comentcremos lcs prmercs reylcs pcrc
nsertcr scrpts en pcyncs web.
Ln esta parte del manual sobre Jaascript amos a conocer la manera mas basica de trabajar con el lenguaje. Ln este artculo
daremos las primeras inormaciones sobre cmo incluir scripts, mezclando el propio cdigo Jaascript con el l1ML.
Luego eremos tambin cmo se debe colocar cdigo para que nuestra web sea compatible con todos los naegadores,
incluso aquellos que no soportan Jaascript. Muchas ideas del uncionamiento de Jaascript ya se han descrito en captulos
anteriores, pero con el objetio de no dejarnos nada en el tintero amos a tratar de acaparar a partir de aqu todos los datos
importantes de este lenguaje.
>545456 :,1,'8%/;# '& &'8%/@& &- &* )$8"+&-#$ QR.A
Lo mas importante y basico que podemos destacar en este momento es que la programacin de Jaascript se realiza dentro
del propio documento l1ML. Ls decir, el cdigo Jaascript, en la mayora de los casos, se mezcla con el propio cdigo
l1ML para generar la pagina.
Lsto quiere decir que debemos aprender a mezclar los dos lenguajes de programacin y rapidamente eremos que, para que
estos dos lenguajes puedan coniir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas
l1ML de las instrucciones Jaascript. Lstos delimitadores son las etiquetas SCRIP1 y ,SCRIP1. 1odo el cdigo
Jaascript que pongamos en la pagina ha de ser introducido entre estas dos etiquetas.
>545>56 A, 8$*$8,8/9- )& *$' '8%/;#' 'S T"& /+;$%#,
Ln una misma pagina podemos introducir arios scripts, cada uno que podra introducirse dentro de unas etiquetas
SCRIP1 distintas. La colocacin de estos scripts no es indierente. Ln un principio, con lo que sabemos hasta el
momento y los scripts que hemos realizado de prueba, nos da un poco igual donde colocarlos, pero en determinados casos
esta colocacin s que sera muy importante. Ln cada caso, y llegado el momento, se inormara de ello conenientemente.
1ambin se puede escribir Jaascript dentro de determinados atributos de la pagina, como el atributo !"#$%#&. Lstos atributos
estan relacionados con las acciones del usuario y se llaman manejadores de eentos.
Vamos a er en el siguiente captulo com mas detenidamente estas dos maneras de escribir scripts, que tienen como
dierencia principal el momento en que se ejecutan las sentencias.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
9
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!"#$%&'( *(" +,-&.' !/-.' !'01".2
>5>56 .,-&%,' )& &H&8"#,% '8%/;#' :,1,'8%/;#
Exsten dos mcnercs bcsccs de e]ecutcr scrpts 1cvcscrpt en unc pcync: cl ccrycr lc pcync o como
respuestc c cccones del usucro.
lasta ahora en el Manual de Jaascript ya hemos tenido la ocasin de probar algunos scripts sencillos, no obstante, todaa
tenemos que aprender una de las bases para poder trabajar con el lenguaje y es aprender las dos maneras de ejecutar cdigo
Jaascript. Lxisten 0") 4$./+$) <2.0$4/.#$5/) 0/ /8/*2#$+ )*+,-#) en la pagina. La primera de estas maneras se trata de
ejecucin directa de scripts, la segunda es una ejecucin como respuesta a la accin de un usuario.
Lxplicaremos ahora cada una de estas ormas de ejecucin disponibles, pero para el que lo desee, recomendamos tambin
er el deo sobre Maneras de incluir y ejecutar scripts.
>5>5456 MH&8"8/9- )/%&8#,
Ls el mtodo de ejecutar scripts mas basico. Ln este caso se incluyen las instrucciones dentro de la etiqueta SCRIP1, tal
como hemos comentado anteriormente. Cuando el naegador lee la pagina y encuentra un script a interpretando las lneas
de cdigo y las a ejecutando una despus de otra. Llamamos a esta manera ejecucin directa pues cuando se lee la pagina se
ejecutan directamente los scripts.
Lste mtodo sera el que utilicemos preerentemente en la mayora de los ejemplos de esta parte del Manual de Jaascript. Ln
la segunda parte del Manual de Jaascript podremos aprender muchas cosas y entre ellas eremos con detalle el segundo
modo de ejecucin de scripts que amos a relatar a continuacin.
>5>5>56 U&';"&'#, , "- &1&-#$
Ls la otra manera de ejecutar scripts, pero antes de erla debemos hablar sobre los eentos. Los eentos son acciones que
realiza el usuario. Los programas como Jaascript estan preparados para atrapar determinadas acciones realizadas, en este
caso sobre la pagina, y realizar acciones como respuesta. De este modo se pueden realizar programas interactios, ya que
controlamos los moimientos del usuario y respondemos a ellos. Lxisten muchos tipos de eentos distintos, por ejemplo la
pulsacin de un botn, el moimiento del ratn o la seleccin de texto de la pagina.
Las acciones que queremos realizar como respuesta a un eento se han de indicar dentro del mismo cdigo l1ML, pero en
este caso se indican en atributos l1ML que se colocan dentro de la etiqueta que queremos que responda a las acciones del
usuario. Ln el captulo donde imos algn ejemplo rapido ya comprobamos que si queramos que un botn realizase
acciones cuando se pulsase sobre el, debamos indicarlas dentro del atributo onclick del botn.
Comprobamos pues que se puede introducir cdigo Jaascript dentro de determinados atributos de las etiquetas l1ML.
Veremos mas adelante este tipo de ejecucin en proundidad y los tipos de eentos que existen. Pero para llegar a ello aun
tenemos que aprender muchas otras cosas de Jaascript. Ln el prximo artculo mostraremos cmo podemos ocultar el
cdigo Jaascript para naegadores antiguos.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
>5D56 V8"*#,% '8%/;#' :,1,'8%/;# &- -,1&0,)$%&' ,-#/0"$'
No todos los ncveycdores son compctbles con 1cvcscrpt, cs que tenemos que cprender como hccer que
los scrpts no molesten en ncveycdores que no los entenden.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
10
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
A lo largo de los anteriores captulos del Manual de Jaascript ya hemos isto que el lenguaje se implement a partir de
Netscape 2.0 e Internet Lxplorer 3.0. Incluso, para los que no lo sepan, esta bien decir que hay naegadores que uncionan
en sistemas operatios, donde slo se puede isualizar texto y donde determinadas tecnologas y aplicaciones no estan
disponibles, como el uso de imagenes, uentes tipograicas distintas o el propio Jaascript.
As pues, no todos los naegadores que puedan utilizar los usuarios que isiten nuestra pagina comprenden Jaascript. Ln
los casos en los que no se interpretan los scripts, los naegadores asumen que el cdigo de stos es texto de la propia pagina
y como consecuencia, presentan los scripts en el cuerpo del documento, como si de texto normal se tratara. Para eitar que
el texto de los scripts se escriba en la pagina cuando los naegadores no los entienden se tienen que ocultar los con
comentarios l1ML ,!-comentario l1ML --,. Ademas, en este artculo eremos tambin cmo mostrar un mensaje que
se ea slo en los naegadores que no son compatibles con Jaascript.
>*#2$5,?$0"% Ln el momento actual podemos decir que casi el 100 de los naegadores disponibles soportan Jaascript, o por lo menos
reconocen las etiquetas de script, por lo que, aunque est desactiado, no mostraran el texto de nuestros programas Jaascript. Por ello,
actualmente ya no es undamental realizar la operacin de ocultar el cdigo de los scripts de la pagina para naegadores antiguos. No
obstante, si queremos hacer una pagina totalmente correcta, conendra aprender cmo se puede ocultar un script para que en ningn caso se
muestre como texto en la pagina.
>5D5456 V8"*#,% &* 89)/0$ :,1,'8%/;# 8$- 8$+&-#,%/$' QR.A
Veamos con un ejemplo de cdigo donde se han utilizado comentarios l1ML para ocultar Jaascript, o mejo dicho, el
cdigo los scripts Jaascript.
<SCRIPT>

</SCRIPT>
Vemos que el inicio del comentario l1ML es idntico a cmo lo conocemos en el l1ML, pero el cierre del comentario
presenta una particularidad, que empieza por doble barra inclinada. Lsto es debido a que el inal del comentario contiene
arios caracteres que Jaascript reconoce como operadores y al tratar de analizarlos lanza un mensaje de error de sintaxis.
Para que Jaascript no lance un mensaje de error se coloca antes del comentario l1ML esa doble barra, que no es mas que
un comentario Jaascript, que conoceremos mas adelante cuando hablemos de sintaxis.
Ll inicio del comentario l1ML no es necesario comentarlo con la doble barra, dado que Jaascript entiende bien que
simplemente se pretende ocultar el cdigo. Una aclaracin a este punto: si pusisemos las dos barras en esta lnea, se eran
en naegadores antiguos por estar uera de los comentarios l1ML. Las etiquetas SCRIP1 no las entienden los
naegadores antiguos, por lo tanto no las interpretan, tal como hacen con cualquier etiqueta que desconocen.
>5D5>56 .$'#%,% "- +&-',H& ;,%, -,1&0,)$%&' ,-#/0"$' 8$- WXVYIU7ZR[
Lxiste la posibilidad de indicar un texto alternatio para los naegadores que no entienden Jaascript, para inormarles de
que en ese lugar debera ejecutarse un script y que la pagina no esta uncionando al 100 de sus capacidades. 1ambin
podemos sugerir a los isitantes que actualicen su naegador a una ersin compatible con el lenguaje. Para ello utilizamos la
etiqueta NOSCRIP1 y entre esta etiqueta y su correspondiente de cierre podemos colocar el texto alternatio al script.
<SCRIPT>
cdigo javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no comprende los scripts que se estn ejecutando, debes actualizar tu versin de
navegador a una ms reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
Ln el siguiente artculo eremos algunos otros detalles sobre colocar scripts Jaascript que se han quedado en el tintero.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
11
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!"#$%&'( *(" +,-&.' !/-.' !'01".2
>5F56 .N' '$@%& 8$*$8,% '8%/;#'
0ltmcs notcs sobre como coloccr scrpts. lndccr lc verson utlzcdc y utlzcr ]cheros externos.
Seguimos oreciendo captulos del Manual de Jaascript, con inormacin til para saber cmo utilizar el lenguaje. As que
ahora eremos un par de notas adicionales sobre cmo colocar scripts en paginas web.
Ln este artculo mostraremos uno de los atributos que se pueden indicar en la etiqueta de SCRIP1, que indica el lenguaje
que amos a utilizar. Pero sobre todo debemos prestar especial atencin al caso de incluir archios externos con Jaascript,
que sin duda es una manera de trabajar, que utilizaris bastante a menudo.
>5F5456 7-)/8,% &* *&-0",H& T"& &'#,+$' "#/*/2,-)$
La etiqueta SCRIP1 tiene un atributo que sire para indicar el lenguaje que estamos utilizando, as como la ersin de
este. Por ejemplo, podemos indicar que estamos programando en Jaascript 1.2 o Visual Basic Script, que es otro lenguaje
para programar scripts en el naegador cliente que slo es compatible con Internet Lxplorer.
Ll atributo en cuestin es language y lo mas habitual es indicar simplemente el lenguaje con el que se han programado los
scripts. Ll lenguaje por deecto es Jaascript, por lo que si no utilizamos este atributo, el naegador entendera que el lenguaje
con el que se esta programando es Jaascript. Un detalle donde se suele equiocar la gente sin darse cuenta es que lenguage
se escribe con dos -g- y no con -g- y con -j- como en castellano.
<SCRIPT LANGUAGE=javascript>
>5F5>56 7-8*"/% C/8?&%$' &\#&%-$' )& :,1,'8%/;#
Otra manera de incluir scripts en paginas web, implementada a partir de Jaascript 1.1, es incluir archios externos donde se
pueden colocar muchas unciones que se utilicen en la pagina. Los icheros suelen tener extendin .js y se incluyen de esta
manera.
<SCRIPT language=javascript src="archivo_externo.js">
//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>
Dentro de las etiquetas SCRIP1 se puede escribir cualquier texto y sera ignorado por el naegador, sin embargo, los
naegadores que no entienden el atributo SRC tendran a este texto por instrucciones, por lo que es aconsejable poner un
comentario Jaascript antes de cada lnea con el objetio de que no respondan con un error.
Ll archio que incluimos ,en este caso archio_externo.js, debe contener tan solo sentencias Jaascript. No debemos incluir
cdigo l1ML de ningn tipo, ni tan siquiera las etiquetas ,SCRIP1 y ,SCRIP1.
Vistos estos otros usos interesantes que existen en Jaascript y que debemos conocer para poder aproechar las
posibilidades de la tecnologa, debemos haber aprendido todo lo esencial para empezar a hacer cosas mas importantes. As
que en el prximo artculo empezaremos a repasar la sintaxis del lenguaje Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
>5J56 Y/-#,\/' :,1,'8%/;#
Empezcmos c contcr lc sntcxs del lenyuc]e 1cvcscrpt, ndccndo sus prncpcles ccrccterstccs.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
12
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Por in empezamos a er cdigo uente de Jaascript! Lsperamos que se hayan asimilado todas las inormaciones preias del
Manual de Jaascript, en las que hemos aprendido basicamente diersos modos de incluir scripts en paginas web. lasta
ahora todo lo que hemos isto en este manual puede haber parecido muy terico, pero de aqu en adelante esperamos que os
parezca mas ameno por empezar a er cosas mas practicas y relacionadas directamente con la programacin.
Ll lenguaje '$($)*+,-# #,/./ 2.$ ),.#$G,) 42H -$+/*,0$ $ 5$ 0/ '$($ por estar basado en l. 1ambin es muy parecida a la
del lenguaje C, de modo que si el lector conoce alguno de estos dos lenguajes se podra manejar con acilidad con el cdigo.
De todos modos, en los siguientes captulos amos a describir toda la sintaxis con detenimiento, por lo que los noatos no
tendran ningn problema con ella.
>5J5456 I$+&-#,%/$' &- &* 89)/0$
Un comentario es una parte de cdigo que no es interpretada por el naegador y cuya utilidad radica en acilitar la lectura al
programador. Ll programador, a medida que desarrolla el script, a dejando rases o palabras sueltas, llamadas comentarios,
que le ayudan a l o a cualquier otro a leer mas acilmente el script a la hora de modiicarlo o depurarlo.
\a se io anteriormente algn comentario Jaascript, pero ahora amos a contarlos de nueo. Lxisten dos tipos de
comentarios en el lenguaje. Uno de ellos, la doble barra, sire para comentar una lnea de cdigo. Ll otro comentario lo
podemos utilizar para comentar arias lneas y se indica con los signos , para empezar el comentario y , para terminarlo.
Veamos unos ejemplos.
<SCRIPT>
//Este es un comentario de una lnea
/*Este comentario se puede extender
por varias lneas.
Las que quieras*/
</SCRIPT>
>5J5>56 .,E]'8"*,' E +/-]'8"*,'
;. '$($)*+,-# )/ I$. 0/ +/)-/#$+ 5$) 4$HJ)*25$) H 5$) 4,.J)*25$). Si nos equiocamos al utilizarlas el naegador
respondera con un mensaje de error, ya sea de sintaxis o de reerencia indeinida.
Por poner un ejemplo, no es lo mismo la uncin alert,, que la uncin Alert,,. La primera muestra un texto en una caja de
dialogo y la segunda ,con la primera A mayscula, simplemente no existe, a no ser que la deinamos nosotros. Como se
puede comprobar, para que la uncin la reconozca Jaascript, se tiene que escribir toda en minscula. Otro claro ejemplo lo
eremos cuando tratemos con ariables, puesto que los nombres que damos a las ariables tambin son sensibles a las
maysculas y minsculas.
Por regla general, los nombres de las cosas en Jaascript se escriben siempre en minsculas, salo que se utilice un nombre
con mas de una palabra, pues en ese caso se escribiran con maysculas las iniciales de las palabras siguientes a la primera.
Por ejemplo document.bgColor ,que es un lugar donde se guarda el color de ondo de la pagina web,, se escribe con la "C"
de color en mayscula, por ser la primera letra de la segunda palabra. 1ambin se puede utilizar maysculas en las iniciales de
las primeras palabras en algunos casos, como los nombres de las clases, aunque ya eremos mas adelante cuales son estos
casos y qu son las clases.
>5J5D56 Y&;,%,8/9- )& /-'#%"88/$-&'
Las distintas instrucciones que contienen nuestros scripts se han de separar conenientemente para que el naegador no
indique los correspondientes errores de sintaxis. Jaascript tiene dos maneras de separar instrucciones. La primera es a tras
del caracter punto y coma ,,, y la segunda es a tras de un salto de lnea.
Por esta razn Las sentencias Jaascript no necesitan acabar en punto y coma a no ser que coloquemos dos instrucciones en
la misma lnea.
No es una mala idea, de todos modos, acostumbrarse a utilizar el punto y coma despus de cada instruccin pues otros
lenguajes como Jaa o C obligan a utilizarlas y nos estaremos acostumbrando a realizar una sintaxis mas parecida a la
habitual en entornos de programacin aanzados.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
13
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Ln el prximo artculo comenzaremos a hablaros sobre la creacin de ariables en Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
!%"1, ?7
@"%A%># '#* .%"(%A=,; B
1(0#; 9, 9%1#; ,*
-%.%;'"(01
Una de las cosas ms fundamentales en cualquIer lenguaje de programacIon son las
varIables y los tIpos de datos. 7eremos qu son y como se trabaja con ellos en
JavascrIpt.
D5456 K,%/,@*&' &- :,1,'8%/;#
\emos en trmnos yenercles qu es unc vcrcble, pcrc qu srve y como declcrcr vcrcbles en 1cvcscrpt
cntes de uscrlcs.
Lste es el primero de los artculos que amos a dedicar a las ariables en el Manual de Jaascript. Veremos, si no lo sabemos
ya, que las ariables son uno de los elementos undamentales a la hora de realizar los programas, en Jaascript y en la
mayora de los lenguajes de programacin existentes.
As pues, en este artculo eremos cual es el concepto de ariable y aprenderemos a declararlas en Jaascript.
D545456 I$-8&;#$ )& 1,%/,@*&
K.$ ($+,$75/ /) 2. /)-$*," /. 4/4"+,$ 0".0/ )/ $54$*/.$ 2. 0$#", un espacio donde podemos guardar cualquier tipo
de inormacin que necesitemos para realizar las acciones de nuestros programas. Por ejemplo, si nuestro programa realiza
sumas, sera muy normal que guardemos en ariables los distintos sumandos que participan en la operacin y el resultado de
la suma. Ll eecto sera algo parecido a esto.
sumando1 = 23
sumando2 = 33
suma = sumando1 + sumando2
Ln este ejemplo tenemos tres ariables, sumando1, sumando2 y suma, donde guardamos el resultado. Vemos que su uso
para nosotros es como si tuisemos un apartado donde guardar un dato y que se pueden acceder a ellos con slo poner su
nombre.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
14
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Los nombres de las ariables han de construirse con caracteres alanumricos y el caracter subrayado ,_,. Aparte de esta, hay
una serie de reglas adicionales para construir nombres para ariables. La mas importante es que tienen que comenzar por un
caracter alabtico o el subrayado. No podemos utilizar caracteres raros como el signo -, un espacio o un >. Nombres
admitidos para las ariables podran ser
Ldad
paisDeNacimiento
_nombre
1ambin hay que eitar utilizar nombres reserados como ariables, por ejemplo no podremos llamar a nuestra ariable
palabras como return o or, que ya eremos que son utilizadas para estructuras del propio lenguaje. Veamos ahora algunos
nombres de ariables que no esta permitido utilizar
12meses
tu nombre
return
pepe
D545>56 B&8*,%,8/9- )& 1,%/,@*&' &- :,1,'8%/;#
Declarar ariables consiste en deinir y de paso inormar al sistema de que as a utilizar una ariable. Ls una costumbre
habitual en los lenguajes de programacin el deinir las ariables que se an a usar en los programas y para ello, se siguen
unas reglas estrictas. Pero Jaascript se salta muchas reglas por ser un lenguaje un tanto libre a la hora de programar y uno de
los casos en los que otorga un poco de libertad es a la hora de declarar las ariables, ya que no estamos obligados a hacerlo,
al contrario de lo que pasa en la mayora de los lenguajes de programacin.
Jaascript cuenta con la palabra "ar" que utilizaremos cuando queramos declarar una o arias ariables. Como es lgico, se
utiliza esa palabra para deinir la ariable antes de utilizarla.
!"#$% Aunque Jaascript no nos obligue a declarar explcitamente las ariables, es aconsejable declararlas antes de utilizarlas y eremos en
adelante que se trata tambin de una buena costumbre. Ademas, en sucesios artculos eremos que en algunos casos especiales, no producira
exactamente los mismos resultados un script en el que hemos declarado una ariable y otro en el que no lo hagamos.
var operando1
var operando2
1ambin se puede asignar un alor a la ariable cuando se esta declarando
var operando1 = 23
var operando2 = 33
1ambin se permite declarar arias ariables en la misma lnea, siempre que se separen por comas.
var operando1,operando2
Si lo deseas, puedes er un ejemplo de pagina que declara ariables Jaascript.
Ln el siguiente artculo seguiremos aprendiendo cosas de ariables y eremos uno de los conceptos mas importantes que
deberemos aprender sobre ellas, el ambito de las ariables.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
D5>56 !+@/#$ )& *,' 1,%/,@*&' &- :,1,'8%/;#
El cmbto de lcs vcrcbles en 1cvcscrpt: qu son lcs vcrcbles loccles y ylobcles y como se trcbc]c con
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
15
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
ellcs en 1cvcscrpt.
Ll ambito de las ariables es uno de los conceptos mas importantes que deberemos conocer cuando trabajamos con
ariables, no slo en Jaascript, sino en la mayora de los lenguajes de programacin.
Ln el artculo anterior ya comenzamos a explicar qu son las ariables y cmo declararlas. Ln este artculo del Manual de
Jaascript pretendemos explicar con detenimiento qu es este ambito de las ariables y orecer ejemplos para que se pueda
entender bien.
D5>5456 I$-8&;#$ )& N+@/#$ )& 1,%/,@*&'
F/ 5/ 55$4$ L47,#" 0/ 5$) ($+,$75/) $5 52M$+ 0".0/ /)#$) /)#L. 0,)-".,75/). Por lo general, cuando declaramos una
ariable hacemos que est disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programacin
y como Jaascript se deine dentro de una pagina web, 5$) ($+,$75/) 12/ 0/*5$+/4") /. 5$ -LM,.$ /)#$+L. $**/),75/)
0/.#+" 0/ /55$.
Ln Jaascript no podremos acceder a ariables que hayan sido deinidas en otra pagina. Por tanto, la propia pagina donde se
deine es el ambito mas habitual de una ariable y le llamaremos a este tipo de ($+,$75/) M5"7$5/) a la pagina. Veremos
tambin se pueden hacer ariables con ambitos distintos del global, es decir, ariables que declararemos y tendran alidez en
lugares mas acotados.
D5>5>56 K,%/,@*&' 0*$@,*&'
Como hemos dicho, las ariables globales son las que estan declaradas en el ambito mas amplio posible, que en Jaascript es
una pagina web. Para declarar una ariable global a la pagina simplemente lo haremos en un script, con la palabra '().
<SCRIPT>
var variableGlobal
</SCRIPT>
Las ariables globales son accesibles desde cualquier lugar de la pagina, es decir, desde el script donde se han declarado y
todos los demas scripts de la pagina, incluidos los manejadores de eentos, como el onclick, que ya imos que se poda
incluir dentro de determinadas etiquetas l1ML.
D5>5D56 K,%/,@*&' *$8,*&'
1ambin podremos declarar ariables en lugares mas acotados, como por ejemplo una uncin. A estas ariables les
llamaremos locales. Cuando se declaren ariables locales slo podremos acceder a ellas dentro del lugar donde se ha
declarado, es decir, si la habamos declarado en una uncin solo podremos acceder a ella cuando estemos en esa uncin.
Las ariables pueden ser locales a una uncin, pero tambin pueden ser locales a otros ambitos, como por ejemplo un
bucle. Ln general, son ambitos locales cualquier lugar acotado por llaes.
<SCRIPT>
function miFuncion (){
var variableLocal
}
</SCRIPT>
Ln el script anterior hemos declarado una ariable dentro de una uncin, por lo que esa ariable slo tendra alidez dentro
de la uncin. Se pueden er cmo se utilizan las llaes para acotar el lugar donde esta deinida esa uncin o su ambito.
No hay problema en declarar una ariable local con el mismo nombre que una global, en este caso la ariable global sera
isible desde toda la pagina, excepto en el ambito donde esta declarada la ariable local ya que en este sitio ese nombre de
ariable esta ocupado por la local y es ella quien tiene alidez. Ln resumen, la ariable que tendra alidez en cualquier sitio
de la pagina es la global. Menos en el ambito donde esta declarada la ariable local, que sera ella quien tenga alidez.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
16
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
<SCRIPT>
var numero = 2
var numero = 19
document.write(numero) //imprime 19
}
</SCRIPT>
Un consejo para los principiantes podra ser no declarar ariables con los mismos nombres, para que nunca haya lugar a
conusin sobre qu ariable es la que tiene alidez en cada momento.
D5>5F56 B/C&%&-8/,' &-#%& )&8*,%,% 1,%/,@*&' 8$- 1,%^ $ -$ )&8*,%,%*,'
Como hemos dicho, en Jaascript tenemos libertad para declarar o no las ariables con la palabra ar, pero los eectos que
conseguiremos en cada caso seran distintos. Ln concreto, cuando utilizamos ar estamos haciendo que la arible que
estamos declarando sea local al ambito donde se declara. Por otro lado, si no utilizamos la palabra ar para declarar una
ariable, sta sera global a toda la pagina, sea cual sea el ambito en el que haya sido declarada.
Ln el caso de una ariable declarada en la pagina web, uera de una uncin o cualquier otro ambito mas reducido, nos es
indierente si se declara o no con ar, desde un punto de ista uncional. Lsto es debido a que cualquier ariable declarada
uera de un ambito es global a toda la pagina. La dierencia se puede apreciar en una uncin por ejemplo, ya que si
utilizamos ar la ariable sera local a la uncin y si no lo utilizamos, la ariable sera global a la pagina. Lsta dierencia es
undamental a la hora de controlar correctamente el uso de las ariables en la pagina, ya que si no lo hacemos en una
uncin podramos sobreescribir el alor de una ariable, perdiendo el dato que pudiera contener preiamente.
<SCRIPT>
var numero = 2
numero = 19
}
//llamamos a la funcin
miFuncion()
</SCRIPT>
Ln este ejemplo, tenemos una ariable global a la pagina llamada numero, que contiene un 2. 1ambin tenemos una uncin
que utiliza la ariable numero sin haberla declarado con ar, por lo que la ariable numero de la uncion sera la misma
ariable global numero declarada uera de la uncin. Ln una situacin como esta, al ejecutar la uncin se sobreescribira la
ariable numero y el dato que haba antes de ejecutar la uncin se perdera.
Ln el prximo artculo continuaremos hablando de ariables y mostraremos que en ellas se pueden guardar distintos tipos
de inormacin.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
D5D56 <"= ;$)&+$' 0",%),% &- 1,%/,@*&'
\emos el concepto de tpos de dctos pcrc el lenyuc]e 1cvcscrpt y por qu es mportcnte mcne]crlos
ben.
Ln el Manual de Jaascript ya hemos hablado sobre las ariables en arios artculos. Pero todaa nos quedan cosas por er y
en concreto mostraremos en este artculo que en una ariable podemos guardar distintos tipos de datos.
Ln una ariable podemos introducir arios tipos de inormacin. Por ejemplo podramos introducir simple texto, nmeros
enteros o reales, etc. A estas distintas clases de inormacin se les conoce como tipos de datos. Cada uno tiene caractersticas
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
17
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
y usos distintos.
Veamos cuales son los tipos de datos mas habituales de Jaascript.
!J4/+")
Para empezar tenemos el tipo numrico, para guardar nmeros como 9 o 23.6
3$0/.$)
Ll tipo cadena de caracter guarda un texto. Siempre que escribamos una cadena de caracteres debemos utilizar las comillas
,",.
N"5/$.")
1ambin contamos con el tipo boleano, que guarda una inormacin que puede aler si ,true, o no ,alse,.
Por ltimo sera releante senalar aqu que nuestras ariables pueden contener cosas mas complicadas, como podra ser un
objeto, una uncin, o aco ,null, pero ya lo eremos mas adelante.
Ln realidad nuestras ariables no estan orzadas a guardar un tipo de datos en concreto y por lo tanto no especiicamos
ningn tipo de datos para una ariable cuando la estamos declarando. Podemos introducir cualquier inormacin en una
ariable de cualquier tipo, incluso podemos ir cambiando el contenido de una ariable de un tipo a otro sin ningn
problema. Vamos a er esto con un ejemplo.
var nombre_ciudad = "Valencia"
var revisado = true
nombre_ciudad = 32
revisado = "no"
Lsta ligereza a la hora de asignar tipos a las ariables puede ser una entaja en un principio, sobretodo para personas
inexpertas, pero a la larga puede ser uente de errores ya que dependiendo del tipo que son las ariables se comportaran de
un modo u otro y si no controlamos con exactitud el tipo de las ariables podemos encontrarnos sumando un texto a un
nmero. Jaascript operara perectamente, y deolera un dato, pero en algunos casos puede que no sea lo que estabamos
esperando. As pues, aunque tenemos libertad con los tipos, esta misma libertad nos hace estar mas atentos a posibles
desajustes diciles de detectar a lo largo de los programas. Veamos lo que ocurrira en caso de sumar letras y nmeros.
ar suma ~ sumando1 - sumando2
document.write,suma,
Lste script nos mostrara en la pagina el texto 2333, que no se corresponde con la suma de los dos nmeros, sino con su
concatenacin, uno detras del otro.
Veremos algunas cosas mas reerentes a los tipos de datos en el prximo artculo.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
D5F56 R/;$' )& ),#$' &- :,1,'8%/;#
\emos los tres tpos de dctos que soportc 1cvcscrpt: numerco, bolecno y texto.
Ln el artculo anterior del Manual de Jaascript ya empezamos a mostrar que en una ariable podemos almacenar distintos
tipos de inormacin. No obstante, todaa hay algunas cosas que queremos explicar sobre los distintos tipos de datos
disponibles en Jaascript.
Ln nuestros scripts amos a manejar ariables diersas clases de inormacin, como textos o nmeros. Cada una de estas
clases de inormacin son los tipos de datos. Jaascipt distingue entre tres tipos de datos y todas las inormaciones que se
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
18
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
puedan guardar en ariables an a estar encajadas en uno de estos tipos de datos. Veamos detenidamente cuales son estos
tres tipos de datos.
D5F5456 R/;$ )& ),#$' -"+=%/8$
Ln este lenguaje slo existe un tipo de datos numrico, al contrario que ocurre en la mayora de los lenguajes mas conocidos.
1odos los nmeros son por tanto del tipo numrico, independientemente de la precisin que tengan o si son nmeros reales
o enteros. Los nmeros enteros son nmeros que no tienen coma, como 3 o 339. Los nmeros reales son nmeros
raccionarios, como 2.69 o 0.25, que tambin se pueden escribir en notacin cientica, por ejemplo 2.482e12.
Con Jaascript tambin podemos escribir nmeros en otras bases, como la hexadecimal. Las bases son sistemas de
numeracin que utilizan mas o menos dgitos para escribir los nmeros. Lxisten tres bases con las que podemos trabajar
! Base 10, es el sistema que utilizamos habitualmente, el sistema decimal. Cualquier nmero, por deecto, se entiende
que esta escrito en base 10.
! Base 8, tambin llamado sistema octal, que utiliza dgitos del 0 al . Para escribir un nmero en octal basta con
escribir ese nmero precedido de un 0, por ejemplo 045.
! Base 16 o sistema hexadecimal, es el sistema de numeracin que utiliza 16 dgitos, los comprendidos entre el 0 y el
9 y las letras de la A a la l, para los dgitos que altan. Para escribir un nmero en hexadecimal debemos escribirlo
precedido de un cero y una equis, por ejemplo 0x3Ll.
D5F5>56 R/;$ @$*&,-$
Ll tipo bolean, boolean en ingls, sire para guardar un si o un no o dicho de otro modo, un erdadero o un also. Se utiliza
para realizar operaciones lgicas, generalmente para realizar acciones si el contenido de una ariable es erdadero o also.
Si una ariable es erdadero entonces Ljecuto unas instrucciones Si no Ljecuto otras
Los dos alores que pueden tener las ariables boleanas son true o alse.
mi1exto ~ "Pepe se a a pescar"
mi1exto ~ '23> Letras & --'
1odo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado como una cadena de caracteres
independientemente de lo que coloquemos en el interior de las comillas. Por ejemplo, en una ariable de texto podemos
guardar nmeros y en ese caso tenemos que tener en cuenta que las ariables de tipo texto y las numricas no son la misma
cosa y mientras que las de numricas nos siren para hacer calculos matematicos las de texto no.
D5F5F56 I,%,8#&%&' )& &'8,;& &- 8,)&-,' )& #&\#$
lay una serie de caracteres especiales que siren para expresar en una cadena de texto determinados controles como puede
ser un salto de lnea o un tabulador. Lstos son los caracteres de escape y se escriben con una notacin especial que comienza
por una contra barra ,una barra inclinada al res de la normal '', y luego se coloca el cdigo del caracter a mostrar.
Un caracter muy comn es el salto de lnea, que se consigue escribiendo n. Otro caracter muy habitual es colocar unas
comillas, pues si colocamos unas comillas sin su caracter especial nos cerraran las comillas que colocamos para iniciar la
cadena de caracteres. Las comillas las tenemos que introducir entonces con " o ' ,comillas dobles o simples,. Lxisten otros
caracteres de escape, que eremos en la tabla de abajo mas resumidos, aunque tambin hay que destacar como caracter
habitual el que se utiliza para escribir una contrabarra, para no conundirla con el inicio de un caracter de escape, que es la
doble contrabarra .
1abla con todos los caracteres de escape
Salto de lnea: `n
Comilla simple: `'
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
19
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Comilla doble: `"
1abulador: `t
Retorno de carro: `r
Aance de pagina: `
Retroceder espacio: `b
Contrabarra: ``
Algunos de estos caracteres probablemente no los llegaras a utilizar nunca, pues su uncin es un poco rara y a eces poco
clara.
Con esto ya hemos terminado de explicar todo lo que se debe conocer sobre las ariables en Jaascript y podemos comenzar
con un tema nueo que sera el de operadores.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
!%"1, C7
D0,"%9#",; ,*
-%.%;'"(01
Tratamos en dIversos articulos los operadores. Dfreceremos explIcacIones de todos los
operadores que podremos encontrarnos en JavascrIpt.
F5456 V;&%,)$%&' :,1,'8%/;# 7
Estudcmos lo que es un opercdor y pcrc qu srve. \emos los opercdores crtmtcos y de csynccon.
Ln el presente artculo del Manual de Jaascript amos a comenzar una serie de textos enocados en explicar los dierentes
operadores disponibles en este lenguaje de programacin.
Al desarrollar programas en cualquier lenguaje se utilizan los operadores, que siren para hacer los calculos y operaciones
necesarios para llear a cabo tus objetios. lasta el menor de los programas imaginables necesita de los operadores para
realizar cosas, ya que un programa que no realizase operaciones, slo se limitara a hacer siempre lo mismo.
Ls el resultado de las operaciones lo que hace que un programa are su comportamiento segn los datos que tenga para
trabajar y nos orezca resultados que sean releantes para el usuario que lo utilice. Lxisten operaciones mas sencillas o
complejas, que se pueden realizar con operandos de distintos tipos, como nmeros o textos, eremos en este captulo, y los
siguientes, de manera detallada todos estos operadores disponibles en Jaascript.
F545456 MH&+;*$' )& "'$ )& $;&%,)$%&'
Antes de entrar a enumerar los distintos tipos de operadores amos a er un par de ejemplos de stos para que nos ayuden a
hacernos una idea mas exacta de lo que son. Ln el primer ejemplo amos a realizar una suma utilizando el operador suma.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
20
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
3 - 5
Lsta es una expresin muy basica que no tiene mucho sentido ella sola. lace la suma entre los dos operandos nmero 3 y 5,
pero no sire de mucho porque no se hace nada con el resultado. Normalmente se combinan mas de un operador para crear
expresiones mas tiles. La expresin siguiente es una combinacin entre dos operadores, uno realiza una operacin
matematica y el otro sire para guardar el resultado.
miVariable = 23 * 5
Ln el ejemplo anterior, el operador se utiliza para realizar una multiplicacin y el operador ~ se utiliza para asignar el
resultado en una ariable, de modo que guardemos el alor para su posterior uso.
Los operadores se pueden clasiicar segn el tipo de acciones que realizan. A continuacin amos a er cada uno de estos
grupos de operadores y describiremos la uncin de cada uno.
F545>56 V;&%,)$%&' ,%/#+=#/8$'
Son los utilizados para la realizacin de operaciones matematicas simples como la suma, resta o multiplicacin. Ln jaascript
son los siguientes:
- Suma de dos alores
- Resta de dos alores, tambin puede utilizarse para cambiar el signo de un nmero si lo utilizamos con un solo operando
-23
Multiplicacin de dos alores
, Diisin de dos alores
Ll resto de la diisin de dos nmeros ,32 deolera 1, el resto de diidir 3 entre 2,
-- Incremento en una unidad, se utiliza con un solo operando
-- Decremento en una unidad, utilizado con un solo operando
;8/4-5")
precio = 128 //introduzco un 128 en la variable precio
unidades = 10 //otra asignacin, luego veremos operadores de asignacin
factura = precio * unidades //multiplico precio por unidades, obtengo el valor factura
resto = factura % 3 //obtengo el resto de dividir la variable factura por 3
precio++ //incrementa en una unidad el precio (ahora vale 129)
F545D56 V;&%,)$%&' )& ,'/0-,8/9-
Siren para asignar alores a las ariables, ya hemos utilizado en ejemplos anteriores el operador de asignacin ~, pero hay
otros operadores de este tipo, que proienen del lenguaje C y que muchos de los lectores ya conoceran.
~ Asignacin. Asigna la parte de la derecha del igual a la parte de la izquierda. A al derecha se colocan los alores inales y a
la izquierda generalmente se coloca una ariable donde queremos guardar el dato.
-~ Asignacin con suma. Realiza la suma de la parte de la derecha con la de la izquierda y guarda el resultado en la parte de
la izquierda.
-~ Asignacin con resta
~ Asignacin de la multiplicacin
,~ Asignacin de la diisin
~ Se obtiene el resto y se asigna
;8/4-5")
ahorros = 7000 //asigna un 7000 a la variable ahorros
ahorros += 3500 //incrementa en 3500 la variable ahorros, ahora vale 10500
ahorros /= 2 //divide entre 2 mis ahorros, ahora quedan 5250
Ln el siguiente artculo seguiremos conociendo otros de los operadores de Jaascript: Operadores de cadenas, operadores
lgicos y operadores condicionales.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
21
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!"#$%&'( *(" +,-&.' !/-.' !'01".2
F5>56 V;&%,)$%&' :,1,'8%/;# 77
Estudcmos los opercdores de ccdencs, loycos y condconcles.
Lste es el segundo artculo sobre los operadores que publicamos en el Manual de Jaascript, pues son suicientes como para
erlos por partes. Ln la anterior entrega orecimos una bree descripcin del concepto de operador y imos los operadores
aritmticos y de asignacin.
Ln el presente texto eremos un listado y descripcin de tres tipos adicionales: operadores de cadenas, operadores lgicos y
operadores condicionales.
F5>5456 V;&%,)$%&' )& 8,)&-,'
Las cadenas de caracteres, o ariables de texto, tambin tienen sus propios operadores para realizar acciones tpicas sobre
cadenas. Aunque jaascript slo tiene un operador para cadenas se pueden realizar otras acciones con una serie de unciones
predeinidas en el lenguaje que eremos mas adelante.
- Concatena dos cadenas, pega la segunda cadena a continuacin de la primera.
;8/4-5"
cadena1 = "hola"
cadena2 = "mundo"
cadenaConcatenada = cadena1 + cadena2 //cadena concatenada vale "holamundo"
Un detalle importante que se puede er en este caso es que el operador - sire para dos usos distintos, si sus operandos son
nmeros los suma, pero si se trata de cadenas las concatena. Lsto pasa en general con todos los operadores que se repiten
en el lenguaje, jaascript es suicientemente listo para entender que tipo de operacin realizar mediante una comprobacin
de los tipos que estan implicados en lla.
Un caso que resultara conuso es el uso del operador - cuando se realiza la operacin con operadores texto y numricos
entremezclados. Ln este caso jaascript asume que se desea realizar una concatenacin y trata a los dos operandos como si
de cadenas de caracteres se trataran, incluso si la cadena de texto que tenemos uese un nmero. Lsto lo eremos mas
acilmente con el siguiente ejemplo.
miNumero = 23
miCadena1 = "pepe"
miCadena2 = "456"
resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"
resultado2 = miNumero + miCadena2 //resultado2 vale "23456"
miCadena2 += miNumero //miCadena2 ahora vale "45623"
Como hemos podido er, tambin en el caso del operador -~, si estamos tratando con cadenas de texto y nmeros
entremezclados, tratara a los dos operadores como si uesen cadenas.
!"#$% Como se puede haber imaginado, altan muchas operaciones tpicas a realizar con cadenas, para las cuales no existen operadores. Ls
porque esas uncionalidades se obtienen a tras de la clase String de Jaascript, que eremos mas adelante.
F5>5>56 V;&%,)$%&' *90/8$'
Lstos operadores siren para realizar operaciones lgicas, que son aquellas que dan como resultado un erdadero o un also,
y se utilizan para tomar decisiones en nuestros scripts. Ln ez de trabajar con nmeros, para realizar este tipo de operaciones
se utilizan operandos boleanos, que conocimos anteriormente, que son el erdadero ,true, y el also ,alse,. Los operadores
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
22
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
lgicos relacionan los operandos boleanos para dar como resultado otro operando boleano, tal como podemos er en el
siguiente ejemplo.
Si tengo hambre y tengo comida entonces me pongo a comer
Nuestro programa Jaascript utilizara en este ejemplo un operando boleano para tomar una decisin. Primero mirara si
tengo hambre, si es cierto ,true, mirara si dispongo de comida. Si son los dos ciertos, se puede poner a comer. Ln caso de
que no tenga comida o que no tenga hambre no comera, al igual que si no tengo hambre ni comida. Ll operando en
cuestin es el operando \, que aldra erdadero ,true, en caso de que los dos operandos algan erdadero.
!"#$% Para no llearnos a engano, cabe decir que los operadores lgicos pueden utilizarse en combinacin con tipos de datos distintos de los
boleanos, pero en este caso debemos utilizarlos en expresiones que los coniertan en boleanos. Ln el siguiente grupo de operadores que
amos a tratar en este artculo hablaremos sobre los operadores condicionales, que se pueden utilizar junto con los operadores lgicos para
realizar sentencias todo lo complejas que necesitemos. Por ejemplo:
if (x==2 && y!=3){
//la variable x vale 2 y la variable y es distinta de tres
}
Ln la expresin condicional anterior estamos ealuando dos comprobaciones que se relacionan con un operador lgico. Por una parte x~~2
deolera un true en caso que la ariable x alga 2 y por otra, y!~3 deolera un true cuando la ariable y tenga un alor distinto de 3. Ambas
comprobaciones deuelen un boleano cada una, que luego se le aplica el operador lgico && para comprobar si ambas comprobaciones se
cumplieron al mismo tiempo.
Sobra decir que, para er ejemplos de operadores condicionales, necesitamos aprender estructuras de control como i, a las que no hemos
llegado todaa.
! Operador NO o negacin. Si era true pasa a alse y iceersa.
&& Operador \, si son los dos erdaderos ale erdadero.
|| Operador O, ale erdadero si por lo menos uno de ellos es erdadero.
;8/4-5"
miBoleano = true
miBoleano = !miBoleano //miBoleano ahora vale false
tengoHambre = true
tengoComida = true
comoComida = tengoHambre && tengoComida
F5>5D56 V;&%,)$%&' 8$-)/8/$-,*&'
Siren para realizar expresiones condicionales todo lo complejas que deseemos. Lstas expresiones se utilizan para tomar
decisiones en uncin de la comparacin de arios elementos, por ejemplo si un numero es mayor que otro o si son iguales.
!"#$% Por supuesto, los operadores condicionales siren tambin para realizar expresiones en las que se comparan otros tipos de datos. Nada
impide comparar dos cadenas, para er si son iguales o distintas, por ejemplo. Incluso podramos comparar boleanos.
Los operadores condicionales se utilizan en las expresiones condicionales para tomas de decisiones. Como estas expresiones
condicionales seran objeto de estudio mas adelante sera mejor describir los operadores condicionales mas adelante. De
todos modos aqu podemos er la tabla de operadores condicionales.
~~ Comprueba si dos nmeros son iguales
!~ Comprueba si dos nmeros son distintos
Mayor que, deuele true si el primer operador es mayor que el segundo
Menor que, es true cuando el elemento de la izquierda es menor que el de la derecha
~ Mayor igual.
~ Menor igual
Veremos ejemplos de operadores condicionales cuando expliquemos estructuras de control, como la condicional i.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
23
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Ln el siguiente artculo inalizaremos el tema de operadores, explicando los operadores a niel de bit y la precedencia de
operadores.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
F5D56 V;&%,)$%&' :,1,'8%/;# 777
\emos el ltmo tpo de opercdor, c nvel de bt, y lc precedencc de opercdores (que opercdores se
e]ecutcn cntes o despus).
Continuamos con el tema de operadores, que ya habamos iniciado en captulos anteriores de este manual de Jaascript. Ln
estos momentos ya hemos isto casi todos los tipos de operadores y slo nos queda conocer un grupo que realmente no se
utiliza casi nunca, que son los operadores de niel de bit.
De manera adicional, en este texto eremos un asunto de bastante importancia en la programacin en general, que es la
precedencia de operadores, que debemos tener en cuenta siempre que utilicemos diersos operadores en una misma
expresin, para que se relacionen entre ellos y se resuelan de la manera habamos planeado.
F5D5456 V;&%,)$%&' , -/1&* )& @/#
Lstos son muy poco corrientes y es posible que nunca los llegues a utilizar. Su uso se realiza para eectuar operaciones con
ceros y unos. 1odo lo que maneja un ordenador son ceros y unos, aunque nosotros utilicemos nmeros y letras para
nuestras ariables en realidad estos alores estan escritos internamente en orma de ceros y unos. Ln algunos caso podremos
necesitar realizar operaciones tratando las ariables como ceros y unos y para ello utilizaremos estos operandos. Ln este
manual se nos queda un poco grande realizar una discusin sobre este tipo de operadores, pero aqu podris er estos
operadores por si algn da os hacen alta.
& \ de bits
` Xor de bits
| O de bits
~ ~ ~ Varias clases de cambios
F5D5>56 Z%&8&)&-8/, )& *$' $;&%,)$%&'
La ealuacin de una sentencia de las que hemos isto en los ejemplos anteriores es bastante sencilla y acil de interpretar,
pero cuando en una sentencia entran en juego multitud de operadores distintos puede haber una conusin a la hora de
interpretarla y dilucidar qu operadores son los que se ejecutan antes que otros. Para marcar unas pautas en la ealuacin de
las sentencias y que estas se ejecuten siempre igual y con sentido comn existe la precedencia de operadores, que no es mas
que el orden por el que se iran ejecutando las operaciones que ellos representan. Ln un principio todos los operadores se
ealan de izquierda a derecha, pero existen unas normas adicionales, por las que determinados operadores se ealan antes
que otros. Muchas de estas reglas de precedencia estan sacadas de las matematicas y son comunes a otros lenguajes, las
podemos er a continuacin.
,, || . Parntesis, corchetes y el operador punto que sire para los objetos
! - -- -- negacin, negatio e incrementos
, Multiplicacin diisin y mdulo
-- Suma y resta
Cambios a niel de bit
~ ~ Operadores condicionales
~~ !~ Operadores condicionales de igualdad y desigualdad
& ` | Lgicos a niel de bit
&& || Lgicos boleanos
~ -~ -~ ~ ,~ ~ ~ ~ ~ &~ `~ !~ Asignacin
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
24
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Ln los siguientes ejemplos podemos er cmo las expresiones podran llegar a ser conusas, pero con la tabla de precedencia
de operadores podremos entender sin errores cual es el orden por el que se ejecutan.
12 * 3 + 4 - 8 / 2 % 3
Ln este caso primero se ejecutan los operadores , y , de izquierda a derecha, con lo que se realizaran estas operaciones.
Primero la multiplicacin y luego la diisin por estar mas a la izquierda del mdulo.
36 + 4 - 4 % 3
Ahora el mdulo.
36 + 4 - 1
Por ltimo las sumas y las restas de izquierda a derecha.
40 - 1
Lo que nos da como resultado el alor siguiente.
39
De todos modos, es importante darse cuenta que el uso de los parntesis puede ahorrarnos muchos quebraderos de cabeza y
sobretodo la necesidad de sabernos de memoria la tabla de precedencia de los operadores. Cuando eamos poco claro el
orden con el que se ejecutaran las sentencias podemos utilizarlos y as orzar que se eale antes el trozo de expresin que se
encuentra dentro de los parntesis.
Para acabar con el tema de operadores nos queda por er un ltimo operador un tanto especial, llamado typeo.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
F5F56 I$-#%$* )& #/;$'
Es mportcnte que conozccmos el tpo de lcs vcrcbles pcrc trcbc]cr sn errores. \emos como obtenerlo
con 1cvcscrpt.
Ll listado de operadores que enimos oreciendo para el Manual de Jaascript se completa con el operador typeo, que
eremos a continuacin.
lemos podido comprobar que, para determinados operadores, es importante el tipo de datos que estan manejando, puesto
que si los datos son de un tipo se realizaran operaciones distintas que si son de otro.
Por ejemplo, cuando utilizabamos el operador -, si se trataba de nmeros los sumaba, pero si se trataba de cadenas de
caracteres las concatenaba. Vemos pues que el tipo de los datos que estamos utilizando s que importa y que tendremos que
estar pendientes este detalle si queremos que nuestras operaciones se realicen tal como esperabamos.
Para comprobar el tipo de un dato se puede utilizar otro operador que esta disponible a partir de jaascript 1.1, el "-/+$0"+
#H-/"<, que deuele una cadena de texto que describe el tipo del operador que estamos comprobando.
!"#$% a lo largo de nuestra experiencia con Jaascript eremos que muchas eces es mas til cambiar el tipo de dato de una ariable antes de
hacer una comprobacin con tipeo para er si la podemos utilizar como operando. Lxisten diersas unciones para intentar cambiar el tipo
de una ariable, como parseInt,,, que eremos mas adelante en la Segunda Parte del Manual de Jaascript.
var boleano = true
var numerico = 22
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
25
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
var numerico_flotante = 13.56
var texto = "mi texto"
var fecha = new Date()
document.write("<br>El tipo de boleano es: " + typeof boleano)
document.write("<br>El tipo de numerico es: " + typeof numerico)
document.write("<br>El tipo de numerico_flotante es: " + typeof numerico_flotante)
document.write("<br>El tipo de texto es: " + typeof texto)
document.write("<br>El tipo de fecha es: " + typeof fecha)
Si ejecutamos este script obtendremos que en la pagina se escribira el siguiente texto:
Ll tipo de boleano es: boolean
Ll tipo de numerico es: number
Ll tipo de numerico_lotante es: number
Ll tipo de texto es: string
Ll tipo de echa es: object
Ln este ejemplo podemos er que ser imprimen en la pagina los distintos tipos de las ariables. Lstos pueden ser los
siguientes:
! 7""5/$., para los datos boleanos. ,1rue o alse,
! .247/+, para los numricos.
! )#+,.M, para las cadenas de caracteres.
! "78/*#, para los objetos.
Queremos destacar tan slo dos detalles mas:
1, Los nmeros, ya tengan o no parte decimal, son siempre del tipo de datos numrico.
2, Una de las ariables es un poco mas compleja, es la ariable echa que es un objeto de la clase Date,,, que se utiliza para el
manejo de echas en los scripts. La eremos mas adelante, as como los objetos.
Con esto ya hemos terminado de er la lista de operadores que podemos utilizar en Jaascript y en el prximo artculo
pasaremos a conocer las estructuras de control.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
26
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, E7
5;1":'1:"%; 9, '#*1"#=
,* -%.%;'"(01
Las estructuras de control nos permItIrn controlar el flujo de nuestros programas. Por
supuesto, tambIn forman parte de los asuntos ms bsIcos de JavascrIpt y de cualquIer
lenguaje de programacIon, por lo que las veremos con detenImIento.
J5456 M'#%"8#"%,' )& 8$-#%$* &- :,1,'8%/;#
lntroduccon c lcs estructurcs de control. Enumercmos lcs que tenemos dsponbles en 1cvcscrpt.
Los scripts istos hasta ahora en el Manual de Jaascript han sido tremendamente sencillos y lineales: se iban ejecutando las
sentencias simples una detras de la otra desde el principio hasta el in. Sin embargo, esto no tiene porque ser siempre as y de
hecho, en la mayora de los casos las cosas son bastante mas complejas.
Si tenemos alguna experiencia en la programacin sabremos que en los programas generalmente se necesitara hacer cosas
distintas dependiendo del estado de nuestras ariables o realizar un mismo proceso muchas eces sin escribir las mismas
lneas de cdigo una y otra ez. Para realizar cosas mas complejas en nuestros scripts se utilizan las estructuras de control.
Con ellas podemos realizar tomas de decisiones y bucles. Ln los siguientes captulos amos a conocer las distintas
estructuras de control que existen en Jaascript.
J545456 R$+, )& )&8/'/$-&'
Nos siren para realizar unas acciones u otras en uncin del estado de las ariables. Ls decir, tomar decisiones para ejecutar
unas instrucciones u otras dependiendo de lo que est ocurriendo en ese instante en nuestros programas.
Por ejemplo, dependiendo si el usuario que entra en nuestra pagina es mayor de edad o no lo es, podemos permitirle o no
er los contenidos de nuestra pagina.
Si edad es mayor que 18 entonces
1e dejo er el contenido para adultos
Si no
1e mando uera de la pagina
Ln Jaascript podemos tomar decisiones utilizando dos enunciados distintos.
! Il
! S\I1Cl
J545>56 P"8*&'
Los bucles se utilizan para realizar ciertas acciones repetidamente. Son muy utilizados a todos los nieles en la
programacin. Con un bucle podemos por ejemplo imprimir en una pagina los nmeros del 1 al 100 sin necesidad de
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
27
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
escribir cien eces el la instruccin imprimir.
Desde el 1 hasta el 100
Imprimir el nmero actual
Ln jaascript existen arios tipos de bucles, cada uno esta indicado para un tipo de iteracin distinto y son los siguientes:
! lOR
! \lILL
! DO \lILL
Como hemos senalado ya, las estructuras de control son muy importantes en Jaascript y en cualquier lenguaje de
programacin. Ls por ello que en los siguientes captulos eremos cada una de estas estructuras detenidamente,
describiendo su uso y oreciendo algunos ejemplos. Comenzaremos con la estructura de control i.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5>56 M'#%"8#"%, 7O &- :,1,'8%/;#
\emos como trcbc]cr con lc estruturc de control lF en 1cvcscrpt.
Ln el Manual de Jaascript de Desarrollo\eb.com ya empezamos a explicar lo que son las estructuras de control. Ln el
presente artculo amos a dedicarnos a mostrar cmo unciona la sentencia i, que es la estructura mas habitual de las
utilizadas para tomar decisiones en programas inormaticos.
Il es una estructura de control utilizada para #"4$+ 0/*,),"./). Ls un condicional que sire para realizar unas u otras
operaciones en uncin de una expresin. lunciona de la siguiente manera, primero se eala una expresin, si da resultado
positio se realizan las acciones relacionadas con el caso positio.
La sintaxis de la estructura Il es la siguiente.
!"#$% 1odas las estructuras de control se escriben en minsculas en Jaascript. Aunque algunas eces para destacar el nombre de la estructura
la podamos escribir en el texto del manual con letras maysculas, en el cdigo de nuestros scripts siempre tenemos que ponerlo en
minsculas. Ln caso contrario recibiremos un mensaje de error.
if (expresin) {
//acciones a realizar en caso positivo
//...
}
Opcionalmente se pueden indicar acciones a realizar en caso de que la ealuacin de la sentencia deuela resultados
negatios.
if (expresin) {
//acciones a realizar en caso positivo
//...
} else {
//acciones a realizar en caso negativo
//...
}
lijmonos en arias cosas. Para empezar emos como con unas llaes engloban las acciones que queremos realizar en caso
de que se cumplan o no las expresiones. Lstas llaes han de colocarse siempre, excepto en el caso de que slo haya una
instruccin como acciones a realizar, que son opcionales.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
28
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!"#$% Aunque las llaes para englobar las sentencias a ejecutar tanto en el caso positio como negatio sean opcionales cuando queremos
ejecutar una nica sentencia, la recomendacin es colocarlas siempre, porque obtendremos as un cdigo uente mas claro. Por ejemplo:
Veamos el cdigo siguiente:
if (llueve)
alert("Cae agua");
Sera exactamente igual que este cdigo:
if (llueve){
alert("Cae agua");
}
O incluso, igual a este otro:
if (llueve) alert("Cae agua");
Sin embargo, cuando utilizamos las llaes, el cdigo queda bastante mas claro, porque se puede apreciar en un rapido istazo qu
instrucciones estan dependiendo del caso positio del i. Lsto es un detalle que ahora quizas no tenga mucha importancia, pero que se
agradecera cuando el programa sea mas complejo o cuando arios programadores se encarguen de tocar un mismo cdigo.
Otro detalle que salta a la ista es el sangrado ,margen, que hemos colocado en cada uno de los bloques de
instrucciones a ejecutar en los casos positios y negatios. Lste sangrado es totalmente opcional, slo lo hemos
hecho as para que la estructura Il se comprenda de una manera mas isual. Los saltos de lnea tampoco son
necesarios y se han colocado tambin para que se ea mejor la estructura. Perectamente podramos colocar toda la
instruccin Il en la misma lnea de cdigo, pero eso no ayudara a que las cosas estn claras.
!"#$% Nosotros, as como lo hara cualquier persona con cierta experiencia en el area de programacin, aconsejamos que se utilicen los
sangrados y saltos de lnea necesarios para que las instrucciones se puedan entender mejor. Quizas el da que realizas un cdigo tengas claro
qu has hecho y por qu es as, pero dentro de un mes, cuando tengas que releer ese cdigo, quizas te acuerdes menos de lo que hiciste en tus
scripts y agradeceras que tengan un ormato amigable para que se puedan leer con acilidad por las personas. Si trabajas en equipo estas
recomendaciones seran todaa mas importantes, puesto que todaa es mas complicado leer cdigo uente que han realizado otras personas.
Veamos algn ejemplo de condicionales Il.
if (dia == "lunes")
document.write ("Que tengas un feliz comienzo de semana")
Si es lunes nos deseara una eliz semana. No hara nada en caso contrario. Como en este ejemplo slo indicamos una
instruccin para el caso positio, no hara alta utilizar las llaes ,aunque s sera recomendable haberlas puesto,. ljate
tambin en el operador condicional que consta de dos signos igual.
Vamos a er ahora otro ejemplo, un poco mas largo.
if (credito >= precio) {
document.write("has comprado el artculo " + nuevoArtculo) //enseo compra
carrito += nuevoArticulo //introduzco el artculo en el carrito de la compra
credito -= precio //disminuyo el crdito segn el precio del artculo
} else {
document.write("se te ha acabado el crdito") //informo que te falta dinero
window.location = "carritodelacompra.html" //voy a la pgina del carrito
}
Lste ejemplo es un poco mas complejo, y tambin un poco icticio. Lo que hago es comprobar si tengo crdito para realizar
una supuesta compra. Para ello miro si el crdito es mayor o igual que el precio del artculo, si es as inormo de la compra,
introduzco el artculo en el carrito y resto el precio al crdito acumulado. Si el precio del artculo es superior al dinero
disponible inormo de la situacin y mando al naegador a la pagina donde se muestra su carrito de la compra.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
29
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
J5>5456 M\;%&'/$-&' 8$-)/8/$-,*&'
La expresin a ealuar se coloca siempre entre parntesis y esta compuesta por ariables que se combinan entre si mediante
operadores condicionales. Recordamos que los operadores condicionales relacionaban dos ariables y deolan siempre un
resultado boleano. Por ejemplo un operador condicional es el operador "es igual" ,~~,, que deuele true en caso de que los
dos operandos sean iguales o alse en caso de que sean distintos.
if (edad > 18)
document.write("puedes ver esta pgina para adultos")
Ln este ejemplo utilizamos en operador condicional "es mayor" ,,. Ln este caso, deuele true si la ariable edad es mayor
que 18, con lo que se ejecutara la lnea siguiente que nos inorma de que se puede er el contenido para adultos.
Las expresiones condicionales se pueden combinar con las expresiones lgicas para crear expresiones mas complejas.
Recordamos que las expresiones lgicas son las que tienen como operandos a los boleanos y que deuelan otro alor
boleano. Son los operadores negacin lgica, \ lgico y O lgico.
if (bateria < 0.5 && redElectrica == 0)
document.write("tu ordenador portatil se va a apagar en segundos")
Lo que hacemos es comprobar si la batera de nuestro supuesto ordenador es menor que 0.5 ,esta casi acabada, y tambin
comprobamos si el ordenador no tiene red elctrica ,esta desenchuado,. Luego, el operador lgico los relaciona con un \,
de modo que si esta casi sin batera \ sin red elctrica, inormo que el ordenador se a a apagar.
!"#$% La lista de operadores que se pueden utilizar con las estructuras Il se pueden er en el captulo de operadores condicionales y
operadores lgicos.
Ln el siguiente artculo seguiremos explicando usos aanzados de la estructura de control i en Jaascript, como la anidacin
de estructuras i.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5D56 M'#%"8#"%, 7O _;,%#& 77`
\emos mcs coscs sobre lc estructurc lF: lc cndccon de lFs y el opercdor , un lF sencllo.
La estructura i es de las mas utilizadas en lenguajes de programacin, para tomar decisiones en uncin de la ealuacin de
una sentencia. Ln el artculo anterior del Manual de Jaascript ya comenzamos a explicar la estructura i y ahora amos a er
algunos usos un poquito mas aanzados.
J5D5456 Y&-#&-8/,' 7O ,-/),),'
Para hacer estructuras condicionales mas complejas podemos anidar sentencias Il, es decir, colocar estructuras Il dentro de
otras estructuras Il. Con un solo Il podemos ealuar y realizar una accin u otra segn dos posibilidades, pero si tenemos
mas posibilidades que ealuar debemos anidar Ils para crear el lujo de cdigo necesario para decidir correctamente.
Por ejemplo, si deseo comprobar si un nmero es mayor menor o igual que otro, tengo que ealuar tres posibilidades
distintas. Primero puedo comprobar si los dos nmeros son iguales, si lo son, ya he resuelto el problema, pero si no son
iguales todaa tendr que er cual de los dos es mayor. Veamos este ejemplo en cdigo Jaascript.
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos nmeros son iguales")
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
30
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
}else{
if (numero1 > numero2) {
document.write("El primer nmero es mayor que el segundo")
}else{
document.write("El primer nmero es menor que el segundo")
}
}
Ll lujo del programa es como comentabamos antes, primero se eala si los dos nmeros son iguales. Ln caso positio se
muestra un mensaje inormando de ello. Ln caso contrario ya sabemos que son distintos, pero aun debemos aeriguar cual
de los dos es mayor. Para eso se hace otra comparacin para saber si el primero es mayor que el segundo. Si esta
comparacin da resultados positios mostramos un mensaje diciendo que el primero es mayor que el segundo, en caso
contrario indicaremos que el primero es menor que el segundo.
Volemos a remarcar que las llaes son en este caso opcionales, pues slo se ejecuta una sentencia para cada caso. Ademas,
los saltos de lnea y los sangrados tambin opcionales en todo caso y nos siren slo para er el cdigo de una manera mas
ordenada. Mantener el cdigo bien estructurado y escrito de una manera comprensible es muy importante, ya que nos hara
la ida mas agradable a la hora de programar y mas adelante cuando tengamos que reisar los programas.
!"#$% Ln este manual utilizar una notacin como la que has podido er en las lneas anteriores. Ademas mantendr esa notacin en todo
momento. Lsto sin lugar a dudas hara que los cdigos con ejemplos sean comprensibles mas rapidamente, si no lo hiciramos as sera un
erdadero incordio leerlos. Lsta misma receta es aplicable a los cdigos que has de crear t y el principal beneiciado seras t mismo y los
companeros que lleguen a leer tu cdigo.
J5D5>56 V;&%,)$% 7O
lay un operador que no hemos isto todaa y es una orma mas esquematica de realizar algunos Il sencillos. Proiene del
lenguaje C, donde se escriben muy pocas lneas de cdigo y donde cuanto menos escribamos mas elegantes seremos. Lste
operador es un claro ejemplo de ahorro de lneas y caracteres al escribir los scripts. Lo eremos rapidamente, pues la nica
razn por la que lo incluyo es para que sepas que existe y si lo encuentras en alguna ocasin por ah sepas identiicarlo y
cmo unciona.
Un ejemplo de uso del operador Il se puede er a continuacin.
Variable = (condicin) ? valor1 : valor2
Lste ejemplo no slo realiza una comparacin de alores, ademas asigna un alor a una ariable. Lo que hace es ealuar la
condicin ,colocada entre parntesis, y si es positia asigna el alor1 a la ariable y en caso contrario le asigna el alor2.
Veamos un ejemplo:
momento = (hora_actual < 12) ? "Antes del medioda" : "Despus del medioda"
Lste ejemplo mira si la hora actual es menor que 12. Si es as, es que ahora es antes del medioda, as que asigna "Antes del
medioda" a la ariable momento. Si la hora es mayor o igual a 12 es que ya es despus de medioda, con lo que se asigna el
texto "Despus del medioda" a la ariable momento.
Ln el siguiente artculo pasaremos a trabajar con una nuea estructura de control, tambin utilizada para toma de decisiones,
llamada switch.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5F56 M'#%"8#"%, Ya7RIQ )& :,1,'8%/;#
Lc estructurc de control swtch de 1cvcscrpt es utlzcdc pcrc tomcr decsones en ]uncon de dstntos
estcdos o vclores de unc vcrcble.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
31
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Las estructuras de control son la manera con la que se puede dominar el lujo de los programas, para hacer cosas distintas
en uncin de los estados de las ariables. Ln el Manual de Jaascript ya empezamos a er las estructuras de control y ahora
le ha tocado el turno a S\I1Cl, una estructura un poco mas compleja que permite hacer mltiples operaciones
dependiendo del estado de una ariable.
Ln este artculo eremos que switch nos sire para tomar decisiones en uncin de distintos estados de las ariables. Lsta
expresin se utiliza cuando tenemos mltiples posibilidades como resultado de la ealuacin de una sentencia.
La estructura S\I1Cl se incorpor a partir de la ersin 1.2 de Jaascript ,Netscape 4 e Internet Lxplorer 4,. Su sintaxis es
la siguiente.
switch (expresin) {
case valor1:
Sentencias a ejecutar si la expresin tiene como valor a valor1
break
case valor2:
break
case valor3:
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
La expresin se eala, si ale alor1 se ejecutan las sentencias relacionadas con ese caso. Si la expresin ale alor2 se
ejecutan las instrucciones relacionadas con ese alor y as sucesiamente, por tantas opciones como deseemos. linalmente,
para todos los casos no contemplados anteriormente se ejecuta el caso por deecto.
La palabra break es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un alor se ejecutaran
todas las sentencias relacionadas con este y todas las siguientes. Ls decir, si en nuestro esquema anterior no hubiese ningn
break y la expresin aliese alor1, se ejecutaran las sentencias relacionadas con alor1 y tambin las relacionadas con
alor2, alor3 y deault.
1ambin es opcional la opcin deault u opcin por deecto.
Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que da de la semana es. Si el da es 1
,lunes, sacar un mensaje indicandolo, si el da es 2 ,martes, debemos sacar un mensaje distinto y as sucesiamente para cada
da de la semana, menos en el 6 ,sabado, y ,domingo, que queremos mostrar el mensaje "es in de semana". Para das
mayores que indicaremos que ese da no existe.
switch (dia_de_la_semana) {
case 1:
document.write("Es Lunes")
break
case 2:
document.write("Es Martes")
break
case 3:
document.write("Es Mircoles")
break
case 4:
document.write("Es Jueves")
break
case 5:
document.write("Es viernes")
break
case 6:
case 7:
document.write("Es fin de semana")
break
default:
document.write("Ese da no existe")
}
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
32
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Ll ejemplo es relatiamente sencillo, solamente puede tener una pequena diicultad, consistente en interpretar lo que pasa en
el caso 6 y , que habamos dicho que tenamos que mostrar el mismo mensaje. Ln el caso 6 en realidad no indicamos
ninguna instruccin, pero como tampoco colocamos un break se ejecutara la sentencia o sentencias del caso siguiente, que
corresponden con la sentencia indicada en el caso que es el mensaje que inorma que es in de semana. Si el caso es
simplemente se indica que es in de semana, tal como se pretenda.
Ln el siguiente artculo comenzaremos a explorar las estructuras de control para hacer bucles o repeticiones en Jaascript,
comenzando por el bucle or.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5J56 P"8*& OVU
0escrpcon y e]emplos de ]unconcmento del bucle FDR.
Comenzamos con este artculo del Manual de Jaascript a explorar las estructuras de control para producir bucles o
repeticiones, comenzando por el bucle or, no por ser el mas simple, pero s el mas utilizado en la programacin.
;5 72*5/ O6P )/ 2#,5,?$ -$+$ +/-/#,+ 4$) ,.)#+2**,"./) 2. 0/#/+4,.$0" .J4/+" 0/ (/*/). De entre todos los bucles,
el lOR se suele utilizar cuando sabemos seguro el nmero de eces que queremos que se ejecute. La sintaxis del bucle or se
muestra a continuacin.
for (inicializacin; condicin; actualizacin) {
//sentencias a ejecutar en cada iteracin
}
Ll bucle lOR tiene tres partes incluidas entre los parntesis, que nos siren para deinir cmo deseamos que se realicen las
repeticiones. La primera parte es la inicializacin, que se ejecuta solamente al comenzar la primera iteracin del bucle. Ln
esta parte se suele colocar la ariable que utilizaremos para llear la cuenta de las eces que se ejecuta el bucle.
La segunda parte es la condicin, que se ealuara cada ez que comience una iteracin del bucle. Contiene una expresin
para decidir cuando se ha de detener el bucle, o mejor dicho, la condicin que se debe cumplir para que contine la
ejecucin del bucle.
Por ltimo tenemos la actualizacin, que sire para indicar los cambios que queramos ejecutar en las ariables cada ez que
termina la iteracin del bucle, antes de comprobar si se debe seguir ejecutando.
Despus del or se colocan las sentencias que queremos que se ejecuten en cada iteracin, acotadas entre llaes.
Un ejemplo de utilizacin de este bucle lo podemos er a continuacin, donde se imprimiran los nmeros del 0 al 10.
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("<br>")
}
Ln este caso se inicializa la ariable i a 0. Como condicin para realizar una iteracin, se tiene que cumplir que la ariable i
sea menor o igual que 10. Como actualizacin se incrementara en 1 la ariable i.
Como se puede comprobar, /)#/ 72*5/ /) 42H -"#/.#/Q H$ 12/ /. 2.$ )"5$ 5=./$ -"0/4") ,.0,*$+ 42*I$) *")$)
0,)#,.#$) H 42H ($+,$0$), lo que permite una rapida coniguracin del bucle y una ersatilidad enorme.
Por ejemplo si queremos escribir los nmero del 1 al 1.000 de dos en dos se escribira el siguiente bucle.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
33
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
for (i=1;i<=1000;i+=2)
document.write(i)
Si nos ijamos, en cada iteracin actualizamos el alor de i incrementandolo en 2 unidades.
!"#$% Otro detalle, no utilizamos las llaes englobando las instrucciones del bucle lOR porque slo tiene una sentencia y en este caso no es
obligado, tal como pasaba con las instrucciones del Il.
Si queremos contar descendentemente del 343 al 10 utilizaramos este bucle.
for (i=343;i>=10;i--)
document.write(i)
Ln este caso decrementamos en una unidad la ariable i en cada iteracin, comenzando en el alor 343 y siempre que la
ariable tenga un alor mayor o igual que 10.
J5J5456 MH&%8/8/$ )& &H&+;*$ )&* @"8*& C$%
Vamos a hacer una pausa para asimilar el bucle or con un ejercicio que no encierra ninguna diicultad si hemos entendido el
uncionamiento del bucle.
Se trata de hacer un bucle que escriba en una pagina web los encabezamientos desde l1 hasta l6 con un texto que
ponga "Lncabezado de niel x".
Lo que deseamos escribir en una pagina web mediante Jaascript es lo siguiente:
l1Lncabezado de niel 1,l1
Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteracin escribiremos el encabezado que
toca.
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
}
Lste script se puede er en uncionamiento aqu.
Ahora que ya conocemos el bucle or, estamos en condiciones de aprender a manejar otras estructuras de control para
realizar repeticiones, como los bucles while y do...while.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5L56 P"8*&' aQ7AM E BV aQ7AM
0escrpcon y d]erentes usos de los dos tpos de bucles WHlLE que se encuentrcn dsponbles en
1cvcscrpt, con clyunos e]emplos prcctcos.
Lstamos tratando acerca de las distintas estructuras de control que existen en el lenguaje Jaascript y en concreto iendo los
distintos tipos de bucles que podemos implementar en este lenguaje de programacin. Ln artculos anteriores del Manual de
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
34
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Jaascript imos ya el primero de los bucles que debemos conocer, el bucle or y ahora amos a tratar sobre los otros dos
tipos de estructuras de control para hacer repeticiones. As pues, eamos ahora los dos tipos de bucles \lILL que
podemos utilizar en Jaascript y los usos de cada uno.
J5L5456 P"8*& aQ7AM
Lstos bucles se utilizan cuando queremos repetir la ejecucin de unas sentencias un nmero indeinido de eces, siempre
que se cumpla una condicin. Se mas sencillo de comprender que el bucle lOR, pues no incorpora en la misma lnea la
inicializacin de las ariables su condicin para seguir ejecutandose y su actualizacin. Slo se indica, como eremos a
continuacin, la condicin que se tiene que cumplir para que se realice una iteracin.
while (condicin){
//sentencias a ejecutar
}
Un ejemplo de cdigo donde se utiliza este bucle se puede er a continuacin.
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
Lste es un ejemplo de lo mas sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca
un color y lo hace repetidas eces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero
tenemos que inicializar la ariable que amos utilizar en la condicin de iteracin del bucle. Con la ariable inicializada
podemos escribir el bucle, que comprobara para ejecutarse que la ariable color sea distinto de "rojo". Ln cada iteracin del
bucle se pide un nueo color al usuario para actualizar la ariable color y se termina la iteracin, con lo que retornamos al
principio del bucle, donde tenemos que oler a ealuar si lo que hay en la ariable color es "rojo" y as sucesiamente
mientras que no se haya introducido como color el texto "rojo".
!"#$% lemos utilizado en este ejemplo la uncin prompt de Jaascript, que no hemos isto todaa en este manual. Lsta uncin sire para
que mostrar una caja de dialogo donde el usuario debe escribir un texto. Lsta uncin pertenece al objeto window de Jaascript y la
comentamos en el artculo Mtodos de window en Jaascript.
J5L5>56 P"8*& BV555aQ7AM
Ll bucle do...while es la ltima de las estructuras para implementar repeticiones de las que dispone en Jaascript y es una
ariacin del bucle while isto anteriormente. Se utiliza generalmente cuando no sabemos cuantas eces se habra de ejecutar
el bucle, igual que el bucle \lILL, con la dierencia de que sabemos seguro que el bucle por lo menos se ejecutara una ez.
Lste tipo de bucle se introdujo en Jaascript 1.2, por lo que no todos los naegadores los soportan, slo los de ersin 4 o
superior. Ln cualquiuer caso, cualquier cdigo que quieras escribir con DO...\lILL se puede escribir tambin utilizando
un bucle \lILL, con lo que en naegadores antiguos deberas traducir tu bucle DO...\lILL por un bucle \lILL.
La sintaxis es la siguiente.
do {
//sentencias del bucle
} while (condicin)
Ll bucle se ejecuta siempre una ez y al inal se eala la condicin para decir si se ejecuta otra ez el bucle o se termina su
ejecucin.
Veamos el ejemplo que escribimos para un bucle \lILL en este otro tipo de bucle.
var color
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
35
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
Lste ejemplo unciona exactamente igual que el anterior, excepto que no tuimos que inicializar la ariable color antes de
introducirnos en el bucle. Pide un color mientras que el color introducido es distinto que "rojo".
J5L5D56 MH&+;*$ )& "'$ )& *$' @"8*&' b?/*&
Vamos a er a continuacin un ejemplo mas practico sobre cmo trabajar con un bucle \lILL. Como resulta muy dicil
hacer ejemplos practicos con lo poco que sabemos sobre Jaascript, amos a adelantar una instruccin que aun no
conocemos.
Ln este ejemplo amos a declarar una ariable e inicializarla a 0. Luego iremos sumando a esa ariable un nmero aleatorio
del 1 al 100 hasta que sumemos 1.000 o mas, imprimiendo el alor de la ariable suma despus de cada operacin. Sera
necesario utilizar el bucle \lILL porque no sabemos exactamente el nmero de iteraciones que tendremos que realizar
,dependera de los alores aleatorios que se ayan obteniendo,.
var suma = 0
while (suma < 1000){
suma += parseInt(Math.random() * 100)
document.write (suma + "<br>")
}
Suponemos que por lo que respecta al bucle \lILL no habra problemas, pero donde si que puede haberlos es en la
sentencia utilizada para tomar un nmero aleatorio. Sin embargo, no es necesario explicar aqu la sentencia porque lo
tenemos planeado hacer mas adelante. De todos modos, si lo deseas, puedes er este artculo que habla sobre nmeros
aleatorios en Jaascript.
Podemos er una pagina con el ejemplo en uncionamiento.
Con esto ya hemos conocido todos los tipos de bucles que existen en Jaascript, no obstante aun amos a dedicar un
artculo para explicar las sentencias break y continue que nos siren para alterar el uncionamiento normal de los bucles en
dos sentidos.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
J5c56 P%&,d E 8$-#/-"&
0os nstruccones que cumentcn el control sobre los bucles en 1cvcscrpt. Srven pcrc pcrcr y contnucr
con lc syuente terccon del bucle respectvcmente.
Jaascript tiene dierentes estructuras de control para implementar bucles, como lOR, \lILL y DO...\lILL, que ya
hemos podido explicar en captulos anteriores del Manual de Jaascript. Como hemos podido comprobar, con estos bucles
podemos abarcar gran cantidad de necesidades, pero quizas con el tiempo encuentres que te altan algunas posibilidades de
control de las repeticiones de los bucles.
Imagina por ejemplo que estas haciendo un bucle muy largo para encontrar algo en cientos o miles de sitios. Pero ponte en
el caso que durante las primeras iteraciones encuentres ese alor que buscabas. Lntonces no tendra sentido continuar con el
resto del bucle para buscar ese elemento, pues ya lo habas encontrado. Ln estas situaciones nos coniene saber para el bucle
cancelar el resto de iteraciones. Obiamente, sto es solo un ejemplo de cmo podramos ernos en la necesidad de
controlar un poco mas el bucle. Ln la ida real como programador encontraras muchas otras ocasiones en las que te
interesara hacer esto u otras cosas con ellos.
As pues, existen dos instrucciones que se pueden usar en de las distintas estructuras de control y principalmente en los
bucles, que te seriran para controlar dos tipos de situaciones. F". 5$) ,.)#+2**,"./) 7+/$R H *".#,.2/.:
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
36
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
! 7+/$R% Signiica detener la ejecucin de un bucle y salirse de l.
! *".#,.2/% Sire para detener la iteracin actual y oler al principio del bucle para realizar otra iteracin, si
corresponde.
J5c5456 P%&,d
Se detiene un bucle utilizando la palabra break. Detener un bucle signiica salirse de l y dejarlo todo como esta para
continuar con el lujo del programa inmediatamente despus del bucle.
for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no")
break
}
Lste ejemplo escribe los nmeros del 0 al 9 y en cada iteracin del bucle pregunta al usuario si desea continuar. Si el usuario
dice cualquier cosa continua, excepto cuando dice "no", situacin en la cual se sale del bucle y deja la cuenta por donde se
haba quedado.
J5c5>56 I$-#/-"&
Sire para oler al principio del bucle en cualquier momento, sin ejecutar las lneas que haya por debajo de la palabra
continue.
var i=0
while (i<7){
incrementar = prompt("La cuenta est en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Lste ejemplo, en condiciones normales contara hasta desde i~0 hasta i~, pero cada ez que se ejecuta el bucle pregunta al
usuario si desea incrementar la ariable o no. Si introduce "no" se ejecuta la sentencia continue, con lo que se uele al
principio del bucle sin llegar a incrementar en 1 la ariable i, ya que se ignoraran las sentencia que hayan por debajo del
continue.
J5c5D56 MH&+;*$ ,)/8/$-,* )& *, '&-#&-8/, @%&,d
Un ejemplo mas practico sobre estas instrucciones se puede er a continuacin. Se trata de un bucle lOR planeado para
llegar hasta 1.000 pero que lo amos a parar con break cuando lleguemos a 333.
for (i=0;i<=1000;i++){
document.write(i + "<br>")
if (i==333)
break;
}
Podemos er una pagina con el ejemplo en uncionamiento.
Con la descripcin de las sentencias break y continue hemos podido abarcar todo lo que se debe saber sobre la creacin de
bucles en Jaascript. Ahora bien, en el siguiente artculo todaa amos a seguir en el tema de las estructuras de control,
porque queremos orecer un ejemplo un poco mas aanzado donde aprenderemos a anidar bucles.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
37
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
J5e56 P"8*&' ,-/),)$' &- :,1,'8%/;#
Explccmos lo que es un bucle cndcdo, como ]unconcn y pcrc qu srven. \emos clyunos e]emplos.
Ln el Manual de Jaascript hemos recorrido ya diersos artculos para hablar de bucles. Ln este momento no debera haber
ningn problema para poder crear los distintos tipos de bucles sin problemas, no obstante, queremos dedicar un artculo
completo a tratar acerca de uno de los usos mas habituales de los bucles, que podremos encontrar cuando estemos haciendo
programas mas complejos: la anidacin de bucles.
>.,0$+ 2. 72*5/ *".),)#/ /. 4/#/+ /)/ 72*5/ 0/.#+" 0/ "#+". La anidacin de bucles es necesaria para hacer
determinados procesamientos un poco mas complejos que los que hemos isto en los ejemplos anteriores. Si en uestra
experiencia como programadores los habis anidado un bucle todaa, tener certeza que mas tarde o temprano os
encontraris con esa necesidad.
Un bucle anidado tiene una estructura como la que sigue. Vamos a tratar de explicarlo a la ista de estas lneas:
for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
La ejecucin uncionara de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la ariable i aldra 0 y a
continuacin se inicializa el segundo bucle, con lo que la ariable j aldra tambin 0. Ln cada iteracin se imprime el alor de
la ariable i, un guin ,"-", y el alor de la ariable j, como las dos ariables alen 0, se imprimira el texto "0-0" en la pagina
web.
Debido al lujo del programa en esquemas de anidacin como el que hemos isto, el bucle que esta anidado ,mas hacia
dentro, es el que mas eces se ejecuta. Ln este ejemplo, para cada iteracin del bucle mas externo el bucle anidado se
ejecutara por completo una ez, es decir, hara sus 10 iteraciones. Ln la pagina web se escribiran estos alores, en la primera
iteracin del bucle externo y desde el principio:
0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-
0-8
0-9
Para cada iteracin del bucle externo se ejecutaran las 10 iteraciones del bucle interno o anidado. lemos isto la primera
iteracin, ahora amos a er las siguientes iteraciones del bucle externo. Ln cada una acumula una unidad en la ariable i,
con lo que saldran estos alores.
1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-
1-8
1-9
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
38
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
\ luego estos.
2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-
2-8
2-9
As hasta que se terminen los dos bucles, que sera cuando se alcanzase el alor 9-9.
Veamos un ejemplo muy parecido al anterior, aunque un poco mas til. Se trata de imprimir en la pagina las todas las tablas
de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...
for (i=1;i<10;i++){
document.write("<br><b>La tabla del " + i + ":</b><br>")
for (j=1;j<10;j++) {
document.write(i + " x " + j + ": ")
document.write(i*j)
}
}
Con el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. Ln el primer bucle escribimos una
cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del 1 y luego las demas en orden ascendente
hasta el 9. Con el segundo bucle escribo cada uno de los alores de cada tabla. Se puede er el ejemplo en marcha en este
enlace.
!"#$% Veremos mas cosas con bucles anidados en captulos posteriores, aunque si queremos adelantarnos un poco para er un nueo ejemplo
que aiance estos conocimientos podemos ir iendo un ejemplo en el 1aller de Jaascript sobre bucles anidados, donde se construye la tabla
con todos los colores puros en deiniciones de 256 colores.
Con este artculo mas bien practico sobre anidacin de bucles, terminamos el tema de las estructuras de control. Ahora
pasaremos a otra seccin de este Manual de Jaascript, en la que trataremos sobre las unciones.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
39
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, F7
G:*'(#*,; ,* -%.%;'"(01
Las funcIones nos permItIrn hacer programas y scrIpts ms optImIzados y de fcIl
mantenImIento. TambIn son bsIcas en cualquIer lenguaje de programacIon y les
dedIcaremos varIos articulos.
L5456 O"-8/$-&' &- :,1,'8%/;#
Comenzcmos con lcs ]uncones en 1cvcscrpt. 0e]nmos el concepto de ]uncon y cprendemos c crecrlcs y
c llcmcrlcs.
Seguimos trabajando y ampliando nuestros conocimientos sobre Jaascript. Con lo isto hasta ahora en el Manual de
Jaascript ya tenemos una cierta soltura para trabajar en este interesante lenguaje de programacin. Pero todaa nos queda
mucho por delante.
Ahora amos a er un tema muy importante, sobretodo para los que no han programado nunca y con Jaascript estan
dando sus primeros pasos en el mundo de la programacin ya que eremos un concepto nueo, el de uncin, y los usos que
tiene. Para los que ya conozcan el concepto de uncin tambin sera un captulo til, pues tambin eremos la sintaxis y
uncionamiento de las unciones en Jaascript.
L545456 <"= &' "-, C"-8/9-
A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden concebir de orma
independiente, y que son mas sencillos de resoler que el problema entero. Ademas, estos suelen ser realizados repetidas
eces a lo largo de la ejecucin del programa. Lstos procesos se pueden agrupar en una uncin, deinida para que no
tengamos que repetir una y otra ez ese cdigo en nuestros scripts, sino que simplemente llamamos a la uncin y ella se
encarga de hacer todo lo que debe.
As que podemos er una uncin como una serie de instrucciones que englobamos dentro de un mismo proceso. Lste
proceso se podra luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, en una pagina web puede haber
una uncin para cambiar el color del ondo y desde cualquier punto de la pagina podramos llamarla para que nos cambie el
color cuando lo deseemos.
!"#$% Si queremos, podemos ampliar esta descripcin de las unciones en el artculo Concepto de uncin.
Las unciones se utilizan constantemente, no slo las que escribes t, sino tambin las que ya estan deinidas en el sistema,
pues todos los lenguajes de programacin suelen tener un montn de unciones para realizar procesos habituales, como por
ejemplo obtener la hora, imprimir un mensaje en la pantalla o conertir ariables de un tipo a otro. \a hemos isto alguna
uncin en nuestros sencillos ejemplos anteriores. Por ejemplo, cuando hacamos un document.write,, en realidad estabamos
llamando a la uncin write,, asociada al documento de la pagina, que escribe un texto en la pagina.
Ln los captulos de unciones amos primero a er cmo realizar nuestras propias unciones y cmo llamarlas luego. A lo
largo del manual eremos muchas de las unciones deinidas en Jaascript que debemos utilizar para realizar distintos tipos
de acciones habituales.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
40
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
L545>56 I9+$ '& &'8%/@& "-, C"-8/9-
Una uncin se debe deinir con una sintaxis especial que amos a conocer a continuacin.
function nombrefuncion (){
instrucciones de la funcin
...
}
Primero se escribe la palabra <2.*#,"., reserada para este uso. Seguidamente se escribe el nombre de la uncin, que como
los nombres de ariables puede tener nmeros, letras y algn caracter adicional como en guin bajo. A continuacin se
colocan entre llaes las distintas instrucciones de la uncin. Las llaes en el caso de las unciones no son opcionales, ademas
es til colocarlas siempre como se e en el ejemplo, para que se reconozca acilmente la estructura de instrucciones que
engloba la uncin.
Veamos un ejemplo de uncin para escribir en la pagina un mensaje de bienenida dentro de etiquetas l1 para que
quede mas resaltado.
unction escribirBienenida,,
document.write,"l1lola a todos,l1",

Simplemente escribe en la pagina un texto. Admitimos que es una uncin tan sencilla, que el ejemplo no expresa
suicientemente el concepto de uncin, pero ya eremos otras mas complejas. Las etiquetas l1 no se muestran en la pagina,
sino que son interpretadas como el signiicado de la misma, en este caso que escribimos un encabezado de niel 1. Como
estamos escribiendo en una pagina web, al poner etiquetas l1ML se interpretan como lo que son.
L545D56 I9+$ **,+,% , "-, C"-8/9-
Para ejecutar una uncin la tenemos que inocar en cualquier parte de la pagina. Con eso conseguiremos que se ejecuten
todas las instrucciones que tiene la uncin entre las dos llaes.
Para ejecutar la uncin utilizamos su nombre seguido de los parntesis. Por ejemplo, as llamaramos a la uncin
escribirBienenida,, que acabamos de crear.
escribirBienenida,,
Luego eremos que existen muchas cosas adicionales que debemos conocer de las unciones, como el paso de parametros o
los alores de retorno. Pero antes amos a explicar dnde debemos colocar las unciones Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
L5>56 B9-)& 8$*$8,+$' *,' C"-8/$-&'
\emos lc mcnerc de nsertcr lcs ]uncones 1cvcscrpt de clente dentro de lcs pcyncs web.
Las unciones son uno de los principales componentes de los programas, en la mayora de los lenguajes de programacin.
Ln el Manual de Jaascript ya hemos comenzado a explicar qu es una uncin y cmo podemos crearla e inocarla en este
lenguaje. Ahora amos a tratar un tema que no es tanto de sintaxis y programacin, sino que tiene mas que er con el uso
correcto y habitual que se hace de las unciones en Jaascript, que no es otro que la colocacin del cdigo de las unciones
en la pagina web.
Ln principio, podemos colocar las unciones en cualquier parte de la pagina, siempre entre etiquetas SCRIP1, claro esta.
No obstante existe una limitacin a la hora de colocarla con relacin a los lugares desde donde se la llame. 1e adelantamos
que lo mas acil es colocar la uncin antes de cualquier llamada a la misma y as seguro que nunca nos equiocaremos.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
41
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Lxisten dos opciones posibles para colocar el cdigo de una uncin:
$S 3"5"*$+ 5$ <2.*,:. /. /5 4,)4" 75"12/ 0/ )*+,-#% Ln concreto, la uncin se puede deinir en el bloque SCRIP1
donde est la llamada a la uncin, aunque es indierente si la llamada se encuentra antes o despus del cdigo de la uncin,
dentro del mismo bloque SCRIP1.
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
Lste ejemplo unciona correctamente porque la uncin esta declarada en el mismo bloque que su llamada.
7S 3"5"*$+ 5$ <2.*,:. /. "#+" 75"12/ 0/ )*+,-#% 1ambin es alido que la uncin se encuentre en un bloque SCRIP1
anterior al bloque donde esta la llamada.
<HTML>
<HEAD>
<TITLE>MI PGINA</TITLE>
<SCRIPT>
//hago algo...
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
miFuncion()
</SCRIPT>
</BODY>
</HTML>
Vemos un cdigo completo sobre cmo podra ser una pagina web donde tenemos unciones Jaascript. Como se puede
comprobar, las unciones estan en la cabecera de la pagina ,dentro del lLAD,. ste es un lugar excelente donde colocarlas,
porque se supone que en la cabecera no se an a utilizar todaa y siempre podremos disrutar de ellas en el cuerpo porque
sabemos seguro que ya han sido declaradas.
Para que quede claro este asunto de la colocacin de unciones eamos el siguiente ejemplo, 12/ 0$+=$ 2. /++"+. Lxamina
atentamente el cdigo siguiente, que lanzara un error, debido a que hacemos una llamada a una uncin que se encuentra
declarada en un bloque SCRIP1 posterior.
<SCRIPT>
miFuncion()
</SCRIPT>
<SCRIPT>
//hago algo...
}
</SCRIPT>
Con esto esperamos haber resuelto todas las dudas sobre la colocacin del cdigo de las unciones Jaascript. Ln siguientes
artculos eremos otros temas interesantes como los parametros de las unciones.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
42
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
L5D56 Z,%N+&#%$' )& *,' C"-8/$-&'
\emos lo que son los pcrcmetros en lcs ]uncones. \emos como de]nr ]uncones que recben pcrcmetros
en el lenyuc]e 1cvcscrpt y como hccer llcmcdcs c ]uncones pcscndo pcrcmetros.
Ln el Manual de Jaascript hemos hablado anteriormente sobre unciones. Ln concreto este es el tercer artculo que
abordamos sobre el tema.
Las ideas que hemos explicado anteriormente sobre unciones no son las nicas que debemos aprender para manejarlas en
toda su potencia. Las unciones tambin tienen una entrada y una salida de datos. Ln este artculo eremos cmo podemos
eniar datos a las unciones Jaascript.
L5D5456 Z,%N+&#%$'
Los parametros se usan para mandar alores a las unciones. Una uncin trabajara con los parametros para realizar las
acciones. Por decirlo de otra manera, los parametros son los alores de entrada que recibe una uncin.
Por poner un ejemplo sencillo de entender, una uncin que realizase una suma de dos nmeros tendra como parametros a
esos dos nmeros. Los dos nmeros son la entrada, as como la salida sera el resultado de la suma, pero eso lo eremos mas
tarde.
Veamos un ejemplo anterior en el que creabamos una uncin para mostrar un mensaje de bienenida en la pagina web, pero
al que ahora le amos a pasar un parametro que contendra el nombre de la persona a la que hay que saludar.
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Como podemos er en el ejemplo, para deinir en la uncin un parametro tenemos que poner el nombre de la ariable que
a a almacenar el dato que le pasemos. Lsa ariable, que en este caso se llama nombre, tendra como alor el dato que le
pasemos a la uncin cuando la llamemos. Ademas, la ariable donde recibimos el parametro tendra ida durante la
ejecucin de la uncin y dejara de existir cuando la uncin termine su ejecucin.
Para llamar a una uncin que tiene parametros se coloca entre parntesis el alor del parametro. Para llamar a la uncin del
ejemplo habra que escribir:
escribirBienvenida("Alberto Garca")
Al llamar a la uncin as, el parametro nombre toma como alor "Alberto Garca" y al escribir el saludo por pantalla
escribira "lola Alberto Garca" entre etiquetas l1.
Los parametros pueden recibir cualquier tipo de datos, numrico, textual, boleano o un objeto. Realmente no especiicamos
el tipo del parametro, por eso debemos tener un cuidado especial al deinir las acciones que realizamos dentro de la uncin
y al pasarle alores, para asegurarnos que todo es consecuente con los tipos de datos que esperamos tengan nuestras
ariables o parametros.
L5D5>56 .]*#/;*&' ;,%N+&#%$'
Una uncin puede recibir tantos parametros como queramos y para expresarlo se colocan los nombres de los parametros
separados por comas, dentro de los parntesis. Veamos rapidamente la sintaxis para que la uncin de antes, pero hecha para
que reciba dos parametros, el primero el nombre al que saludar y el segundo el color del texto.
function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
document.write("</FONT>")
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
43
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
}
Llamaramos a la uncin con esta sintaxis. Lntre los parntesis colocaremos los alores de los parametros.
var miNombre = "Pepe"
var miColor = "red"
escribirBienvenida(miNombre,miColor)
le colocado entre los parntesis dos ariables en lugar de dos textos entrecomillados. Cuando colocamos ariables entre los
parametros en realidad lo que estamos pasando a la uncin son los alores que contienen las ariables y no las mismas
ariables.
L5D5D56 A$' ;,%N+&#%$' '& ;,',- ;$% 1,*$%
Al hilo del uso de parametros en nuestros programas Jaascript, tenemos que saber que los parametros de las unciones se
pasan por alor. Lsto quiere decir que estamos pasando alores y no ariables. Ln la practica, aunque modiiquemos un
parametro en una uncin, la ariable original que habamos pasado no cambiara su alor. Se puede er acilmente con un
ejemplo.
function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
Ln el ejemplo tenemos una uncin que recibe un parametro y que modiica el alor del parametro asignandole el alor 32.
1ambin tenemos una ariable, que inicializamos a 5 y posteriormente llamamos a la uncin pasandole esta ariable como
parametro. Como dentro de la uncin modiicamos el alor del parametro podra pasar que la ariable original cambiase de
alor, pero como los parametros no modiican el alor original de las ariables, sta no cambia de alor.
De este modo, una ez ejecutada la uncin, al imprimir en pantalla el alor de miVariable se imprimira el nmero 5, que es
el alor original de la ariable, en lugar de 32 que era el alor con el que habamos actualizado el parametro.
Ln Jaascript slo se pueden pasar las ariables por alor.
Ahora que hemos aprendido a eniar datos a las unciones, por medio de los parametros, podemos aprender a hacer
unciones que deuelen alores.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
L5F56 K,*$%&' )& %&#$%-$
Lcs ]uncones pueden devolver vclores, c trcvs de lc sentencc return. Tcmbn vemos un cpunte sobre
el cmbto de vcrcbles en ]uncones en 1cvcscrpt.
Lstamos aprendiendo acerca del uso de unciones en Jaascript y en estos momentos quizas ya nos hayamos dado cuenta de
la gran importancia que tienen para hacer programas mas o menos aanzados. Ln este artculo del Manual de Jaascript
seguiremos aprendiendo cosas sobre unciones y en concreto que con ellas tambin se puede deoler alores. Ademas,
eremos algn caso de uso interesante sobre las unciones que nos puede aclarar un poco el ambito de ariables locales y
globales.
L5F5456 B&1$*"8/9- )& 1,*$%&' &- *,' C"-8/$-&'
Las unciones en Jaascript tambin pueden retornar alores. De hecho, sta es una de las utilidades mas esenciales de las
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
44
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
unciones, que debemos conocer, no slo en Jaascript sino en general en cualquier lenguaje de programacin. De modo
que, al inocar una uncin, se podra realizar acciones y orecer un alor como salida.
Por ejemplo, una uncin que calcula el cuadrado de un nmero tendra como entrada a ese nmero y como salida tendra el
alor resultante de hallar el cuadrado de ese nmero. La entrada de datos en las unciones la imos anteriormente en el
artculo sobre parametros de las unciones. Ahora tenemos que aprender acerca de la salida.
Veamos un ejemplo de uncin que calcula la media de dos nmeros. La uncin recibira los dos nmeros y retornara el
alor de la media.
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Para especiicar el alor que retornara la uncin se utiliza la palabra +/#2+. seguida de el alor que se desea deoler. Ln
este caso se deuele el contenido de la ariable resultado, que contiene la media calculada de los dos nmeros.
Quizas nos preguntemos ahora cmo recibir un dato que deuele una uncin. Realmente en el cdigo uente de nuestros
programas podemos inocar a las unciones en el lugar que deseemos. Cuando una uncin deuele un alor simplemente
se sustituye la llamada a la uncin por ese alor que deuele. As pues, para almacenar un alor de deolucin de una
uncin, tenemos que asignar la llamada a esa uncin como contenido en una ariable, y eso lo haramos con el operador de
asignacin ~.
Para ilustrar esto se puede er este ejemplo, que llamara a la uncin media,, y guardara el resultado de la media en una
ariable para luego imprimirla en la pagina.
var miMedia
miMedia = media(12,8)
document.write (miMedia)
L5F5>56 .]*#/;*&' %&#"%-
Ln realidad en Jaascript las unciones slo pueden deoler un alor, por lo que en principio no podemos hacer unciones
que deuelan dos datos distintos.
!"#$% en la practica nada nos impide que una uncin deuela mas de un alor, pero como slo podemos deoler una cosa, tendramos que
meter todos los alores que queremos deoler en una estructura de datos, como por ejemplo un array. No obstante, eso sera un uso mas o
menos aanzado que no amos a er en estos momentos.
Ahora bien, aunque slo podamos deoler un dato, en una misma uncin podemos colocar mas de un return. Como
decimos, slo amos a poder retornar una cosa, pero dependiendo de lo que haya sucedido en la uncin podra ser de un
tipo u otro, con unos datos u otros.
Ln esta uncin podemos er un ejemplo de utilizacin de mltiples return. Se trata de una uncin que deuele un 0 si el
parametro recibido era par y el alor del parametro si este era impar.
function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
Para aeriguar si un nmero es par hallamos el resto de la diisin al diidirlo entre 2. Si el resto es cero es que era par y
deolemos un 0, en caso contrario -el nmero es impar- deolemos el parametro recibido.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
45
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
L5F5D56 f+@/#$ )& *,' 1,%/,@*&' &- C"-8/$-&'
Dentro de las unciones podemos declarar ariables. Sobre este asunto debemos de saber que todas las ariables declaradas
en una uncin son locales a esa uncin, es decir, slo tendran alidez durante la ejecucin de la uncin.
!"#$% Incluso, si lo pensamos, nos podremos dar cuenta que los parametros son como ariables que se declaran en la cabecera de la uncin y
que se inicializan al llamar a la uncin. Los parametros tambin son locales a la uncin y tendran alidez slo cuando sta se esta ejecutando.
Podra darse el caso de que podemos declarar ariables en unciones que tengan el mismo nombre que una ariable global a
la pagina. Lntonces, dentro de la uncin, la ariable que tendra alidez es la ariable local y uera de la uncin tendra
alidez la ariable global a la pagina.
Ln cambio, si no declaramos las ariables en las unciones se entendera por jaascript que estamos haciendo reerencia a una
ariable global a la pagina, de modo que si no esta creada la ariable la crea, pero siempre global a la pagina en lugar de local
a la uncin.
Veamos el siguiente cdigo.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
Ln este caso ariableLocal es una ariable que se ha declarado en la uncin, por lo que sera local a la uncin y slo tendra
alidez durante su ejecucin. Por otra parte ariableGlobal no se ha llegado a declarar ,porque antes de usarla no se ha
utilizado la palabra ar para declararla,. Ln este caso la ariable ariableGlobal es global a toda la pagina y seguira existiendo
aunque la uncin inalice su ejecucin. Ademas, si antes de llamar a la uncin existiese la ariable ariableGlobal, como
resultado de la ejecucin de esta uncin, se machacara un hipottico alor de esa ariable y se sustituira por "qwerty".
!"#$% Podemos encontrar mas inormacin sobre ambito de ariables en un artculo anterior.
Con esto hemos terminado el tema de las unciones, as que en adelante nos dedicaremos a otros asuntos tambin
interesantes, como son los Arrays en Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
46
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, H7
I""%B; -%.%;'"(01
Los arrays, tambIn llamados tablas o matrIces, son la prImera estructura de datos que
podemos aprender en JavascrIpt y en otros lenguajes de programacIon. SIn duda sern
ImprescIndIbles para desarrollar programas medIanamente avanzados.
c5456 !%%,E' &- :,1,'8%/;#
\emos que son los crrcys en 1cvcscrpt, pcrc qu srven y como utlzcrlos. \eremos dverscs ]ormcs de
crecrlos, cs como de]nr y ccceder c sus vclores.
Pasamos a un nueo tema en el Manual de Jaascript, en el que amos a conocer nuestra primera estructura de datos.
Ln los lenguajes de programacin existen estructuras de datos especiales que nos siren para guardar inormacin mas
compleja que simples ariables. Una estructura tpica en todos los lenguajes es el Array, que es como una ariable donde
podemos introducir arios alores, en lugar de solamente uno como ocurre con la ariables normales.
Los arrays nos permiten guardar arias ariables y acceder a ellas de manera independiente, es como tener una ariable con
distintos compartimentos donde podemos introducir datos distintos. Para ello utilizamos un ndice que nos permite
especiicar el compartimiento o posicin a la que nos estamos reiriendo.
!"#$% Los arrays se introdujeron en ersiones Jaascript 1.1 o superiores, es decir, solo los podemos utilizar a partir de los naegadores 3.0.
Para naegadores antiguos se puede simular el array utilizando sintaxis de programacin orientada a objetos, pero la erdad es que
actualmente esta limitacin no debe preocuparnos. Ademas, dada la complejidad de la tarea de simular un array por medio de objetos, por lo
menos en el momento en que nos encontramos y las pocas ocasiones en que lo necesitaremos, opinamos que es mejor olidarnos de ese
asunto y trabajar simplemente con los arrays normalmente. As que en este artculo y los siguientes amos a er cmo utilizar el autntico
array de Jaascript.
c545456 I%&,8/9- )& !%%,E' H,1,'8%/;#
Ll primer paso para utilizar un array es crearlo. Para ello utilizamos un objeto Jaascript ya implementado en el naegador.
Veremos en adelante un tema para explicar lo que es la orientacin a objetos, aunque no sera necesario para poder entender
el uso de los arrays. Lsta es la sentencia para crear un objeto array:
var miArray = new Array()
Lsto crea un array en la pagina que esta ejecutandose. Ll array se crea sin ningn contenido, es decir, no tendra ninguna
casilla o compartimiento creado. 1ambin podemos crear el array Jaascript especiicando el nmero de compartimentos
que a a tener.
var miArray = new Array(10)
Ln este caso indicamos que el array a a tener 10 posiciones, es decir, 10 casillas donde guardar datos.
Ls importante que nos ijemos que la palabra Array en cdigo Jaascript se escribe con la primera letra en mayscula. Como
en Jaascript las maysculas y minsculas si que importan, si lo escribimos en minscula no uncionara.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
47
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
1anto se indique o no el nmero de casillas del $++$H 8$($)*+,-#, podemos introducir en el array cualquier dato. Si la casilla
esta creada se introduce simplemente y si la casilla no estaba creada se crea y luego se introduce el dato, con lo que el
resultado inal es el mismo. Lsta creacin de casillas es dinamica y se produce al mismo tiempo que los scripts se ejecutan.
Veamos a continuacin cmo introducir alores en nuestros arrays.
miArray|0| ~ 290
miArray|1| ~ 9
miArray|2| ~ 12
Se introducen indicando entre corchetes el ndice de la posicin donde queramos guardar el dato. Ln este caso
introducimos 290 en la posicin 0, 9 en la posicin 1 y 12 en la 2.
T") $++$H) /. '$($)*+,-# /4-,/?$. ),/4-+/ /. 5$ -"),*,:. U, as que un array que tenga por ejemplo 10 posiciones,
tendra casillas de la 0 a la 9. Para recoger datos de un array lo hacemos igual: poniendo entre corchetes el ndice de la
posicin a la que queremos acceder. Veamos cmo se imprimira en la pantalla el contenido de un array.
miArray[0] = 155
miArray[1] = 4
miArray[2] = 499
for (i=0;i<3;i++){
document.write("Posicin " + i + " del array: " + miArray[i])
}
lemos creado un array con tres posiciones, luego hemos introducido un alor en cada una de las posiciones del array y
inalmente las hemos impreso. Ln general, el recorrido por arrays para imprimir sus posiciones, o cualquier otra cosa, se
hace utilizando bucles. Ln este caso utilizamos un bucle lOR que a desde el 0 hasta el 2.
Podemos er el ejemplo en marcha en otra pagina.
c545>56 R/;$' )& ),#$' &- *$' ,%%,E'
Ln las casillas de los arrays podemos guardar datos de cualquier tipo. Podemos er un array donde introducimos datos de
tipo caracter.
miArray[0] = "Hola"
miArray[1] = "a"
miArray[2] = "todos"
Incluso, en Jaascript podemos guardar distintos tipos de datos en las casillas de un mismo array. Ls decir, podemos
introducir nmeros en unas casillas, textos en otras, boleanos o cualquier otra cosa que deseemos.
miArray[0] = "desarrolloweb.com"
miArray[1] = 1275
miArray[1] = 0.78
miArray[2] = true
c545D56 B&8*,%,8/9- & /-/8/,*/2,8/9- %&'"+/), )& !%%,E'
Ln Jaascript tenemos a nuestra disposicin una manera resumida de declarar un array y cargar alores en un mismo paso.
lijmonos en el cdigo siguiente:
var arrayRapido = [12,45,"array inicializado en su declaracin"]
Como se puede er, se esta deiniendo una ariable llamada arrayRapido y estamos indicando en los corchetes arios alores
separados por comas. Lsto es lo mismo que haer declarado el array con la uncin Array,, y luego haberle cargado los
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
48
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
alores uno a uno.
Ln el prximo artculo seguiremos iendo cosas relacionadas con los arrays, en concreto aprenderemos a acceder a la
longitud de un array.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
c5>56 A$-0/#") )& *$' ,%%,E'
Aprendemos mcs coscs sobre el ]unconcmento de los crrcys y en concreto vemos como utlzcr su
propedcd lenyth pcrc ccceder cl nmero de ccsllcs que tene.
Ln el artculo anterior del Manual de Jaascript empezamos a explicar el concepto de array y su utilizacin en Jaascript. Ln
este artculo amos a continuar con el tema, mostrando el uso de su propiedad length.
1odos los arrays en jaascript, aparte de almacenar el alor de cada una de sus casillas, tambin almacenan el nmero de
posiciones que tienen. Para ello utilizan una propiedad del objeto array, la propiedad length. \a eremos en objetos qu es
una propiedad, pero para nuestro caso podemos imaginarnos que es como una ariable, adicional a las posiciones, que
almacena un nmero igual al nmero de casillas que tiene el array.
Para acceder a una propiedad de un objeto se ha de utilizar el operador punto. Se escribe el nombre del array que queremos
acceder al nmero de posiciones que tiene, sin corchetes ni parntesis, seguido de un punto y la palabra length.
var miArray = new Array()
miArray[0] = 155
miArray[1] = 499
miArray[2] = 65
document.write("Longitud del array: " + miArray.length)
Lste cdigo imprimira en pantalla el nmero de posiciones del array, que en este caso es 3. Recordamos que un array con 3
posiciones abarca desde la posicin 0 a la 2.
Ls muy habitual que se utilice la propiedad length para poder recorrer un array por todas sus posiciones. Para ilustrarlo
amos a er un ejemplo de recorrido por este array para mostrar sus alores.
for (i=0;i<miArray.length;i++){
document.write(miArray[i])
}
lay que ijarse que el bucle or se ejecuta siempre que i alga menos que la longitud del array, extrada de su propiedad
length.
Ll siguiente ejemplo nos serira para conocer mejor los recorridos por los arrays, el uncionamiento de la propiedad length y
la creacin dinamica de nueas posiciones. Vamos a crear un array con 2 posiciones y rellenar su alor. Posteriormente
introduciremos un alor en la posicin 5 del array. linalmente imprimiremos todas las posiciones del array para er lo que
pasa.
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posicin " + i + " del array: " + miArray[i])
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
49
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
}
Ll ejemplo es sencillo. Se puede apreciar que hacemos un recorrido por el array desde 0 hasta el nmero de posiciones del
array ,indicado por la propiedad length,. Ln el recorrido amos imprimiendo el nmero de la posicin seguido del
contenido del array en esa posicin. Pero podemos tener una duda al preguntarnos cual sera el nmero de elementos de este
array, ya que lo habamos declarado con 2 y luego le hemos introducido un tercero en la posicin 5. Al er la salida del
programa podremos contestar nuestras preguntas. Sera algo parecido a esto:
Posicin 0 del array: Colombia
Posicin 1 del array: Lstados Unidos
Posicin 2 del array: null
Posicin 5 del array: Brasil
Se puede er claramente que el nmero de posiciones es 6, de la 0 a la 5. Lo que ha ocurrido es que al introducir un dato en
la posicin 5, todas las casillas que no estaban creadas hasta la quinta se crean tambin.
Las posiciones de la 2 a la 4 estan sin inicializar. Ln este caso nuestro naegador ha escrito la palabra "*$$ para expresar esto,
pero otros naegadores podran utilizar la palabra undeined. \a eremos mas adelante qu es este null y dnde lo podemos
utilizar, lo importante ahora es que comprendas cmo trabajan los arrays y los utilices correctamente.
Podemos er el eecto de este script en tu naegador en una pagina a parte.
Continuaremos el tema de arrays en la siguiente entrega de este manual: Arrays multidimensionales.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
c5D56 !%%,E' +"*#/)/+&-'/$-,*&'
\emos qu son los crrcys multdmensoncles (crrcys de mcs de unc dmenson) y como utlzcrlos.
Ademcs explccmos como ncclzcr crrcys en su declcrccon.
Como estamos iendo, los arrays son bastante importantes en Jaascript y tambin en la mayora de los lenguajes de
programacin. Ln concreto ya hemos aprendido a crear arrays y utilizarlos en artculos anteriores del Manual de Jaascript.
Pero aun nos quedan algunas cosas importantes que explicar, como son los arrays de arias dimensiones.
Los arrays multidimensionales son un estructuras de datos que almacenan los alores en mas de una dimensin. Los arrays
que hemos isto hasta ahora almacenan alores en una dimensin, por eso para acceder a las posiciones utilizamos tan solo
un ndice. Los arrays de 2 dimensiones guardan sus alores, por decirlo de alguna manera, en ilas y columnas y por ello
necesitaremos dos ndices para acceder a cada una de sus posiciones.
Dicho de otro modo, un array multidimensional es como un contenedor que guardara mas alores para cada posicin, es
decir, como si los elementos del array ueran a su ez otros arrays.
Ln Jaascript no existe un autntico objeto array-multidimensinal. Para utilizar estas estructuras podremos deinir arrays que
donde en cada una de sus posiciones habra otro array. Ln nuestros programas podremos utilizar arrays de cualquier
dimensin, eremos a continuacin cmo trabajar con arrays de dos dimensiones, que seran los mas comunes.
Ln este ejemplo amos a crear un array de dos dimensiones donde tendremos por un lado ciudades y por el otro la
temperatura media que hace en cada una durante de los meses de inierno.
var temperaturas_medias_ciudad0 = new Array(3)
temperaturas_medias_ciudad0[0] = 12
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
50
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
var temperaturas_medias_ciudad1 = new Array (3)
var temperaturas_medias_ciudad2 = new Array (3)
Con las anteriores lneas hemos creado tres arrays de 1 dimensin y tres elementos, como los que ya conocamos. Ahora
crearemos un nueo array de tres elementos e introduciremos dentro de cada una de sus casillas los arrays creados
anteriormente, con lo que tendremos un array de arrays, es decir, un array de 2 dimensiones.
var temperaturas_cuidades = new Array (3)
temperaturas_cuidades[0] = temperaturas_medias_ciudad0
Vemos que para introducir el array entero hacemos reerencia al mismo sin parntesis ni corchetes, sino slo con su nombre.
Ll array temperaturas_cuidades es nuestro array bidimensinal.
1ambin es interesante er cmo se realiza un recorrido por un array de dos dimensiones. Para ello tenemos que hacer un
bucle que pase por cada una de las casillas del array bidimensional y dentro de stas hacer un nueo recorrido para cada una
de sus casillas internas. Ls decir, un recorrido por un array dentro de otro.
Ll mtodo para hacer un recorrido dentro de otro es colocar un bucle dentro de otro, lo que se llama un bucle anidado. Ln
este ejemplo amos a meter un bucle lOR dentro de otro. Ademas, amos a escribir los resultados en una tabla, lo que
complicara un poco el script, pero as podremos er cmo construir una tabla desde Jaascript a medida que realizamos el
recorrido anidado al bucle.
document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");
for (i=0;i<temperaturas_cuidades.length;i++){
document.write("<tr>")
document.write("<td><b>Ciudad " + i + "</b></td>")
for (j=0;j<temperaturas_cuidades[i].length;j++){
document.write("<td>" + temperaturas_cuidades[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table>")
Lste script resulta un poco mas complejo que los istos anteriormente. La primera accin consiste en escribir la cabecera de
la tabla, es decir, la etiqueta 1ABLL junto con sus atributos. Con el primer bucle realizamos un recorrido a la primera
dimensin del array y utilizamos la ariable i para llear la cuenta de la posicin actual. Por cada iteracin de este bucle
escribimos una ila y para empezar la ila abrimos la etiqueta 1R. Ademas, escribimos en una casilla el numero de la
ciudad que estamos recorriendo en ese momento. Posteriormente ponemos otro bucle que a recorriendo cada una de las
casillas del array en su segunda dimensin y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro
de su etiqueta 1D. Una ez que acaba el segundo bucle se han impreso las tres temperaturas y por lo tanto la ila esta
terminada. Ll primer bucle contina repitindose hasta que todas las ciudades estan impresas y una ez terminado cerramos
la tabla.
Podemos er el ejemplo en marcha y examinar el cdigo del script entero.
c5D5456 7-/8/,*/2,8/9- )& ,%%,E'
Para terminar con el tema de los arrays amos a er una manera de inicializar sus alores a la ez que lo declaramos, as
podemos realizar de una manera mas rapida el proceso de introducir alores en cada una de las posiciones del array.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
51
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Ll mtodo normal de crear un array imos que era a tras del objeto Array, poniendo entre parntesis el nmero de casillas
del array o no poniendo nada, de modo que el array se crea sin ninguna posicin. Para introducir alores a un array se hace
igual, pero poniendo entre los parntesis los alores con los que deseamos rellenar las casillas separados por coma.
Veamoslo con un ejemplo que crea un array con los nombres de los das de la semana.
var diasSemana = new Array("Lunes","Martes","Mircoles,","Jueves","Viernes","Sbado","Domingo")
Ll array se crea con casillas, de la 0 a la 6 y en cada casilla se escribe el dia de la semana correspondiente ,Lntre comillas
porque es un texto,.
Ahora amos a er algo mas complicado, se trata de declarar el array bidimensional que utilizamos antes para las
temperaturas de las ciudades en los meses en una sola lnea, introduciendo los alores a la ez.
var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))
Ln el ejemplo introducimos en cada casilla del array otro array que tiene como alores las temperaturas de una ciudad en
cada mes.
Jaascript todaa tiene una manera mas resumida que la que acabamos de er, que explicamos en el primer artculo donde
tratamos los arrays. Para ello simplemente escribimos entre corchetes los datos del array que estamos creando. Para acabar
amos a mostrar un ejemplo sobre cmo utilizar esta sintaxis para declarar arrays de mas de una dimensin.
var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien",
"mal"], "acabo"], 2, 5];
Ln este ejemplo hemos creado un array muy poco uniorme, porque tiene casillas con contenido de simples enteros y otras
con contenido de cadena y otras que son otros arrays. Podramos acceder a algunas de sus casillas y mostrar sus alores de
esta manera:
alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])
Con esto hemos llegado al in de los artculos que tratan sobre arrays en Jaascript y ahora podemos continuar con una
pequena pausa y consejos que endran bien para mejorar nuestra relacin con este lenguaje de programacin.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
52
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
!%"1, J7
50K=#$#; % ,;1% 0"(&,"%
0%"1, 9,= L%*:%= 9,
-%.%;'"(01
Con estos articulos termInaremos la prImera parte del manual de JavascrIpt de
0esarrolloWeb.com. Aqui veremos por donde contInuar estas explIcacIones y algunos
temas de Inters como el control de errores en los programas.
e5456 Z,"', E 8$-'&H$' :,1,'8%/;#
Hccemos unc pcusc en el mcnucl de 1cvcscrpt pcrc o]recer unc sere de conse]os tles.
lasta aqu hemos isto la mayor parte de la sintaxis y orma de uncionar de el lenguaje Jaascript. Ahora podemos escribir
scripts simples que hagan uso de ariables, unciones, arrays, estructuras de control y toda clase de operadores. Con todo
esto conocemos el lenguaje, pero aun queda mucho camino por delante para dominar Jaascript y saber hacer todos los
eectos posibles en paginas web, que en deinitia es lo que interesa.
De todos modos, este manual nos lo hemos tomado con mucha calma, con intencin de que las personas que no estn
amiliarizadas con el mundo de la programacin puedan tambin tener acceso al lenguaje y aprendan las tcnicas basicas que
permitiran arontar uturos retos en la programacin. Lsperamos entonces que la lectura del manual haya sido proechosa
para los mas inexpertos y que ahora puedan entender con acilidad las siguientes lecciones o ejemplos, ya que conocen las
bases sobre las que estan implementados.
Antes de acabar, amos a dar una serie de consejos a seguir a la hora de programar nuestros scripts, que nos pueden ayudar a
hacernos la ida mas acil. Algunos consejos son nueos e importantes, otros se han senalado con anterioridad, pero sin
duda iene bien recordar.
e545456 B/'#/-#$' -,1&0,)$%&'
Lo primero importante en senalar es que Jaascript es un lenguaje muy dinamico y que ha sido implementado poco a poco, a
medida que salan nueos naegadores. Si pensamos en el Netscape 2, el primer naegador que inclua Jaascript, y el
Netscape 6 o Internet Lxplorer 6 nos daremos cuenta que han pasado un mundo de noedades entre ellos. Jaascript ha
cambiado por lo menos tanto como los naegadores y eso representa un problema para los programadores, porque tienen
que estar al tanto de las distintas ersiones y la manera de uncionar que tienen.
>*#2$5,?$0"% a da de hoy todaa las dierencias entre los naegadores antiguos y los nueos es todaa mas patente. Incluso, ahora que
aparece el l1ML 5, existen muchos otros usos donde Jaascript tiene alidez.
Las bases de jaascript, sobre las que hemos hablado hasta ahora, no han cambiado practicamente nada. Slo en algunas
ocasiones, que hemos senalado segn las conocamos -como los arrays por ejemplo-, el lenguaje ha eolucionado un poco.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
53
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Sin embargo, a medida que nueas tecnologas como el Dl1ML se desarrollaban, los naegadores han ariado su manera
de manejarlas.
Nuestro consejo es que esteis al tanto de las cosas que uncionan en unos u otros sistemas y que programis para que
uestras paginas sean compatibles en el mayor nmero de naegadores. Para procurar esto ltimo es muy aconsejable probar
las paginas en arias plataormas distintas. 1ambin es muy til dejar de lado los ltimos aances, es decir, no ir a la ltima,
sino ser un poco conseradores, para que las personas que han actualizado menos el browser puedan tambin isualizar los
contenidos.
e545>56 I$-'&H$' ;,%, ?,8&% "- 89)/0$ '&-8/**$ E CN8/* )& +,-#&-&%
Ahora amos a dar una serie de consejos para que el cdigo de nuestros scripts sea mas claro y libre de errores. Muchos de
ellos ya los hemos senalado y somos libres de aplicarlos o no, pero si lo hacemos nuestra tarea como programadores puede
ser mucho mas agradable, no slo hoy, sino tambin el da que tengamos que reisar los scripts en su mantenimiento.
! Utiliza comentarios habitualmente para que lo que estas haciendo en los scripts pueda ser recordado por ti y
cualquier persona que tenga que leerlos mas adelante.
! 1en cuidado con el ambito de las ariables, recuerda que existen ariables globales y locales, que incluso pueden
tener los mismos nombres y conoce en cada momento la ariable que tiene alidez.
! Lscribe un cdigo con suiciente claridad, que se consigue con saltos de lnea despus de cada instruccin, un
sangrado adecuado ,poner margenes a cada lnea para indicar en qu bloque estan incluidas,, utilizar las llaes
siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar.
! Aplica un poco de consistencia al manejo de ariables. Declara las ariables con ar. No cambies el tipo del dato
que contiene ,si era numrica no pongas luego texto, por ejemplo,. Dales nombres comprensibles para saber en
todo momento qu contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que
indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las ariables de texto pueden empezar por
una s ,de String,, las ariables numricas pueden empezar por una n o las boleanas por una b.
! Prueba tus scripts cada poco a medida que los as programando. Puedes escribir un trozo de cdigo y probarlo
antes de continuar para er que todo unciona correctamente. Ls mas acil encontrar los errores de cdigo en
bloques pequenos que en bloques grandes.
Ln el resto de esta primera parte del manual de Jaascript amos a er un par de cosas tambin undamentales en el trabajo
del da a da con este lenguaje, como son la deteccin de errores. Ademas, os dejamos unas reerencias importantes para
continuar con el aprendizaje:
! Manual de Jaascript II : la segunda parte de este manual abordara usos de Jaascript para control de los elementos
de las paginas web.
! Videotutorial de Jaascript : estamos publicando una serie de ideotutoriales de Jaascript que te encantaran si
quieres aprender por la practica.
! Jaascript a ondo : todo lo que tiene que er con Jaascript lo encontraras en esta seccin de Desarrollo\eb.com.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
e5>56 R%,#,+/&-#$ )& &%%$%&' &- H,1,'8%/;#
\cmos c explccr los errores comunes que podemos cometer y como evtcrlos y depurcrlos. Ademcs
veremos unc pequec concluson c lc prmerc pcrte del mcnucl.
lemos terminado ya de explicar todo el contenido de la primera parte del manual de jaascript, pero aun tenemos algunas
cosas importantes que tratar. Ln concreto en este artculo amos a explicar los errores comunes que podemos cometer y
cmo eitarlos y depurarlos. Ademas eremos una pequena conclusin a esta parte del manual.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
54
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
e5>5456 M%%$%&' 8$+"-&' &- :,1,'8%/;#
Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de ejecucin, los emos a continuacin.
Lrrores de sintaxis ocurren por escribir de manera errnea las lneas de cdigo, equiocarse a la hora de escribir el nombre
de una estructura, utilizar incorrectamente las llaes o los parntesis o cualquier cosa similar. Lstos errores los indica
jaascript a medida que esta cargando los scripts en memoria, lo que hace siempre antes de ejecutarlos, como se indic en
los primeros captulos. Cuando el analizador sintactico de jaascript detecta un error de estos se presenta el mensaje de
error.
Lrrores de ejecucin ocurren cuando se estan ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una
uncin que no ha sido deinida. jaascript no indica estos errores hasta que no se realiza la llamada a la uncin.
La manera que tiene jaascript de mostrar un error puede ariar de un naegador a otro. Ln ersiones antiguas se mostraba
una entanita con el error y un botn de aceptar, tanto en Internet Lxplorer como en Netscape. Ln la actualidad los errores
de jaascript permanecen un poco mas ocultos al usuario. Lsto iene bien, porque si nuestras paginas tienen algn error en
alguna plataorma no sera muy molesto para el usuario que en muchas ocasiones ni se dara cuenta. Sin embargo para el
programador puede ser un poco mas molesto de reisar y se necesitara conocer la manera de que se muestren los errores
para que puedan ser reparados.
Ln ersiones de Internet Lxplorer mayores que la 4 se muestra el error en la barra de estado del naegador y se puede er
una descripcin mas grande del error si le damos un doble click al icono de alerta amarillo que aparece en la barra de estado.
Ln Netscape aparece tambin un mensaje en la barra de estado que ademas nos indica que para mostrar mas inormacin
debemos teclear "jaascript:" en la barra de direcciones ,donde escribimos las URL para acceder a las paginas,. Con eso
conseguimos que aparezca la Consola jaascript, que nos muestra todos los errores que se encuentran en las paginas.
1ambin podemos cometer allos en la programacin que hagan que los scripts no uncionen tal y como deseabamos y que
jaascript no detecta como errores y por lo tanto no muestra ningn mensaje de error.
Por dejarlo claro amos a er un ejemplo en el que nuestro programa puede no uncionar como deseamos sin que jaascript
orezca ningn mensaje de error. Ln este ejemplo trataramos de sumar dos ciras pero si una de las ariables es de tipo
texto podramos encontrarnos con un error.
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2
Cuanto ale la ariable suma Como muchos ya sabis, la ariable suma ale "2342" porque al intentar sumar una ariable
numrica y otra textual, se tratan a las dos como si ueran de tipo texto y por lo tanto, el operador - se aplica como una
concatenacin de cadenas de caracteres. Si no estamos al tanto de esta cuestin podramos tener un error en nuestro script
ya que el resultado no es el esperado y ademas el tipo de la ariable suma no es numrico sino cadena de caracteres.
e5>5>56 M1/#,% &%%$%&' 8$+"-&'
Vamos a er ahora una lista de los errores tpicos cometidos por inexpertos en la programacin en general y en jaascript en
particular, y por no tan inexpertos.
Utilizar ~ en expresiones condicionales en lugar de ~~ es un error dicil de detectar cuando se comete, si utilizamos un
solo igual lo que estamos haciendo es una asignacin y no una comparacin para er si dos alores son iguales.
No conocerse la precedencia de operadores y no utilizar parntesis para agrupar las operaciones que se desea realizar. Ln
este caso nuestras operaciones pueden dar resultados no deseados.
Usar comillas dobles y simples errneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente,
con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y iceersa.
Olidarse de cerrar una llae o cerrar una llae de mas.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
55
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
Colocar arias sentencias en la misma lnea sin separarlas de punto y coma. Lsto suele ocurrir en los manejadores de
eentos, como onclick, que eremos mas adelante.
Utilizar una ariable antes de inicializarla o no declarar las ariables con ar antes de utilizarlas tambin son errores comunes.
Recuerda que si no la declaras puedes estar haciendo reerencia a una ariable global en lugar de una local.
Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posicin 0.
e5>5D56 B&;"%,% &%%$%&' H,1,'8%/;#
Cualquier programa es susceptible de contener errores. jaascript nos inormara de muchos de los errores de la pagina: los
que tienen relacin con la sintaxis y los que tienen lugar en el momento de la ejecucin de los scripts a causa de
equiocarnos al escribir el nombre de una uncin o una ariable. Sin embargo, no son los nicos errores que nos podemos
encontrar, tambin estan los errores que ocurren sin que jaascript muestre el correspondiente mensaje de error, como
imos anteriormente, pero que hacen que los programas no uncionen como esperabamos.
!"#$% Para aprender a utilizar las herramientas de deteccin de errores Jaascript mas populares, recomendamos especialmente er el
ideotutorial sobre detectar errores Jaascript en paginas web.
Para todo tipo de errores, unos mas aciles de detectar que otros, debemos utilizar alguna tcnica de depuracin que nos
ayude a encontrarlos. Lenguajes de programacin mas potentes que el que tratamos ahora incluyen importantes
herramientas de depuracin, pero en jaascript debemos contentarnos con una rudimentaria tcnica. Se trata de utilizar una
uncin predeinida, la uncin alert,, que recibe entre parntesis un texto y lo muestra en una pequena entana que tiene un
botn de aceptar.
Con la uncin alert,, podemos mostrar en cualquier momento el contenido de las ariables que estamos utilizando en
nuestros scripts. Para ello ponemos entre parntesis la ariable que deseamos er su contenido. Cuando se muestra el
contenido de la ariable el naegador espera a que apretemos el botn de aceptar y cuando lo hacemos contina con las
siguientes instrucciones del script.
Lste es un sencillo ejemplo sobre cmo se puede utilizar la uncin alert,, para mostrar el contenido de las ariables.
var n_actual = 0
var suma = 0
while (suma<300){
n_actual ++
suma += suma + n_actual
alert("n_actual vale " + n_actual + " y suma vale " + suma)
}
Con la uncin alert,, se muestra el contenido de las dos ariables que utilizamos en el script. Algo similar a esto es lo que
tendremos que hacer para mostrar el contenido de las ariables y saber cmo estan uncionando nuestros scripts, si todo a
bien o hay algn error.
e5>5F56 I$-8*"'/9-
lasta aqu hemos conocido la sintaxis jaascript en proundidad. Aunque aun nos quedan cosas importantes de sintaxis, la
isin que has podido tener del lenguaje sera suiciente para enrentarte a los problemas mas undamentales. Ln adelante
presentaremos otros reportajes para aprender a utilizar los recursos con los que contamos a la hora de hacer eectos en
paginas web.
Veremos la jerarqua de objetos del naegador, cmo construir nuestros propios objetos, las unciones predeinidas de
jaascript, caractersticas del l1ML Dinamico, trabajo con ormularios y otras cosas importantes para dominar todas las
posibilidades del lenguaje.
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
56
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
1odo ello en nuestro manual de Jaascript II y en el 1aller de Jaascript.
!"#$%&'( *(" +,-&.' !/-.' !'01".2
e5D56 I$-'&H$' ;,%, &'8%/@/% 89)/0$ :,1,'8%/;#
En este crtculo puedes encontrcr vcros conse]os bcstcnte nterescntes c lc horc de proyrcmcr codyo
1cvcscrpt.
Si estas dando tus primeros pasos en Jaacript y estas empezando ya a ser sucio y desordenado... No tienes excusa da un giro
para escribir el cdigo ordenado y todo sera mas sencillo.
Los oros estan llenos de peticiones de inormacin sobre Ajax, DOM y como se usan algunas libreras o eectos. lay una
extraordinaria cantidad de inormacin, scripts, libreras que estan siendo desarrollados, blogs y nueos sitios especializados
en esta tematica, slo necesitas un poco de tiempo y echarle un istazo... es muy acil los mejores los encuentras en
Digg.com o en del.icio.us, se acabaron aquellos das en el que Jaascript y el Dl1ML se conirtieron en persona non grata
como habilidad principal en tu CV.
La gran mayora de cdigo Jaascript es hoy en dia mucho mas limpio que en la "era" Dl1ML.
Ahora es un buen momento para conertirte en un entusiasta de Jaascript. Aunque algunos deectos que ocurrieron tiempo
atras se repiten sin embargo.
Aqu os dejo una series de consejos que os hara mas sencillo mantener tu cdigo Jaascript ordenado, algunos consejos son
demasiado obios pero todos sabemos que el hombre es el nico animal que...
e5D5456 I$-'&%1, *, '/-#,\/' E &'#%"8#"%, )& #" 89)/0$ */+;/, E $%)&-,),
Lsto signiica que guardes por ejemplo un lmite de longitud de lnea ,80 caracteres, y que programes unciones
razonablemente pequenas. Un allo es pensar que en una uncin larga lo podemos hacer todo.
1ener un tamano razonable para tus unciones signiica que las podras reutilizar cuando amplies el cdigo, tampoco seas
extremista y hagas unciones de una o dos lneas esto puede llegar a ser mas conuso que usar una nica uncin.
Lste es un ejemplo que muestra cual es la justa medida en cuanto al tamano de las unciones y la diisin de las tareas:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
Puedes optimizar esta uncin separando cada tarea con su propia uncin:
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
57
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
}
function printWindow(){
window.print();
}
function closeWindow() {
window.close();
}
function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}
e5D5>56 G#/*/2, /-#&*/0&-#&+&-#& *$' -$+@%&' )& 1,%/,@*&' E C"-8/$-&'
Lsta es un tcnica esencial de programacin, utiliza nombres de ariables y unciones que sean totalmente descriptios e
incluso otra persona pueda llegar a plantearse que uncin realizan antes de er el cdigo.
Recuerda que es correcto el uso de guiones o maysculas para concatenar dierentes palabras, en este caso concreto de es
mas tpico el uso de maysculas debido a la sintaxis del lenguaje, ,ej. getLlementsBy1agName,,,.
CambioFormatoFecha();
cambio_formato_fecha();
e5D5D56 I$+&-#, &* 89)/0$
Gracias a los comentarios puedes librarte de mas de un quebradero de cabeza, es mejor resoler el problema una nica ez.
Cmo puedes comprobar en cualquier libro de programacin cada lnea tiene comentarios explicando su objetio.
e5D5F56 B/C&%&-8/, *,' 1,%/,@*&' )&;&-)/&-)$ )& '" /+;$%#,-8/,
Lste paso es simple: Coloca aquellas ariables que son usadas durante todo el script en la cabecera del cdigo, de esta
maneras siempre sabras donde encontrar estas ariables que son las que determinan el resultado de nuestro cdigo.
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;
// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#
tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
58
!" $%&'( )*"+) ,)() ),(%-+%( ) .)/%( 0%12
0003+%2)(('44'0%13/'$
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
}
e5D5J56 Y&;,%, &* #&\#$ )&* 89)/0$
Puedes separar el texto del cdigo, utilizando un documento llamado texto.js en ormato JSON.
Un ejemplo que unciona muy bien podra ser:
var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'noQAmessage' : 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},
'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}
};
Lsto permitira a cualquiera que no es programador traducir el texto del script, cambiando unicamente las etiquetas sin
necesidad de acceder al cdigo.
e5D5L56 B$8"+&-#, &* 89)/0$
Lscribe una buena documentacion de tu script , librera o eecto. Una buena documentacin da calidad al cdigo, sino
preguntate porque existe la clasica documentacin en cualquier API con todas las posibles propiedades y parametros, pero
sin duda lo mejor de todo es explicar con ejemplos que contienen una lista de posibilidades.
!"#$%&'( *(" +1/& 3&#,."".2
5)-")4 +% ,('6()$)/78- %- 9):)2/(7,;< 0003+%2)(('44'0%13/'$=$)-")4%2=>?=
59

Manual Programacion Javascript Parte1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual Programacion Javascript Parte1

Diunggah oleh

Hak Cipta:

Format Tersedia

!" $%&'( )*"+) ,)() ),(%-+%( ) .

Anda mungkin juga menyukai