Autor: Juan Pablo Fuentes

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

/* crear un objeto que nos permita almacenar la información de un producto,
 que consiste en un nombre, una referencia (ambas de tipo string) 
 y un precio y un stock (ambas de tipo numérico). */

let producto = {
    nombre: "Tuerca",
    referencia: "TRC45",
    precio: 10,
    stock: 30
}
console.log(producto)

// Crear un array con 3 elementos
let productos = [{
    nombre: "Tuerca",
    referencia: "TRC45",
    precio: 100,
    stock: 30
}, {
    nombre: "Clavo",
    referencia: "CLV",
    precio: 20,
    stock: 40
}, {
    nombre: "Arandela",
    referencia: "ARL67",
    precio: 30,
    stock: 50
}]
console.log(productos)

let inventario = [];
inventario.push({
    nombre: "Tuerca",
    referencia: "TRC45",
    precio: 100,
    stock: 30
});
inventario.push({
    nombre: "Tuerca",
    referencia: "TRC45",
    precio: 10,
    stock: 30
});
inventario.push({
    nombre: "Tuerca",
    referencia: "TRC45",
    precio: 10,
    stock: 30
});

// Con constructores
function Producto(nombre, referencia, precio, stock) {
    this.nombre = nombre;
    this.referencia = referencia;
    this.precio = precio;
    this.stock = stock;
}

let tienda = [new Producto("Aa", "BB", 1, 2),
new Producto("CC", "DD", 3, 4),
new Producto("EE", "FF", 5, 6),
];
console.log(tienda)

// Para sumar el stock tengo que recorrer el array

let sumaStock = 0;
// Manera clásica
for (let i = 0; i < productos.length; i++) {
    sumaStock += productos[i].stock; // accedo a la propiedad stock del producto
}
console.log(sumaStock)

sumaStock = 0;
// con for of
for (let p of productos) {
    sumaStock += p.stock;
}
console.log(sumaStock)

// con foreach
sumaStock = 0;
productos.forEach(function (prod) {
    sumaStock += prod.stock;
})
console.log(sumaStock);

function getSumaStock(productos) {
    sumaStock = 0;
    productos.forEach(function (prod) {
        sumaStock += prod.stock;
    });
    return sumaStock;
}

// Inicializo con el primero porque no sé que valores me voy a encontrar
let masCaro=productos[0];
for (let p of productos) {
    if (p.precio>masCaro.precio){
        masCaro=p;
    }
}
console.log(masCaro);
// Esto es más fácil de programar pero es mucho más costoso computacionalmente
productos.sort((a,b)=>a.precio-b.precio);
console.log(productos)
console.log(productos.at(-1))

productos.forEach(function (prod) {
    prod.stock+=10;
});

console.log(productos);

let alumno = {
    nombre: "Ana",
    email: "ana@ana.com",
    telefono: "666999666",
    saludo: function () {
        return "Hola soy "+this.nombre+" y mi número de teléfono es "+this.telefono+" ¡Llámame!";
    },
    despedida:function(){
        return `Adios, mi mail es ${this.email}`;
    }
}

console.log(alumno)
console.log(alumno.nombre)
console.log(alumno.telefono)
alumno.nombre = "Ana Pi";
console.log(alumno);
// Cuidado porque estamos añadiendo una propiedad nueva
alumno.telfono = "232323";
console.log(alumno);
// Accedo vía corchetes
alumno["email"] = "a@a.com";
console.log(alumno)

let prop = "telefono";
// Esto me permite acceder con variables
alumno[prop] = "1111111"; // alumno.telefono="1111111"
console.log(alumno)

// Recorro todas las propiedades de un objeto y con el corchete al valor
for (let propiedad in alumno) {
    console.log(propiedad, alumno[propiedad])
}

console.log(alumno.saludo());
console.log(alumno.despedida());

// Constructor de objetos
function Alumno(nombre,edad,email){
    this.nombre=nombre;
    this.edad=edad;
    this.email=email;
}

let ana=new Alumno("ana",20,"a@a.com");
let pep=new Alumno("pep",12,"p@a.com");

console.log(ana)
console.log(pep)

let ana={
    nombre:"Ana",
    edad:20,
    mayorEdad:function(){
        return this.edad>=18; //Accedo a las propiedades del objeto
    }
}

console.log(ana.mayorEdad()); // true porque edad es mayor de 18

ana.edad=15;
console.log(ana.mayorEdad()); //false porque edad es menor de 18

let alumnos=[{nombre:"Ana",edad:20},{nombre:"Eva",edad:16},{nombre:"Pep",edad:21},{nombre:"Juan",edad:30}];
console.log(alumnos)
alumnos.sort(function(a,b){
    return a.edad-b.edad
})
console.log(alumnos)
console.log(alumnos.filter(function(valor){
    return valor.edad>=18;
}))
let alumno={
    nombre:"Ana",
    notas:[4,7,2,3]
}
console.log(alumno)

let clase=[{nombre:"Ana",edad:20,notas:[{asignatura:"js",nota:6},{asignatura:"java",nota:4}]},{nombre:"Eva",edad:16},{nombre:"Pep",edad:21},{nombre:"Juan",edad:30}];
console.log(clase);

console.log(clase[0].notas[0].asignatura); //js

let alumnos=["Juan","Ana","Pep","Eva"];
console.log(alumnos);
alumnos.sort();
console.log(alumnos);
alumnos.reverse();
console.log(alumnos);

let notas=[1,4,2,8,9,10,6];
console.log(notas);
notas.sort();
console.log(notas);
// Utilizamos una función propia
notas.sort(function(a,b){return a-b;});
console.log(notas);
// Con la función flecha es más corto
notas.sort((a,b)=> a-b);
console.log(notas);
let cadenas=["patatas","traigo","al","mercado"];
// Ordeno por longitud
cadenas.sort((a,b)=>a.length-b.length);
console.log(cadenas);
console.log(cadenas[0]); // La mas corta
console.log(cadenas.at(-1)); // La más larga

let productos=["Tuerca","Arandela","Clavo"];
let ordenados=productos.toSorted(); // Ordena creando una copia
console.log(productos);
console.log(ordenados);

// Desordenar (pero no es la mejor manera)
notas.sort(()=>0.5-Math.random());

console.log(notas)