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

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;
}

Manejar clases

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contenedor {
            background-color: aqua;
        }
        input{
            display: block;
        }
        .alumno{
            background-color: yellow;
        }
        .destacado{
            box-shadow: 5px 5px 10px;
        }
    </style>
</head>

<body>
    <label for="alumnos">Dime el número de alumnos</label>
    <input type="number" id="alumnos" value="0" />
    <div id="contenedor">
    </div>
    <script src="js/script.js"></script>
</body>

</html>

window.onload = function () {
    let alumnos = document.getElementById("alumnos");
    alumnos.addEventListener("input", function () {
        let numero = this.value;
        let contenedor = document.getElementById("contenedor");
        contenedor.innerHTML = "";
        for (let i = 1; i <= numero; i++) {
            let caja = createCaja("alumno" + i);
            contenedor.append(caja);

        }
        /*
        let cadena="";
        for (let i = 1; i <= numero; i++) {
            cadena+='<input type="text" size="30" id="alumno'+i+"/>";
        }
        contenedor.innerHTML(cadena);
        */
    })

}

function createCaja(nombre) {
    let cajaTexto = document.createElement('input');
    cajaTexto.size = 30;
    cajaTexto.type = "text";
    cajaTexto.id = nombre;
    cajaTexto.classList.add('alumno');
    cajaTexto.classList.add('destacado');
    cajaTexto.placeholder = "Introduce el nombre del " + nombre;
    cajaTexto.addEventListener("focus",function(){
        this.classList.toggle("destacado");
    })
    return cajaTexto;
}

Ejemplo creación dinámica inputs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contenedor {
            background-color: aqua;
        }
        input{
            display: block;
        }
    </style>
</head>

<body>
    <label for="alumnos">Dime el número de alumnos</label>
    <input type="number" id="alumnos" value="0" />
    <div id="contenedor">
    </div>
    <script src="js/script.js"></script>
</body>

</html>

window.onload=function(){
    let alumnos=document.getElementById("alumnos");
    alumnos.addEventListener("input", function(){
        let numero=this.value;
        let contenedor=document.getElementById("contenedor");
        contenedor.innerHTML="";
        for (let i=1;i<=numero;i++){
            let caja=createCaja("alumno"+i);
            contenedor.append(caja);

        }
    })
   
}

function createCaja(nombre){
    let cajaTexto = document.createElement('input');
    cajaTexto.size=30;
    cajaTexto.type="text";
    cajaTexto.id=nombre;
    cajaTexto.placeholder="Introduce el nombre del "+nombre;
    return cajaTexto;
}

document.getElementById("contenedor").append(cajaTexto);

Ejemplo crear y añadir nodos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contenedor{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="contenedor">
        <h1>Hola</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nobis quidem, pariatur aliquid, aliquam accusamus amet ullam provident impedit maxime nisi deserunt officiis alias odit aspernatur fugiat quia esse soluta.</p>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

let titulo=document.createElement('h3');
titulo.innerHTML="Título extra before";
console.log(titulo)
let contenedor=document.getElementById("contenedor");
contenedor.before(titulo);
let titulo2=titulo.cloneNode();
titulo2.innerHTML="Título extra after";
contenedor.after(titulo2);
let titulo3=titulo.cloneNode();
titulo3.innerHTML="Título extra prepend";
contenedor.prepend(titulo3);
let titulo4=titulo.cloneNode();
titulo4.innerHTML="Título extra append";
contenedor.append(titulo4);

Calculadora version 4


// Asigno el mismo evento a todos los botones
for (elemento of document.getElementsByTagName("button")) {
    elemento.addEventListener("click", operacion);
}

function operacion() {
    let operacion=this.innerHTML;
    let [numero1, numero2] = obtenerNumeros();
    let resultado=0;
    switch(operacion){
        case "+": resultado=numero1 + numero2;break;
        case "-": resultado=numero1 - numero2;break;
        case "*": resultado=numero1 * numero2;break;
        case "/": resultado=numero1 / numero2;break;
    }
   
    // Muestro el valor
    ponerNumero(resultado);
}


// Interacción con el HTML
function obtenerNumeros() {
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    return [Number(numero1.value), Number(numero2.value)];
}

function ponerNumero(numero) {
    let resultado = document.getElementById("resultado");
    resultado.value = numero;
}

Calculadora refactorizada (versión 3)

// Asignación de los eventos
document.getElementById("suma").addEventListener("click", sumar);
document.getElementById("resta").addEventListener("click", restar);
document.getElementById("multiplicacion").addEventListener("click", multiplicar);
document.getElementById("division").addEventListener("click", dividir);

// Funciones que implementan la lógica
function sumar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();
    // Los sumo
    let suma = numero1 + numero2;
    // Muestro el valor
   ponerNumero(suma);
}

function restar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let resta = numero1 - numero2;
    // Muestro el valor
   ponerNumero(resta);
}

function multiplicar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let multiplicacion = numero1 * numero2;
    // Muestro el valor
    ponerNumero(multiplicacion);
}


function dividir() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let division = numero1 / numero2;
    // Muestro el valor
    ponerNumero(division);
}

function obtenerNumeros() {
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    return [Number(numero1.value), Number(numero2.value)];
}

function ponerNumero(numero) {
    let resultado = document.getElementById("resultado");
    resultado.value = numero;
}