TEMA 4.

Introduccin a la programacin con el lenguaje JavaScript

Tecnologas de la Informacin 1Bachillerato

IES Zurbarn (Badajoz)

Sesin 7
Estructuras de control repetitivas: bucles for, !ile " do## !ile

Qu es un B ucle
Un bucle no es ms que la repeticin de una o varias s entencias mientras s e cumpla una condicin.

E s una de las estructuras ms repetidas en programacin. Bucle FOR Bucle WHILE Bucle DO WHILE

Existen diferentes tipos de bucles. Veremos los tres ms usados:

Cada uno de ellos est indicado para un tipo de iteracin( ! distinto" aunque con los tres podemos lle#ar a conse#uir el mismo ob$eti%o. &a eleccin de uno u otro depende del pro#ramador.

(*)

Acci n ! e"ecto de iterar (re#etir)

! entencia FOR

El bucle FOR se utili'a para repetir una o ms instrucciones un n(mero fi$o de %eces.
$ij%&ono' en (aria' co'a')

for (inicializacin;condicin;actualizacin) { sentencias a ejecutar en cada repeticin }

*ara e&#ezar (e&o' co&o una' llaves encierran la' accione' ('entencia') +ue +uere&o' realizar &ientra' 'e cu&#la la condici n. E'ta' lla(e' han de colocar'e 'ie&#re, e-ce#to en el ca'o de +ue ' lo ha!a una in'trucci n co&o acci n a realizar, +ue 'on o#cionale'.

.b'er(a co&o el bucle $%& tiene tre' #arte' encerrada' entre #ar%nte'i') a' /a #ri&era e' la iniciali(acin, +ue tiene e"ecto 'ola&ente ante' de co&enzar la #ri&era re#etici n del bucle. En e'ta #arte 'e 'uele colocar la (ariable +ue utilizare&o' #ara lle(ar la cuenta de la' (ece' +ue 'e ejecuta el bucle ((ariable de control). b' /a 'e0unda #arte e' la condicin, +ue 'e e(aluar cada (ez +ue co&ience la re#etici n del bucle. 1ontiene una e-#re'i n condicional, +ue de cu&#lir'e, #er&ite la ejecuci n de la' accione' encerrada' entre lla(e'. c' *or 2lti&o tene&o' la actuali(acin, +ue 'ir(e #ara indicar lo' ca&bio' +ue +uera&o' ejecutar en la (ariable de control cada (ez +ue ter&ina la re#etici n del bucle ! ante' de co&#robar 'i 'e debe 'e0uir ejecutando.

! entencia FOR
E"emplo Veamos un e"emplo que use el bucle FOR #
$3jate en la (ariable i. Mediante e'ta (ariable &aneja&o' todo el bucle $%&# El #ar%nte'i' no' indica el "unciona&iento del bucle) a' i)*) la (ariable e' inicializada a 4 ((alor inicial). b' i+),*. e'ta e' la condici n. El bucle 'e re#etir &ientra' i 'ea &enor o i0ual +ue 14. c' i--) acci n a realizar una (ez ter&inada la iteraci n ! ante' de la co&#robaci n de la condici n. En e'te ca'o, incre&entar en 1 la (ariable de control.

var i for (i=0;i<=10;i++) { document.write('Vuelta ' + i) }

Vamos a %er como ser)a la e$ecucin

Repeticin ! & ' ( ) * + , !" !! !& Valor i 0 1 2 3 4 5 6 7 8 9 10 11 i< !"# SI SI SI SI SI SI SI SI SI SI SI NO $alida %antalla Vuelta 0 Vuelta 1 Vuelta 2 Vuelta 3 Vuelta 4 Vuelta 5 Vuelta 6 Vuelta 7 Vuelta 8 Vuelta 9 Vuelta 10 ./0

! entencia FOR
E"emplos *ener en cuenta que el bucle FOR est diri#ido por la %ariable que aparece en el par+ntesis (en el ejemplo anterior, la variable i!. ,ara incrementar o decrementar esta %ariable" usamos los si#uientes operadores:

Autoincremento: i++
incrementamos la variable

Autodecremento: i--

Incrementar en varias unidades: i+=x, donde x es el nmero de unidades que D ecrementar en varias unidades: i-=x, donde x es el nmero de unidades que
decrementamos la variable for (i=343;i>=10;i--) { document.write(i) }
En e'te otro, e'cribi&o' lo' n2&ero' entero' co&#rendido' entre el 565 ! el 14 de'cendente&ente.

for (i=1;i<=1000;i+=2) { document.write(i) }

En e'te eje&#lo, e'cribi&o' lo' n2&ero' i&#are' co&#rendido' entre el 1 ! el 1444. *ara ello 'e incre&enta i en do' unidade' cada (uelta.

E"ercicio $%&'%
!"#i$i# u% &#'(#a)a *ue )ue!t#e la +#a!e ,Cabecera h- !e(ui.' .el %/)e#'0 1a! +#a!e! .e$e% e!ta# +'#)atea.a! "'% la! eti*ueta! a.e"ua.a!0 l #e!ulta.' .e$e !e# el !i(uie%te2
*ara realizar e'te eje&#lo nece'itar' 'aber co&o 'e unen cadena' de caractere' u'ando document# rite. *ara hacerlo, ba'ta con utilizar el o#erador 7 entre la' cadena' de caractere' +ue +uere&o' unir. *or eje&#lo) var te-to8 te-to 9 : conti0o :8 document# rite.:Sue;o : - te-to - : #rince'a.:' E'cribir en #antalla) Sue/o contigo princesa

E"ercicio $%&&%
3a"e# u% &#'(#a)a *ue &i.a &'# te"la.' t#e! 4al'#e!2 el %/)e#' .e "'lu)%a! .e u%a ta$la 56 la altu#a 5 a%"7u#a (e% &i8el!) .e !u! "el.a!0 9%a 4e: te"lea.'! e!t'! 4al'#e!6 el &#'(#a)a &i%ta#; e% la &;(i%a <e$ u%a ta$la 3=>1 .e u%a +ila &'# el %? .e "'lu)%a! te"lea.a!0 E" em pl o# n( col um nas --> 4 c o l u m n a s al t o --> 5 0 p i x e l s anc)o --> 5 0 p i x e l s
E l c d i g o Ja v a s c r i p t d e b e s e r c a p a z d e e s c r i b i r : < ta b le b o r d e r = 0 c e l l s p a c i n g = ! b g c o l o r = b l a c " # i d t $ = ! 0 0 > < tr b g c o l o r = # $ i t e $ e i g $ t = 5 0 > < td # i d t $ = 5 0 > % n b s p &< 'td > < td # i d t $ = 5 0 > % n b s p &< 'td > hacer e'to con un bucle for < td # i d t $ = 5 0 > % n b s p &< 'td > < td # i d t $ = 5 0 > % n b s p &< 'td > < 'tr > otra' do' 'entencia' document# rite de'#u%' del bucle "or < 'ta b le >
do' 'entencia' document# rite ante' del bucle "or.

E"ercicio $%&*%
>'.i+i"a el e@e#"i"i' a%te#i'# &a#a *ue la! "'lu)%a! i)&a#e! te%(a% u% +'%.' %e(#' 5 la! &a#e! +'%.' $la%"'0 E" em pl o# n( col um nas --> 4 c o l u m n a s al t o --> 5 0 p i x e l s anc)o --> 5 0 p i x e l s
E l c d i g o Ja v a s c r i p t d e b e s e r c a p a z d e e s c r i b i r :
do' 'entencia' document# rite < ta b le b o r d e r = 0 c e l l s p a c i n g = ! b g c o l o r = b l a c " # i d t $ = ! 0 0 > ante' del bucle "or. < tr $ e i g $ t = 5 0 > < td # i d t $ = 5 0 b g c o l o r = b l a c " > % n b s p &< 'td > < td # i d t $ = 5 0 b g c o l o r = # $ i t e > % n b s p &< 'td > hacer e'to con un bucle for < td # i d t $ = 5 0 b g c o l o r = b l a c " > % n b s p &< 'td > < td # i d t $ = 5 0 b g c o l o r = # $ i t e > % n b s p &< 'td > < 'tr > otra' do' 'entencia' document# rite de'#u%' del bucle "or < 'ta b le > Si el re'to de la di(i'i n de cual+uier n2&ero entre do' e' 1, 'e dice +ue el n2&ero e' par. Si da 4, el n2&ero e' impar. En <a(aScri#t 'e u'a el operador 0 #ara obtener el re'to de una di(i'i n. *or eje&#lo, 56=6>= dar3a 4, lo +ue no' dice +ue el n2&ero 56=6 e' #ar. En el ejercicio debe&o' di(idir la variable de control entre = ! co&#robar con un if 'i e' i0ual o no a 1. En un ca'o e'cribi&o' una l3nea ?td ... b0color9@blacA@B ... ! en el otro con b0color9@Chite@. E'to 'e hace dentro del bucle for.

B ucle WHILE

/&012

Estos bucles se utili'an cuando queremos repetir la e"ecucin de unas s entencias un n+mero inde,inido de veces " s iempre -ue s e cumpla una condicin.. Es ms sencillo de comprender que el bucle FOR " pues no incorpora en la misma l)nea la iniciali'acin de las %ariables" su condicin para se#uir e$ecutndose - su actuali'acin. .lo se indica" como %eremos a continuacin" la condicin que se tiene que cumplir para que se realice una iteracin.
var i; i=1; w1ile (i < 10) { document.write(' !t'5 e% la 4uelta2 ' 2 i 2 '<$#>'); i22; }

1o&o (e&o', e'te bucle e' id%ntico al #ri&er "or +ue e'tudia&o' ante', aun+ue co&o #ode&o' a#reciar, &ucho &' 'i&#le. En realidad, la co&#lejidad de "or 'e ha de'co&#ue'to en #arte' 'e#arada' 'encilla'.

B ucle WHILE

/*012

/,ara qu+ dos bucles si" al fin - al cabo" 0acen lo mismo1 &a respuesta se encuentra en la definicin de cada bucle. En el caso del bucle FOR " iteramos siempre un n(mero fi$o de %eces. Esto no ocurre con el bucle WHILE " donde el n(mero de iteraciones (veces que se repiten las intrucciones del cuerpo del bucle! es indeterminado: depende de las condiciones de e$ecucin del pro#rama. 2 pesar de todo" podemos 0acer que un bucle 345 itere un numero indefinido de %eces. Ello se consi#ue usando una sentencia if dentro del bucle FOR con la condicin de salida:
var %')$#e; for(;;) { %')$#e=&#')&t('AB)' te lla)a!C '6''); if (%')$#e=='i!#ael') 3rea4; }
Saldre&o' del bucle cuando 'e cu&#la la condici n de la 'entencia if. Sali&o' ejecutando la in'trucci n brea1

Bucle 'in inicializaci n, condici n de 'alida ni actualizaci n. E'ta&o' ante un bucle Din"inito@, 'in 'alida.

B ucle WHILE
E"emplo

/1012

var color6 color 7 886 3)ile (color 97 8rojo8! 4 color 7 prompt(8D ame un color8! 5
En e'te eje&#lo, el #ro0ra&a #ide al u'uario el no&bre de un color. Ea'ta +ue el u'uario no e'criba la #alabra rojo, el #ro0ra&a no dejar de #edirle no&bre' de colore'. *ara ejecutar un bucle co&o %'te, primero tene&o' +ue iniciali(ar (darle un (alor inicial #ara +ue 'e #ueda realizar la #ri&era co&#araci n) la variable +ue (a&o' utilizar en la condici n de iteraci n del bucle. 1on la (ariable inicializada #ode&o' e'cribir el bucle. F'te, co&#robar 'i la (ariable color e' di'tinto de DrojoG. En ca'o a"or&ati(o, #edir otro color ! 'e (ol(er a re#etir el #roce'o. Sola&ente 'aldre&o' del bucle ! #or tanto del #ro0ra&a, cuando acerte&o' con la #alabra rojo.

E"ercicio $%&1%
D.a&ta el e@e#"i"i' 4011 utili:a%.' u% 3ucle w1ile e% 4e: .e u% $u"le +'#0

E"ercicio $%&$%
D.a&ta el e@e#"i"i' 4012 utili:a%.' u% 3ucle w1ile e% 4e: .e u% $u"le +'#0

E"ercicio $%&6%
!"#i$e u% &#'(#a)a e% Ea4aS"#i&t *ue "'%!i!ta e% a.i4i%a# u% %/)e#' &#e4ia)e%te i%t#'.u"i.' &'# te"la.' (@u(a.'# 1)0 l &#'(#a)a &e.i#; ta%t'! %/)e#'! "')' i%te%t'! e##B%e'! 7a(a el @u(a.'# 20 S'la)e%te te#)i%a#; "ua%.' el @u(a.'# 2 a"ie#te0 l &#'(#a)a .a#; &i!ta! al @u(a.'# 2 i%.i";%.'le !i !u %/)e#' e! )a5'# ' )e%'# *ue el %/)e#' a a.i4i%a#0
H'a do' (ariable') nu&Iadi(inar ! nu&. Jece'itar' un bucle !ile#

*i%n'a en la e-#re'i n condicional de deber' u'ar en el bucle. Ade&' nece'ita' una 'entencia if #ara decirle al ju0ador = 'i 'u n2&ero e' &a!or o &enor +ue el n2&ero adi(inar. a

H'ar la 'entencia alert #ara &o'trar un &en'aje al u'uario #or #antalla. Eje&#lo) alert(:El n2&ero e' &a!or:)8

B ucles DO%%WHILE

.e utili'a #eneralmente cuando no se sabe cuantas %ueltas dar el bucle. Es parecido al bucle 3)ile pero con la sutil diferencia de que sabemos se#uro que el bucle por lo menos s e e"ecutar7 una ve8.% Cualquier problema escrito con do%%%3)ile se puede escribir tambi+n utili'ando un bucle 3)ile. .intaxis:
do 2 'entencia' del bucle 3 !ile .condici n'
El bucle 'e ejecuta, al &eno', una (ez. Hna (ez ejecutada' la' 'entencia' encerrada' entre lla(e', 'e e(al2a la condici n. Si 'e cu&#le, 'e (uel(e a dar otra #a'ada. En ca'o contrario 'e 'ale del bucle..

E"ercicio $%&9%
D.a&ta# el e@e#"i"i' 40150 al $u"le FO00G3I1

B ucles anidados
2nidar un bucle consiste en meter es e bucle dentro de otro . &a anidacin de bucles es necesaria para 0acer determinados procesamientos un poco ms comple$os que los que 0emos %isto en los e$emplos - e$ercicios anteriores. Un bucle anidado tiene una estructura como la que si#ue:
/a ejecuci n "uncionar de la 'i0uiente &anera. *ara e&#ezar 'e inicializa el #ri&er bucle, con lo +ue la variable i (aldr 4 ! a continuaci n 'e inicializa el 'e0undo bucle, con lo +ue la variable j (aldr ta&bi%n 4. En cada iteraci n 'e i&#ri&e el (alor de la variable i, un 0ui n (GKG) ! el (alor de la variable j, co&o la' do' (ariable' (alen 4, 'e i&#ri&ir el te-to G4K4G en la #0ina Ceb.

for (i948i?148i77) 2 for (j948j?148j77) 2 document# rite(i - :4: - j)8

El bucle +ue e't anidado (&' hacia dentro) e' el +ue &' (ece' 'e ejecuta, en e'te eje&#lo, #ara cada iteraci n del bucle &' e-terno el 3 bucle anidado 'e ejecutar #or co&#leto una (ez, e' decir, har 'u' 14 iteracione'. En la #0ina Ceb 'e e'cribir3an e'to' (alore', en la #ri&era 3 iteraci n del bucle e-terno ! de'de el #rinci#io) *4* *4, *45 *46 *44 *4 7 *48 *47 *49 *4: *ara cada iteraci n del bucle e-terno 'e ejecutarn la' 14 iteracione' del bucle interno o anidado. Ee&o' (i'to la #ri&era iteraci n, ahora (a&o' a (er la' 'i0uiente' iteracione' del bucle e-terno. En cada una acu&ula una unidad en la (ariable i, con lo +ue 'aldr3an e'to' (alore'. ,4* ,4, ,45 ,46 ,44 ,47 ,48 ,47 ,49 ,4: ! a'3 'uce'i(a&ente ha'ta to&ar i el (alor L) :4* :4, :45 :46 :44 :47 :48 :47 :49 :4:

E"ercicio $%&:%
3a"e# u% &#'(#a)a e% Ea4aS"#i&t *ue u!a%.' .'! $u"le! a%i.a.'! +'# i)&#i)a &'# &a%talla t'.a! la! ta$la! .e )ulti&li"a#0 l #e!ulta.' .e$e#Ha !e# al(' &a#e"i.' a2

E"ercicio $%&;%
3a"e# u% &#'(#a)a *ue &i.a &'# te"la.' "uat#' 4al'#e!2 el %/)e#' .e "'lu)%a! 5 +ila! .e u%a ta$la 56 la altu#a 5 a%"7u#a (e% &i8el!) .e !u! "el.a!0 9%a 4e: te"lea.'! e!t'! 4al'#e!6 el &#'(#a)a &i%ta#; e% la &;(i%a <e$ u%a ta$la 3=>1 .el %? .e +ila! &'# el %? .e "'lu)%a! te"lea.a!0 E" em pl o# n( col um nas --> ! c o l u m n a s n( , i l as --> ! ( i l a s al t o --> 5 0 p i x e l s anc)o --> 5 0 p i x e l s
E l c d i g o Ja v a s c r i p t d e b e s e r c a p a z d e e s c r i b i r : < ta b le b o r d e r = 0 c e l l s p a c i n g = ! b g c o l o r = b l a c " # i d t $ = ! 0 0 > ante' del bucle "or &' e-terno. < tr b g c o l o r = # $ i t e $ e i g $ t = 5 0 > < td # i d t $ = 5 0 > % n b s p &< 'td > hacer e'to con el bucle hacer e'to con el bucle for e-terno (#ara j91) < td # i d t $ = 5 0 > % n b s p &< 'td > for interno (#ara i91) < 'tr > < tr b g c o l o r = # $ i t e $ e i g $ t = 5 0 > < td # i d t $ = 5 0 > % n b s p &< 'td > hacer e'to con el bucle hacer e'to con el bucle for e-terno (#ara j9=) < td # i d t $ = 5 0 > % n b s p &< 'td > for interno (#ara i91) < 'tr > otra 'entencia document# rite < 'ta b le > de'#u%' de lo' do' bucle' "or
una 'entencia document# rite

E"ercicio $%&<%
3a"e# u% &#'(#a)a *ue &i%te u% ta3lero de ajedrez .e 888 "a!illa! u!a%.' .'! +'# a%i.a.'!0 l &#'(#a)a &e.i#; !'la)e%te el a%"7' .e la "el.a *ue !e#; i(ual *ue el alt'0 E" em pl o# anc)o = anc)o --> 5 0 p i x e l s