Teclado

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

Ejemplos eventos

<!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");
}

Eventos intro

 <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")
}

Ejemplo JS

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

Maneras de seleccionar elementos del DOM en JS

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


Ejemplo HTML

<!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>
    <form method="get" action="#">
        <label for="nombre">Introduce el nombre</label>
        <input type="text" id="nombre" maxlength="5" size="10" name="nombre" placeholder="Introduce tu nombre" />
        <label for="apellido">Introduce el apellido</label>
        <input type="text" size="30" id="apellido" name="apellido" value="Apellido" />
        <br />
        <fieldset>
            <legend>Datos del curso</legend>
            <label for="curso">Escoge un curso</label>
            <input type="radio" id="JS" name="curso" value="JS" checked>
            <label for="JS">JS</label>
            <input type="radio" id="Java" name="curso" value="Java">
            <label for="Java">Java</label>
            <input type="radio" id="CSharp" name="curso" value="C#">
            <label for="CSharp">C#</label>
            <br />
            <input type="checkbox" id="beca" name="beca" value="beca">
            <label for="beca">¿Tienes beca?</label>
        </fieldset>
        <input type="color" name="password">
        <select id="aula" name="aula">
            <optgroup label="Edificio 1"></optgroup>
            <option value="1">Aula 1</option>
            <option value="2">Aula 2</option>
            <option value="3">Aula 3</option>
            <optgroup label="Claustro"></optgroup>
            <option value="4">Sala de actos</option>
        </select>
        <input list="profesores" name="profesor" class="prueba">
        <textarea name="contacto" id="contacto" cols="30" rows="10">contenidp</textarea>
        <textarea id="mensaje" name="mensaje" rows="10" placeholder="Mensaje"></textarea>
        <input type="button" value="Botón">
        <input list="profesores" name="profesor_auxiliar">
        <button>B<b>oo</b>otón</button>
        <datalist id="profesores">
            <option value="Ana Pi"></option>
            <option value="Eva Buj"></option>
            <option value="Luis Pérez"></option>
        </datalist>
    </form>
    <script src="js/script.js"></script>
</body>

</html>

Soluciones Jaume

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

Ejercicio ejemplo funciones

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

Parámetros en funciones

// Qué hacer con los parámetros que no existen o que no se pasan

function nombreCompleto(nombre, apellido, apellido2 = "") {
    // Comprobar si un parámetro me lo están pasando o no y actuar en consecuencia
    if (apellido === undefined) {
        return "Error no hay apellido";
    }
    return nombre + " " + apellido + " " + apellido2;
}

console.log(nombreCompleto("Pepe")); // Esto me imprime 'Error no hay apellido' porque no paso apellido
console.log(nombreCompleto("Pepe","Pérez")); // Esto me imprime 'Pepe Pérez' 
console.log(nombreCompleto("Pepe","Pérez","López")); // Esto me imprime 'Pepe Pérez López'

console.log(5 == 5); // true
console.log(5 == "5"); // true por JS convierte los tipos
console.log(5 === "5"); // false porque comprueba valor y tipo
console.log(0 == false); // true
console.log(0 === false); // false

// Poniendo un parámetro por defecto
function sumarHasta(limite = 10) {
    let suma = 0;
    for (let index = 0; index < limite; index++) {
        suma += index;
    }
    return suma;
}

console.log(sumarHasta());

function nombreCompletoComoAntes(nombre,apellido,apellido2){
    // Antes en vez de parámetros por defecto lo teníamos así
    nombre=nombre || "";
    apellido=apellido || "";
    apellido2=apellido2 || "";
    return nombre + " " + apellido + " " + apellido2;
}

console.log(nombreCompletoComoAntes())
console.log(nombreCompletoComoAntes("pepe"))
console.log(nombreCompletoComoAntes("pepe","perez"))
console.log(nombreCompletoComoAntes("pepe","perez","lopez"))

Ejemplos funciones con doc y casos de prueba

/* Ejemplo 1: Una función que dados dos números, me devuelva el mayor */

// Nombre de la función: mayor
// ¿Tengo parámetros? : Dos números
// ¿Devuelvo algo? : El número mayor

/**
 * 
 * @param {Number} a 
 * @param {Number} b 
 * @returns El mayor de los dos números
 */
function mayor(a, b) {
    if (b < a) {
        return a;
    } else {
        return b;
    }
}

// Casos de prueba
console.log(mayor(2, 8)); // 8
console.log(mayor(7, 2)); // 7
console.log(mayor(2, 2)); // 2

// Más o menos lo que hacen los test unitarios
if (mayor(2, 8) == 8 && mayor(7, 2) == 7 && mayor(2, 2) == 2) {
    console.log("Todo ok")
}

// Una función a la que le pasamos un nombre y un apellido y nos devuelve el nombre completo (nombra + apellido)

// Nombre: nombreCompleto
// Parámetros?: dos cadenas nombre y apellido
// Devuelvo algo?: Una cadena

/**
 * 
 * @param {String} nombre 
 * @param {String} apellido 
 * @returns El nombre completo
 */
function nombreCompleto(nombre, apellido) {
    return nombre + " " + apellido;
}

let n=nombreCompleto("Ana","Pi");
console.log(n); // Ana Pi
console.log(nombreCompleto("Pepe","Pérez")); // Pepe Pérez

// Una función que nos calcule la suma de los números hasta el que le pasemos

// Nombre: sumaNumeros
// Parámetro: El número límite
// Retorno: El total

/**
 * 
 * @param {number} limite 
 * @returns La suma desde 1 hasta límite
 */
function sumaNumeros(limite){
    let suma=0;
    for(let i=1;i<=limite;i++){
        suma+=i;
    }
    return suma;
}

// Casos de prueba
console.log(sumaNumeros(50)); // 1275
console.log(sumaNumeros(100)); // 5050