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> <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 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 : <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 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. <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 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: <script language="JavaScript1.3"> for(x=6; x<=168; x+=2) { document.write(x + "<br>"); } </script> El script que calcula el factorial de 6 sera 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 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: <script language="JavaScript1.2"> 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: <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 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: <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 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. <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 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. 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); </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> <!-- Observe el ttulo --> <title>Ttulo 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É 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.