T5. Manipulación de documentos Web. JavaScript.¶

Introducción¶

Variables y constantes¶

String Templates¶

Los String Templates o Plantillas de texto son una forma limpia de sustituir valores en cadenas de texto evitando abrir y cerrar comillas además de los molestos + entre el texto.

// Pasamos de:
let text = 'Nombre: ' + name + ' y edad: ' + age + ' años.';

// A algo más legible como:
text = `Nombre: ${name} y edad: ${age} años.`; 

// E incluso con llamadas a funciones:
text = `Nombre: ${ name } y edad: ${ getAge(birthdate) } años.`;

⚠️ Dada la legibilidad que aportan, será la única forma que utilizaremos durante el aprendizade de esta unidad.

🚧 El NO uso de las mismas implicará que el ejercicio está mal.

Recuerda:

Cualquier idiota puede escribir código que un ordenador pueda entender. Los buenos programadores escriben código que las personas puedan entender. — Martin Fowler

Consola¶

Para mostrar información de salida y depuración de scripts durante el estudio de esta unidad emplearemos el volcado contra la consola.

La misma nos ofrece distintas caras que enriqueceran nuestras salidas:

console.log()
console.info()
console.warn()
console.trace()
console.error()

Ejercicio¶

Utiliza las llamadas anteriores para ver la diferencia entre ellas, utilizando plantillas de texto variables y constantes.

Funciones¶

ver

Ámbito de variables¶

ver

Tipos de datos¶

ver

Operadores¶

ver

Integración en el navegador¶

Tag `<script>`¶

Añadir en el <header> el tag <script defer src="codigo.js"></script>

`alert()`¶

Más allá de la consola, tenemos la salida por pantalla con alert("¡Soy un mensaje emergente!");

`promt()`¶

Tomando datos (strings) con let sign = prompt("¿Cuál es tu nombre?");

`confirm()`¶

Respuesta true/false con let respuesta = confirm("¿Eres mayor de edad?")

Ejercicios¶

Calculadora de gastos de viaje. Escribe un programa que calcule el coste total de un viaje, incluyendo los gastos de alojamiento, alimentación y entretenimiento.
Calculadora edad canina. Crea un programa que convierta la edad de un perro a años humanos.
Calculadora de IMC (Índice de Masa Corporal). Crea un programa que calcule el IMC de una persona a partir de su peso y altura.
Calculadora de descuentos. Crea un programa que calcule el precio final de un producto después de aplicarle un descuento.
Conversor de temperatura. Crea un programa que convierta una temperatura de grados Celsius a grados Fahrenheit o viceversa, según la elección del usuario.
Generador de secuencia Fibonacci. Crea un programa que genere los primeros N términos de la secuencia de Fibonacci, donde N es un número insertado por el usuario.
Calculadora de factores. Dado un número, descomponlo en factores. Si es primo indícalo.
Generador de números primos. Escribe un programa que solicite al usuario dos números y luego muestre todos los números primos que hay entre esos dos números, incluyendo los extremos.
Calcular factorial de un número. Escribe un programa que calcule de forma recursiva el factorial de un número entero no negativo ingresado por el usuario.

Objetos (y clases)¶

ver

Programación estructurada¶

Arrays¶

0️⃣ Creación

1️⃣ Manejo con programación estructurada

2️⃣ Manejo con programación funcional

Concurrencia¶

Ver

Código Ninja¶

Llegado a este punto tenemos que revisar las buenas prácticas al escribir código ya que NO vamos a aceptar codigo basura, espagueti u ofuscado.

Buenas prácticas

Selección y acceso a elementos del DOM¶

dom

Visualizador DOM-CSS

Capturando elementos¶

Ver

Eventos¶

Ver

Dando vida a nuestra web¶

Ver

Validación de datos¶

Para la validación de datos de entrada emplearemos expresiones regulares -RegEx-:

Intercambio de información¶

En Json => Promesas y async/await

En Xml

Juegos¶

Otros elementos de interes¶

Ver

Fuentes¶

Casi oficial - mdn

Cursos¶

Artículos¶

Libros: + Eloquent Js + Clean Code Js en Español

Herramientas¶

Codi.link
Herramienta de desarrolladores Ctrl + Alt + I del navedador.
VSCodium^[1]^ + plugins: Error Lens (@Alexander), ESLint (@Microsoft), Live Preview (@Microsoft), Thunder Client (@Thunder Client)
Node.js on-line

^[1]^ Debéis utilizar VSCodium y no VSCode. Instalación: + Windows: + Winget: winget install vscodium + Choco: choco install vscodium + Linux: + Snap: snap install codium --classic + AppImage

Frameworks y librerías¶

Un viaje al pasado -> jQuery `$`.¶

Es una librería de JS que simplifica la manipulación del DOM.

Apareció en 2006 y simplificó la forma de trabajar en JS, pero en la actualidad NO es necesario. El propio JS ha evolucionado en gran medida y la forma de tratar las peticiones AJAX que ha tomado la forma de trabajar de jQuery.

Pero es una librería muy difundida por lo que quizás os toque lidiar con ella en el futuro por lo que... aprendiendo jQuery.

El popular de la clase -> React.js¶

“Es una librería de JS para crear interfaces de usuario”, con enfoque modular donde es la librería la que manipula el DOM.

Comparación directa: jQuery vs React.js

En comparación con jQuery, React.js tiene una curva de aprendizaje más pronunciada.

Sin embargo, su enfoque modular y eficiente del desarrollo justifica el esfuerzo inicial.

Mientras que jQuery manipula directamente el DOM y puede llevar a un código más difícil de seguir, React.js actualiza eficientemente el DOM y mantiene el código más organizado y manejable.

Si queréis profundizar ... Aprendiendo React - midudev

Otros Frameworks¶

Angular, no confundir con AngularJS.
Derivadas de React como Next.js o React Native (para móviles)
Vue.js “The Progressive JavaScript Framework”
Svelte “Cybernetically enhanced web apps”

TypeScript¶

Una buena guía para emprezar