Introducción a JavaScript

En esta página se muestran ejemplos del uso de los bucles en JavaScript

Bucles `for`

Ejemplos del bucle `for`

<script>

    function pintarTabla(filas, columnas) {
        console.log("Fila " + filas + " columnas " + columnas);
        let contenedor = document.getElementById("ejemplo1");
        contenedor.innerHTML = "";
        let tabla = document.createElement("table");
        for (f = 0; f < filas; f++) {
            let tr = document.createElement("tr");
            for (c = 0; c < columnas; c++) {
                let td = document.createElement("td");
                td.id="tabla1_"+f+"_"+c;
                td.innerHTML = "Fila " + f + " columna" + c;
                td.style.backgroundColor = "rgb(" + Math.random() * 255 + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
                tr.appendChild(td);
            }
            tabla.appendChild(tr);
        }
        contenedor.appendChild(tabla);
    }

Se pinta una tabla de manera dinámica

Ejemplos del bucle `for...of`

<script>

function limpiar(){
    let celdas = document.querySelectorAll("td");
    for(let c of celdas){
        c.innerHTML="...";
    }
}

La tabla que se genera se puede modificar con un for...of

Comprobadlo en la tabla que se crea en el ejmplo anterior

Ejemplos del bucle `for...in`

<script>

function propiedades() {
    let contenedor = document.getElementById("ejemplo2");
    for (let propiedad in document) {
        if (contenedor[propiedad] !== undefined) {
            contenedor.innerHTML = contenedor.innerHTML + "Propiedad: " + propiedad + " tipo:" + typeof (contenedor[propiedad]) + "
";

        }
    }
}

Podemos recorrar las propiedades de un objeto con for...in

En este caso se muestran las propiedades definidas del objeto Document

Bucles `while`

Ejemplos con bucle `while`

<script>

function pintarTabla2(filas, columnas) {
    console.log("Fila " + filas + " columnas " + columnas);
    let contenedor = document.getElementById("contenedor2");
    contenedor.innerHTML = "";
    let tabla = document.createElement("table");
    let f=0;
    let c=0;
    while (f <filas) {
        let tr = document.createElement("tr");
        c=0;
        while(c < columnas) {
            let td = document.createElement("td");
            td.innerHTML = "Fila " + f + " columna" + c;
            td.id="tabla2_"+f+"_"+c;
            td.style.backgroundColor = "rgb(" + Math.random() * 255 + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
            tr.appendChild(td);
            c++;
        }
        tabla.appendChild(tr);
        f++;
    }
    contenedor.appendChild(tabla);
}

Se genera una tabla de manera dinámica pero con un bucle while

Ejemplo con bucle `do/while`

<script>

 function pintarTabla3(filas, columnas) {
    console.log("Fila " + filas + " columnas " + columnas);
    let contenedor = document.getElementById("contenedor3");
    contenedor.innerHTML = "";
    let tabla = document.createElement("table");
    let f = 0;
    let c = 0;
    do {
        let tr = document.createElement("tr");
        c = 0;
        do {
            let td = document.createElement("td");
            td.innerHTML = "Fila " + f + " columna" + c;
            td.id="tabla3_"+f+"_"+c;
            td.style.backgroundColor = "rgb(" + Math.random() * 255 + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
            tr.appendChild(td);
            c++;
        }while (c < columnas);
        tabla.appendChild(tr);
        f++;
    }while (f < filas);
    contenedor.appendChild(tabla);
}

Se genera una tabla de manera dinámica pero con un bucle do/while

Inicio

Bucles for

Ejemplos del bucle for

Ejemplos del bucle for...of

Ejemplos del bucle for...in

Bucles while

Ejemplos con bucle while

Ejemplo con bucle do/while

Bucles `for`

Ejemplos del bucle `for`

Ejemplos del bucle `for...of`

Ejemplos del bucle `for...in`

Bucles `while`

Ejemplos con bucle `while`

Ejemplo con bucle `do/while`