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

Funciones puras

https://www.geeksforgeeks.org/pure-functions-in-javascript/

/* Vamos a trabajar el concepto de funciones 'puras' */

let nombre="Juan";

function saludo(){
    console.log("Hola ",nombre); // Las variables definidas dentro de este bloque son visibles dentro de la función
}

saludo();

nombre="Ana";

saludo();

// Es mejor que la otra
function saludoOk(nombre){
    console.log("Hola",nombre);
}

saludoOk("Pep");


// Todavía mejor
function saludoPuro(nombre){
    return "Hola "+nombre;
}

console.log(saludoPuro("Eva"));
let s=saludoPuro("Juan");
alert(s);

Ejemplos funciones

/* Las funciones son entre otras muchas cosas una manera de encapsular un código
que luego podemos reutilizar en cualquier parte */



let tirada = tiradaMoneda();

console.log(tirada);

for (let i = 0; i < 10; i++) {
    console.log(tiradaMoneda())
}

/* Sintaxis de las funciones (clásica)
function nombreDeLaFuncion([parámetros opcionales]){
    // Código a ejecutar
    // opcionalmente
    return valor;
}
*/

// Esta función no tiene parámetros y nos devuelve un valor (1 o 2)
function tiradaMoneda() {
    return Math.trunc(Math.random() * 2) + 1;
}

// Esta función tiene un parámetro y no devuelve nada
function saludo(nombre) {
    console.log("Hola " + nombre);
    console.log("Bienvenido a la página de las funciones")
}

// Esta función tiene un parámetro y nos devuelve un valor
function doble(numero) {
    return numero * 2;
}

// Para usar una función simplemente ponemos su nombre, paréntesis y los parámetros
saludo("Ana");
saludo("Pepe");
saludo("Antonio Federico de todos los santos")

// Si la función devuelve algo tendremos que hacer con algo con ese valor. Guardarlo, imprimirlo, compararlo

let numero = doble(5); // let numero=10
console.log(numero);
console.log(doble(8)); //console.log(16)
if (doble(7) > 10) {       // if (14>10)
    console.log("El doble de 7 es mayor de 0");
}

// Voy a hacer una función que me diga si un número es primo o no
// ¿Necesita algún parámetro? Claro, el número
// Devuelve algún valor? Sí, un booleano
function esPrimo(numero) {
    for (let i = 2; i < numero; i++) {
        if (numero % i == 0) {
            return false;
        }
    }
    return true;
}

console.log(esPrimo(80));
console.log(esPrimo(101));

// Dime los números primos entre 2 y 20
for(let i=2;i<=20;i++){
    if (esPrimo(i)){
        console.log(i);
    }
}

Solución ejercicios for

/*Tenemos una variable 'nombre' con el valor 'Pep' y otra 'cantidad' con el valor 5.
 Escribid un código que nos muestre por la consola ese nombre la cantidad de veces que valga cantidad.
  Probad a poner otros valores. */

let nombre="pep";
let cantidad=5;
for(let i=0;i<cantidad;i++){
    console.log(nombre);
}

/* Tenemos una variable 'limite' que vale 50. Haced un código que calcule la suma de todos los 
números hasta ese límite.*/

let limite=50;
let suma=0;
for(let i=0;i<=limite;i++){
    suma+=i; // suma=suma+i
}
console.log(suma);
/* Como informáticos nos viene muy bien conocer las potencias de 2 (2,4,8,16,32,64,128,256,...)
 Cread un código que nos muestre las potencias de 2 desde 0 hasta 10. (2**i) */

for(let i=0;i<=10;i++){
    console.log(2**i);
}

for(let i=1;i<=2**10;i*=2){
    console.log(i);
}
/*Cread un programa que nos imprima por consola una cuenta atrás desde 5 (5...4...3...2...1...¡Ya!)*/

for(let i=5;i>0;i--){
    console.log(i+"....");
}
console.log("¡Ya!");

/* Cread un programa que nos cuente los múltiplos de 7 que hay entre 0 y 100*/

let multiplos7=0;
for(let i=0;i<=100;i++){
    if (i%7==0){
        multiplos7++;
    }
}
console.log(multiplos7);

multiplos7=0;
for(let i=0;i<=100;i+=7){
    multiplos7++;
}
console.log(multiplos7);

/* Cread un programa que nos haga la media de los números entre 0 y 100 */
suma=0;
let contador=0;
for(let i=0;i<=100;i++){
    suma+=i; // suma=suma+i
    contador++;
}
console.log(suma/contador);

/* Cread un programa que lance 20 veces una moneda y nos diga al final cuantas caras y cuantas cruces han salido,
*/

let caras=0,cruces=0;

for(let i=0;i<20;i++){
    let tiradaMoneda = Math.trunc(Math.random() * 2) + 1;
    if (tiradaMoneda==1){
        caras++;
    } else{
        cruces++;
    }
}

console.log("Caras",caras,"Cruces",cruces);