02 Estructurascontrol

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;

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; }
conti na_prog rama;

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--;
}
document.write("El factorial de 6 es " + fac);
</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
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.
JERARQUA DE OBJETOS
JavaScript

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);

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";
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.

02 Estructurascontrol

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

02 Estructurascontrol

Caricato da

Copyright:

Formati disponibili

SENTENCIAS DE CONTROL

Al igual que otros lenguajes de programacin, JavaScript tiene implementadas estructuras o

Potrebbero piacerti anche