// El formato JSON me permite convertir cualquier variable JS en una cadena // un array es una cadena con corchetes y los elementos "[1,2,3]" // un objeto es una cadena con llaves y las propiedades entre comillas // {"nombre":"Juan","apellidos":Pi} // cualquier combinación no es más que combinar lo anterior // {"nombre":"Juan","apellidos":Pi, "notas":[1,2,3]} // De variable a cadena con JSON.stringify // De cadena a variable con JSON.parse let alumnos=["Ana","Eva","Pep"]; // Esto es un array let alumnosJSON=JSON.stringify(alumnos); // Esto es una cadena console.log(alumnos); console.log(alumnosJSON); // De la cadena puedo volver a obtener el array let alumnosCopia=JSON.parse(alumnosJSON); console.log(alumnosCopia); // Es un array let clase={nombre:"Aula 1",capacidad:30,alumnos:["Ana","Eva","Juan"]}; let claseJSON=JSON.stringify(clase); console.log(clase); // Esto es un objeto console.log(claseJSON); // Esto es un string let claseCopia=JSON.parse(claseJSON); console.log(claseCopia); // Esto es un objeto de nuevo
Autor: Juan Pablo Fuentes
Formador de programación y bases de datos
Un ejemplo de localStorage
<input id="nombre" type="text"/>
let nombre = document.getElementById("nombre"); nombre.oninput = function () { localStorage.setItem("nombre", this.value); } let nombreAlmacenado = localStorage.getItem("nombre"); if (nombreAlmacenado) { nombre.value = nombreAlmacenado; }
localstorage
// Guardar información que se mantenga aunque actualicemos la página // cookies es una manera pero están obsoletas document.cookie="nombre=juan"; // La mejor manera actualmente es con localStorage // Añado una propiedad 'nombre' con el valor 'juan' localStorage.setItem("nombre","juan"); // Recupero ese valor console.log(localStorage.getItem("nombre")); // Elimino la propiedad (y, por supuesto, su valor) localStorage.removeItem("nombre") // Limpio todo el localstorage localStorage.clear();
Un ejemplo de recorrer un array con interval
document.addEventListener('DOMContentLoaded', () => { launch(); }); const launch = () => { viewArray('joana'); }; viewArray = (name) => { const arrayName = ['pere', 'marti', 'joana', 'ricard', 'ramon', 'judit']; let key = 0; const arrayView = setInterval(() => { if (key === arrayName.length) { clearInterval(arrayView); console.log(`No s'ha trobat l'usuari`); } else { console.log(arrayName[key]); if (arrayName[key] === name) { clearInterval(arrayView); console.log(`S'ha trobat l'usuari: ${name}`); } key++; } }, 3000); };
Control de errores
// Dentro de JS pueden suceder errores // Hay una manera de gestioner errores // try{...}catch(err){...} let producto = { nombre: "Tuerca", precio: { PVP: 50, reducido: 20 } } let producto2 = { nombre: "Tuerca" } // Intenta ejecutar el código siguiente try { console.log(producto.nombre) console.log(producto.pecio.PVP) // Si hay algún error no petes, entra en el catch } catch (err) { // Dentro del catch tenemos el parámetro 'err' con la información del error console.log(err.message); console.log(err); } finally { console.log("Esto se ejecuta siempre"); } console.log("Hola") console.log(sumaPreciosOk([producto, producto2])); // Esto lanza un error porque accedemos a una propiedad que no existe function sumaPrecios(productos) { let suma = 0; for (let producto of productos) { suma += producto.precio.PVP; } return suma; } // Aquí lo hacemos bien: esto no interrumpe el programa function sumaPreciosOk(productos) { try { let suma = 0; for (let producto of productos) { suma += producto.precio.PVP; } return suma; } catch { return 0; // podría devolver undefined } } console.log(suma(8)); try{ console.log(suma(-8)); }catch(err){ console.log(err.message) } // lanzar errores propios function suma(numero) { if(numero<0 || numero>10000){ throw new Error("Número fuera de margen"); } let suma = 0; for (let i = 0; i < numero; i++) { suma += i; } return suma; }
Operador ternario e intervalos
// operador ternario // evaluar una condición (como un if) pero en vez de tener líneas de código // Nos devuelve una expresión. Es un if sin código let edad = 20; if (edad >= 18) { console.log("Puedes entrar"); } else { console.log("No puedes entrar"); } // Sintaxis condicion ? valor si cierto : valor si falso let mensaje = edad >= 18 ? "Puedes entrar" : "No puedes entrar"; console.log(mensaje); function mayor(a, b) { return a > b ? a : b; } // Temporizadores // Poder ejecutar una función en algún intervalo de tiempo, bien después de que pase // un determinado momento o a intervalos regulares // Ejecuta algo cuando pasa la cantidad de tiempo estipulada UNA VEZ setTimeout(saludo,3000); // La unidad es milisegundos function saludo(){ console.log("Hola que tal"); } setTimeout(function(){ console.log("Yo muy bien"); },5000); let alegro=setTimeout(()=>{console.log("Pues me alegro")},7000); clearTimeout(alegro); // Cancelo el timeout anterior // Ejecuta lo que le ponemos cada X tiempo setInterval(saludo,5000); // Cada 5 segundos llama a saludo let cucu=setInterval(()=>{console.log("cucu")},2000); // Cada 2 segundos escribe cucu setTimeout(function(){ clearInterval(cucu); // Desactivar o parar el intervalo },20000); // Un contador en el div let cont=0; setInterval(function(){ cont++; document.getElementById("resultado").innerHTML=`<h1>${cont}</h1>`; },1000) setTimeout(alterarDiv,2000); // Settimeout anidado. Es lo mismo que el intervalo pero es más resistente a imprevistos function alterarDiv(){ document.getElementById("resultado").innerHTML+=` ### `; setTimeout(alterarDiv,2000); }
Planificación Proyecto Resumen
let preguntas = [{ pregunta: "¿Con qué propiedad se pone el color de fondo en CSS?", correcta: "backgroundColor", incorrecta1: "color", incorrecta2: "bckColor", incorrecta3: "setColor" }, { pregunta: "¿tipo de letra en CSS?", correcta: "font-family", incorrecta1: "fontaine", incorrecta2: "letter", incorrecta3: "pp" }, { pregunta: "¿ocultar elemento en CSS?", correcta: "display:none", incorrecta1: "display:hide", incorrecta2: "shadow", incorrecta3: "esconding" }]; // Al pulsar un botón se desencadena la acción // ¿Se capturar el click de un botón? // Dentro del programa // puntos que valdrán 0 // Recorrer el array de las preguntas // Para cada pregunta // Mostrar un prompt con el texto de la pregunta y las respuestas desordenadas // La pregunta-> Acceder a la propiedad del objeto // respuestas-> saber como desordenar una serie de respuestas // Guardar las respuestas en un array y desordenarlo // De un array sacar una cadena es muy fácil: recorrerlo y añadir la posición +1 // Cuando el usuario me de la respuesta // Comprobar si es correcta: coger la posición del usuario -1 y ver el valor // Si ese valor==correcta muy bien y puntos++ else muy mal // Al acabar de recorrer le mostramos los puntos
Algunos enlaces
Repaso DOM
// En JS puedo seleccionar cualquier elemento HTML vía DOM // DOM es document object model y tiene todos los elementos que se han pintado let caja=document.getElementById("nombre"); console.log(caja); let div=document.getElementById("resultado"); console.log(div); let caja2=document.querySelector("#input"); // Nos coge el primer elemento que coincida con el selector css let cajas=document.getElementsByTagName("input"); console.log(cajas); for(let c of cajas){ c.value="hola"; } let caja3=document.querySelectorAll("input"); // Nos coge todos los elementos que coincida con el selector css console.log(caja3) // Con los objetos puedo cambiar sus propiedades caja.value="Pepe"; caja.style.backgroundColor="red"; // Propiedades más interesantes: value en los elementos de formulario, // innerHTML en los elementos HTML div.innerHTML="<p>Viva el JS</p>" console.log(div.innerText); // Tenemos eventos que es una manera de reaccionar a la interacción del usuario div.onclick=function(evt){ console.log("Has pinchado en el div"); console.log(evt); } caja.addEventListener("focus",function(evt){ console.log("El input tiene el foco"); }); // mousedown, mouseup, keydown, keyup, focus, blur, mouseenter, mousemove, input... // Podemos crear elementos nuevos let nuevoParrafo=document.createElement("p"); nuevoParrafo.style.backgroundColor="green"; nuevoParrafo.innerHTML="Hola <b>que</b> tal"; nuevoParrafo.onclick=function(){ console.log("cucu"); } // Y añadirlos a cualquier sitio div.append(nuevoParrafo); // append,prepend,after,before
Constantes
let variable=9; variable++; const PI=3.14159; const notas=[1,2,3,4]; // Más que let se suele usar const notas.push(8); notas[0]=7; console.log(notas); const producto={ // Se suele utilizar const nombre:"Tuerca", precio:100 } producto.nombre="Arandela"; console.log(producto) const suma=function(a,b){ return a+b; } console.log(suma(2,3));