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