T08: Introducción a JavaScript (I) – Conceptos básicos

Este tema sienta las bases del lenguaje y su integración en el navegador.

• Historia y Estándar: Creado por Brendan Eich en 1995. Su estándar es ECMAScript (ECMA-262).
• Variables y Ámbito (Scope):
  • var: Ámbito de función (obsoleto, permite hoisting).
  • let y const: Ámbito de bloque (recomendados). const no permite reasignación.
• Tipos de Datos: Es un lenguaje de tipado débil y dinámico. Los tipos incluyen number, string, boolean, undefined, null, object y symbol.

BOM (Browser Object Model)

Jerarquía de objetos para interactuar con el navegador:

• window: Objeto global superior.
• window.location: Controla la URL actual.
• window.history: Historial de navegación.
• window.navigator: Información del navegador y del usuario.

Depuración

Uso de console.log() y la sentencia debugger, que detiene la ejecución si las herramientas de desarrollo están abiertas.

T09: Introducción a JavaScript (II) – Programación asíncrona

Se explica cómo JS gestiona tareas largas sin bloquear la interfaz de usuario.

• Síncrono vs Asíncrono: JS es de un solo hilo (single-threaded). El código asíncrono permite realizar tareas (como peticiones HTTP) en segundo plano.
• Mecanismos de Asincronía:
  • Callbacks: Funciones pasadas como parámetros que se ejecutan al terminar una tarea.
  • Promesas: Objetos que representan el éxito o fracaso futuro de una operación.
  • Async/Await: Sintaxis moderna para trabajar con promesas de forma que parezca código secuencial.
• Organización del Código (Módulos): Uso de export e import para separar responsabilidades.
• Estructura de Carpetas: Se propone organizar el proyecto en carpetas como api/, renderers/, utils/, validators/ y un archivo JS por cada vista HTML.

T10: Uso de JavaScript (I) – DOM y Renderizadores

Trata sobre la manipulación de la estructura de la página web.

• DOM (Document Object Model): Representación en forma de árbol de la página HTML. Cada etiqueta, atributo o texto es un nodo.
• Selección de Elementos:
  • getElementById(id): Selección única y rápida.
  • querySelector(selector): Selección mediante selectores CSS (ej: .clase, #id).
• Manipulación de Nodos:
  • document.createElement('tag'): Crea un nuevo elemento.
  • padre.appendChild(hijo): Inserta al final.
  • padre.insertBefore(nuevo, referencia): Inserta en una posición específica.
• Renderizadores: Funciones o módulos encargados de generar HTML dinámico a partir de objetos de datos, permitiendo separar la lógica de los datos de su representación visual.

T11: Uso de JavaScript (II) – Eventos y formularios

Se enfoca en la interactividad y la entrada de datos del usuario.

• Manejo de Eventos: Uso de elemento.addEventListener('evento', callback). Los eventos comunes incluyen click, submit, change, mouseover.
• Objeto Event (e):
  • e.target: El elemento que originó el evento.
  • e.preventDefault(): Detiene la acción por defecto (crucial en el envío de formularios para evitar la recarga de página).
• Propagación: Los eventos se propagan desde el elemento hijo hacia los padres (bubbling o burbujeo).
• Formularios: Uso de FormData para extraer todos los valores de un formulario fácilmente. La validación debe realizarse antes del envío para asegurar la integridad de los datos.

T12: Uso de JavaScript (III) – AJAX, REST y JSON

Explica la comunicación entre el cliente (navegador) y el servidor.

• REST: Arquitectura de comunicación basada en recursos identificados por URIs y métodos HTTP:
  • GET: Consultar.
  • POST: Crear.
  • PUT: Actualizar.
  • DELETE: Borrar.
• JSON (JavaScript Object Notation): Formato ligero de datos.
  • JSON.parse(string): Convierte texto JSON en objeto JS.
  • JSON.stringify(objeto): Convierte objeto JS en texto JSON (para enviar al servidor).
• Fetch API: Método moderno para realizar peticiones AJAX que devuelve una promesa. Requiere configurar el method, headers y el body (si es un POST/PUT).

T13: Uso de JavaScript (IV) – Persistencia en cliente

Cómo guardar datos en el ordenador del usuario de forma local.

• HTTP Cookies: Pequeños textos enviados por el servidor. Se incluyen automáticamente en cada petición HTTP. Tienen un tamaño limitado (4KB) y fecha de expiración.
• Web Storage API:
  • localStorage: Almacenamiento persistente (no caduca al cerrar el navegador). Capacidad de 5-10MB.
  • sessionStorage: Almacenamiento temporal (se borra al cerrar la pestaña).
• Cache API: Permite almacenar pares de objetos Request y Response. Es fundamental para crear aplicaciones que funcionen fuera de línea (offline) y mejorar la velocidad.
• Nota: En Web Storage solo se guardan cadenas de texto; los objetos deben serializarse con JSON.stringify().

T14: Expresiones Regulares (RegEx)

Herramienta para la búsqueda y validación de patrones en cadenas de texto.

• Definición: Se escriben entre barras: /patrón/flags. Flags: i (ignora mayúsculas), g (búsqueda global).
• Sintaxis Clave:
  • ^ y $: Inicio y fin de la cadena.
  • \d: Cualquier dígito; \w: Alfanumérico; \s: Espacio.
  • [A-Z]: Rango de letras mayúsculas.
• Cuantificadores:
  • *: 0 o más veces.
  • +: 1 o más veces.
  • ?: 0 o 1 vez.
  • {n, m}: Entre n y m veces.
• Grupos de Captura: ( ) sirven para agrupar y extraer partes específicas de la coincidencia.
• Métodos: regex.test(string) (devuelve true/false) y string.match(regex) (devuelve los resultados encontrados).