Uno de los procedimientos más utilizados en cualquier lenguaje de programación es la utilización de bucles. Un bucle es la repetición de un conjunto de sentencias, un numero determinado de veces o su repetición mientras se cumpla una condición.
En varios lenguajes de programación se establecen diferencias entre las diferentes sentencias para realizar bucles, distinguiéndolas principalmente en bucles condicionales y bucles incondicionales.
En JavaScript no se aprecia tal distinción ya que las sentencias que sirven para realizar iteraciones, tienen todo un factor de condición.
Aun así, es conveniente saber aplicar un tipo u otro y esto dependerá en gran medida de que se sepa el principio y final de un bucle, o el bucle dependa de una condición. Dependiendo de esta medida a tomar se utilizará una sentencia u otra.
La primera sentencia para realizar bucles, es el bucle denominado For (“Para”), el cual tiene la siguiente sintaxis:
for ( variable = valor_inicial ; condición_a_evaluar ; incremento ) {
acción/es a realizar ;
acción/es a realizar ;
};El funcionamiento de la sentencia For, es el siguiente, cuando el flujo del programa entra en el bucle, se asigna en primer lugar “valor_inicial”, a la “variable” especificada, a continuación se realiza la evaluación de la condición especificada en “condición_a_evaluar”, si la condición se cumple, es decir es verdadera se ejecutan las acciones especificadas dentro del bloque correspondiente al bucle, otra forma de expresarlo es que se ejecutan las ordenes que estén situadas entre las llaves { } del bucle, una vez ejecutadas las sentencias del bloque, se aplica a “variable” el incremento especificado por “incremento” y se vuelve a evaluar la condición, repitiéndose el proceso de nuevo si es verdadera y finalizando la ejecución del bucle en caso de ser falsa.
A este tipo de bucle se les denomina incondicionales, aunque como se ha comentado anteriormente tengan condición, y normalmente se han de utilizar cuando se conoce el principio y el final de repetición del bucle.
Teniendo en cuenta la sintaxis anterior, el siguiente ejercicio práctico con solución, plantea un algoritmo que visualice los números del 1 al 10.
/*
Algoritmo que visualiza los números del 1 al 10
*/
var numeros = 0;
for( numeros = 1 ; numeros < 11 ; numeros++ ) {
console.log(numeros);
}
/*
Algoritmo que visualiza los números del 10 al 1
*/
for (let contar = 10 ; contar > 0 ; contar-- ) {
console.log(contar);
}
/*
Ejercicios y prácticas de programación en JavaScript
Gracias por visitar www.aprendoencasa.com
*/Poco a poco iremos incrementado la dificultad de los ejercicios y es por eso que intercalaremos explicaciones de otros temas. En esta ocasión el bucle For, que hemos utilizado en el ejemplo anterior, utiliza para aplicar el incremento de valor a la unidad el operador ++.
Se puede utilizar para incrementar o decrementar el valor de la variable el operador unario “Incremento” ( ++ ), y el operador unario “Decremento”.
La función del operador ++ es la de aumentar en una unidad el valor del operando, dependiendo de donde se situa respecto al operando se denomina preIncremento o posIncremento. Observe el siguiente ejemplo:
/*
Ejemplo práctico operador Incremento y Decremento
*/
var NumeroA = 10;
var NumeroB = 10;
var NumeroC = 0;
var NumeroD = 0;
NumeroC = NumeroA++;
NumeroD = ++NumeroB;
console.log("A = "+NumeroA);
console.log("B = "+NumeroB);
console.log("C = "+NumeroC);
console.log("D = "+NumeroD);El resultado una vez ejecutado en el navegador es el siguiente.
Ejercicios JavaScript – Bucles FOR
Como se puede ver en el ejemplo la variable “NumeroC”, contiene como valor 10, esto es mientras que el resto contiene como valor 11, es debido a que se ha utilizado el operador como postincremento y por tanto primero se realiza en primer lugar la asignación y posteriormente se aumenta el valor de la variable “NumeroA”, en una unidad.
Volviendo a la sentencia For para realizar bucles, el incremento no necesariamente ha de ser de una unidad, ya que se puede utilizar el concepto de acumulador para el incremento, variable=variable+valor.
El siguiente ejemplo práctico muestra un ejercicio en el cual se realiza la visualización de los números pares entre 2 y 20.
/*
Ejercicios y prácticas resueltas en JavaScript
Sentencia For - Bucles
www.aprendoencasa.com
Ejercicio: Visualizar los números pares entre 2 y 20
*/
for(let numero=2; numero<=20 ; numero=numero+2 ) {
console.log( numero );
}El resultado en el navegador ha de ser el siguiente.
Prácticas en JavaScript – Bucles FOR
El siguiente ejercicio resuelto que se muestra solicita mediante un formulario html, los valores de inicio y final del bucle for, y visualiza como quedaría el bucle generado y el resultado que se obtendría del mismo.
Ejercicios JavaScript – Bucles FOR
Archivo index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Bucle For - Javascript</title>
<meta charset="utf-8">
<meta name="author" content="José Sáez">
<meta name="generator" content="www.aprendoencasa.com">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!-- Titulo -->
<h3>Bucle For - Javascript</h3>
<!-- Parrafos explicación -->
<p>Ejercicios y prácticas de programación en JavaScript con solución</p>
<p>El siguiente ejercicio muestra el uso del bucle For en JavaScript permitiendo la introducción de los valores iniciales y finales del bucle, mostrando el resultado en el navegador.</p>
<!-- Formulario de petición de datos -->
<form action="#" name="formulario1" id="formulario1">
<label for="Inicio">Inicio</label><br>
<input type="text" name="Inicio" id="Inicio" /><br>
<label for="Final">Final</label><br>
<input type="text" name="Final" id="Final" /><br><br>
<!-- Botones -->
<button id="generar" name="generar">Generar</button>
<button id="ejecutar" name="ejecutar">Ejecutar</button>
</form>
<br>
<!-- Ventana previsualización Orden -->
<label for="generado">Previsualizar Sentencia</label><br>
<textarea name="generado" id="generado" cols="60" rows="5" readonly></textarea>
<br>
<!-- Ventana previsualización resultado -->
<label for="resultado">Resultado</label><br>
<textarea name="resultado" id="resultado" cols="60" rows="5" readonly></textarea>
<!-- Inserción de script javascript -->
<script src="principal.js"></script>
</body>
</html>Archivo estilos.css
/*
FUENTES GOOGLE FONTS
====================
Importar fuentes del servidor google
*/
@import url('https://fonts.googleapis.com/css?family=Sansita');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Nova+Mono');
/* Establecer la fuente del titulo */
body h3 {
font-family: 'Sansita', sans-serif;
}
/* Establecer la fuente de los parrafos */
body p {
font-family: 'PT Sans', sans-serif;
}
/* Establecer estilos para el area de texto de previsualizacion de la sentencia For */
#generado {
background-color: #EEEEEE;
color: #ffffff;
font-family: 'Nova Mono', monospace;
}Archivo principal.js
/*
Funcion a ejecutar al cargar la página
*/
window.onload = function() {
/* Asignar evento al botón generar sentencia */
document.getElementById('generar').addEventListener("click",function(e){
e.preventDefault();
var areagenerado = document.getElementById("generado");
areagenerado.innerHTML = "for (let x = "+document.getElementById("Inicio").value +
" ; x <= "+document.getElementById("Final").value + " ; x++) {\n" +
" console.log( '-' + x );\n" +
"}";
});
/* Asignar evento al botón generar previsualización */
document.getElementById("ejecutar").addEventListener("click",function(e){
e.preventDefault();
var arearesultado = document.getElementById("resultado");
var mensaje = "";
var inicio = document.getElementById("Inicio").value;
var final = document.getElementById("Final").value;
for(let x=inicio; x<=final; x++) {
mensaje=mensaje+"-"+x;
}
arearesultado.innerHTML = mensaje;
});
}Si quieres seguir practicando puedes plantearte realizar los siguientes ejercicios y prácticas propuestas.
Ejercicio 1 – Bucle For
Realizar un ejercicio que visualice los números del 1 al 10 en orden inverso.
Ejercicio 2 – Bucle For
Vamos a complicar los ejercicios. Realizar un ejercicio en el cual se visualice una cuenta de 1 a 10, y a la vez, una cuenta inversa de 10 a 1.
Ejercicio 3 – Bucle For
Más complicación!!, realizar un ejercicio en el cual se visualicen los números primos del 1 al 20.
Gracias por visitarnos y un saludo!!!
