<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;
}
// 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();
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);
};
// 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
// 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);
}
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
// 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
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));
// Variables
let c = "Hola que tal";
let n = 9;
let b = false;
n++;
c += " yo muy bien";
console.log(n);
console.log(c);
// Estructuras de control if (condicion){} else{}
if (n > 5) {
console.log("Lo que pasa si n es mayor de 5");
} else { // opcional
console.log("Lo que pasa si es menor");
}
// Las condiciones pueden ser complejas y utilizar los operadores lógicos
// AND && OR || NOT !
if (n > 5 && n < 10) {
console.log("N es mayor de 5 Y menor de 10");
}
if (n == 5 || n == 6) {
console.log("N es igual a 5 O igual a 6")
}
if (!(n == 5 || n == 6)) {
console.log("N NO es igual a 5 ni igual a 6")
}
// switch nos evalua un valor y lo compara
switch (n) {
case 1, 2, 3:
console.log("N val 1, 2 o 3");
break; // Romper el switch porque no si no sigue para adelante
case 4:
console.log("N vale 4");
break;
default:
console.log("Cualquier otro valor")
}
let dia = "domingo";
switch (dia) {
case "lunes":
case "martes":
case "miércoles":
case "jueves":
console.log("A trabajar");
break;
case "viernes":
console.log("Por fin es viernes");
break;
case "sábado":
case "domingo":
console.log("Fin de semana");
break;
default:
console.log("Día erróneo");
}
// if..else if.. else if
if (dia == "lunes" || dia == "martes" || dia == "miercoles" || dia == "jueves") {
console.log("A trabajar");
} else if (dia == "viernes") {
console.log("Por fin es viernes");
} else if (dia == "sábado" || dia == "domingo") {
console.log("Fin de semana");
} else {
console.log("Día erróneo");
}
let cantidad = 500;
if (cantidad < 100) {
//-...
} else if (cantidad < 1000) {
} else if (cantidad < 5000) {
}
// Bucles
let i=0;
while(i<10){ // Mientras se cumpla esta condición
i++;
console.log(i)
}
do{
i--;
console.log(i)
} while(i>0);
// Bucle for(inicializacion,condicion,modificacion)
for(let i=0;i<10;i++){
console.log(i);
}
for(let i=0;i<100;i+=5){
console.log(i);
}
// Ámbito de las variables
// Una variable es visible dentro de las llaves donde está declarada
for(let i=0;i<10;i++){
let j=i*4; // j solo es visible dentro del bucle
console.log(i,j);
}
// console.log(j); // No existe
// funciones: nos permiten encapsular código
// Pueden tener parámetros y devolver resultados
function saludo(){
console.log("Hola");
}
function saludo2(nombre){
console.log("Hola "+nombre);
}
function saludo3(nombre){
return "Hola "+nombre;
}
// Función pura: no depende de nada del entorno para ejecutarse
// Es como una caja negra, recoge parámetros y devuelve resultados
// Ante los mismos parámetros devuelve los mismos resultados
function suma(a,b){
return a+b;
}
// No pura
let num1=5;
let num2=6;
function suma(){
return num1+num2; // Esto funciona porque existen variables en el código, pero si o existieran daría error
}
// Nosotros tenemos funciones matemáticas en el objeto Math
console.log(Math.sqrt(81));
console.log(Math.PI);
console.log(Math.random());
// Las cadenas tienen sus propios métodos
let cadena="Hola que tal";
console.log(cadena.toUpperCase());
console.log(cadena.slice(3,6));
console.log(cadena.at(-3));
console.log(cadena.indexOf("que"));
// Arrays
// Colección o lista de elementos, se definen con []
let notas=[1,2,3,4];
let alumnos=["Ana","Eva","Pep"];
// Recorrer un array
for(let i=0;i<notas.length;i++){
console.log(notas[i]);
}
// for of
for(let nota of notas){
console.log(nota);
}
//foreach
notas.forEach(function(valor){
console.log(valor);
})
// Array tiene sus métodos
notas.push(8); // Añade una nota
let nota=notas.pop(); // Nos quita la última nota
console.log(nota);
notas.at(-1); // último elemento del array
console.log(notas.slice(2,3))// Obtengo una parte del array
// Splice: navaja suiza. Posición donde intervengo, elemntos eliminados, añadir elementos
alumnos.splice(1,1,"Juan","Luis"); // En la posición 1 elimina un elemento y pon Juan y Luis
console.log(alumnos);
console.log(alumnos.includes("Juan"));
console.log(alumnos.indexOf("Juan"));
// Funciones de iteracción. Todas hacen una copia
console.log(notas.filter(nota=>nota%2==0));
console.log(notas.map(nota=>nota*2));
// Objetos nos permiten tener información estructurada
// Un objeto tiene varias propiedades que pueden tener cualquier valor
let alumno={
nombre:"Juan",
email:"j@j.com"
}
let mascota={
nombre:"Toby",
edad:12
}
console.log(mascota.edad);
// Puedo tener mezcla de todo (y esto es habitual)
let mascotas=[
{
nombre:"Toby",
edad:12
},{
nombre:"firulai",
edad:5
},{
nombre:"Bestia",
edad:3
},{
nombre:"Piolín",
edad:8
},{
nombre:"Jerry",
edad:9,
enfermedades:["soriasis","parásitos"]
},{
nombre:"Sultán",
edad:2
}
]
// mascotas es un array por lo que lo recorro como tal
for(let m of mascotas){
if(m.edad>7){
console.log(m);
if (m.enfermedades){
console.log(`${m.nombre} ha enfermado`);
for(let enf of m.enfermedades){
console.log(enf);
}
}
}
}