Manipulación del DOM con JavaScript y APIs

Manipulación del DOM con JavaScript y APIs

¿Cuál es el primer paso para dominar JavaScript?

• Entiende el DOM: El DOM (Document Object Model) es esencial para cualquier desarrollador que quiera manipular las páginas web. A través de este post, aprenderemos qué es el DOM, cómo se estructura y cómo interactuar con él usando JavaScript.
• Manipulación del DOM: Aprenderás a seleccionar y modificar elementos del DOM. Esto incluye cambiar estilos, texto, posiciones o incluso mostrar u ocultar elementos, permitiéndote controlar la apariencia y funcionalidad de tus páginas.
• APIs y interactividad: Veremos cómo las APIs permiten que datos del servidor lleguen al navegador. Aprenderemos a utilizar JavaScript para crear y manipular elementos dinámicamente, haciendo que las páginas sean interactivas y vivas.

Entendiendo el DOM y su Manipulación con JavaScript

¿Qué es el DOM y cómo funciona?

Entender el DOM es fundamental para cualquier desarrollador que desee manipular contenidos y estructura de una página web. A menudo, cuando escribimos una URL como google.com en el navegador, este se comunica con un servidor para obtener los archivos necesarios. Estos archivos, tras ser interpretados, permiten la generación del DOM, una representación jerárquica en forma de árbol del documento HTML, compuesta por nodos. Estos nodos se convierten en objetos de JavaScript que pueden ser seleccionados y manipulados a través de este lenguaje, creando una interacción dinámica y personalizada entre el usuario y el contenido web.

¿Qué papel juega el Window Object?

El Window Object es el objeto que representa a la ventana del navegador, es decir, toda la pantalla en la que se despliega el contenido del DOM. Al situarse en el nivel superior del navegador, el Window Object ofrece acceso a varias Web APIs además del DOM. Por ejemplo:

• Para mostrar un cuadro de alerta (alert), usamos el Window Object.
• Si necesitamos solicitar acceso al micrófono o la cámara del usuario, se realiza a través de las APIs del Window Object.

El DOM es solo una parte de este ecosistema, y se utiliza principalmente para seleccionar y manipular elementos dentro de un documento HTML, haciendo que la página web sea más interactiva y dinámica.

¿Cómo se diferencian el DOM y el Window Object?

• DOM (Document Object Model): Permite manipular el contenido y la estructura de un documento HTML para personalizar la interacción y la experiencia del usuario.
• Window Object: Proporciona una interfaz para acceder a otras APIs que no están directamente relacionadas con el contenido HTML, como alertas o permisos para funcionalidades de hardware (cámaras, micrófonos, etc.).

Ambos son vitales para una experiencia web completa y avanzada, permitiendo a los desarrolladores crear aplicaciones y sitios web que no solo sean visualmente atractivos, sino también funcionales y eficientes.

¿Cómo interactúan entre sí?

La interacción entre el DOM y el objeto Window es continua y fluida. Window es el objeto padre que contiene al DOM y brinda acceso a él. Cuando el HTML ha sido completamente interpretado, el DOM se encarga de que puedas modificar la estructura original del documento a través de JavaScript, mientras que el objeto Window te proporciona la interfaz para interactuar con el navegador y sus elementos.

Ejemplo práctico

Imagina que abres la consola de tu navegador y ejecutas el siguiente código:

// Obtener el documento desde el objeto Window
console.dir(window.document);
// Dom:
console.dir(document);

Al ejecutar este comando, estarás visualizando el DOM en forma de un objeto JavaScript que puedes explorar para encontrar los elementos del HTML y manipularlos.

Consideraciones finales

Window

“Window” es el objeto global en el navegador. Esto significa que todas las variables y funciones globales se convierten en propiedades y métodos de window.

Incluye una amplia gama de métodos y propiedades para interactuar con la ventana del navegador, controlar el historial, gestionar temporizadores y mucho más:

• setTimeout
• setInterval

Contiene sub-objetos o propiedades como:

• history
• location
• navigator
• document

Document

La propiedad document de window representa el documento HTML (árbol DOM) cargado en la ventana del navegador.

Proporciona métodos y propiedades para acceder y manipular elementos del DOM, por ejemplo:

• getElementById
• querySelector
• createElement
• innerHTML

Selección de Elementos del DOM con JavaScript

¿Cómo seleccionar elementos del DOM con JavaScript?

Seleccionar elementos del Document Object Model (DOM) es una habilidad fundamental en el desarrollo web. Permite transformar páginas estáticas en experiencias interactivas y dinámicas. A continuación, exploraremos cómo identificar y modificar elementos únicos, seleccionar múltiples elementos y tener en cuenta el rendimiento.

¿Cómo identificar y modificar elementos únicos?

Modificar un elemento único del DOM es clave para personalizar detalles como el saludo al usuario. Supongamos que tenemos un título con el ID app-title. Podemos acceder y cambiar su contenido de dos maneras:

// Usando getElementById
let titulo = document.getElementById("app-title");
titulo.textContent = "Bienvenido, Diego";

// Usando querySelector
let titulo = document.querySelector("#app-title");
titulo.textContent = "Bienvenido, Diego";

¿Cómo seleccionar múltiples elementos?

Cuando trabajas con listas o grupos de componentes, necesitas capturar varios nodos a la vez:

• getElementsByClassName
  Obtiene una colección HTML (HTMLCollection) de todos los elementos que comparten una misma clase.

  let items = document.getElementsByClassName("menu-items");
  

• getElementsByTagName
  Devuelve todos los elementos con una determinada etiqueta, por ejemplo, párrafos.

  let paragrafos = document.getElementsByTagName("p");
  

• querySelectorAll
  Retorna una NodeList estática de elementos que correspondan a un selector CSS.

  let menuItems = document.querySelectorAll(".menu-items");
  

¿Qué debes considerar respecto al rendimiento?

La velocidad de consulta en el DOM impacta el rendimiento, sobre todo con gran cantidad de elementos:

• getElementById y getElementsByClassName suelen ser más rápidos que querySelector y querySelectorAll.
• querySelector y querySelectorAll ofrecen mayor flexibilidad al usar selectores complejos (combinadores, atributos, pseudoclases).
• En escenarios de alta demanda, almacena en variables los resultados de las consultas para evitar búsquedas repetidas.

En conclusión, elige el método de selección según tus necesidades de rendimiento y la flexibilidad requerida. Con práctica, dominarás estas técnicas y crearás interfaces web más dinámicas y eficientes.

Navegación Jerárquica del DOM en JavaScript

¿Cómo navegar el DOM de forma jerárquica?

Navegar el Document Object Model (DOM) es una habilidad esencial para cualquier desarrollador web. Comprender cómo seleccionar elementos de manera jerárquica —ya sean padres, hijos o ancestros— facilita enormemente la manipulación del documento HTML. A continuación, exploramos distintas formas de moverse por el árbol DOM.

¿Cómo seleccionar elementos padre e hijo?

Para trabajar con una sección específica del HTML, seleccionamos primero un elemento por su ID:

const parent = document.getElementById('parents');
console.log(parent);

Con esto obtenemos el elemento <ul> completo, junto a todos sus nodos hijos.

¿Cómo acceder al primer hijo de un elemento?

Si solo necesitamos el primer hijo (elemento) de ese nodo padre, usamos firstElementChild:

const firstChild = parent.firstElementChild;
console.log(firstChild);

Este método devuelve directamente el primer nodo de tipo elemento, ignorando nodos de texto o comentarios.

¿Cómo moverse entre hermanos en el DOM?

Para navegar a elementos que estén al mismo nivel jerárquico, podemos usar:

const nextSibling = parent.nextSibling;
console.log(nextSibling);

const previousSibling = parent.previousSibling;
console.log(previousSibling);

• nextSibling devuelve el siguiente nodo (puede ser de texto).
• previousSibling devuelve el nodo anterior.

Si solo te interesan elementos, usa nextElementSibling y previousElementSibling.

¿Cómo seleccionar un elemento ancestro?

Para encontrar el ancestro más cercano que coincida con un selector, closest es muy útil:

const grandParent = firstChild.closest('.menu');
console.log(grandParent);

Este método sube por la cadena de padres hasta hallar un .menu o devolver null si no existe.

Otras formas de navegar el DOM

• children
  Devuelve una colección (HTMLCollection) de los elementos hijos.

• childNodes
  Devuelve todos los nodos hijos (elementos, texto, comentarios).

• lastChild / lastElementChild
  Accede al último nodo hijo (o al último elemento hijo).

• parentElement
  Proporciona el elemento padre inmediato de un nodo dado.

Practica estos métodos en distintos contextos HTML para dominar la navegación jerárquica y mejorar tus habilidades de manipulación del DOM.

Atributos y Propiedades en HTML y su Manipulación con JavaScript

¿Qué son los atributos y propiedades en HTML y JavaScript?

Los atributos y propiedades son conceptos fundamentales para trabajar eficazmente con HTML y JavaScript.

• Atributos: características que añadimos a las etiquetas HTML.
• Propiedades: su reflejo en el DOM, manipuladas mediante JavaScript.

¿Cómo se definen los atributos en HTML?

En HTML, los atributos proporcionan información adicional sobre los elementos. Se añaden dentro de las etiquetas para especificar características, como:

• type (tipo de input)
• value (valor por defecto)
• class (clase para CSS)
• id (identificador único)
• required (campo obligatorio)

Ejemplo:

<input 
  type="text" 
  id="nombre" 
  value="nombre" 
  class="input-clase" 
  required
>

¿Cómo se reflejan los atributos en propiedades dentro del DOM?

Una vez el navegador genera el DOM, los atributos se convierten en propiedades de los nodos del DOM. Esto permite acceder y manipularlas con JavaScript:

const input = document.querySelector('#nombre');

Ejemplo de manipulación de propiedades

Para cambiar el valor que ve el usuario en el campo de entrada:

input.value = 'apellido';

• El cambio afecta la propiedad value del DOM.
• El atributo value original en el HTML permanece inalterado.

Importancia de los estados iniciales y sincronización

• Los atributos en HTML reflejan el estado inicial del documento.
• Las propiedades del DOM pueden cambiarse dinámicamente con JavaScript.
• Después de la carga, los cambios en propiedades no actualizan los atributos originales en el HTML.

Resumen de mejores prácticas

• Conoce la diferencia: maneja atributos en HTML y propiedades en el DOM.
• Selección de elementos: usa querySelector o getElementById según convenga.
• Sincronización consciente: recuerda que modificar propiedades no altera el HTML fuente.

Modificar texto en HTML con JavaScript

¿Cómo modificar dinámicamente el texto de un elemento HTML?

Modificar el texto de un elemento HTML de manera dinámica es una habilidad esencial para cualquier desarrollador web. Este conocimiento te permite cambiar el contenido de una página web en respuesta a interacciones del usuario, mejorando significativamente la experiencia del usuario. A continuación, exploraremos cómo lograr esta modificación utilizando la consola del navegador y JavaScript.

¿Cómo seleccionar un elemento en el DOM?

Para modificar un texto, lo primero es seleccionar el elemento en el DOM que contiene ese texto. En nuestro ejemplo, trabajamos con un elemento H1, el cual queremos modificar:

• Abrir la consola del navegador: Con el documento HTML cargado, abre la consola del desarrollador (F12 o Ctrl+Shift+I).
• Guardar el elemento en una constante: Utiliza document.querySelector para seleccionarlo:

const titulo = document.querySelector('#title');

Aquí, #title denota un elemento con el ID title.

¿Cómo visualizar las propiedades de un nodo?

Una vez seleccionado el elemento, explora sus propiedades con console.dir():

console.dir(titulo);

Esto muestra todas las propiedades del nodo, incluyendo textContent, que contiene el texto actual.

¿Cómo modificar el texto de un elemento?

Usar textContent

Actualiza el contenido de texto del nodo (incluye texto de elementos hijos):

titulo.textContent = "Nuevo texto";

El texto visible del H1 cambiará a "Nuevo texto" de forma rápida y eficiente.

Usar innerText

Modifica el texto visible respetando estilos CSS (por ejemplo display: none):

titulo.innerText = "Este es otro título";

innerText considera las reglas de estilo al evaluar el texto.

¿Cuál es la diferencia entre textContent e innerText?

• textContent:

  • Accede al contenido textual completo del elemento y sus descendientes.
  • Es más rápido y no considera estilos CSS.

• innerText:

  • Considera únicamente el texto realmente visible según el CSS.
  • Puede ser más lento, pero útil cuando el estilo impacta el contenido mostrado.

Recomendaciones prácticas

• Selecciona el método adecuado:

  • Usa textContent para cambios simples de texto.
  • Elige innerText cuando necesites tener en cuenta estilos CSS.

• Prueba la eficiencia:

  • Experimenta con ambos métodos en tu propio código para medir rendimiento.

• Mantén el código limpio:

  • Almacena elementos en constantes o variables bien nombradas para mejorar la legibilidad y mantenibilidad.

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

¿Cómo modificar estilos CSS con JavaScript?

Modificar estilos CSS mediante JavaScript es esencial para crear webs dinámicas e interactivas. Este proceso permite cambiar características visuales del HTML según el comportamiento del usuario. A continuación, exploraremos cómo lograrlo usando la consola del navegador y las propiedades adecuadas.

¿Qué son las propiedades style y cómo se usan en JavaScript?

JavaScript proporciona múltiples formas para modificar estilos, empezando con la propiedad style. Esta herramienta permite agregar estilos en línea directamente en el HTML, pero requiere precaución: los estilos en línea poseen alta especificidad, sobreescribiendo potencialmente estilos predefinidos en clases CSS.

const title = document.querySelector('h1');
title.style.color = 'red';

Con este código, cambiamos el estilo del encabezado h1 para que el texto sea rojo. Esto se refleja directamente en el HTML como un estilo en línea.

¿Qué problemas puede causar el uso de la propiedad style?

Al usar la propiedad style, un error común es reescribir estilos no deseados, perdiendo consistencia visual. Por ejemplo, cambiar el color de fondo de un menú:

const menu = document.querySelector('.menu');
menu.style.backgroundColor = 'red';

Aunque el estilo original puede ser azul en CSS, el estilo en línea prevalecerá y lo cambiará a rojo.

¿Cómo utilizar className para modificación de estilos?

Otra opción es className, que modifica directamente las clases existentes en un elemento. Es importante saber que className reemplazará cualquier clase previa con la nueva:

menu.className = 'main-menu';

Esto cambiará cualquier clase aplicada al menú por main-menu. Todos los estilos CSS anteriores se perderán si no están definidos en la nueva clase.

¿Consejos para trabajar con estilos en JavaScript?

• Precaución con la especificidad: Usar estilos en línea puede sobreescribir reglas CSS preexistentes.
• Utilizar className sabiamente: Asegúrate de no eliminar clases que contienen estilos necesarios.
• Conocer las propiedades disponibles: Familiarízate con las propiedades CSS (backgroundColor, fontSize, margin, etc.) que puedes manipular mediante JavaScript.

Uso de classList para Manipular Clases en Elementos HTML

Qué es classList y por qué es útil?

La manipulación de clases en elementos HTML es esencial para crear aplicaciones web interactivas y dinámicas. Para gestionar estas clases, classList surge como una herramienta poderosa y versátil. A diferencia de className, que sobrescribe la clase de un elemento HTML, classList permite agregar, eliminar o alternar clases sin modificar las que ya existen. Esta funcionalidad es crucial cuando se desea realizar cambios de estilo sobre la marcha manteniendo intactas otras propiedades del componente.

¿Cómo utilizar el método toggle() de classList?

El método toggle() de classList permite cambiar la presencia de una clase en un elemento. Es decir, si la clase ya está presente, toggle() la elimina; si no está presente, la agrega. Esta simplicidad es especialmente útil en sitios web donde es necesario ocultar o mostrar contenido con un solo clic.

Ejemplo práctico de toggle()

Para entender mejor, imaginemos un ejercicio práctico:

• Se tiene un menú que es visible por defecto.
• Al presionar un botón denominado “Toggle Visibility”, se quiere que el menú se oculte o aparezca dependiendo de su estado actual.

const button = document.querySelector('button');
const menu = document.querySelector('.mainMenu');

button.addEventListener('click', function() {
  menu.classList.toggle('invisible');
});

Este script selecciona el botón y el menú. Al escuchar el evento de clic en el botón, alterna la clase invisible en el menú, ocultando o mostrando el menú de acuerdo a la presencia de esta clase.

Otros métodos útiles en classList

• add(clase): Añade una clase al elemento, si aún no está presente.
• remove(clase): Elimina una clase del elemento.
• contains(clase): Devuelve true o false dependiendo de si la clase especificada está presente en el elemento. Esto es útil para verificar el estado de un elemento antes de realizar ciertas acciones.

Recomendaciones para el uso de classList

• Compatibilidad del navegador: Aunque classList es ampliamente soportada por los navegadores modernos, es importante verificar la compatibilidad para asegurar que toda la audiencia pueda interactuar correctamente con el contenido.
• Nombres de clases significativos: Usar nombres de clases descriptivos facilita la comprensión del propósito de cada estilo aplicado y mejora la mantenibilidad del código.
• Pruebas y depuración: Verifica en la consola de herramientas de desarrollo del navegador si las clases se aplican como se espera, para detectar y corregir cualquier comportamiento inesperado.

Manipulación del DOM con innerHTML e InsertAdjacentHTML

¿Cómo podemos manipular elementos en el DOM?

El Document Object Model (DOM) es un componente clave en el desarrollo web, permitiendo a los desarrolladores crear, modificar y eliminar elementos HTML dinámicamente. A continuación veremos dos métodos populares para generar y manipular contenido en el DOM:

1. HTML strings (innerHTML e insertAdjacentHTML)
2. API del DOM (createElement, appendChild, remove, removeChild)

¿Qué son las HTML strings y cómo se utilizan?

Las HTML strings son cadenas de texto que representan estructuras HTML. Se pueden inyectar directamente en el DOM para crear o reemplazar contenido. Los dos métodos más usados son:

innerHTML

• Reemplaza todo el contenido de un elemento con la cadena HTML proporcionada.
• Es sencillo, pero borra cualquier evento o estado previo de los nodos hijos.

const areaDeContenido = document.getElementById('content-area');
areaDeContenido.innerHTML = '<p>Este es un nuevo párrafo.</p>';

insertAdjacentHTML

• Inserta la cadena HTML en una posición específica sin borrar el contenido existente.
• Es más seguro para añadir fragmentos y mantener listeners o estados de otros nodos.

const areaDeContenido = document.getElementById('content-area');
areaDeContenido.insertAdjacentHTML('beforeend', '<p>Este es otro párrafo nuevo.</p>');

¿Cómo funcionan las posiciones en insertAdjacentHTML?

El primer argumento de insertAdjacentHTML define la posición relativa al elemento:

• beforebegin: justo antes del elemento.
• afterbegin: al principio del elemento, después de la etiqueta de apertura.
• beforeend: al final del elemento, antes de la etiqueta de cierre.
• afterend: justo después del elemento.

API del DOM: createElement y appendChild

Para mayor control y seguridad (por ejemplo, evitar inyección de HTML), puedes usar la API nativa:

// Crear un nuevo elemento <li>
const nuevoItem = document.createElement('li');
nuevoItem.textContent = 'Elemento creado con createElement';

// Agregar atributos o clases
nuevoItem.setAttribute('data-id', '123');
nuevoItem.classList.add('item-lista');

// Insertar en la lista existente
const lista = document.querySelector('#mi-lista');
lista.appendChild(nuevoItem);

¿Cómo eliminar elementos del DOM?

Una vez que un elemento ya no es necesario, puedes retirarlo:

• Con remove() directamente sobre el nodo:

const item = document.querySelector('.item-lista');
item.remove();

• O usando removeChild() desde el padre:

const lista = document.querySelector('#mi-lista');
const primerItem = lista.firstElementChild;
lista.removeChild(primerItem);

---

Con estas técnicas podrás crear interfaces dinámicas, gestionar estados y mantener limpio el DOM en tus aplicaciones web.

Agregar elementos HTML sin reemplazar contenido existente

¿Qué problemas podrías enfrentar usando innerHTML?

Usar innerHTML += para añadir contenido a un contenedor puede parecer sencillo, pero conlleva un importante problema de rendimiento:

• Cada vez que concatenas nuevo HTML, el navegador vuelve a parsear y renderizar todo el contenido del contenedor.
• Con pocos elementos no se nota; pero si tienes cientos o miles, cada actualización dispara un re-renderizado completo, degradando la experiencia de usuario.

¿Cómo evitar problemas de rendimiento al agregar elementos?

En lugar de innerHTML +=, utiliza insertAdjacentHTML, que inserta el nuevo HTML en una posición específica sin borrar ni recrear los nodos existentes:

// Selecciona el contenedor padre por su ID
const listArea = document.getElementById('listArea');

// Agrega un nuevo elemento de lista sin re-renderizar todo
listArea.insertAdjacentHTML('beforeend', '<li>Item número 6</li>');

¿Cuál es la ventaja de usar insertAdjacentHTML?

• Inserta contenido directamente en la posición indicada, sin tocar el resto de los nodos.
• Evita re-parsing y reflow de todo el contenedor, mejorando la velocidad y rendimiento en listas largas.

Posiciones disponibles en insertAdjacentHTML

Al llamar a insertAdjacentHTML(posición, htmlString), el primer parámetro define dónde se insertará el nuevo contenido:

• beforebegin: justo antes del elemento seleccionado.
• afterbegin: al inicio del elemento, antes de su primer hijo.
• beforeend: al final del elemento, después de su último hijo.
• afterend: justo después del elemento seleccionado.

Con esto, puedes controlar exactamente dónde y cómo se añade nuevo contenido sin afectar el DOM existente.

Creación y Manipulación de Elementos DOM con createElement

¿Cómo aprovechar el método createElement en JavaScript?

El método createElement es una herramienta poderosa para manipular el DOM sin generar cadenas HTML completas. A diferencia de innerHTML o insertAdjacentHTML, permite crear nodos de forma segura y eficiente, mejorando el rendimiento de tus aplicaciones.

¿Cómo crear un nuevo elemento con createElement?

1. Llama a createElement con el nombre de la etiqueta que quieras crear.
2. Configura su contenido y atributos antes de inyectarlo en el DOM.

// Crear un nuevo elemento de párrafo
const newParagraph = document.createElement('p');

// Añadir contenido al párrafo
newParagraph.textContent = 'Fui creado con createElement';

// Verificar el elemento antes de la inyección
console.log(newParagraph);
// <p>Fui creado con createElement</p>

Hasta ahora, newParagraph existe en memoria, pero no forma parte aún del documento visible.

¿Cómo inyectar un elemento en el DOM?

Una vez creado y configurado, selecciona un contenedor existente y usa métodos de inserción:

// Seleccionar el área de contenido donde se inyectará el nuevo elemento
const contentArea = document.getElementById('contentArea');

// Inyectar el nuevo párrafo al final del contenedor
contentArea.append(newParagraph);

• append(...) añade el nodo al final del contenedor, sin borrar nada ni forzar re-renderizados completos.

¿Cuáles son las distintas formas de añadir elementos?

Además de append, existen métodos para un control más fino de la posición:

• prepend(node): añade el nodo al inicio del contenedor.
• before(node): inserta el nodo antes de otro elemento existente.
• after(node): inserta el nodo después de otro elemento existente.

// Prepend: al inicio
contentArea.prepend(newParagraph);

// Before: antes de otro elemento
anotherElement.before(newParagraph);

// After: después de otro elemento
anotherElement.after(newParagraph);

¿Qué debes saber sobre la manipulación de nodos en el DOM?

• Estructura primero, contenido después: crea y configura completamente el nodo antes de añadirlo al DOM para evitar reflows innecesarios.
• Evita duplicados: si necesitas reutilizar un nodo, muévelo en lugar de recrearlo.
• Usa id y class sabiamente: asigna identificadores y clases para poder referenciar fácilmente tus elementos y aplicar estilos o comportamientos específicos.

Con createElement y estos métodos de inserción, podrás construir interfaces dinámicas, optimizar el rendimiento y mantener un código limpio y seguro.

Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos

¿Cómo eliminar elementos en el DOM usando JavaScript?

Eliminar elementos del DOM es una parte vital del desarrollo web dinámico, permitiendo que las aplicaciones respondan a las interacciones y necesidades del usuario en tiempo real. Puede que necesites eliminar elementos obsoletos, innecesarios o simplemente por diseño de la funcionalidad de tu aplicación. Aquí aprenderemos cómo hacerlo utilizando JavaScript.

¿Cuáles son las principales formas de eliminar elementos?

• Método remove()
  Actúa directamente sobre el elemento que deseas eliminar. Identifica el elemento y llama a su método remove():

  // Seleccionamos el primer elemento de la lista
  const firstItem = document.querySelector('li');
  
  // Eliminamos el primer elemento
  firstItem.remove();
  

• Método removeChild()
  Se aplica sobre el elemento padre del nodo que deseas eliminar. Es útil cuando quieres eliminar un hijo específico desde el contexto del padre:

  // Seleccionamos el contenedor o lista
  const list = document.querySelector('ul');
  
  // Eliminamos el primer elemento hijo de la lista
  list.removeChild(list.firstElementChild);
  

¿Cómo se implementa remove en la práctica?

remove() es ideal cuando ya tienes una referencia directa al elemento que deseas eliminar. Por ejemplo, si tienes una lista de tareas y quieres borrar la primera:

// Asumimos que el elemento que queremos borrar es el primer elemento 'li'
const task = document.querySelector('li'); 
task.remove();

¿Cuándo usar removeChild?

removeChild() es útil cuando trabajas con dinámicas de nodos padres e hijos y necesitas más control o no tienes una referencia directa al nodo hijo, pero sí al padre. Por ejemplo, para eliminar el primer o último elemento de una lista:

// Obtenemos el nodo padre
const parentList = document.querySelector('ul');

// Removemos el primer hijo
parentList.removeChild(parentList.firstElementChild);

Consejo práctico

• Usa remove() para máxima sencillez cuando tengas la referencia directa al elemento.
• Usa removeChild() cuando necesites operar desde el contexto del nodo padre y controlar la relación jerárquica.
• Combina estos métodos con eventos de usuario (por ejemplo, un botón “Eliminar” en cada ítem) para crear interfaces interactivas y limpias.

Clonación y Reemplazo de Elementos en JavaScript

¿Cómo clonar y reemplazar elementos en JavaScript?

Al manipular el DOM con JavaScript, saber cómo clonar y reemplazar elementos puede ser crucial para crear aplicaciones web dinámicas y personalizadas. Estos procesos no solo permiten la reutilización de elementos, sino que también optimizan el rendimiento al evitar la creación de nuevos nodos cada vez.

¿Cómo clonar un elemento?

Para clonar un elemento en JavaScript utilizamos el método cloneNode. Este método duplica un nodo existente, manteniendo su estructura y contenido.

1. Seleccionar el elemento a clonar

   const contentArea = document.querySelector('#contentArea');
   const originalP    = contentArea.querySelector('p');
   

2. Clonar el nodo

   // true clona también todos los hijos
   const clonParagraph = originalP.cloneNode(true);
   

3. Insertar el nodo clonado

   contentArea.append(clonParagraph);
   

4. (Opcional) Modificar el nodo clonado

   clonParagraph.textContent = 'Este es su nuevo texto';
   

¿Cómo reemplazar un elemento?

Para sustituir un nodo existente por otro utilizamos replaceWith.

1. Seleccionar los elementos

   const list          = document.querySelector('#listArea');
   const itemToReplace = list.children[2]; // Tercer elemento de la lista
   

2. Reemplazar el elemento

   itemToReplace.replaceWith(clonParagraph);
   

¿Por qué es útil clonar y reemplazar nodos?

• Eficiencia en el desarrollo: Reutiliza elementos sin escribir código redundante.
• Optimización de recursos: Evita la sobrecarga de rendimiento de crear nuevos nodos desde cero.
• Flexibilidad: Facilita el manejo dinámico del contenido y actualizaciones en tiempo real.

Eventos y Flujo en Programación Web: Capturing y Bubbling

¿Qué son los eventos en programación?

Los eventos son acciones o sucesos que ocurren en el entorno de una aplicación, desde un clic del ratón hasta el envío de un formulario. Permiten crear aplicaciones interactivas y dinámicas, ya que al dispararse un evento, podemos configurar respuestas que modifiquen el comportamiento de la aplicación.

AddEventListener: ¿Cómo funciona?

En el ámbito de los navegadores, el método addEventListener ofrece la capacidad de:

• Detectar eventos específicos (clics, teclas presionadas, movimientos del mouse, etc.).
• Desencadenar funciones que, por ejemplo, cambien texto, imágenes o envíen formularios automáticamente.
• Aportar dinamismo a las páginas web, mejorando la experiencia del usuario.

Tipos de eventos comunes

• Eventos de mouse: clic, doble clic, desplazamiento.
• Eventos de teclado: pulsación de teclas, combinación de teclas.
• Eventos de ventana (Window): carga (load), cambio de tamaño (resize).
• Eventos en formularios: entrada de datos (input), envío de formulario (submit).
• Eventos táctiles: toques (touchstart), deslizamientos (touchmove) en dispositivos móviles.

¿Cómo funciona el flujo de un evento?

El flujo de un evento en el DOM se divide en tres fases:

1. Capturing
2. Target
3. Bubbling

Capturing: ¿Qué es y cómo se inicia?

• Comienza en el nivel más alto del DOM (window).
• El evento desciende por la jerarquía de elementos hasta llegar al elemento que lo disparó.

¿Qué sucede al llegar al Target?

• El Target es el elemento que originó el evento.
• Aquí se ejecutan los manejadores registrados en esa fase, permitiendo realizar acciones específicas.

Bubbling: ¿Cómo se propaga el evento hacia arriba?

• Tras el Target, el evento asciende de nuevo por la jerarquía de padres hasta window.
• Permite que elementos padres reaccionen al evento, ideal para delegación y manejo centralizado.

Consejos prácticos para manejar eventos

• Prioriza el uso de addEventListener para mantener el código limpio y seguir el flujo natural de eventos.
• Planifica el flujo de eventos (Capturing vs. Bubbling) para asegurar que los elementos reaccionen correctamente.
• Prueba y depura constantemente con las herramientas de desarrollo del navegador para mejorar el manejo de eventos.

Nota: Existe un diagrama que explica esto muy bien! Recurso extra: https://www.youtube.com/watch?v=myEsMzsJEFg

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

¿Cómo seleccionar elementos HTML con JavaScript?

Antes de asignar eventos, necesitas obtener referencias a los elementos del DOM. Por ejemplo:

const container = document.querySelector('.container'); // Un div con clase "container"
const button    = document.querySelector('button');    // El primer <button> del documento

¿Qué es addEventListener y cómo se utiliza?

addEventListener es el método estándar para asociar un manejador de evento a un elemento. Recibe tres argumentos:

1. El nombre del evento ('click', 'mouseover', etc.).
2. La función callback que se ejecuta cuando el evento ocurre.
3. (Opcional) Un objeto de opciones o un booleano para controlar la fase de captura/burbuja.

Ejemplos de eventos de ratón:

container.addEventListener('mouseover', () => {
  container.style.backgroundColor = 'blue';
});

container.addEventListener('mouseout', () => {
  container.style.backgroundColor = 'red';
});

• mouseover: cambia el fondo a azul al entrar el cursor.
• mouseout : restaura el fondo a rojo al salir el cursor.

Y un ejemplo de evento de clic:

button.addEventListener('click', () => {
  alert('¡Has hecho clic en el botón!');
});

¿Cómo manejar el objeto Event?

Dentro del callback puedes recibir el objeto event para obtener más información:

button.addEventListener('click', (event) => {
  console.log('Coordenadas del clic:', event.clientX, event.clientY);
});

¿Cómo retirar un evento previamente asignado?

Para desmontar un event listener necesitas:

1. Que la función callback sea nombrada (no anónima).
2. Usar removeEventListener con la misma referencia de función y tipo de evento.

// 1. Definir callback nombrada
function onButtonClick() {
  alert('¡Clic temporal!');
}

// 2. Asignar el listener
button.addEventListener('click', onButtonClick);

// 3. Removerlo tras 2 segundos
setTimeout(() => {
  button.removeEventListener('click', onButtonClick);
  console.log('El listener de clic ha sido removido');
}, 2000);

Ejemplo completo

<div class="container" style="width:200px; height:100px; background:red;">
  <button>Haz clic</button>
</div>

const container = document.querySelector('.container');
const button    = document.querySelector('button');

// Cambia color al pasar el ratón
container.addEventListener('mouseover', () => {
  container.style.backgroundColor = 'blue';
});
container.addEventListener('mouseout', () => {
  container.style.backgroundColor = 'red';
});

// Muestra alerta al hacer clic en el botón
function handleClick() {
  alert('Botón clickeado');
}
button.addEventListener('click', handleClick);

// Remueve el evento de clic después de 5 segundos
setTimeout(() => {
  button.removeEventListener('click', handleClick);
}, 5000);

Con esto tendrás una base sólida para implementar, manejar y desmontar eventos en JavaScript, dotando a tu página de interactividad y dinamismo.

Manipulación de Eventos en JavaScript para Interacción de Elementos

¿Qué son los eventos en JavaScript?

En el desarrollo web, los eventos son objetos generados por acciones del usuario o del navegador (clics, movimientos del mouse, envío de formularios, carga de la página, etc.). Estos objetos contienen propiedades y métodos para:

• Identificar dónde y cuándo ocurrió la acción.
• Conocer el tipo de evento (click, mouseover, keypress…).
• Manipular el DOM en respuesta al suceso.

Dominar los eventos es clave para crear interfaces interactivas y mejorar la experiencia de usuario.

¿Cómo se utilizan los eventos en JavaScript?

Para reaccionar a un evento, vinculamos un manejador (callback) a un elemento del DOM usando addEventListener:

const boton = document.querySelector('#bot');

boton.addEventListener('click', botonClick);

function botonClick(evento) {
  console.log(evento); // Inspecciona el objeto evento en la consola
}

En este ejemplo:

1. Seleccionamos el botón con ID bot.
2. Añadimos un listener al evento click.
3. Cuando se hace clic, se ejecuta la función botonClick, recibiendo el objeto evento.

¿Qué información proporciona un objeto de evento?

El objeto evento expone múltiples datos útiles. Algunas propiedades comunes:

• evento.target
  Elemento que disparó el evento.
• evento.type
  Tipo de evento (por ejemplo, "click").
• evento.timeStamp
  Marca de tiempo en milisegundos cuando ocurrió el evento.

Ejemplo de uso:

function botonClick(evento) {
  console.log(evento.target);             // El elemento HTML clicado
  console.log(evento.target.id);          // Su atributo id
  console.log(evento.target.textContent); // Su texto interno
}

¿Cómo manipular el DOM usando eventos?

Con acceso al objeto evento, puedes modificar el DOM dinámicamente. Por ejemplo, cambiar el texto de un botón al hacer clic:

function botonClick(evento) {
  evento.target.textContent = '¡Me clicaste!';
}

Otras acciones posibles:

• Cambiar estilos (.style).
• Añadir o quitar clases (.classList.add(), .classList.remove()).
• Crear o eliminar nodos (createElement(), remove()).

¿Por qué es importante entender los eventos?

• Permiten una interacción fluida: responden en tiempo real a las acciones del usuario.
• Facilitan el mantenimiento: desacoplan la lógica de la vista.
• Mejoran la accesibilidad y la experiencia de usuario: ajustan la interfaz según el contexto y necesidades.

Dominar el ciclo de vida de los eventos y sus propiedades te ayudará a diseñar aplicaciones web más ricas, reactivas y eficientes.

Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto

¿Cómo funcionan las validaciones de formularios con HTML?

La validación de formularios es esencial para asegurar que la información proporcionada por los usuarios sea completa y exacta. HTML proporciona validaciones básicas que pueden ser increíblemente útiles. Por ejemplo:

• Usando type="email" en un <input>, HTML valida que el texto introducido tenga estructura de correo electrónico.
• La propiedad required indica que un campo es obligatorio. Si no está lleno, el navegador automáticamente informa al usuario que necesita completarlo.

Sin embargo, las validaciones estándar de HTML son limitadas, ya que permiten cualquier entrada que cumpla con un mínimo de requisitos, como una sola letra o un número.

¿Cómo evitar el comportamiento por defecto del formulario?

Evitar el comportamiento por defecto de un formulario es crucial cuando deseas un control total sobre lo que ocurre después de que un usuario presiona “Enviar”. Por defecto, los formularios intentan enviar datos a un servidor, refrescando la página y perdiendo cualquier información no guardada. Para evitar esto en JavaScript, podemos prevenir este comportamiento:

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Tu lógica adicional aquí
});

Esta técnica permite a los desarrolladores manejar la lógica de envío con más flexibilidad, ofreciendo una experiencia de usuario más suave y evitando la pérdida de datos.

¿Cómo obtener y utilizar los valores de los inputs?

Una vez que el comportamiento por defecto está bajo control, el siguiente paso es manejar adecuadamente los datos de los inputs. Para obtener y utilizar estos datos, puedes seguir estos pasos:

1. Obtener valores de inputs usando la propiedad elements del formulario:

   const form       = document.getElementById('myForm');
   const nameValue  = form.elements['name'].value;
   const emailValue = form.elements['email'].value;
   console.log(nameValue, emailValue);
   

2. Acceso y manipulación de datos:
   Con los datos capturados, puedes proceder a validaciones personalizadas o emplearlos para enviarlos a un servidor mediante AJAX u otra técnica de comunicación asíncrona.

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

¿Qué es el Delegation Pattern?

El Delegation Pattern, o patrón de delegación, es una técnica para gestionar eventos de forma centralizada. En lugar de añadir un listener a cada elemento hijo, se asigna al elemento padre y se utiliza lógica para determinar cuál hijo disparó el evento. Esto mejora el rendimiento y facilita el manejo de elementos dinámicos.

Método 1: Asignar eventos individualmente a cada ítem

const listItems = document.querySelectorAll("li");

listItems.forEach(item => {
  item.addEventListener("click", event => {
    const target = event.target;
    target.classList.toggle("highlight");
  });
});

• Selecciona todos los <li>.
• Añade un click listener a cada uno.
• Alterna la clase highlight en el elemento clicado.
• Desventaja: muchos listeners si hay muchos ítems.

Método 2: Usar el Delegation Pattern

const list = document.querySelector("ul");

list.addEventListener("click", event => {
  // Obtiene el <li> más cercano al punto de clic
  const li = event.target.closest("li");
  if (li) {
    li.classList.toggle("highlight");
  }
});

• El listener se añade sólo al <ul>.
• event.target.closest("li") localiza el
• asociado al clic, aun si se clicó en un hijo (un span, un icono, etc.).
• Se alterna la clase highlight sobre ese
• .

¿Por qué elegir el Delegation Pattern?

• Reduce la cantidad de listeners activos.
• Facilita el mantenimiento y la legibilidad del código.
• Gestiona elementos dinámicos creados tras el render inicial.
• Aprovecha las fases de bubbling del flujo de eventos para centralizar la lógica.

Programación Síncrona y Asíncrona en JavaScript

¿Cómo funciona la programación síncrona y asíncrona en JavaScript?

La comprensión de la programación en JavaScript, especialmente en cuanto a la programación síncrona y asíncrona, es crucial para desarrollar aplicaciones web eficientes. JavaScript, como lenguaje interpretado por el navegador, cuenta con su propio motor (JavaScript Engine) que gestiona la ejecución del código. A continuación, los conceptos fundamentales para entender cómo opera JavaScript de manera sincronizada y asincronizada.

¿Qué es el memory heap y el call stack?

• Memory Heap
  Área de memoria donde se almacenan variables, funciones y objetos creados en tiempo de ejecución. No sigue un orden específico, lo que permite acceso aleatorio a los datos.

• Call Stack
  Estructura de datos tipo pila que sigue el orden de las llamadas a funciones. Cuando llamas a holaMundo() que a su vez llama a miNombreEsDiego(), el flujo es:

  1. Se apila la llamada a holaMundo.
  2. Dentro de ella, se apila miNombreEsDiego.
  3. Cuando miNombreEsDiego termina, se desapila y regresa a holaMundo.
  4. Al terminar holaMundo, la pila queda vacía.

En la programación síncrona, cada función se ejecuta completamente antes de pasar a la siguiente. Si llenas demasiado la pila con llamadas recursivas o anidadas, puedes producir un Stack Overflow.

¿Cómo se realiza la programación asíncrona en JavaScript?

Por defecto, JavaScript es síncrono, pero emplea mecanismos del navegador para manejar tareas asíncronas y así no bloquear el Call Stack, mejorando el rendimiento.

Web API y cómo permite la asincronía

El navegador expone un conjunto de APIs (Web API) que ejecutan tareas asíncronas fuera del call stack. Por ejemplo:

• setTimeout y setInterval
• Peticiones fetch
• Eventos del DOM

Cuando llamas a setTimeout, esa tarea se mueve a la Web API, permitiendo que el call stack siga procesando otras instrucciones.

Queue y Event Loop

1. Queue (Cola de tareas)
   Es la sala de espera donde Web APIs dejan las tareas terminadas.
2. Event Loop
   Monitorea el call stack. Cuando éste está vacío, transfiere la siguiente tarea de la queue al call stack para su ejecución.

Ejemplo de programación asíncrona en JavaScript

function varFunction() {
  console.log(1);
  setTimeout(() => {
    console.log(2);
  }, 0);
  console.log(3);
}
varFunction();

Ejecución paso a paso:

• Se imprime 1 inmediatamente.
• setTimeout se envía a la Web API y se agenda con retardo 0ms.
• Se imprime 3 mientras setTimeout espera.
• Cuando el call stack queda vacío, el callback de setTimeout pasa de la queue al stack y se imprime 2.

¿Cómo las promesas y async/await transforman la ejecución asíncrona?

• Promesas
  Representan el resultado de una operación asíncrona:

  fetch('/datos')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
  

  Permiten encadenar callbacks y manejar errores de forma más limpia.

• Async/Await
  Sintaxis sobre promesas que hace el código asíncrono más legible, como si fuera síncrono:

  async function cargarDatos() {
    try {
      const response = await fetch('/datos');
      const data = await response.json();
      console.log(data);
    } catch (err) {
      console.error(err);
    }
  }
  cargarDatos();
  

Ejercicio - Task Manager: Creación de un Task Manager con Persistencia usando Local Storage

¿Cómo construir un Task Manager en JavaScript?

La construcción de un Task Manager o To-Do List en JavaScript no es solo una introducción a la manipulación del DOM, sino también una práctica valiosa para entender la persistencia de datos. La clave es crear una aplicación sencilla que permita cambiar temas, añadir, modificar y eliminar tareas. Aunque el diseño es básico, su funcionalidad es enriquecedora y didáctica.

¿Cómo implementar el tema de tu Task Manager?

Para mejorar la experiencia del usuario, nuestra aplicación permite cambiar de tema. Este proceso implica un botón que aplicará diferentes estilos CSS almacenados en un archivo independiente. Así, puedes ofrecer una interfaz personalizada que mejore la interacción visual.

¿Cómo agregar tareas de manera eficaz?

Agregar tareas es esencial en cualquier Task Manager. Para implementar esta funcionalidad:

• Formulario en HTML: Disponemos de un pequeño formulario en HTML donde el usuario ingresa la tarea.
• Escuchar el evento de envío: Utilizamos addEventListener para captar el submit del formulario y extraer el texto contenido en el input.
• Estructuración de funciones:
  • Una función para manejar el evento de envío y extraer el valor.
  • Otra para crear elementos de la lista en JavaScript.
  • Una más para generar los botones necesarios para cada tarea.

Este enfoque modular permite que el código sea más organizado y escalable.

const taskForm = document.getElementById('idDelFormulario');
const taskList = document.getElementById('idDeLaListaDeTareas');

taskForm.addEventListener('submit', function(evento) {
  evento.preventDefault();
  const taskInput = document.getElementById('idDelInput');
  const task = taskInput.value;
  // Lógica para agregar la tarea a la lista
});

¿Cómo lograr la persistencia de datos?

Para garantizar que las tareas y las preferencias de tema se mantengan tras refrescar la página, utilizamos la API de almacenamiento web conocida como Local Storage. Este método guarda los datos localmente en el navegador, asegurando que las modificaciones se conserven entre sesiones.

• Almacenar Datos: Cuando se agrega o modifica una tarea, el estado actual se guarda en el Local Storage.
• Recuperación de Datos: Al recargar la página, se extraen los datos del Local Storage para restaurar el estado previo de la aplicación.

¿Qué debemos tener en cuenta al manejar el DOM en JavaScript?

Manipular el DOM es clave en proyectos como un Task Manager. Aquí algunos consejos prácticos:

• Selección de Elementos: Usa getElementById o querySelector para seleccionar y manipular elementos del DOM de manera eficiente.
• Crear Elementos Dinámicamente: Emplea JavaScript para añadir elementos <li> a la lista de tareas, permitiendo flexibilidad.
• Eventos: Capturar eventos como clics o envíos de formularios te permitirá reaccionar dinámicamente.

Ejercicio - Task Manager: Interactividad en Botones de Tareas: Borrar y Editar en JavaScript

¿Cómo agregar funcionalidad a los botones de una aplicación de tareas?

El aumento de la funcionalidad en una aplicación es crucial para garantizar una experiencia de usuario fluida y útil. En el contexto de una aplicación para gestionar tareas, la capacidad de editar o eliminar una tarea con un simple clic es de suma importancia. A continuación, veremos cómo implementar estas funciones esenciales en una lista de tareas utilizando JavaScript.

¿Cómo implementar la delegación de eventos?

La delegación de eventos es una técnica eficaz para gestionar interacciones en elementos secundarios mediante un listener en un elemento padre. Por ejemplo:

document.querySelector('#task-list').addEventListener('click', event => {
  if (event.target.classList.contains('delete')) {
    deleteTask(event.target.parentElement);
  } else if (event.target.classList.contains('edit')) {
    editTask(event.target.parentElement);
  }
});

• Se asocia un único listener de click al contenedor #task-list.
• Con event.target detectamos el elemento exacto clicado.
• Según su clase (delete o edit), llamamos a la función correspondiente.

¿Cómo borrar una tarea de manera eficiente?

Para eliminar un ítem del DOM tras la confirmación del usuario:

function deleteTask(taskItem) {
  if (confirm("¿Estás segura, seguro, de borrar este elemento?")) {
    taskItem.remove();
  }
}

1. Mostramos un confirm() para validar la acción.
2. Si el usuario acepta, usamos remove() para quitar el elemento del DOM.

¿Cuál es el proceso para editar una tarea?

Para modificar el texto de una tarea existente:

function editTask(taskItem) {
  const newTask = prompt("Edita la tarea:", taskItem.firstChild.textContent);
  if (newTask !== null) {
    taskItem.firstChild.textContent = newTask;
  }
}

1. Abrimos un prompt() con el texto actual de la tarea.
2. Si el usuario ingresa un valor distinto de null, actualizamos textContent.

Ejercicio - Task Manager: Persistencia de Datos con Local Storage en Tareas Web

¿Cómo administrar la persistencia de datos en una aplicación web?

La persistencia de datos es un componente esencial en cualquier aplicación web moderna. Imagina tener una lista de tareas que evolucionan con el tiempo, pero al refrescar la página, toda esa información desaparece. Eso es exactamente lo que queremos evitar en nuestro proyecto. A continuación explicaremos cómo almacenar y mantener la integridad de los datos en una aplicación, empleando una API web, específicamente Local Storage.

¿Qué es una API y cómo se utiliza en la web?

Una API (Application Programming Interface) es un intermediario que permite a distintas aplicaciones comunicarse entre sí. Funciona mediante un conjunto de reglas que definen cómo debe realizarse la interacción. Por ejemplo, si deseas integrar información de Facebook en tu aplicación, Facebook proporcionará una API que debes seguir para solicitar información específica. En resumen, las APIs ofrecen un marco para que diversos programas de software interactúen de manera eficiente.

¿Qué es Local Storage?

Local Storage es una API web que ofrece una forma de almacenar datos en el navegador de manera persistente. A diferencia de una base de datos completa, Local Storage permite guardar información clave que es útil para recuperar la interacción del usuario al regresar a la aplicación. Utilizando Local Storage, puedes asegurar que los cambios realizados —como el progreso en una lista de tareas— se mantengan intactos incluso tras refrescar la página.

¿Cómo almacenar datos utilizando Local Storage?

Para trabajar con Local Storage, existen dos métodos esenciales:

• setItem(key, value): Guarda un valor en Local Storage bajo la clave indicada.
• getItem(key): Recupera el valor almacenado bajo la clave indicada.

// Guardar datos en Local Storage
localStorage.setItem('clave', 'valor');

// Recuperar datos de Local Storage
const valor = localStorage.getItem('clave');

Implementación práctica: Guardar y cargar tareas

Para almacenar una lista de tareas y asegurar que persistan, definimos dos funciones:

// Guardar una nueva tarea en Local Storage
function storeTaskInLocalStorage(task) {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Cargar todas las tareas desde Local Storage
function loadTasks() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.forEach(task => {
    taskList.appendChild(createTaskElement(task));
  });
}

¿Cómo asegurar la persistencia en la experiencia del usuario?

Para consolidar la persistencia de los datos al interactuar con la aplicación, es relevante ligar el almacenamiento a los eventos correctos. Por ejemplo, cuando un usuario añade una nueva tarea:

taskForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const newTask = input.value.trim();
  if (newTask) {
    taskList.appendChild(createTaskElement(newTask));
    storeTaskInLocalStorage(newTask);
    input.value = '';
  }
});

• Se evita el envío por defecto del formulario con preventDefault().
• Se añade la tarea al DOM y luego se guarda en Local Storage.
• El input se limpia para la siguiente entrada.

Consideraciones finales

Implementar Local Storage proporciona a la aplicación un método simple y directo para gestionar la persistencia de datos, permitiendo a los usuarios retomar sus actividades sin perder el progreso. Aunque Local Storage es efectivo para aplicaciones de escala pequeña a mediana, en proyectos más grandes o con requisitos de seguridad y sincronización avanzados, se debería considerar el uso de bases de datos o servicios backend más robustos.

Ejercicio - Task Manager: Guardado y edición de tareas en local storage con JavaScript

¿Cómo almacenar tareas en localStorage usando JavaScript?

El manejo eficiente de datos es crucial en cualquier aplicación moderna. Con localStorage podemos guardar y gestionar tareas en el navegador, de modo que las modificaciones persistan incluso al refrescar la página. A continuación, veremos paso a paso cómo mantener el estado de tus tareas.

¿Cómo asegurarse de que las tareas persistan después de actualizar la página?

• Estructura en localStorage
  Almacenamos las tareas en un array bajo la clave "tasks".
• Inspección
  Abre las herramientas de desarrollo y revisa el panel de Application → Local Storage para ver las tareas guardadas.
• Retroalimentación visual
  Asegúrate de que, tras editar o eliminar tareas en la interfaz, también actualizas localStorage para que los cambios persistan.

¿Cómo implementar la actualización del localStorage tras editar o borrar tareas?

Define una función que lea el DOM, extraiga el texto de cada <li> y reescriba la clave "tasks":

function updateLocalStorage() {
  const taskElements = document.querySelectorAll('#task-list li');
  const tasksArray = Array.from(taskElements)
    .map(el => el.firstChild.textContent);
  localStorage.setItem('tasks', JSON.stringify(tasksArray));
}

1. Seleccionar nodos: querySelectorAll('#task-list li') devuelve un NodeList.
2. Convertir a array: Array.from(...) para usar métodos de array.
3. Mapear contenido: Extraer textContent de cada <li>.
4. Guardar: Serializar con JSON.stringify y setItem.

Integración con edición de tareas

Llama a updateLocalStorage() después de cada acción que modifique tareas:

function editTask(taskIndex, newContent) {
  // Actualiza en la interfaz
  document.querySelectorAll('#task-list li')[taskIndex]
    .firstChild.textContent = newContent;
  // Refleja el cambio en localStorage
  updateLocalStorage();
}

¿Por qué es importante convertir NodeLists en arrays?

• Acceso a métodos: NodeLists no tienen map, filter ni reduce.
• Flexibilidad: Array.from(...) o spread ([...nodeList]) habilita todos los métodos de Array.
• Código más limpio: Facilita iteraciones y transformaciones de datos.

Consideraciones finales

• Sincronización constante: Cada vez que añadas, edites o elimines tareas, llama a updateLocalStorage().
• Persistencia confiable: localStorage es ideal para datos clave-valor en aplicaciones de pequeña a mediana escala.
• Escalabilidad: Para proyectos mayores, considera soluciones de backend o IndexedDB.

Ejercicio - Task Manager: Manejo de Errores en Local Storage para Tareas Dinámicas

¿Cómo solucionar conflictos con tareas precargadas en Local Storage?

Al desarrollar aplicaciones web, es esencial asegurar que el almacenamiento local (Local Storage) funcione de manera precisa y eficiente. A continuación se abordan algunos errores comunes con las tareas precargadas y cómo resolverlos.

¿Qué causa el problema de las tareas duplicadas?

El problema surge cuando existen tareas precargadas (“hardcoded”) directamente en el HTML. Al iniciar el Task Manager, se inserta una o más tareas por defecto. Luego, la función que sincroniza con Local Storage escanea todas las etiquetas <li> y las guarda, duplicando las predeterminadas cada vez que se actualiza.

¿Cómo se manifiesta este problema?

• Tareas duplicadas
  Al editar o añadir una tarea, la aplicación rescanea todas las <li> y vuelve a guardar incluso las precargadas.
• Contenido no deseado
  Las tareas hardcoded se multiplican en Local Storage tras cada modificación y refresco.

¿Cómo solucionar el bug en Local Storage?

1. Eliminar código hardcoded
   Quita las tareas predeterminadas del HTML para que la lista inicie vacía:

   <!-- Antes: tareas precargadas -->
   <ul id="task-container">
     <li>Tarea de ejemplo</li>
   </ul>
   
   <!-- Después: sin tareas precargadas -->
   <ul id="task-container">
     <!-- Las tareas se agregarán dinámicamente aquí -->
   </ul>
   

2. Actualizar Local Storage correctamente
   Ajusta la función que guarda tareas para que sólo tome las generadas dinámicamente:

   function updateLocalStorage() {
     const tasks = [];
     document.querySelectorAll('#task-container li').forEach(li => {
       tasks.push(li.textContent);
     });
     localStorage.setItem('tasks', JSON.stringify(tasks));
   }
   

3. Probar y verificar
   Tras cada acción (agregar, editar, eliminar), comprueba en DevTools → Application → Local Storage que sólo estén las tareas válidas.

Consejos prácticos para gestionar Local Storage

• Revisar el código regularmente
  Audita el HTML para evitar elementos hardcoded que puedan guardar datos no deseados.
• Mantener el código modular
  Separa la lógica de renderizado, almacenamiento y eventos en funciones independientes.
• Realizar pruebas continuas
  Simula flujos de usuario (añadir, editar, eliminar, refrescar) para asegurarte de que la persistencia funciona correctamente.

Ejercicio - Task Manager: Cambio de Tema Dinámico y Persistente en Aplicaciones Web

¿Cómo podemos implementar un botón para cambiar el tema de una aplicación?

A menudo queremos ofrecer a los usuarios la opción de personalizar la apariencia de nuestra aplicación web. Una de las funcionalidades favoritas es la de cambiar el tema entre claro (light) y oscuro (dark). Este tutorial te llevará por el proceso de implementación de un botón de alternancia de tema que recuerda la elección del usuario incluso al actualizar la página.

Preparación del entorno

Para empezar, necesitamos seleccionar el botón encargado de alternar el tema. Usaremos el método getElementById en document para obtener una referencia al botón de alternancia por su ID. Una vez tenemos la referencia, debemos agregar un evento que se dispare al hacer clic. Para ello, utilizamos addEventListener:

const tempToggleButton = document.getElementById('toggleButton');

tempToggleButton.addEventListener('click', () => {
  document.body.classList.toggle('darkTheme');
});

Este sencillo fragmento de código permitirá que, al hacer clic en el botón, se agregue o quite la clase darkTheme del elemento <body>. De este modo, veremos el cambio visual en los estilos definidos para la clase darkTheme.

Implementación de la persistencia del tema

El siguiente paso es asegurarnos de que la preferencia del usuario se mantenga incluso después de recargar la página, algo vital para mejorar la experiencia del usuario. Para lograr la persistencia del tema, utilizaremos localStorage. Primero, validamos si el <body> contiene la clase darkTheme y almacenamos el resultado:

const theme = document.body.classList.contains('darkTheme') ? 'dark' : 'light';
localStorage.setItem('theme', theme);

Verificación del tema al cargar la página

Una vez almacenada la elección del usuario en localStorage, es importante que cada vez que la página cargue, verifiquemos este almacenamiento y ajustemos el tema en consecuencia. Podemos lograrlo con la siguiente validación al inicio de nuestro script:

const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
  document.body.classList.add('darkTheme');
}

Con esta lógica, al recargar la página, el tema seleccionado se mantiene de acuerdo con el valor guardado en localStorage.

Probando y asegurando la funcionalidad

Para asegurarte de que todo funcione correctamente, realiza una última verificación:

1. Cambia al tema oscuro y verifica que localStorage contiene theme = dark.
2. Actualiza la página y comprueba que el tema oscuro persista.
3. Haz clic para volver al tema claro y verifica que localStorage ahora tenga theme = light.

Consejos adicionales

• Revisa que todos los estilos CSS necesarios estén correctamente definidos para ambas clases de tema.
• Asegúrate de que los cambios de tema no interfieran con otros estilos visuales.
• Considera añadir animaciones suaves para mejorar la transición entre temas.