JavaScript: Dinamismo y Funcionalidad (PDF)

5. JAVASCRIPT: Dinamismo y funcionalidad MÓDULOS 1 Date @January 10, 2025 Teoría términos media-queries: reservar unas reglas de CSS sites dinamicos: solo para un dispositivo...

5. JAVASCRIPT: Dinamismo y funcionalidad MÓDULOS 1 Date @January 10, 2025 Teoría términos media-queries: reservar unas reglas de CSS sites dinamicos: solo para un dispositivo ssr: server side rendering → media-print html dinámico tradicional media-screen and (condición){ } (todo estático menos html, (ej: facebook) (wordpress) csr: client side rendering → BEM: Block Element Modifier mientras se scrollea, se va rellenando la página con js → api y DOM nueva información fichero html estatico vacío api → aplication programing interface (ej: instagram) DOM → document object model → representacion del html como un arbol de nodos lenguaje de programación: javascript ¿Qué es? ¿Qué hace? JavaScript es un lenguaje de Darle interactividad y dinamismo al programación que se utiliza HTML principalmente para crear interactividad en las páginas web. ¿Cómo lo hace? Tiene: A través de script (interpretado por variables y constantes el navegador) → Enganchado a un condicionales fichero HTML bucles funciones 5. JAVASCRIPT: Dinamismo y funcionalidad 1  Práctica 1. Constantes Una constante es como una "caja" donde guardas un valor que no puede cambiar durante la ejecución de tu programa. const mensajeBienvenida = "¡Hola, bienvenido a nuestra página web!"; // Declaram os una constante console.log(mensajeBienvenida); // Imprime: ¡Hola, bienvenido a nuestra página w eb! ❌ // Intentar cambiar el mensaje generará un error // mensajeBienvenida = "¡Hola, usuario!"; // Error: Assignment to constant va riable ¿Por qué usar const aquí? mensajeBienvenida no debería cambiar, ya que es un texto fijo que usamos para saludar a los usuarios. Esto hace que el código sea más seguro y fácil de leer. objetos simples {} Es como un "contenedor" que guarda pares clave-valor. La clave es como el nombre de una propiedad y el valor es la información que tiene esa propiedad. let tal = { clave : valor, clave : valor } Ejemplo datos de estudiante let estudiante = { nombre : "Bea", edad: Math.floor(Math.random() * 6) + 20, hobbies : ["Programación","Filosofia","Tenis"], aprobada : Math.random() > 0.5 } console.log(estudiante); // si quisieramos saber datos más especificos seria console.log(estudiante 5. JAVASCRIPT: Dinamismo y funcionalidad 2  2. Variables Contenedor que almacena un valor o referencia para ser utilizado y modificado durante la ejecución de un programa. Ejemplo cantidad de carrito de compra // Declaramos una constante llamada "h1" // para albergar NUMERO de var cantidad const h1 = document.querySelector("h1"); // Declaramos una constante llamada "botonRestar" // para RESTAR cantidad const botonRestar = document.querySelector("button"); // Declaramos una constante llamada "botonRestar" // para SUMAR cantidad const botonSumar = document.querySelector("button:nth-child(3)"); // Usamos var porque su valor cambiará durante la ejecución del programa. var cantidad = 10; // 10 como número inicial h1.innerText = cantidad; // TextoDentroDe"h1" sustituimosPor var"cantidad"(10) // Cuando botonRestar se haga clic, la siguiente función se ejecutará: botonRestar.addEventListener("click", function () { cantidad--; // Disminuimos el número de var "cantidad" en 1. (--) h1.innerText = cantidad; // Actualizamos el texto del con el nuevo valo r. }); // Configuramos el mismo evento para sumar botonSumar.addEventListener("click", function () { cantidad++; // Aumentamos el número de la var "cantidad" en 1.(++) h1.innerText = cantidad; // Actualizamos el texto del con el nuevo valo r. }); cantidad una variable mutable, lo que significa que su valor puede cambiar durante la ejecución. Let Se usa para declarar variables que puedes modificar, pero no puedes redeclarar en el mismo bloque. var: Permite tanto modificar como redeclarar la misma variable. const: Se usa para declarar variables cuyo valor no puede cambiar después de asignarlo. Se recomienda usar LET y CONST en lugar de VAR por mayor claridad. 5. JAVASCRIPT: Dinamismo y funcionalidad 3  scope Es el alcance o ámbito de una variable dentro de un bloque de código. 1) local | Si una variable es declarada dentro de una función, solo estará accesible dentro de esa función. (let) // TIENE ALCANCE DE BLOQUE | solo accesible dentro de un bloque de code 2) global | Si una variable está declarada fuera de cualquier función o bloque, es accesible en cualquier parte del código, es decir, en todo el programa. (var) // NO TIENE ALCANCE DE BLOQUE | la var se puede usar fuera del bloque Ejemplo var a = 25; //GLOBAL function prueba(){ a = 90; //LOCAL dentro del BLOQUE de la función // cambia valor a la variable } prueba(); // // Aquí se ejecuta la función, y se ejecuta su BLOQUE console.log(a); //se ejecuta la function, por lo que cambia el valor a 90* 3. Condicionales Estructuras que permiten ejecutar diferentes bloques de código dependiendo de si se cumple o no una condición. Se utilizan para tomar decisiones dentro del programa. if (Si algo pasa, haz esto) Tipo de condicional que sirve para tomar decisiones. 5. JAVASCRIPT: Dinamismo y funcionalidad 4  (Por ejemplo, si hace frío, ponte un abrigo.) Ejemplo x número es mayor o menor que x número var a = 32; // Se declara la variable "a" y se le asigna el valor 32 var b = 12; // Se declara la variable "b" y se le asigna el valor 12 // Se evalúa si "a" es mayor que "b" if(a > b){ console.log("A es mayor"); // Si la condición es (a > b), imprime "A es mayo r". // Si condición anterior es falsa, la siguiente cond verifica si "a" es igual a "b". }else if(a == b){ console.log("B es mayor"); // Si (a == b), imprime "B es mayor". // Si ninguna de las condiciones anteriores fue verdadera (es decir, "a < b"), s e ejecuta este bloque "else". }else{ console.log("B es mayor"); // Si (a < b), se imprime "B es mayor". } Ejemplo interruptor encendido/apagado const apagado= document.querySelector (".apagado"); if (apagado) { // si (el interruptor apagado) { apagado.addEventListener("click", function () { // le das click { if (apagado.classList.contains("encendido")) { //si (está (encendid o)){ apagado.classList.remove("encendido"); // se le quita(encendido) } else { // en el resto de casos { apagado.classList.add("encendido"); //al apagado le añade(encend ido) } }); } } // 3. FUNCIÓN CAMBIA COLOR FONDO EMPLEANDO FUNCIÓN COLOR (random rgb) function cambiarColor(){ // Cambia el color de fondo del circulo usando el color generado por la función "color" circulo.style.backgroundColor = color(); // el background-color del circulo: rgb(0, 0, 0); } // 4. ACTIVA LA FUNCIÓN cambiarColor() CUANDO SE CARGE LA PÁGINA cambiarColor(); // 5. DEFINIMOS LOS EVENTOS QUE TRIGGEREAN LA ACCIÓN // Definimos un arreglo con los tipos de eventos que queremos agregar const eventos = ["mouseover", "mouseout", "click"]; for (let i = 0; i < eventos.length; i++) { circulo.addEventListener(eventos[i], cambiarColor); //al circulo le accionamos(eventos[del 0-2], paraCambiarColor) } Resultado Hay un circulo que contiene un color rgb aleatorio y al pasar el ratón por él, quitarlo y/o clickearlo se cambia de color aleatoriamente. a. clausuras (Haz esto un número específico de veces) Tipo de bucle que te permite ejecutar un bloque de código varias veces. Es útil cuando sabes cuántas veces necesitas repetir el código. Ejemplo seleccionar un círculo concreto const circulo = document.querySelector(".circulo:nth-child(2)") // se define como constante "circulo" // document.querySelector = se selecciona dentro del documento // (.circulo) = Elemento especifico que se selecciona dentro del doc var seleccionado = false circulo.addEventListener("click", function(){ circulo.className = `circulo ${ !seleccionado ? "seleccionado" : "" }`; seleccionado = !seleccionado; }); 5. JAVASCRIPT: Dinamismo y funcionalidad 10  //circulo.addEventListener = queremos que una acción pase a circulo //("click," function(){}); = cuando hagas click sucedera esta función // function() = los paréntesis () son necesarios para declarar la función, aunqu e no haya nada dentro //circulo.className = es cómo cambiamos las clases del círculo en el HTML. Las c lases son las que definen cómo se ve el círculo (por ejemplo, su color, tamaño, etc.). // `` = los backticks nos permiten insertar variables, insertan esa clase "selec cionado" dentro de la cadena que se asigna a circulo.className. // ${} = indica que vas a insertar algo dinámico Ejemplo seleccionar cualquier círculo const circulos = document.querySelectorAll(".circulo"); // se define como constante "circulo" // document.querySelector = se selecciona dentro del documento // (.circulo) = Elemento especifico que se selecciona dentro del doc // Se inicialliza con la var en 0 (var i = 0), como es menor a 4 (i < circulos.length), le suma uno (i++) // Cuando i no es < circulos.length (4), se para el bucle // Cada uno de los 4 programas se van ejecutando en paralelo for(var i = 0; i < circulos.length; i++){ //Cuando se clickea uno de ellos se ejecuta este código a ese programa // Guarda el número actual (i) en una variable "indice" para que no se pierda al hacer clic. (function(indice){ circulos[indice].addEventListener ("click",function(){ // Cuando se hace clic en este elemento: for(var j = 0; j < circulos.length; j++){ // Recorre todos los elementos de nuevo... circulos[j].className = "circulo"; // y les quita toda clase extra, dejando solo "circu lo". } // Marca el elem que se clickeó con la clase "selecciona do". circulos[indice].className = "circulo seleccionado" }); })(i); // Pasamos el valor actual de "i" para que cada clic recu erde cuál elemento es. // (function(i){x})(indice); Es una funcion que se va a ejecutar automaticamente // Cuando se ejecute la función a la i interna (local) 5. JAVASCRIPT: Dinamismo y funcionalidad 11  se pasa la indice (global) } b. funciones anónimas (No tiene nombre, solo los paréntesis.Haz esto un número específico de veces) 1. CALLBACKS Una función anónima invocada por otra. Se usan para: 1) ejecutar un programa cuando una función termine o de acuerdo al resultado de la función. 2) Asocia funcionalidad a alguna accion determinada Ejemplo: function a(b){ b(); } Ejemplo callback function a(b){ b(); } a(function(){ console.log("..hola"); }); 2. IIFE (Inmediatamente Invocada Expresión de Función) Una función anónima que se ejecuta inmediatamente después de ser definida. Se usan para: 1) Encapsular código, evitando que las variables dentro de la función afecten el espacio global. 2) Crear un ámbito privado para evitar la contaminación del entorno global. 3) Ejecutar código de forma inmediata sin necesidad de llamarlo explícitamente después. Ejemplo: (function(){ console.log("Esto es una IIFE."); 5. JAVASCRIPT: Dinamismo y funcionalidad 12  })(); Ejemplo IIFE (function () { console.log("..hola"); })(); c. funciones flecha Una función flecha en JavaScript es una forma más concisa de escribir funciones anónimas de manera más sintética. - Si hay mas de uno: la sintaxis apenas cambia y no merece la penaa. - Sustituye a "return" cuando solo hay uno en la función Ejemplo sin flecha numeros.ordenar(function(a, b) { return a - b; }); console.log(numeros); Ejemplo con flecha sort((a,b) => a - b); numeros.ordenar((1,7) acción 1 al 7); console.log(numeros); d. desestructuración en funciones Es una técnica que permite extraer valores de objetos o arreglos que se pasan como argumentos a una función, simplificando el acceso a sus propiedades o elementos. Ejemplo datos de estudiante let estudiante = { nombre : "Bea", edad: "20", hobbie : ["Programación","Filosofia","Tenis"], aprobada : true } 5. JAVASCRIPT: Dinamismo y funcionalidad 13  //ESTAS SON LAS DESESTRUCTURACIONES let {nombre,edad} = estudiante; let [hobbie1,,hobbie2] = estudiante.hobbie; console.log(nombre,edad,hobbie1.hobbie2); // RESULTADO: Bea 20 undefinded Ejemplo colores let colores = { a: ["verde","rojo"] } let [,color2] = colores.a; console.log(color2); // RESULTADO: rojo 6. Métodos de Array Son funciones que puedes usar para trabajar y manipular arrays. Ejemplo de usos de array let colores = ["amarillo","rosa","azul","lila"]; colores.splice(2,0,"azul","morado"); // colores.unshift("lila"); | añade un lila de más (ARRAY.push) // colores.pop(); | Elimina el ultimo color (ARRAY.unshift) // colores.shift(); | Elimina el primer color (ARRAY.pop()) // colores.splice(2,1); //A partir del indice 2 (rosa), elimina 1 (azul) (A //(ARRAY.splice()) es poco utilizado porque en una situación real mis dato // console.log(colores); a. forEach Se utiliza para recorrer un array y ejecutar una función específica para cada uno de sus elementos. 5. JAVASCRIPT: Dinamismo y funcionalidad 14  Ejemplo colores por cada cuadro // Array de colores let colores = ["pink", "darksalmon", "darkseagreen", "teal"]; // Seleccionamos todos los cuadros con la clase "color-box" let colorBoxes = document.querySelectorAll(".color-box"); // Usamos forEach para recorrer el array de colores colores.forEach(function(color, index) { // forEach recorre el array "c // La función recibe dos parámetros: 1)"color": el valor actual del arr colorBoxes[index].style.backgroundColor = color; // Asignamos el co }); Ejemplo selección múltiple const circulos = document.querySelectorAll("div"); circulos.forEach(circulo => { // circulos = todos | circulo = solo el del cli ck circulo.addEventListener("click", () => { // evento siempre debajo de forEach if (circulo.classList.contains("seleccionado")) { circulo.classList.remove("seleccionado"); } else { circulo.classList.add("seleccionado"); } }); }); Ejemplo selección única const circulos = document.querySelectorAll("div"); circulos.forEach(circulo => { //circulos = todos los circulos, circulo = solo el seleccionado circulo.addEventListener("click", () => { // Quitar la clase 'seleccionado' de todos los círculos circulos.forEach(c => c.classList.remove("seleccionado")); // Agregar la clase 'seleccionado' al círculo clicado circulo.classList.add("seleccionado"); }); }); b. map() filter 5. JAVASCRIPT: Dinamismo y funcionalidad 15  Generar un array [] a partir de otro ( En cambio de forEach estos generan un nuevo array [] ) Ejemplo convertir números positivos a negativos let numeros = [120,10,50,4,2,65] // definimos los valores numericos y su orden de let negativos = numeros.map(numero => numero * -1); //multiplicar por -1 d // negativos = numeros.nuevoArray(numero acción numero x -1) // con el map seria como si crearamos un let nuevo per queremos usar todos console.log(negativos); // Comprobamos los negativos c. sort() Se utiliza para ordenar los elementos de un array. Alfabéticamente por defecto, numéricamente o con otro criterio. Ejemplo ordenar números ascendentemente let numeros = [1,7,3,5,9,20] console.log(numeros); numeros.sort(function(a,b){ // let.ordenar(funcion (primero,ultimo)){ console.log(a,b); // CONSOLA comprueba traducción de numeros a a,b: 0: return a - b; // RETURN a partir de definidos dicta la accion (en este // b - a seria descendente asi que es como que la - simboliza de aqui }); // que hace que se ordene numericamente de menor a mayor? La funcion S console.log(numeros); // CONSOLA Consola [1, 3, 5, 7, 9, 20] d. split() join() SPLIT: Se usa para dividir una cadena de texto en un array JOIN: Se usa para unir una cadena de texto en un array Ejemplo split et string = "abracadabra"; 5. JAVASCRIPT: Dinamismo y funcionalidad 16  console.log(string.split("")); // Salida en consola: "a-b-r-a-c-a-d-a-b-r-a" Ejemplo join let string = "abracadabra"; let caracteres = string.split(""); console.log(caracteres); // Salida en consola: ["a", "b", "r", "a", "c", "a", "d", "a", "b", "r", "a"] let unidoConGuion = caracteres.join("-"); console.log(unidoConGuion); // Salida en consola: "a-b-r-a-c-a-d-a-b-r-a" let unidoSinSeparador = caracteres.join(""); console.log(unidoSinSeparador); // Salida en consola: "abracadabra" Ejemplo letras split span // Selecciona el elemento del documento HTML para trabajar con él. const titulo = document.querySelector("h1"); // FUNCION GENERA VALOR COLOR ALEATORIO function color() { return `rgb(${[0,0,0].map(() => Math.floor(Math.random() * 256)).join(",")} // return `rgb(...)` | Devuelve una cadena en formato RGB, usada para color // [0,0,0] | Inicia un array de 3 elementos (correspondientes a R, G, B). //.map(() => Math.floor(Math.random() * 256)) | Itera por cada elemento de // - Math.random() * 256 | Genera un número aleatorio entre 0 y 255. // - Math.floor(...) | Redondea hacia abajo el número aleatorio generado. // join(",") | Une los valores generados para R, G y B en una cadena separa } // FUNCION GENERA VALOR ROTACION ALEATORIO function rotacion() { return 5 - Math.floor(Math.random() * 11) + "deg"; // return 5 | Comenzamos con el número 5 // - | Restamos un número redondeado por Math.floor // (Math.random() * 11) | Generamos un número aleatorio entre 0 y 11 // + "deg" | Añadimos al resultado la unidad "deg" para que sea un valor de } // APLICA EN COLOR Y ROTACIÓN ALEATORIA A CADA LETRA titulo.innerHTML = titulo.innerText.split("").map(c => { 5. JAVASCRIPT: Dinamismo y funcionalidad 17  return c === " " ? c : `