sentencias de control - Colegio Aldemar Rojas Plazas
Anuncio
SENTENCIAS DE CONTROL
Al igual que otros lenguajes de programación, JavaScript tiene
implementadas estructuras o sentencias de control, que regulan el flujo del
programa y ejecutan o no fragmentos de código dependiendo de si se cumplen
ciertas condiciones. Dentro de estas estructuras se destacan las sentencias
condicionales, las de bucle o ciclo y las de manipulación de objetos.
Sentencias condicionales if y else
El si condicional if, permite a los programas tomar decisiones basados en
el resultado de la evaluación de una expresión 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 programación, en JavaScript las
anteriores líneas escritas dentro de un script no producirán un error. Sin
embargo, es conveniente antes de efectuar la división decidir que hacer en el
caso de que y sea cero. La sintaxis de la sentencia if es la siguiente:
if (expresión) sentencia_1;
sentencia_2;
.
.
44 de 69
http://www.masterlinux.org
EFGM© 2000-2005
Si el resultado de evaluar expresión, que debe ser una expresión lógica,
es verdadero (true), el programa ejecuta la sentencia_1 y posteriormente la
sentencia_2. Si por el contrario el resultado de evaluar expresión es false, el
programa ignora sentencia_1 y continúa su ejecución en sentencia_2.
<html><head><title> if simple</title></head>
<body>
Resultado de la división 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 línea document.write(z), sin
importar qué valor tenga la variable y. En ocasiones es deseable forzar al
programa a realizar determinadas acciones si la evaluación de la expresión da
como resultado false. Por ejemplo, cuando el valor de la variable y es cero, se
podría informar de tal hecho a través de un mensaje:
<html>
<head><title> objeto simple</title></head>
<body>
<script language="JavaScript1.3">
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 división, y vale cero";
}
document.write(m);
</script>
</body>
</html>
45 de 69
http://www.masterlinux.org
EFGM© 2000-2005
Observe que después de las expresiones if y else aparecen una o más
sentencias encerradas entre corchetes {}. Estos signos se utilizan en JavaScript
como en otros lenguajes de programación, para delimitar un bloque de código.
Lo que significa que si el resultado de la evaluación de la expresión en la
sentencia if del ejemplo de arriba fuera verdadera (true), entonces el
programa ejecutaría las dos sentencias z=x/y; y m="El resultado de x/y es
" + z; incluidas dentro de la pareja de signos {}, inmediatamente después del
if y posteriormente ejecutaría la sentencia document.write(m); ignorando el
bloque de código debajo de else.
Si por el contrario, el resultado de la evaluación del if es falso, el
programa ignora el primer bloque de código y ejecuta la sentencias entre los
corchetes debajo de else (m="No se puede hacer la división, y vale
cero";) y posteriormente ejecutará la sentencia document.write(m);.
46 de 69
http://www.masterlinux.org
EFGM© 2000-2005
La sentencia condicional switch
Switch tiene un desempeño similar al condicional if, aunque permite
tomar más de dos caminos dependiendo del valor de una expresión que la
controla. Su sintaxis es como sigue:
switch (expresión)
{
case exp_1:
bloque_1;
case exp_2:
bloque_2;
case exp_3:
bloque_3;
.
.
.
case exp_n:
bloque_n;
default:
bloque_default;
}
continúa_programa…
Cuando el programa encuentra la sentencia switch evalúa el valor de
expresión. 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 continúa_programa. Si el resultado de
evaluar expresión no coincide con el valor de exp_1, pero sí con el valor de
exp_2, entonces se ejecutarán:
bloque_2, bloque_3, hasta bloque_n
junto con bloque_default y luego continúa_programa. Si el valor de
expresión no coincide con ninguna de las expresiones exp_1, exp_2, ...
exp_n; entonces se ejecutará únicamente bloque_default y luego
continúa_programa. En general, switch ejecutará todas aquellas sentencias
que se encuentren debajo de exp_n cuyo valor coincida con el resultado de
evaluar expresión. 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é :
<script language="JavaScript1.3">
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 sólo
ejecute el bloque de sentencias cuyo case coincida con el valor de la expresión
que controla el switch e ignore todos los otros? Para eso se implementó la
sentencia break.
47 de 69
http://www.masterlinux.org
EFGM© 2000-2005
La sentencia break
Esta sentencia como su nombre lo indica “rompe” la ejecución 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 condición se sigue cumpliendo. Si es utilizada dentro de
un switch, ignorará todos los bloques de instrucciones ubicados debajo de ella.
<script language="JavaScript1.3">
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 ejecución en case 2:, mostrará la frase
“ Soy el caso dos” y terminará su ejecución al encontrar la sentencia break.
La sentencia de bucle for
La necesidad de ejecutar repetidamente una o más sentencias un número
de veces dado, es muy común cuando se programa. Considere por ejemplo, que
se requiere calcular el factorial de un número. 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, bastaría 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 serían demasiado largas y dispendiosas de escribir.
Observe que los productos de la serie para calcular el factorial de un número x,
tienen las siguientes características:
1.
2.
3.
48 de 69
El factorial de un número x es el producto de x factores; para
el caso de 6 el factorial está compuesto por 6 factores.
x está presente en todos los factores.
el primer factor es el resultado de restarle a x cero, el segundo
es el resultado de restarle a x uno y el enésimo 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).
http://www.masterlinux.org
EFGM© 2000-2005
De las tres condiciones anteriores se puede deducir que para calcular por
ejemplo el factorial de 200, se podría 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 ejecución repetitiva de una
o más sentencias utilizando para ello pocas líneas de código. La sintaxis de la
sentencia for y su funcionamiento se explican a continuación:
for(inicialización;expresión;incremento)
{
sentencia_1;
sentencia_2;
.
.
.
sentencia_n;
}
continúa_programa;
49 de 69
http://www.masterlinux.org
EFGM© 2000-2005
El argumento inicialización es cualquier expresión de asignación,
generalmente utilizado para inicializar la variable que controla el ciclo.
expresión es la condición lógica que debe cumplirse para que las sentencias del
ciclo se ejecuten, e incremento es una expresión 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 números 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:
<script language="JavaScript1.3">
for(x=6; x<=168; x+=2)
{
document.write(x + "<br>");
}
</script>
El script que calcula el factorial de 6 sería algo similar a:
<script language="JavaScript1.3">
fac=1;
for(x=6; x>=1; x--)
{
fac*=x;
}
document.write("El factorial de 6 es " + fac);
</script>
La declaración de un ciclo for, puede hacerse con uno, dos o ninguno de
los argumentos: inicialización, expresión e incremento. El siguiente script
se ejecutará indefinidamente:
<script language="JavaScript1.2">
for(; ;)
{
}
document.write("Esto nunca se mostrará");
</script>
50 de 69
http://www.masterlinux.org
EFGM© 2000-2005
Para ilustrar la flexibilidad de la estructura for, considere el siguiente
script que calcula y muestra el factorial de 6:
<script language="JavaScript1.2">
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
expresión inicialización ni incremento existen. La variable x que controla el
ciclo, se decrementa dentro del mismo for con la expresión x--;.
Además 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:
<script language="JavaScript1.2">
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 ejecución
cíclica de una o más sentencias, dependiendo del resultado de la evaluación de
una expresión. La primera de ellas es la instrucción while, cuya sintaxis se
muestra a continuación:
while(expresión)
{
sentencia_1;
sentencia_2;
.
.
.
sentencia_n;
}
continúa_programa
Las sentencias contenidas dentro del bloque, se ejecutarán mientras que
el resultado de evaluar expresión sea verdadero (true). Cuando el programa
encuentra una sentencia while, evalúa la expresión. Si el resultado de esta
evaluación es cierto, ejecuta la sentencia o bloque de sentencias que se
encuentra a continuación del while, volviendo a evaluar la expresión. Lo anterior
51 de 69
http://www.masterlinux.org
EFGM© 2000-2005
se repite hasta que el resultado de evaluar expresión sea false. Cuando esto
ocurre, el programa continuará ejecutando las instrucciones ubicadas justo
después 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 expresión. De lo contrario el while se ejecutará indefinidamente. Observe
también, que la expresión es evaluada antes de ejecutar el bloque de sentencias.
Es posible entonces que las sentencias nunca se ejecuten.
<script language="JavaScript1.3">
fac=6;
x=5;
while(x>0)
{
fac*=x;
--x;
}
document.write("El factorial de 6 es " + fac);
</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 iteración fac toma como valor 30 (6*5) y x se
decrementa en 1, la condición se sigue cumpliendo y en el segundo ciclo fac
vale 120 (30*4) y x vuelve a decrementarse en 1. Después de 5 ciclos, fac vale
720 y x vale cero; la condición x>0 deja de cumplirse y el programa ejecuta la
línea 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(expresión);
continúa_programa;
El bloque de sentencias a continuación del do, se ejecutará por lo menos
una vez, dado que la evaluación de expresión se realiza después de su
ejecución. Si el resultado de evaluar expresión es verdadero (true), el bloque de
sentencias continuará ejecutándose. El ciclo se terminará cuando expresión
alcance el valor false.
x=0;
do
{
document.write("Esto se imprimirá una vez");
--x;
}
while(x>0)
52 de 69
http://www.masterlinux.org
EFGM© 2000-2005
El anterior script se ejecutará una vez, a pesar de que desde el principio
no se cumple la condición x>0.
53 de 69
http://www.masterlinux.org
EFGM© 2000-2005
OBJETOS DEL NAVEGADOR
Desde el punto de vista del navegador o browser, los componentes y
propiedades de una página Web desplegada en él, están asociadas a objetos que
se crean cuando el documento es cargado. Esos objetos están organizados en
una estructura jerárquica (ver gráfica), que se corresponde con la estructura de
la página que se está mostrando.
El objeto Window tiene la más alta jerarquía dentro de la estructura y
contiene a otros objetos como por ejemplo document y Frame, los cuales a su
vez están compuestos por otros objetos que son al mismo tiempo sus
54 de 69
http://www.masterlinux.org
EFGM© 2000-2005
propiedades. Lo anterior significa que se puede acceder a cualquiera de esos
objetos a través de JavaScript y utilizar los métodos implementados en ellos, así
como, editar sus propiedades.
Es necesario entonces conocer los atributos y métodos de cada uno de
estos objetos para interactuar con ellos. De hecho, se ha venido utilizando el
método write del objeto document en casi todos los scripts que se han
desarrollado hasta ahora dentro del módulo.
La gráfica siguiente, ilustra la sintaxis básica para referirse a los objetos
de una página sencilla compuesta por un formulario llamado form1, un campo de
texto denominado cuadro y un botón submit de nombre Boton.
Si se observa cuidadosamente en la gráfica 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 página web. Entonces, para referirse a una
variable o atributo de un control cualquiera dentro de la página de arriba, por
ejemplo, el valor (value) del control submit, y asignárselo a la variable x, basta
con escribir la siguiente línea de código:
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 vacío, aparezca un
55 de 69
http://www.masterlinux.org
EFGM© 2000-2005
valor específico al desplegar la página, por ejemplo, la fecha y hora actual del
sistema, se tendría que escribir una línea similar a la siguiente:
document.form1.cuadro.value= new Date();
La página web y el script completo para ilustrar lo anterior sería 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 través de JavaScript se pueden cambiar todos los atributos de un
objeto dado de forma dinámica. La siguiente página 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 título de la página:
<html>
<head>
<!-- Observe el título -->
<title>Título Inicial</title>
</head>
<!-- En la etiqueta body se define el color de fondo
blanco y el color de texto rojo-->
<body bgcolor="WHITE" text="red">
DE QU&Eacute; COLOR APARECER&Aacute; ESTE TEXTO?
<script language="javascript1.3">
//La siguiente línea cambia el color de fondo a negro
document.bgColor="#000000";
//La siguiente línea cambia el color de texto a lima
document.fgColor="lime";
//Con esta línea se cambia el título
document.title="Título 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 píxeles del documento
respectivamente.
En cuanto a los métodos del objeto document, a lo largo del módulo se ha
utilizado uno de los más importantes: el método document.write(), cuya
función es bien conocida. Hay una variante de éste método que trabaja de
56 de 69
http://www.masterlinux.org
EFGM© 2000-2005
manera similar, con la diferencia de que agrega un carácter de nueva línea al
final de su ejecución. Se trata del método document.writeln().
El objeto window tiene un método que permite comunicar mensajes al
usuario a través de una caja de diálogo. Se trata de le método alert(), cuyo
argumento es una cadena de texto o una expresión válida. Por ejemplo, la línea
alert(“Hola, este es un mensaje para ud.”); desplegará una caja de texto
similar a la de la figura.
57 de 69
http://www.masterlinux.org
EFGM© 2000-2005
