Los bucles sirven para crear repeticiones para tareas específicas, de forma que no sea necesario realizarlas varias veces de forma manual. JavaScript soporta diferentes tipos de bucles e iteaciones que son:
- for
- for/in
- for/of
- while
- do/while
En este artículo vamos a conocer el bucle FOR, el cual se utiliza para repetir una o más instrucciones un cierto número de veces, y se suele utilizar cuando sabemos el número de veces que queremos que se ejecute.
La sintaxis del bucle for es la siguiente:
for (inicialización; condición; operación) {
//sentencias a ejecutar en cada iteración
}La primera parte es la inicialización, misma que se debe ejecutar al comenzar la primera iteración del bucle. Aquí escribimos la variable que utilizaremos para definir el número de veces que se ejecuta el bucle.
La segunda parte es la condición, que se evaluará cada vez que comience una iteración del bucle. Aquí debemos escribir una expresión para decidir cuándo se debe detener el bucle.
La tercera parte es la operación a realizar para que el bucle siga su curso.
Vamos a ver un ejemplo sencillo en el que crearemos un contador que imprime los números de 0 al 5:
<p id="demo"></p>
<script>
let texto = "";
for (let i = 0; i < 5; i++) {
text += "El número es igual a " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>En el código anterior, primero definimos la variable ‘texto’ que almacena los valores que mostraremos por pantalla al final del script.
Después iniciamos el bucle con la definición de la variable ‘i’ con valor iual a 0. Como condición para realizar la iteración, se tiene que cumplir que la variable “i”sea menor o igual que 5. Por último, la operación indica que se incrementará en 1 la variable “i”.
Este es el resultado:
See the Pen
Untitled by simplicitytree (@simplicitytree)
on CodePen.0
Si queremos que el contador se ejecute de forma descendente utilizaríamos este bucle:
<p id="demo"></p>
<script>
let texto = "";
for (let i = 5; i > = 0; i--) {
text += "El número es igual a " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>En este caso decrementamos en una unidad la variable “i” en cada iteración, comenzando con el valor 5, siempre que “i” tenga un valor mayor o igual que 0.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023