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