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