08 Estructuras de control

7/25/2019 08 Estructuras de control

1/13

44 de 68 http://www.masterlinux.org EFGM 2000-2007

SENTENCIAS DE CONTROL

Al igual que otros lenguajes de programacin, JavaScript tieneimplementadas estructuras o sentencias de control, que regulan el flujo delprograma y ejecutan o no fragmentos de cdigo dependiendo de si se cumplenciertas condiciones. Dentro de estas estructuras se destacan las sentenciascondicionales, las de bucle o ciclo y las de manipulacin de objetos.

Sentencias condic ionales if y else

El si condicional i f, permite a los programas tomar decisiones basados enel resultado de la evaluacin de una expresin dada. Por ejemplo, si se necesitacalcular y mostrar el resultado de dividir xentre y; qu sucede si el valor de yescero?

X = 10;Y = 0;Z = X/Y;document.write(El el resultado de dividir X entre Y es +Z);

A diferencia de otros lenguajes de programacin, en JavaScript lasanteriores lneas escritas dentro de un script no producirn un error. Sin

embargo, es conveniente antes de efectuar la divisin decidir que hacer en elcaso de que ysea cero. La sintaxis de la sentencia i fes la siguiente:

if (expresin) sentencia_1;sentencia_2;..


2/13


Si el resultado de evaluar expresin, que debe ser una expresin lgica,es verdadero (true), el programa ejecuta la sentencia_1 y posteriormente lasentencia_2. Si por el contrario el resultado de evaluar expresines false, elprograma ignorasentencia_1y contina su ejecucin en sentencia_2.

if simpleResultado de la divisin de x entre y

x=5; y=0;z=" No se puede dividir por 0";if (y != 0) z=x/y;document.write(z);

El script anterior ejecutar siempre la lnea document.write(z), sin

importar qu valor tenga la variable y. En ocasiones es deseable forzar alprograma a realizar determinadas acciones si la evaluacin de la expresin dacomo resultado false. Por ejemplo, cuando el valor de la variable yes cero, sepodra informar de tal hecho a travs de un mensaje:

objeto simple

x=5;y=0;if (y != 0){

z=x/y;m="El resultado de x/y es " + z;

}

else{

m="No se puede hacer la divisin, y vale cero";}document.write(m);


3/13


Observe que despus de las expresiones ify elseaparecen una o mssentencias encerradas entre corchetes {}. Estos signos se utilizan en JavaScriptcomo en otros lenguajes de programacin, para delimitar un bloque de cdigo.Lo que significa que si el resultado de la evaluacin de la expresin en lasentencia if del ejemplo de arriba fuera verdadera (true), entonces el

programa ejecutara las dos sentencias z=x/y;y m="El resultado de x/y es" + z;incluidas dentro de la pareja de signos {}, inmediatamente despus delif y posteriormente ejecutara la sentencia document.write(m); ignorando elbloque de cdigo debajo de else.

Si por el contrario, el resultado de la evaluacin del if es falso, elprograma ignora el primer bloque de cdigo y ejecuta la sentencias entre loscorchetes debajo de else (m="No se puede hacer la divisin, y valecero";) y posteriormente ejecutar la sentencia document.write(m);.


4/13


La sentencia condicional switch

Switch tiene un desempeo similar al condicional if, aunque permitetomar ms de dos caminos dependiendo del valor de una expresin que lacontrola. Su sintaxis es como sigue:

switch (expresin){

case exp_1:bloque_1;



.

.

.case exp_n:

bloque_n;default:

bloque_default;}contina_programa

Cuando el programa encuentra la sentencia switchevala el valor deexpresin. Compara dicho valor con exp_1, si dichos valores coincidenejecuta bloque_1 seguido de bloque_2, bloque_3, hasta bloque_n juntocon bloque_default y luego contina_programa. Si el resultado deevaluar expresinno coincide con el valor de exp_1, pero s con el valor deexp_2, entonces se ejecutarn: bloque_2, bloque_3, hasta bloque_n

junto con bloque_default y luego contina_programa. Si el valor deexpresin no coincide con ninguna de las expresiones exp_1, exp_2, ...exp_n; entonces se ejecutar nicamente bloque_default y luegocontina_programa. En general, switch ejecutar todas aquellas sentenciasque se encuentren debajo de exp_ncuyo valor coincida con el resultado de

evaluar expresin. El uso de defaulty bloque_defaultes opcional.

El siguiente script mostrar la frase Soy el caso uno Soy el caso dosSoy el caso tres Termin :

a=1;switch (a){

case 1:document.write("Soy el caso uno");

case 2:document.write(" Soy el caso dos");

case 3:document.write(" Soy el caso tres");

default:document.write(" Termin");

}

Pero qu se puede hacer si lo que se quiere es que el programa sloejecute el bloque de sentencias cuyo casecoincida con el valor de la expresinque controla el switch e ignore todos los otros? Para eso se implement lasentencia break.


5/13


La sentencia break

Esta sentencia como su nombre lo indica rompe la ejecucin normal deun bloque de sentencias. Puede ser utilizada dentro de switch, foro while.Su efecto, si es colocada dentro de un foro un whileconsiste en terminar el

ciclo sin chequear si la condicin se sigue cumpliendo. Si es utilizada dentro deun switch, ignorar todos los bloques de instrucciones ubicados debajo de ella.

a=2;switch (a){

case 1:document.write("Soy el caso uno");break;

case 2:document.write(" Soy el caso dos");break;

case 3:document.write(" Soy el caso tres");

break;default:document.write(" Termin");

}

El anterior script comenzar su ejecucin en case 2:, mostrar la frase Soy el caso dos y terminar su ejecucin al encontrar la sentencia break.

La sentencia de bucle for

La necesidad de ejecutar repetidamente una o ms sentencias un nmerode veces dado, es muy comn cuando se programa. Considere por ejemplo, que

se requiere calcular el factorial de un nmero. El factorial de x (x!) est definidopor la siguiente serie:

x! = (x-0)*(x-1)*(x-2)*(x-3)*(x-[x-1])

si fuera necesario calcular el factorial de 6, bastara con escribir elsiguiente script:

fac6 = (6-0)*(6-1)*(6-2)*(6-3)*(6-4)*(6-5);document.write(El factorial de 6 es + fac6);

pero, y si es el factorial de 500 el que se pide calcular, la sentencia o lassentencias necesarias seran demasiado largas y dispendiosas de escribir.Observe que los productos de la serie para calcular el factorial de un nmero x,

tienen las siguientes caractersticas:

1. El factorial de un nmero xes el producto de xfactores; parael caso de 6 el factorial est compuesto por 6 factores.

2. xest presente en todos los factores.3.

el primer factor es el resultado de restarle a x cero, el segundoes el resultado de restarle a x uno y el ensimo es elresultado de restarle a x [n-1]. Para el caso del factorial de 6,el cuarto factor es igual a (6-[4-1])=(6-3).


6/13


De las tres condiciones anteriores se puede deducir que para calcular porejemplo el factorial de 200, se podra escribir en JavaScript algo similar a:

numero=200;n=0;fac=1;fac*=(numero-n);n++;fac*=(numero-n);n++;..//as hasta completar 200 sentencias fac*=(numero-n); n++;document.write(El factorial de 200 es + fac);

El ciclo o bucle forde JavaScript, permite la ejecucin repetitiva de unao ms sentencias utilizando para ello pocas lneas de cdigo. La sintaxis de lasentencia fory su funcionamiento se explican a continuacin:

for(inicializacin;expresin;incremento){

sentencia_1;sentencia_2;...sentencia_n;

}contina_programa;


7/13


El argumento inicializacin es cualquier expresin de asignacin,generalmente utilizado para inicializar la variable que controla el ciclo.expresines la condicin lgica que debe cumplirse para que las sentencias del

ciclo se ejecuten, e incrementoes una expresin que permite cambiar el valorde la variable de control cada vez que se ejecute un ciclo. Si por ejemplo, sequiere mediante un for, imprimir los nmeros pares comenzando en 6 hasta168, se puede pensar en declarar una variable x que comience en 6 (x=6),imprimir x, incrementar x en 2 (x+=2), chequear si x es menor o igual a 168(x=1; x--){

fac*=x;}document.write("El factorial de 6 es " + fac);

La declaracin de un ciclo for, puede hacerse con uno, dos o ninguno de

los argumentos: inicializacin, expresine incremento. El siguiente scriptse ejecutar indefinidamente:

for(; ;){}document.write("Esto nunca se mostrar");


8/13


Para ilustrar la flexibilidad de la estructura for, considere el siguientescript que calcula y muestra el factorial de 6:

fac=1;x=6;for(;x>=1;){

fac*=x;x--;

}document.write("El factorial de 6 es " + fac);

Observe que la variable x se ha inicializado por fuera del for y que laexpresin inicializacinni incrementoexisten. La variable x que controla elciclo, se decrementa dentro del mismo for con la expresin x--;.

Adems de lo anterior, un ciclo for puede colocarse dentro de otro, loque se conoce como anidamiento. Cuando esto sucede el ciclo interno seejecutar completamente, tantas veces como se ejecute el ciclo que lo contiene.

En el siguiente ejemplo, al finalizar el programa mostrar la frase z=100:

z=0;for(x=1; x


9/13


se repite hasta que el resultado de evaluar expresin sea false. Cuando estoocurre, el programa continuar ejecutando las instrucciones ubicadas justodespus del bloque de sentencias del while. Es obvio pensar, que dentro delbloque de sentencias de un while, debe existir una variable que controle el valorde expresin. De lo contrario el while se ejecutar indefinidamente. Observetambin, que la expresin es evaluada antes de ejecutar el bloque de sentencias.

Es posible entonces que las sentencias nunca se ejecuten.

fac=6;x=5;while(x>0){

fac*=x;--x;

}

document.write("El factorial de 6 es " + fac);

El anterior script que nuevamente calcula el factorial de 6, es un buenejemplo para ilustrar el uso de while. Al iniciar el ciclo, xvale 5y facvale 6,luego x>0 es cierto. En la primera iteracin factoma como valor 30 (6*5) y xsedecrementa en 1, la condicin se sigue cumpliendo y en el segundo ciclo facvale 120(30*4) y x vuelve a decrementarse en 1. Despus de 5 ciclos, facvale720y xvale cero; la condicin x>0deja de cumplirse y el programa ejecuta lalnea document.write("El factorial de 6 es " + fac);

La sentencia do while

El funcionamiento de do while es similar al de while, aunque existendiferencias en su sintaxis y comportamiento:

do{

bloque_de_sentencias;}while(expresin);

contina_programa;

El bloque de sentencias a continuacin del do, se ejecutar por lo menosuna vez, dado que la evaluacin de expresin se realiza despus de suejecucin. Si el resultado de evaluar expresin es verdadero (true), el bloque desentencias continuar ejecutndose. El ciclo se terminar cuando expresinalcance el valor false.

x=0;do{

document.write("Esto se imprimir una vez");--x;

}while(x>0)

El anterior script se ejecutar una vez, a pesar de que desde el principiono se cumple la condicin x>0.


10/13


OBJETOS DEL NAVEGADOR

Desde el punto de vista del navegador o browser, los componentes ypropiedades de una pgina Web desplegada en l, estn asociadas a objetos quese crean cuando el documento es cargado. Esos objetos estn organizados enuna estructura jerrquica (ver grfica), que se corresponde con la estructura dela pgina que se est mostrando.

El objeto Window tiene la ms alta jerarqua dentro de la estructura ycontiene a otros objetos como por ejemplo documenty Frame, los cuales a su


11/13


vez estn compuestos por otros objetos que son al mismo tiempo suspropiedades. Lo anterior significa que se puede acceder a cualquiera de esosobjetos a travs de JavaScript y utilizar los mtodos implementados en ellos, ascomo, editar sus propiedades.

Es necesario entonces conocer los atributos y mtodos de cada uno de

estos objetos para interactuar con ellos. De hecho, se ha venido utilizando elmtodo write del objeto document en casi todos los scripts que se handesarrollado hasta ahora dentro del mdulo.

La grfica siguiente, ilustra la sintaxis bsica para referirse a los objetosde una pgina sencilla compuesta por un formulario llamado form1, un campo detexto denominado cuadroy un botn submit de nombre Boton.

Si se observa cuidadosamente en la grfica cualquier objeto, por ejemplo,el cuadro de texto, se deduce que ste es un atributo del objeto form1, que a suvez es un atributo del objeto document, y ste ltimo lo es del objeto Window.Los objetos creados por JavaScript, heredan los nombres (names) de los

elementos constituyentes de la pgina web. Entonces, para referirse a unavariable o atributo de un control cualquiera dentro de la pgina de arriba, porejemplo, el valor (value) del control submit, y asignrselo a la variable x, bastacon escribir la siguiente lnea de cdigo:

x = document.form1.Boton.value;

a la variable x se le asigna la cadena Enviar. De igual forma si senecesita que dentro del cuadro de texto que se encuentra vaco, aparezca un


12/13


valor especfico al desplegar la pgina, por ejemplo, la fecha y hora actual delsistema, se tendra que escribir una lnea similar a la siguiente:

document.form1.cuadro.value= new Date();

La pgina web y el script completo para ilustrar lo anterior sera similar a:

Titulada

x=document.form1.Boton.value;document.form1.cuadro.value= new Date();

document.write("El valor de la variable x es "+ x);

A travs de JavaScript se pueden cambiar todos los atributos de unobjeto dado de forma dinmica. La siguiente pgina tendr fondo de color negroy texto color lima, aunque estos fueron definidos en la etiqueta convalores diferentes. Lo mismo ocurre con el ttulo de la pgina:

Ttulo Inicial

DE QU COLOR APARECER ESTE TEXTO?

//La siguiente lnea cambia el color de fondo a negrodocument.bgColor="#000000";//La siguiente lnea cambia el color de texto a limadocument.fgColor="lime";//Con esta lnea se cambia el ttulodocument.title="Ttulo Final";

Otros atributos del objeto document son: alinkColory vlinkColor, quecorresponden a los colores del texto de los enlaces y los enlaces visitados;width y height, que son el ancho y el alto en pxeles del documentorespectivamente.

En cuanto a los mtodos del objeto document, a lo largo del mdulo se hautilizado uno de los ms importantes: el mtodo document.write(), cuyafuncin es bien conocida. Hay una variante de ste mtodo que trabaja de


13/13


manera similar, con la diferencia de que agrega un carcter de nueva lnea alfinal de su ejecucin. Se trata del mtodo document.writeln().

El objeto window tiene un mtodo que permite comunicar mensajes alusuario a travs de una caja de dilogo. Se trata de le mtodo alert(), cuyoargumento es una cadena de texto o una expresin vlida. Por ejemplo, la lnea

alert(Hola, este es un mensaje para ud.);desplegar una caja de textosimilar a la de la figura.

08 Estructuras de control

Documents

Transcript of 08 Estructuras de control