Curso jQuery: 7 Estructuras de control repetitivas

Siguiendo con la entrada anterior vamos a continuar con las estructuras de control de un programa, en este caso vamos a ver las repetitivas, dichas estructuras se utilizan para que se repitan unas operaciones dependiendo de una condición.

FOR

Después del if el for es otra de las estructuras de control más utilizadas, se utiliza cuando se sabe de antemano la cantidad de veces que se va a ejecutar las ordenes, tiene la siguiente estructura:

fof(inicializacion;condicion; actualizacion){
   //ordenes a ejecutar
}

Normalmente en la inicialización se suele iniciar una variable a un valor, en condición se suele comparar el valor de la variable inicializada anteriormente con otro valor y en actualización se suele cambiar el valor de la variable incrementandola o decrementandola. Una sintaxis típica seria:

for (i=0; i<5;i++){
   //ordenes
}

En este caso se ejecutarían las ordenes 5 veces, una para cada valor de la i que empieza en 0 y va incrementando su valor en 1 hasta llegar a 5, en cuyo caso no se ejecutarían las ordenes.

Por ejemplo supongamos que tenemos un input text en el que metemos un número y queremos que se visualice la tabla de multiplicar de ese numero en un div resultado.

 

<h1>Tabla de multiplicar de un numero</h1>
<p>Introduce el numero para calcular la tabla de multiplicar.
<input type="text" name="numero" class="numero" placeholder="Introduce numero"></p>
<p><input type="button" value="Ver tabla multiplicar" class="tabla"></p>
<div class="resultado"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		$(".tabla").click(function(e){
		var numero,i,resultado;
		numero=$(".numero").val();		
		$(".resultado").html("<h2>La tabla de multiplicar del numero "+numero+ " es:</h2>");
		for (i=1;i<=10;i++){
			resultado=numero*i;
			$(".resultado").append("<p>"+numero+" x "+i+" = "+resultado+"</p>");
		}
		
		});
	});
</script>

WHILE Y DO WHILE

Ambas son muy parecidas, ejecutan una serie de ordenes mientras se cumpla una condición, la diferencia esta en que el while primero comprueba la condición y si se cumple las ejecuta y el do while ejecuta las ordenes y luego comprueba la condición y si se cumple las vuelve a ejecutar hasta que deje de cumplirse la condición. La sintaxis seria:

while ( condicion ) {
    // ordenes
}

do{
   //ordenes
}while(condicion);

Por ejemplo si queremos podemos convertir el  for anterior en un while, lo haríamos como sigue

int i=1;
while(i<=10){
	resultado=numero*i;
	$(".resultado").append("<p>"+numero+" x "+i+" = "+resultado+"</p>");
	i++;
}

 

Comparte en tus redes sociales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *