SENTENCIAS DE CONTROL

Transcripción

1 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; documentwrite( 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 EFGM

2 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="javascript12"> x=5; y=0; z=" <b>no se puede dividir por 0</b>"; if (y!= 0) z=x/y; documentwrite(z); </body></html> El script anterior ejecutará siempre la línea documentwrite(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="javascript13"> x=5; y=0; if (y!= 0) z=x/y; m="el resultado de x/y es " + z; else documentwrite(m); </body> </html> m="no se puede hacer la división, y vale cero"; 45 de 69 EFGM

3 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 documentwrite(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 documentwrite(m); 46 de 69 EFGM

4 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="javascript13"> a=1; switch (a) case 1: documentwrite("soy el caso uno"); case 2: documentwrite(" Soy el caso dos"); case 3: documentwrite(" Soy el caso tres"); default: documentwrite(" Terminé"); 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 EFGM

5 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="javascript13"> a=2; switch (a) case 1: documentwrite("soy el caso uno"); break; case 2: documentwrite(" Soy el caso dos"); break; case 3: documentwrite(" Soy el caso tres"); break; default: documentwrite(" Terminé"); 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); documentwrite( 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 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 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 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) 48 de 69 EFGM

6 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++; documentwrite( 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 EFGM

7 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="javascript13"> for(x=6; x<=168; x+=2) documentwrite(x + "<br>"); El script que calcula el factorial de 6 sería algo similar a: <script language="javascript13"> fac=1; for(x=6; x>=1; x--) fac*=x; documentwrite("el factorial de 6 es " + fac); 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="javascript12"> for(; ;) documentwrite("esto nunca se mostrará"); 50 de 69 EFGM

8 Para ilustrar la flexibilidad de la estructura for, considere el siguiente script que calcula y muestra el factorial de 6: <script language="javascript12"> fac=1; x=6; for(;x>=1;) fac*=x; x--; documentwrite("el factorial de 6 es " + fac); 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="javascript12"> z=0; for(x=1; x<6; x++) for(y=1; y<=20; y++) ++z; documentwrite("z=" + z); 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 EFGM

9 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="javascript13"> fac=6; x=5; while(x>0) fac*=x; --x; documentwrite("el factorial de 6 es " + fac); 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 documentwrite("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 while(x>0) documentwrite("esto se imprimirá una vez"); --x; 52 de 69 EFGM

10 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 EFGM

11 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 EFGM

12 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 = documentform1botonvalue; 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 EFGM

13 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: documentform1cuadrovalue= 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="javascript13"> x=documentform1botonvalue; documentform1cuadrovalue= new Date(); documentwrite("el valor de la variable x es "+ x); </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>  <title>título Inicial</title> </head>  <body bgcolor="white" text="red"> DE QUÉ COLOR APARECERÁ ESTE TEXTO? <script language="javascript13"> //La siguiente línea cambia el color de fondo a negro documentbgcolor="#000000"; //La siguiente línea cambia el color de texto a lima documentfgcolor="lime"; //Con esta línea se cambia el título documenttitle="título Final"; </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 documentwrite(), cuya función es bien conocida Hay una variante de éste método que trabaja de 56 de 69 EFGM

14 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 documentwriteln() 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 EFGM