Trifulcas – Equipo de diseño y programación web

Iterables

let notas = [3, 7, 4, 8, 6, 5, 9, 2];

// con forEach recorremos todos los valores del array
notas.forEach(function (valor) {
    console.log(valor);
})
let suma = 0;
notas.forEach(function (valor) {
    suma += valor;
})
console.log(suma)

// Imprimir las notas que están posiciones pares
notas.forEach(function (valor, indice) {
    if (indice % 2 == 0) {
        console.log(valor);
    }
})

// Puedo usar una función que ya exista
notas.forEach(mostrar);

function mostrar(valor) {
    console.log(valor);
}

let notasDuplicadas = notas.map(function (valor) {
    return valor * 2;
})
console.log(notas);
console.log(notasDuplicadas);

let notasMitad = notas.map((valor) => valor / 2);
console.log(notas);
console.log(notasMitad);

let copia = notas.map(valor => valor);
console.log(copia);

// Yo puedo usar filter para recuperar todos los elementos que cumplan una condición
let aprobados = notas.filter(function (valor) {
    return valor >= 5;
}
);
console.log(aprobados);

let suspendidos = notas.filter(valor => valor < 5);
console.log(suspendidos);

let suspensos = [];
for (let nota of notas) {
    if (nota < 5) {
        suspensos.push(nota);
    }
}
console.log(suspensos);

// Sumar todos los elementos de un array
let totalNotas = notas.reduce(function (total, valor) {
    return total + valor;
})
console.log(totalNotas)

// Suma todas las notas aprobadas
totalNotas = notas.reduce(function (total, valor) {
    if (valor >= 5) { total += valor; }
    return total;
})
console.log(totalNotas)
// Contar todas las notas aprobadas
totalNotas = notas.reduce(function (total, valor) {
    if (valor >= 5) { total++; }
    return total;
}, 0); // Le pongo 0 a total como valor inicial
console.log(totalNotas)

Iteraciones y paso por valor y por referencia

let notas = [3, 7, 4, 8, 6, 5, 9, 2];

// con forEach recorremos todos los valores del array
notas.forEach(function (valor) {
    console.log(valor);
})
let suma = 0;
notas.forEach(function (valor) {
    suma += valor;
})
console.log(suma)

// Imprimir las notas que están posiciones pares
notas.forEach(function (valor, indice) {
    if (indice % 2 == 0) {
        console.log(valor);
    }
})

// Puedo usar una función que ya exista
notas.forEach(mostrar);

function mostrar(valor){
    console.log(valor);
}

let notasDuplicadas=notas.map(function(valor){
    return valor*2;
})
console.log(notas);
console.log(notasDuplicadas);

let notasMitad=notas.map((valor)=>valor/2);
console.log(notas);
console.log(notasMitad);

let numeros=[1,2,3];
let ndoble=duplicar(numeros);
console.log(ndoble);
console.log(numeros)

let juanito=numeros; // Esto no es una copia del array
juanito[1]=17; // Si modifico el array nuevo modifico el original
console.log(numeros) // numeros ha cambiado

// Esta función me está modificando el array que le pasamos
// Esto ocurre porque los arrays se pasan por referencia
function duplicar(tabla){
    for(let i=0;i<tabla.length;i++){
        tabla[i]*=2;
    }
    return tabla;
}


let a=3;
let b=doble(a);
console.log(a)
console.log(b)

function doble(numero){
    numero*=2;
    return numero;
}

let notas=[1,2,3,4,5];

let suma=sumaTabla(notas);
console.log(suma); // Esto lo hace bien
console.log(notas); // Pero destruye el array original

// Esto me suma el array pero lo destruye
function sumaTabla(tabla){
    let suma=0;
    while(tabla.length>0){
        suma+=tabla.pop();
    }
    return suma;
}

function sumaTablaSinDestruir(tabla){
    // Antes de modificar el array hago una copia del mismo
    let copia=[...tabla];
    let suma=0;
    while(copia.length>0){
        suma+=copia.pop();
    }
    return suma;
}

Buscar en arrays

let notas=[3,6,2,7,3,9,10,8];

console.log(notas.includes(8)); // true porque hay un 8 en el array
console.log(notas.includes(5)); // false porque no hay ningún 5 en el array

let pos=notas.indexOf(7); // el 7 está en la posición 3
console.log(pos)

let pos2=notas.indexOf(5); // -1 porque no está
console.log(pos2)
pos=notas.indexOf(3);
console.log(pos); // 0 porque está en la posición 0
pos=notas.indexOf(3,1); // Busca a partir de la posición 1
console.log(pos); // 4 porque el siguiente 3 está en la posición 4

let numeros=[1,2,3,1,4,3,1,5,6,1];

// Buscar todas las posiciones donde está el  número 1
pos=numeros.indexOf(1); // Busco el número 1 desde el comienzo
while(pos!=-1){
    console.log(pos);
    pos=numeros.indexOf(1, pos+1); // busco el siguiente, diciendo que busque a partir de la siguiente posición
}

// En find no buscamos un valor, usamos una función

let aprobado=numeros.find(buscarAprobado); // Busca el primer elemento para el que esta función es true
console.log(aprobado)

function buscarAprobado(valor){
    return valor>=5;
}

let alumnos=["Ana","Eva","Pep","Juan"];

let al=alumnos.find(function(valor){
    return valor.toLocaleLowerCase().startsWith("p");
})
console.log(al);
al=alumnos.find((valor)=>valor.toLowerCase().endsWith("a"));
console.log(al)

let mates=[22,6,12,21,7,90];
console.log(mates.find(esPrimo));

function esPrimo(numero) {
    for (let i = 2; i < numero; i++) {
        if (numero % i == 0) {
            return false;
        }
    }
    return true;
}

let n=mates.find(function(valor,indice,array){
    console.log(valor,indice,array);
    // Quiero buscar el primer elemento que es menor que el siguiente
    if (valor<array[indice+1]){
        return true;
    }
})
console.log(n)

Ejemplos métodos arrays

let alumnos=["ana","pep","eva"];

// Añadimos un elemento al principio del array
alumnos.unshift("joan");
console.log(alumnos)

// Quitamos un elemento del principio del array
let alumno=alumnos.shift();
console.log(alumno);
console.log(alumnos);

console.log(alumnos.toString());
console.log(alumnos.join(" - "));

// at tiene el mismo comportamiento que en las cadenas y permite negativos
console.log(alumnos.at(1)) // alumnos[1]
console.log(alumnos.at(-1)) // alumnos[alumnos.length-1]

// NO USAR
delete alumnos[1];
console.log(alumnos);

let otrosAlumnos=["Juan","Marta","Maria"]
let aula=alumnos.concat(otrosAlumnos);
console.log(aula)

// Obtener partes de un array igual que en las cadenas (Obtener)
let nuevo=aula.slice(3,5);
console.log(nuevo)
console.log(aula)

let numeros=[1,2,3,4,5,6,7,8,9,10];

// Utilizamos splice para muchas cosas, veamos un ejemplo de cada una (modificar)
// Eliminar elementos en cualquier posición
let res=numeros.splice(4,2); // En a posición 4 quita 2 elementos
console.log(numeros);
console.log(res);

// Insertar elementos en cualquier posición
numeros.splice(4,0,55,66); // En la posición 4 estoy metiendo los valores 55 y 66
console.log(numeros);

// Sustituir elementos
numeros.splice(4,1,999); // En la posición 4 cambio el valor que hay por 999
console.log(numeros);

// Valores negativos
numeros.splice(-2,1,999); // En la posición penúltima cambio el valor que hay por 999
console.log(numeros);

// Parte el array en dos
let a=numeros.splice(4);
console.log(numeros,a)

Soluciones ejercicios

/*
Una función que devuelva true si la cadena que le pasamos empieza y acaba con
 la misma letra, independientemente de mayúsculas y minúsculas. 
 Ejemplo iniciofin(“hola”)->false iniciofin(“alubia”)->true iniciofin(“Alava”)->true;
 */

function iniciofin(cadena){
    cadena=cadena.toLowerCase();
    return cadena.at(0)==cadena.at(-1);
}

console.log(iniciofin("hola"));
console.log(iniciofin("alubia"));
console.log(iniciofin("Alava"));

/*
Una función que nos quite los dos primeros caracteres de una cadena. 
recortar(“En un lugar de la mancha”)->” un lugar de la mancha”
*/

function recortar(cadena){
    return cadena.slice(2);
}
console.log(recortar("En un luar de la mancha"))

/*Escribir una función que invierta el orden de los caracteres de una cadena dada. 
invertir("hola")–>"aloh"
*/

function invertir(cadena){
    let res="";
    for(let i=1;i<=cadena.length;i++){
        res+=cadena.at(-i);
    }
    return res;
}

function invertir2(cadena){
    let res="";
    for(let i=0;i<cadena.length;i++){
        res=cadena.at(i)+res;
    }
    return res;
}
function invertir3(cadena){
   return cadena.split("").reverse().join("");
}
console.log(invertir("hola"));
console.log(invertir2("hola"));
console.log(invertir3("hola"));

/*Escribir una función que nos quite TODOS los espacios de una cadena. 
sinEspacios("hola que tal")-_>"holaquetal"*/

function sinEspacios(cadena){
    let res="";
    for(let i=0;i<cadena.length;i++){
        if (cadena.at(i)!=" "){
            res+=cadena.at(i);
        }
    }
    return res;
}
function sinEspacios2(cadena){
    return cadena.split(" ").join("");
}
console.log(sinEspacios("hola que tal"));
console.log(sinEspacios2("hola que tal"));
/*Una función que nos devuelva el centro de una cadena. 
El centro es, si la longitud de la cadena es impar, la letra que está en el medio. 
Si la longitud de la cadena es par, las dos letras del medio. centro(“mar”)->”a” 
centro(“casa”)->”as”;
*/

console.log("peras".slice("peras".length/2,"peras".length/2+1));
console.log("perico".slice("perico".length/2-1,"perico".length/2+1));

function centro(cadena){
    let medio=cadena.length/2;
    if (cadena.length%2==0){
        return cadena.slice(medio-1,medio+1);
    }else{
        return cadena.slice(medio,medio+1);
    }
}
function centro2(cadena){
    let inicio=cadena.length/2;
    let fin=inicio+1
    if (cadena.length%2==0){
        inicio--;
    }
    return cadena.slice(inicio,fin);
}
console.log(centro2("mar"))
console.log(centro2("casa"))
console.log(centro2("perico"))
console.log(centro2("periquito"))

Arrays, una introducción

// variable pongo un valor
let nombre="Ana";
console.log(nombre);
nombre="eva";
console.log(nombre)

// Un conjunto de variables numeradas
let alumnos=["Ana","Eva","Juan"]; // Un array de tres elementos
console.log(alumnos);
console.log(alumnos[0]); // ANA
console.log(alumnos[1]); // EVA
console.log(alumnos[2]); // JUAN
alumnos[1]="Eva Pérez"; // Accedo por el índice para modificar
console.log(alumnos);

let notas=[4,7,8,3,2,1];
console.log(notas[3]); // 3
console.log(notas.length);

// Recorrer el array
for(let i=0;i<notas.length;i++){
    console.log(notas[i]);
}

// Con lo que se llama foreach (aunque en JS no lo sea)
// nota va recorriendo todos  los valores de notas
for(let nota of notas){
    console.log(nota);
}

for(let alumno of alumnos){
    console.log(alumno);
}

// Cantidad de aprobados
let aprobados=0;
for(let nota of notas){
   if (nota>=5){
    aprobados++;
   }
}
console.log(`Han aprobado ${aprobados} alumnos`)

// Los arrays pueden ser mixtos
let mixto=[1,2,"ana",false,5.6,"cacahuete", document.createElement('div')];
for(let valor of mixto){
    console.log(valor);
}

// Cuidado con modificar a la ligera
notas[100]=9;
console.log(notas.length);
console.log(notas);

// Nosotros podemos modificar un array añadiendo o quitando elementos
let marcas=["seat","ford","tesla"];

marcas.push("hunday"); // Push añade un elemento al final
console.log(marcas)
let elemento=marcas.pop(); // Pop nos quita el elemento (lo recupera) y el array se queda sin el
console.log(elemento)
console.log(marcas)
marcas.pop();
console.log(marcas)
marcas[marcas.length]="Lambo";
console.log(marcas)

Ejercicio contar vocales

// Vamos a crear una función que nos cuente las vocales de una cadena
// numVocales("Hola que tal")->5 numVocales("Adios")->3
// ¿Se el numero de 'a' en una cadena?
// Voy letra por letra y miro si es una vocal

console.log(numVocales("camión"));

function numVocales(cadena){
    cadena=cadena.toLowerCase();
    let cont=0;
    // Recorrer la cadena
    for(let i=0;i<cadena.length;i++){
        
        // Si ese caracter es una vocal o no
        if (esVocal(cadena.at(i))){
            cont++;
        }
    }
    return cont;
}

function esVocalSinAcentos(letra){
    if (letra=='a' || letra=='e' || letra=='o' || letra=='i' || letra=='u'){
        return true;
    } else{
        return false;
    }
}

function esVocal(letra){
    let vocales="aeiouáéíóúàèìòùüöï";
    return vocales.includes(letra);
}

console.log(toTitle("hola que tal"));
console.log(toTitle("HOLA QUE TAL"));

function toTitle(cadena){
    let palabras=cadena.split(" ");
    for(let i=0;i<palabras.length;i++){
        palabras[i]=palabras[i].at(0).toUpperCase()+palabras[i].slice(1).toLowerCase();
    }
    return palabras.join(" ");
}

Ejemplos métodos de string

let cadena="Hola cadena guapa";

console.log(cadena.length);
console.log(cadena.charAt(5));
console.log(cadena[5]); // No es recomendable usarlo

// Contar las aes en una cadena
let cont=0;
for(let i=0;i<cadena.length;i++){
    if (cadena.charAt(i)=="a"){
        cont++;
    }
}
console.log(`El número de aes en "${cadena}" es ${cont}`);

console.log(cadena.at(5));
// Permite números negativos
console.log(cadena.at(-1));

// Le doy la vuelta a la cadena
let c="";
for(let i=1;i<=cadena.length;i++){
    c+=cadena.at(-i);
}
console.log(c);

// Obtener subcadenas de una cadena

console.log(cadena.substr(2,3)); // Desde el caracter 2 3 caracteres "la "
console.log(cadena.substr(2)); // Desde el caracter 2 al final "la cadena guapa"

console.log(cadena.substring(2,4)); // de la posición 2 a la 4 "la"
console.log(cadena.substring(2)); // de la posición 2 al final "la cadena guapa"

// Esta es la recomendada
console.log(cadena.slice(2,4)); // de la posición 2 a la 4 "la"
console.log(cadena.slice(2)); // de la posición 2 al final "la cadena guapa"
console.log(cadena.slice(2,-1)); // de la posición 2 a la última letra "la cadena guap"
console.log(cadena.slice(-4,-1)); // de la antepenultima a la última letra "uap"

for(let i=0;i<cadena.length;i++){
    console.log(cadena.slice(i)," - ", cadena.slice(-i))
}

// Pasar a mayúsculas y minúsculas

console.log(cadena.toLowerCase());
console.log(cadena.toUpperCase());

console.log("pingüino".toLocaleUpperCase()); // Lo mismo pero más adecuado para cadenas con acentos y cosas así


// Eliminar espacios

let conespacios="    hola   que   tal      ";
console.log(conespacios.trim()); // Elimina todos los espacios
console.log(conespacios.trimEnd());  // Los del final
console.log(conespacios.trimStart()); // Los del principio

console.log("hola".repeat(4)); // Repite cuatro veces hola

// Reemplazar una cadena por otra

console.log(cadena.replace("guapa","fea"));
console.log(cadena.replace("a","4"));   // Solo lo hace una vez, la primera aparición

console.log(cadena.replaceAll("a","4"));   // Reemplaza todas

// split y join. Sirve para convertir una cadena en un array y viceversa

console.log(cadena.split(" "));
console.log(cadena.split("a"));
console.log(cadena.split(""));
console.log(cadena.split("").sort().join(""));


// Crea un arbolito (de un lado)
for(let i=0;i<8;i++){
    console.log("*".repeat(i));
}

// Crea un arbolito (del otro lado)
for(let i=0;i<8;i++){
    console.log("*".repeat(i).padStart(8-1));
}

// Saber si una cadena tiene una subcadena

console.log(cadena.includes("gu")); // true
console.log(cadena.includes("fu")); // false

console.log(cadena.startsWith("Ho")); // true
console.log(cadena.startsWith("ho")); // false
console.log(cadena.startsWith("pepe")); // false

console.log(cadena.endsWith("pa")); // true
console.log(cadena.endsWith("PA")); // false
console.log(cadena.endsWith("pepe")); // false

// Buscar la posición de una cadena dentro de otra

console.log(cadena.indexOf("dena")); // 7 porque es la posición donde se encuentra
console.log(cadena.indexOf("pepe")); // -1 porque no está la cadena pepe

// Puedo decirle la posición desde donde buscar
console.log(cadena.indexOf("a")); // 3 porque es la posición donde se encuentra
console.log(cadena.indexOf("a",4)); // 6 porque es la posición donde se encuentra

// Me busca todas las posiciones de la letra 'a' dentro de la cadena
let pos=cadena.indexOf("a");
while(pos!=-1){
    console.log(pos);
    pos=cadena.indexOf("a",pos+1); // Buscamos a partir de la posición siguiente
}

Solución cajas complejo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <p>
        <label for="numero">Introduce el ancho de cajas</label>
        <input type="number" id="ancho" value="0">
        <label for="numero">Introduce el alto de cajas</label>
        <input type="number" id="alto" value="0">
    </p>
    <div id="contenedor"></div>
    <script src="js/script.js"></script>
</body>
</html>

window.onload = function () {
    
    let ancho=document.getElementById("ancho");
    let alto=document.getElementById("alto");
    // Añado el evento input al input del número para que cuando cambie actue
    ancho.addEventListener("input", function(event){
       generarCajas();
    })
    alto.addEventListener("input", function(event){
        generarCajas();
     })
}
function generarCajas(){
    let [ancho,alto]=obtenerValores();
    borrarContenedor();
    // Crear tantas cajas de ancho y de alto como me pidan
    for(let i=1;i<=alto;i++){
        let d=document.createElement("div");
        for(let j=1;j<=ancho;j++){
            let caja=crearCaja(`(${i},${j})`);
            d.append(caja);
        }
        ponerCaja(d);
    }

}
function borrarContenedor(){
    let contenedor=document.getElementById("contenedor");
    contenedor.innerHTML="";
}
function ponerCaja(caja){
    let contenedor=document.getElementById("contenedor");
    contenedor.append(caja);
}
// Obtengo los valores de mi html
function obtenerValores(){
    let ancho=document.getElementById("ancho");
    let alto=document.getElementById("alto");
    return [Number(ancho.value),Number(alto.value)];
}
// Creo una función aparte para crear la caja
function crearCaja(numero){
    let caja=document.createElement("div");
    caja.className="caja"; //caja.classList.add("caja")
    // Utilizo las cadenas con formato para poner el número
    caja.innerHTML=`<p>${numero}</p>`;
    return caja;
}

Solución ejercicio crear cajas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <p>
        <label for="numero">Introduce el número de cajas</label>
        <input type="number" id="numero" value="0">
    </p>
    <div id="contenedor"></div>
    <script src="js/script.js"></script>
</body>
</html>

.caja{
    width: 150px;
    height: 150px;
    background-color: green;
    border: solid 2px #DDDDDD;
    display: inline-block;
}
.caja p{
    font-size: 3em;
    color: white;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

window.onload = function () {
    
    let numero=document.getElementById("numero");
    // Añado el evento input al input del número para que cuando cambie actue
    numero.addEventListener("input", function(event){
        let valor=Number(this.value);
       // let valor2=Number(event.target.value); esta es otra manera
        
       // Tengo que crear n cajas y añadirlas al contenedor

        let contenedor=document.getElementById("contenedor");
        // Borro lo que tenga el contenedor
        contenedor.innerHTML="";
        // Creo tantas cajas como me haya puesto el usuario
        for(let i=1;i<=valor;i++){
            contenedor.append(crearCaja(i));
        }

    })

}
// Creo una función aparte para crear la caja
function crearCaja(numero){
    let caja=document.createElement("div");
    caja.className="caja"; //caja.classList.add("caja")
    // Utilizo las cadenas con formato para poner el número
    caja.innerHTML=`<p>${numero}</p>`;
    return caja;
}