Desarrollo de Aplicaciones en Internet
(Uso y Aplicación de JavaScript)
Arq. Freddy E. Silva Sáenz

Inicio - Introducción - Datos - Funciones - Eventos - Formularios - Ciclos - Cuadros - Layer - Búsquedas - Menú

Ciclos:

Ciclo for
Los ciclos permiten repetir secciones de código de programa o bloques de comando con base en un conjunto de criterios.

Un ciclo puede ser utilizado para repetir una serie de acciones en cada número entre 1 y 10 o seguir con la recopilación de información del usuario hasta que éste indique que ha concluido la introducción de todos sus datos.

for ( [initial exp.]; [condition]; [update exp.] ){     statements     }

Punto inicial del ciclo. Puede ser declarada como var.: initial exp.

Condición que debe ser cumplida: condition

Determinación de como la variable debe ser alterada: update exp

El ciclo for y for... in se repite sobre un rango de conjunto, en cambio el ciclo while continúa hasta que una condición se cumple o fracasa de ser cumplida.

En el ejemplo siguiente se utiliza el ciclo for a fin de contar del 1 (i=1) al 10 (1<=10) en incrementos de uno (i++). Cada vez se pregunta al usuario por una comida y se escribe la comida en la ventana, precedida por el número.

<html>
<head>
<title>Ejemplo 24</title>

</head>
<body>
<script language="JavaScript">
<!--
var nombre = prompt("Cual es su nombre?","nombre");

document.write("<h1>" + nombre + " y sus 10 comidas favoritas</h1>");
for(var i=1; i<=10; i++) {
  document.write(i + ". " + prompt('Coloque la comida favorita No. ' + i, 'nombre de comida') + '<br>');
}
// -->
</script>
</body>
</html>

Ciclo while
La estructura básica de un ciclo while es:

 while (condition) {
   comandos JavaScript 
}

Donde condition es cualquier expresión JavaScript válida que se evalúe a un valor boleano. El bloque de comando se ejecuta mientras la condición sea true. Por ejemplo:

var num = 1;
while (num <= 10) {
   document.writeln(num);
   num++;
}

Esto permite contar hasta que el valor de num sea 11.

En ejemplo 25, se establece answer para una cadena vacía, y el ciclo while evalúa la expresión (answer != correcto) hasta que sea true, cuando el usuario logre colocar la respuesta.

<html>
<head>
<title>Ejemplo 25</title>

<script language="Javascript">
<!--
function ev() {
  var answer = "";
  var correcto = "Caracas";
  var pregunta = "Cual es la capital de Venezuela ??";
while (answer != correcto) {
  answer = prompt(pregunta,"");
   if (answer=="Caracas"){
  alert("Muy bien");
   }else{
  alert("Esto es falso");
        }
    }
}
// -->
</script>
</head>
<body onload="ev();">
</body>
</html>

Estatutos break, continue
El comando break detiene el ciclo por completo, incluso si éste no ha concluido. Por ejemplo, si quiere dar tres oportunidades para contestar una pregunta de un examen, puede usar esto:

var answer = "";
var correcto = "100";
var pregunta = "Cuanto es 10 * 10";
for (k = 1; k <= 3; k++) {
   answer = prompt(pregunta,"0");
   if (answer == correcto) {
    alert("Correcto !");
    break;
  }
}

El bloque de comandos se ejecuta tres veces, sólo si las primeras dos respuestas son incorrectas. Una respuesta correcta, permite concluir el ciclo.

El comando continue se utiliza para saltar a la siguiente repetición del bloque de comandos sin completar el pase actual por el bloque de comandos.

Ejemplo de ciclo for
En ejemplo siguiente se relaciona el ciclo for con el objeto form, y el elemento del formulario select.

<html>
<head>
<title>Ejemplo 26</title>

</head>
<body>
<SCRIPT>
function howMany(selectObject) {
   var numberSelected=0
   for (var i=0; i < selectObject.options.length; i++) {
      if (selectObject.options[i].selected==true)
         numberSelected++
   }
   return numberSelected
}
</SCRIPT>

<FORM NAME="selectForm">
<P><B>Seleccione tipos de música, luego haga click en el botón:</B>
<BR><SELECT NAME="musicTypes" MULTIPLE>
<OPTION SELECTED> Rock
<OPTION> Jazz
<OPTION> Blues
<OPTION> New Age
<OPTION> Clásica
<OPTION> Opera
</SELECT>
<P><INPUT TYPE="button" VALUE="Cuantos estan selecionados?"
onClick="alert ('Número de opciones seleccionadas: ' + howMany(document.selectForm.musicTypes))">
</FORM>
</body>
</html>

Ir a la próxima semana ....

Inicio - Introducción - Datos - Funciones - Eventos - Formularios - Ciclos - Cuadros - Layer - Búsquedas