Xenodevs_: JavaScript 5 (Bucles e iteraciones)

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

<!DOCTYPE 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>
</body>
</html>

//LIBRERÍAS

//VARIABLES Y OBJETOS
let btn = document.getElementById('btn');

//FUNCIONES
function cuantos(selectObject)
{
    //alert("Funciona");  //Hacemos esto solo para ver si el boton es capturado
    let seleccionados = 0;
    for(let i = 0; i < selectObject.options.length; i ++)
    {
        if(selectObject.options[i].selected)
        {
            seleccionados ++;
        }
    }
    return seleccionados;
}

//EVENTOS

btn.addEventListener('click', function(){
    alert('Número de opciones seleccionadas es '+ cuantos(document.selectForm.tiposDeMusica));
});

DO…WHILE

La instrucción do..-while se repite hasta que una condición dada se evalúa como falsa .

Estructura:

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

let i = 0;
do
{
i+=1;
console.log(i);
}
while(i < 5);

Nuevos tipos de bucles desde la especificación ES6

//BUCLES DISPONIBLES DESDE ECMASCRIPT 6
//FOR OF_________________________
let iterable = [10, 20, 30];

for (let value of iterable) {
value += 1;
console.log(value);
}

//FOR IN_________________________
//Un for-in me permite iterar las propiedades de un objeto

const alberto = {
nombre:"Alberto",
apellido:"López",
edad: 45
}
//Esto me muestra las propiedades del objeto pero no su valor
for(const valores in alberto){
console.log(valores);
//Para ver los valores de las propiedades.la notación del punto no nos sirve
console.log(`${valores} ${alberto[valores]}`)
}

Xenodevs_

Páginas

jueves, 16 de junio de 2022

JavaScript 5 (Bucles e iteraciones)

for

No hay comentarios:

Publicar un comentario