13 e Structur As Control

44 de 69 http://www.masterlinux.
org EFGM 2000-2005

SENTENCIAS DE CONTROL

Al igual que otros lenguajes de programacin, JavaScript tiene
implementadas estructuras o sentencias de control, que regulan el flujo del
programa y ejecutan o no fragmentos de cdigo dependiendo de si se cumplen
ciertas condiciones. Dentro de estas estructuras se destacan las sentencias
condicionales, las de bucle o ciclo y las de manipulacin de objetos.

Sentencias condicionales if y else

El si condicional if, permite a los programas tomar decisiones basados en
el resultado de la evaluacin de una expresin dada. Por ejemplo, si se necesita
calcular y mostrar el resultado de dividir x entre y; qu sucede si el valor de y es
cero?

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 las
anteriores lneas escritas dentro de un script no producirn un error. Sin
embargo, es conveniente antes de efectuar la divisin decidir que hacer en el
caso de que y sea cero. La sintaxis de la sentencia if es la siguiente:

if (expresin) sentencia_1;
sentencia_2;
.
.

45 de 69 http://www.masterlinux.org EFGM 2000-2005

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

<html><head><title> if simple</title></head>
<body>
Resultado de la divisin de x entre y<br>
<script language="JavaScript1.2">
x=5; y=0;
z=" <b>No se puede dividir por 0</b>";
if (y != 0) z=x/y;
document.write(z);
</script>
</body></html>

El script anterior ejecutar siempre la lnea document.write(z), sin
importar qu valor tenga la variable y. En ocasiones es deseable forzar al
programa a realizar determinadas acciones si la evaluacin de la expresin da
como resultado false. Por ejemplo, cuando el valor de la variable y es cero, se
podra informar de tal hecho a travs de un mensaje:

<html>
<head><title> objeto simple</title></head>
<body>
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);
</script>
</body>
</html>


Observe que despus de las expresiones if y else aparecen una o ms
sentencias encerradas entre corchetes {}. Estos signos se utilizan en JavaScript
como 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 la
sentencia 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 del
if y posteriormente ejecutara la sentencia document.write(m); ignorando el
bloque de cdigo debajo de else.

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


La sentencia condicional switch
Switch tiene un desempeo similar al condicional if, aunque permite
tomar ms de dos caminos dependiendo del valor de una expresin que la
controla. Su sintaxis es como sigue:

switch (expresin)
{
case exp_1:
bloque_1;
case exp_2:
bloque_2;
case exp_3:
bloque_3;
.
.
.
case exp_n:
bloque_n;
default:
bloque_default;
}
contina_programa

Cuando el programa encuentra la sentencia switch evala el valor de
expresin. Compara dicho valor con exp_1, si dichos valores coinciden
ejecuta bloque_1 seguido de bloque_2, bloque_3, hasta bloque_n junto
con bloque_default y luego contina_programa. Si el resultado de
evaluar expresin no coincide con el valor de exp_1, pero s con el valor de
exp_2, entonces se ejecutarn: bloque_2, bloque_3, hasta bloque_n
junto con bloque_default y luego contina_programa. Si el valor de
expresin no coincide con ninguna de las expresiones exp_1, exp_2, ...
exp_n; entonces se ejecutar nicamente bloque_default y luego
contina_programa. En general, switch ejecutar todas aquellas sentencias
que se encuentren debajo de exp_n cuyo valor coincida con el resultado de
evaluar expresin. El uso de default y bloque_default es opcional.

El siguiente script mostrar la frase Soy el caso uno Soy el caso dos
Soy 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");
}
</script>

Pero qu se puede hacer si lo que se quiere es que el programa slo
ejecute el bloque de sentencias cuyo case coincida con el valor de la expresin
que controla el switch e ignore todos los otros? Para eso se implement la
sentencia break.


La sentencia break

Esta sentencia como su nombre lo indica rompe la ejecucin normal de
un bloque de sentencias. Puede ser utilizada dentro de switch, for o while.
Su efecto, si es colocada dentro de un for o un while consiste en terminar el
ciclo sin chequear si la condicin se sigue cumpliendo. Si es utilizada dentro de
un 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");
}
</script>

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 nmero
de 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 definido
por 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 el
siguiente 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 las
sentencias 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 x es el producto de x factores; para
el caso de 6 el factorial est compuesto por 6 factores.
2. x est presente en todos los factores.
3. el primer factor es el resultado de restarle a x cero, el segundo
es el resultado de restarle a x uno y el ensimo es el
resultado de restarle a x [n-1]. Para el caso del factorial de 6,
el cuarto factor es igual a (6-[4-1])=(6-3).


De las tres condiciones anteriores se puede deducir que para calcular por
ejemplo 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 for de JavaScript, permite la ejecucin repetitiva de una
o ms sentencias utilizando para ello pocas lneas de cdigo. La sintaxis de la
sentencia for y su funcionamiento se explican a continuacin:

for(inicializacin;expresin;incremento)
{
sentencia_1;
sentencia_2;
.
.
.
sentencia_n;
}
contina_programa;


El argumento inicializacin es cualquier expresin de asignacin,
generalmente utilizado para inicializar la variable que controla el ciclo.
expresin es la condicin lgica que debe cumplirse para que las sentencias del
ciclo se ejecuten, e incremento es una expresin que permite cambiar el valor
de la variable de control cada vez que se ejecute un ciclo. Si por ejemplo, se
quiere mediante un for, imprimir los nmeros pares comenzando en 6 hasta
168, 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<=168), imprimir x, incrementar, etc. Lo anterior escrito en JavaScript
utilizando la estructura for lucir de la siguiente manera:

for(x=6; x<=168; x+=2)
{
document.write(x + "<br>");
}

</script>

El script que calcula el factorial de 6 sera algo similar a:

fac=1;
for(x=6; x>=1; x--)
{
fac*=x;
}
document.write("El factorial de 6 es " + fac);

</script>

La declaracin de un ciclo for, puede hacerse con uno, dos o ninguno de
los argumentos: inicializacin, expresin e incremento. El siguiente script
se ejecutar indefinidamente:

for(; ;)
{
}
document.write("Esto nunca se mostrar");
</script>


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

fac=1;
x=6;
for(;x>=1;)
{
fac*=x;
x--;
}
</script>

Observe que la variable x se ha inicializado por fuera del for y que la
expresin inicializacin ni incremento existen. La variable x que controla el
ciclo, se decrementa dentro del mismo for con la expresin x--;.

Adems de lo anterior, un ciclo for puede colocarse dentro de otro, lo
que se conoce como anidamiento. Cuando esto sucede el ciclo interno se
ejecutar 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<6; x++)
{
for(y=1; y<=20; y++)
{
++z;
}
}
document.write("z=" + z);
</script>

La sentencia while

Existen en JavaScript otras dos estructuras que permiten la ejecucin
cclica de una o ms sentencias, dependiendo del resultado de la evaluacin de
una expresin. La primera de ellas es la instruccin while, cuya sintaxis se
muestra a continuacin:

while(expresin)
{
sentencia_1;
sentencia_2;
.
.
.
sentencia_n;
}
contina_programa

Las sentencias contenidas dentro del bloque, se ejecutarn mientras que
el resultado de evaluar expresin sea verdadero (true). Cuando el programa
encuentra una sentencia while, evala la expresin. Si el resultado de esta
evaluacin es cierto, ejecuta la sentencia o bloque de sentencias que se
encuentra a continuacin del while, volviendo a evaluar la expresin. Lo anterior


se repite hasta que el resultado de evaluar expresin sea false. Cuando esto
ocurre, el programa continuar ejecutando las instrucciones ubicadas justo
despus del bloque de sentencias del while. Es obvio pensar, que dentro del
bloque de sentencias de un while, debe existir una variable que controle el valor
de expresin. De lo contrario el while se ejecutar indefinidamente. Observe
tambin, 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;

}

</script>

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

La sentencia do while

El funcionamiento de do while es similar al de while, aunque existen
diferencias 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 menos
una vez, dado que la evaluacin de expresin se realiza despus de su
ejecucin. Si el resultado de evaluar expresin es verdadero (true), el bloque de
sentencias continuar ejecutndose. El ciclo se terminar cuando expresin
alcance 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 principio
no se cumple la condicin x>0.


OBJETOS DEL NAVEGADOR

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

El objeto Window tiene la ms alta jerarqua dentro de la estructura y
contiene a otros objetos como por ejemplo document y Frame, los cuales a su
vez estn compuestos por otros objetos que son al mismo tiempo sus


propiedades. Lo anterior significa que se puede acceder a cualquiera de esos
objetos a travs de JavaScript y utilizar los mtodos implementados en ellos, as
como, 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 el
mtodo write del objeto document en casi todos los scripts que se han
desarrollado hasta ahora dentro del mdulo.

La grfica siguiente, ilustra la sintaxis bsica para referirse a los objetos
de una pgina sencilla compuesta por un formulario llamado form1, un campo de
texto denominado cuadro y 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 su
vez 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 una
variable o atributo de un control cualquiera dentro de la pgina de arriba, por
ejemplo, el valor (value) del control submit, y asignrselo a la variable x, basta
con 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 se
necesita que dentro del cuadro de texto que se encuentra vaco, aparezca un


valor especfico al desplegar la pgina, por ejemplo, la fecha y hora actual del
sistema, 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:

<html>
<head>
<title>Titulada</title>
</head>
<body bgcolor="#FFFFDD" text="#000000">
<form name="form1" method="post" action="">
<input name="cuadro" type="text">
<br>
<br>
<input name="Boton" type="submit" value="Enviar">
</form>
<script language="javascript1.3">
x=document.form1.Boton.value;
document.form1.cuadro.value= new Date();
document.write("El valor de la variable x es "+ x);
</script>
</body>
</html>

A travs de JavaScript se pueden cambiar todos los atributos de un
objeto dado de forma dinmica. La siguiente pgina tendr fondo de color negro
y texto color lima, aunque estos fueron definidos en la etiqueta <body> con
valores diferentes. Lo mismo ocurre con el ttulo de la pgina:

<html>
<head>

<title>Ttulo Inicial</title>
</head>

<body bgcolor="WHITE" text="red">
DE QUÉ COLOR APARECERÁ ESTE TEXTO?
<script language="javascript1.3">
//La siguiente lnea cambia el color de fondo a negro
document.bgColor="#000000";
//La siguiente lnea cambia el color de texto a lima
document.fgColor="lime";
//Con esta lnea se cambia el ttulo
document.title="Ttulo Final";
</script>
</body>
</html>

Otros atributos del objeto document son: alinkColor y vlinkColor, que
corresponden 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 documento
respectivamente.

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


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

El objeto window tiene un mtodo que permite comunicar mensajes al
usuario a travs de una caja de dilogo. Se trata de le mtodo alert(), cuyo
argumento 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 texto
similar a la de la figura.

13 e Structur As Control

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

13 e Structur As Control

Cargado por

Copyright:

Formatos disponibles

44 de 69 http://www.masterlinux.

org EFGM 2000-2005

También podría gustarte