// 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);
Mes: abril 2024
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);
Ejemplos tiradas dados
// Lo siguiente nos devuelve un número entre 1 y 6, como la tirada de un dado // tiradaDado = Math.trunc(Math.random() * 6) + 1; // Vamos a hacer un programa que tire el dado hasta que salga un 5 // for if y break // while o do while tiradaDado=0; for(let i=0;tiradaDado!=5;i++){ tiradaDado = Math.trunc(Math.random() * 6) + 1; console.log("Tirada "+i+" ha salido "+tiradaDado); } console.log("-".repeat(10)); tiradaDado=0; while(tiradaDado!=5){ tiradaDado = Math.trunc(Math.random() * 6) + 1; console.log("Tirada ha salido "+tiradaDado); } console.log("-".repeat(10)); do{ tiradaDado = Math.trunc(Math.random() * 6) + 1; console.log("Tirada ha salido "+tiradaDado); }while(tiradaDado!=5);