Trifulcas

// 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 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) + Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

function restar () {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) - Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

function multiplicar () {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) * Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}


 function dividir() {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) / Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

 <h1>Calculadora</h1>
    <input type="number" id="numero1">
    <button id="suma">+</button>
    <button id="resta">-</button>
    <button id="multiplicacion">*</button>
    <button id="division">/</button>
    <input type="number" id="numero2">
    =
    <input type="number" id="resultado">
    <script src="js/script.js"></script>

// Vamos a hacer la suma
// 1.- Establecer el algoritmo (la receta)
// 2.- Comprobar el programa
// 3.- Refactorizar (mejorar)
// Cuando pulsen la suma se suman los dos numeros y se muestran en el resultado
// a) Saber como hacer que cuando pulsen un botón mi programa haga algo
// Añadiendo un evento al botón
// b) Saber coger el valor de una caja de texto
// Obtener el elemento y con 'value'
// c) Saber sumar dos números
// con +
// d) Saber cambiar el valor de una caja de texto
// obtener el elemento y usar el value
// Al pulsar el botón obtener los dos valores, sumarlos y ponerlos en la caja de resultado

let suma=document.getElementById("suma");
suma.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)+Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let resta=document.getElementById("resta");
resta.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)-Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let multiplicacion=document.getElementById("multiplicacion");
multiplicacion.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)*Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}


let division=document.getElementById("division");
division.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)/Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="nombre" name="nombre">
    <script src="js/teclado.js"></script>
</body>
</html>

let caja = document.getElementById("nombre");

// Se activa al pulsar la tecla
caja.onkeydown = function (evt) {
    console.log(evt);
    // No permite la pulsación de la letra 'A'
    if (evt.key == "a") {
        return false; // Cancela el evento, o sea que se carga la pulsación de la tecla
    }
}

// Al levantar la tecla
caja.onkeyup = function (evt) {
    console.log(evt);
}


// Cuando el elemento tiene el foco
caja.onfocus=function(evt){
    console.log("Cogemos el foco");
    this.style.backgroundColor="Yellow";
}

// Cuando el elemento pierde el foco
caja.onblur=function(evt){
    console.log("Perdemos el foco");
    this.style.backgroundColor="White";
}

// Cuando cambia el valor y salimos del elemento
caja.onchange=function(evt){
    console.log(evt);
}

// Cuando cambia el valor sin salir del elemento
caja.oninput=function(evt){
    console.log(evt);
}

<!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/styles.css">
</head>
<body>
    <div id="test"></div>

    <script src="js/mouse.js"></script>
</body>
</html>

#test{
    height: 200px;
    width: 200px;
    background-color: chartreuse;
}

let caja=document.getElementById("test");

caja.onclick=function(evt){
    console.log("Has pinchado");
}

 <button id="pinchar">Pínchame</button>
    <button id="otro">Pínchame también</button>
    <button id="otromas">Pínchame de nuevo</button>

// Eventos. Primero capturo el elemento
let boton=document.getElementById("pinchar");
let otro=document.getElementById("otro");
let otromas=document.getElementById("otromas");

// Asigno a sus eventos la función que quiero usar

// Una función que ya existe
boton.onclick=saludar;

function saludar(){
    alert("Hola");
}

// Una función definida en el  momento
otro.onclick=function(){
    alert("Hola que tal");
}

// Una función flecha
otromas.onclick=()=>{
    alert("con función flecha")
}

  <p>Esto es una prueba</p>
    <input type="text" size="20" value="Hola" id="nombre" name="nombre"/>
    <p id="resultado"></p>

    <script src="js/prueba.js"></script>

let tabla = "";
// Creo una cadena con la tabla de multiplicar
for (let i = 1; i <= 10; i++) {
    tabla += i + " x 5 = " + (i * 5) + "<br/>"
}

// Cambio el  párrafo para que tenga esa cadena
document.getElementById("resultado").innerHTML = tabla;

// La instrucción más usada para obtener un elemento determinado del DOM
let caja=document.getElementById("nombre");
caja.style.background="red";
console.log(caja.placeholder);

// Queryselector nos busca el primer elemento que coincide con el selector css
// Busco por etiqueta (tag) textarea
let texto=document.querySelector("textarea");
console.log(texto.innerHTML);

// Busco por id
let caja2=document.querySelector("#apellido");
console.log(caja2);

// Buscando por clase
let caja3=document.querySelector(".prueba");
console.log(caja3);
caja3.value="Pepe";

// Todos los elementos que cumplen el selector css
// Devuelve un array que podemos recorrer
let textos=document.querySelectorAll("textarea");
console.log(textos);

// Obtengo todos elementos que tienen una etiqueta (tag) determinado
let cajas=document.getElementsByTagName("input");
console.log(cajas);

// Obtengo todos los elementos que son de una determinada clase
let porClase=document.getElementsByClassName("prueba");
console.log(porClase);

function factorial(num = 1) {
    if (isNaN(num) !== false || num < 0) {
        return false;
    }

    if (num === 0) {
        return 1;
    }

    let res = 1;

    for (let i = 1; i <= num; i++) {
        res *= i;
    }

    return res;
}

function repeat(string = null, num = 0) {
    if (isNaN(num) !== false || num < 1) {
        return false;
    }

    if (typeof string !== 'string') {
        return false;
    }
    
    let res = '';

    for (i = 0; i < num; i++) {
        res += string;
    }

    return res;
}

function perimetro(a = 0, b = 0) {
    if ((typeof a !== 'number' || typeof b !== 'number') && (a < 1 || b < 1)) {
        return false;
    }

    return (a + b) * 2;
}

function half(a = 0, b = 0, c = 0)
{
    if (typeof a !== 'number' || typeof b !== 'number' || typeof c !== 'number') {
        return false;
    }

    if ((a === b) || (a === c)) {
        return a;
    } else if (b === c) {
        return b;
    }

    if (a < b && c > b) {
        return `\n\topc1 a: ${a} b: ${b} c: ${c} MITJ: ${a}`;
    } else if (c < b && b < a) {
        return `\n\topc2 a: ${a} b: ${b} c: ${c} MITJ: ${c}`;
    } else if ((a < b && b > c) && c > a) {
        return `\n\topc3 a: ${a} b: ${b} c: ${c} MITJ: ${a}`;
    } else if (a < b && b > c) {
        return `\n\topc4 a: ${a} b: ${b} c: ${c} MITJ: ${c}`;
    } else if ((a > b && b < c) && c < a) {
        return `\n\topc5 a: ${a} b: ${b} c: ${c} MITJ: ${b}`;
    } else if ((a > b && b < c) && c > a) {
        return `\n\topc6 a: ${a} b: ${b} c: ${c} MITJ: ${b}`;
    } else {
        return `cas no contemplat de a: ${a} b: ${b} c: ${c}`;
    }
}

function evenOdd(numA = 0, numB = 0) {
    if (typeof numA !== 'number' || typeof numB !== 'number') {
        return false;
    }
    
    if ((0 === numA % 2 && 0 === numB % 2) || (0 !== numA % 2 && 0 !== numB % 2)) {
        return true;
    }

    return false;
}

function sum(a = 0, b = 0) {
    let sum = 0;

    if ( a == b) {
        return a;
    }

    if ( a > b) {
        sum = a;
        a = b;
        b = sum;
        sum = 0;
    }

    for (let i = a - 1; i < b; i ++) {
        sum += (i + 1);
    }

    return sum;
}


console.log(`\nEscribir una función factorial a la que le pasamos un número y nos devuelve el factorial de ese número (el factorial de 5 es 1*2*3*4*5, el de 3 1*2*3)`);
console.log(`Factorial: ${factorial(5)}`);
console.log('-'.repeat(10));

console.log(`\nEscribir una función repetirCadena a la que le pasamos una cadena y un número y nos devuelve la cadena repetida n veces: repetirCadena("hola",3) ->"holaholahola"`);
console.log(`Fase repetida: ${repeat('jaume', 3)}`);
console.log('-'.repeat(10));

console.log(`\nCrear una función perímetro a la que le pasamos dos lados y nos devuelve el perímetro de un rectángulo con esos dos lados (la suma de los lados multiplicado por 2)`);
console.log(`Perimetre: ${perimetro(5, 2)}`);
console.log('-'.repeat(10));

console.log(`\nCrear una función a la que pasemos tres números y nos devuelva el que está en la mitad (ni el más alto ni el más bajo). Si hay algún número que sea igual a otro que nos devuelva ese número.`);
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(6, 7, 10)}`); // 6 -> Fet 1
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(10, 7, 6)}`); // 6 -> Fet 2 
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(6, 10, 7)}`); // 6 -> Fet 3
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(7, 10, 6)}`); // 6 -> Fet 4
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(10, 6, 7)}`); // 6 -> Fet 5
console.log(`Dels 3 números el que esta a la meitat ni el més gran ni el més petit. Es: ${half(7, 6, 10)}`); // 6 -> Fet 6

console.log(`\nCrear una función a la que le pasemos dos números y nos devuelva true si los dos son pares o impares y false si uno es par y el otro es impar`);
console.log(`Els 2 números son parells o imparells: ${evenOdd(0, 2)}`);
console.log(`Els 2 números son parells o imparells: ${evenOdd(1, 3)}`);
console.log(`Els 2 números son parells o imparells: ${evenOdd(2, 3)}`);
console.log('-'.repeat(10));

console.log(`\nUna función sumaEntre a la que le pasamos dos números y nos suma los números desde el primero hasta el último ambos incluídos. Ej: sumaEntre(4,8)->30 (4+5+6+7+8)`);
console.log(`Suma a partir de un número fins a un altre incloent el d'inici i final: ${sum(4, 8)}`);
console.log(`Suma a partir de un número fins a un altre incloent el d'inici i final: ${sum(8, 4)}`);
console.log(`Suma a partir de un número fins a un altre incloent el d'inici i final: ${sum(8, 8)}`);
console.log(`Suma a partir de un número fins a un altre incloent el d'inici i final: ${sum(-3, 6)}`);

// Vamos a hacer una función a la que le pasamos 3 números y nos devuelve el mayor de los 3

// Nombre: mayor
// Parámetros: 3  números
// Retorno: 1 número (el mayor)

function mayor1(a,b,c){
    if (a>=b && a>=c){
        return a;
    }
    if (b>=a && b>=c){
        return b;
    }
    return c;
}

function mayor(a,b,c){
    if (a==undefined) return null;
    if (b>a) a=b;
    if (c>a) a=c;
    return a;
}

// Casos de prueba

console.log(mayor(1,2,3)); // 3
console.log(mayor(11,2,3)); // 11
console.log(mayor(1,22,3)); // 22
console.log(mayor(1,1,3)); // 3
console.log(mayor(10,10,3)); // 10
console.log(mayor(10,10,10)); // 10
console.log(mayor(10,1)); // 10
console.log(mayor()); // null