BUCLES E ITERACIÓN
Los bucles ofrecen una forma rápida y sencilla de hacer algo de forma repetida. En este capítulo veremos las diferentes formas de declarer bucles en JavaScript.
Existen muchos
tipos de bucles, pero esencialmente, todos hacen lo mismo: repiten una acción
un número determinado de veces (es possible que ese número de veces sea 0). En
JS disponemos de las siguientes declaraciones de bucles:
- · for
- · do…while
- · while
- · for…in
- · for…of
for
Un ciclo for se
repite hasta que una condición especificada se evalúa como false. El bule for
de JavaScript e similar al de C y Java. Ya hemos visto un ejemplo de bucle for
en la presentación de este apartado, hagamos ahora un ejercicio más interesante
que funciones mediante un bucle for:
EJERCICIO
Vamos a crear un
programa que cuenta el número de opciones seleccionadas en una lista
desplegable (select HTML) que hará las veces de menú de opciones.
Html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CURSO COMPLETO DE PROGRAMACIÓN EN JAVASCRIPT</title>
</head>
<body>
<form name="selectForm">
<p>
<label for="tiposDeMusica">Elije algunos tipos de música y haz clic en el botón</label>
<select name="musica" id="tiposDeMusica" multiple="multiple">
<option selected="R&B"></option>
<option value="Jazz">Jazz</option>
<option value="Blues">Blues</option>
<option value="Dub Techno">Dub Techno</option>
<option value="Clasical">Clasical</option>
</select>
</p>
<p><input type="button" value="¿Cuantos se han seleccionado?" id="btn"></p>
</form>
<script src="js/for.js"></script>
</html>
Js
let btn = document.getElementById('btn');
function cuantos(selectObject)
//alert("Funciona"); //Hacemos esto solo para ver si el boton es capturado
let seleccionados = 0;
if(selectObject.options[i].selected)
seleccionados ++;
}
return seleccionados;
DO…WHILE
La instrucción do..-while se repite hasta
que una condición dada se evalúa como falsa .
Estructura:
do
expression
while ( condición );
EJEMPLO
En el siguiente ejemplo, el bucle do..while
itera al menos una vez y se repite hasta que
I ya no sea menor que 5
i+=1;
while(i < 5);
Nuevos tipos de bucles desde la
especificación ES6
//FOR OF_________________________
let iterable = [10, 20, 30];
//Un for-in me permite iterar las propiedades de un objeto
}
//Esto me muestra las propiedades del objeto pero no su valor
for(const valores in alberto){
console.log(`${valores} ${alberto[valores]}`)