Creación de Páginas Web Dinámicas con JavaScript

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Entendiendo el DOM

Seleccionando y Accesando a Elementos del DOM

Manipulando Elementos del DOM

Manipulando Eventos en el DOM

Asincronía en JavaScript

20
Cómo JavaScript ejecuta código asíncrono
04:36 min

Creando un Administrador de Tareas

Tomar examen

Creación de Páginas Web Dinámicas con JavaScript

Resumen

Transformar una página web estática en una experiencia dinámica es uno de los pasos más importantes en el desarrollo frontend. Con JavaScript tienes el poder de crear, manipular, ocultar y eliminar fragmentos de HTML junto con sus estilos CSS, lo que abre la puerta a construir interfaces que responden directamente a las acciones del usuario.

¿Qué significa pasar de páginas estáticas a páginas dinámicas?

Una página estática se limita a mostrar contenido fijo escrito en HTML y CSS. En cambio, una página dinámica utiliza JavaScript para modificar el contenido en tiempo real. Esto implica que, dependiendo de la interacción del usuario, la página puede devolver algo completamente distinto [0:10].

Las acciones que JavaScript permite sobre el DOM incluyen:

Crear nuevos fragmentos de HTML con estilos aplicados.
Manipular elementos existentes para cambiar su contenido o apariencia.
Ocultar o borrar secciones completas de la página.
Generar código HTML dinámicamente para construir vistas nuevas.

Esta capacidad de generar código sobre la marcha es lo que convierte a JavaScript en la herramienta esencial para el desarrollo web moderno.

¿Cómo las APIs del navegador potencian tus páginas dinámicas?

Una vez que dominas la manipulación dinámica del DOM, el siguiente nivel consiste en aprovechar las APIs nativas del navegador. Estas interfaces, accesibles directamente desde JavaScript, permiten crear páginas mucho más robustas [0:32].

Algunos ejemplos concretos mencionados son:

Geolocalización: el navegador puede solicitar la ubicación del usuario, lo que permite personalizar la experiencia según su contexto geográfico.
API de animaciones CSS: al utilizar esta interfaz se obtiene un control mucho más fino sobre los estilos y las animaciones, superando lo que se logra solo con CSS estático.
Otras APIs que ofrecen distintos tipos de interacciones y funcionalidades avanzadas.

El concepto de API (interfaz de programación de aplicaciones) en este contexto se refiere a las herramientas que el propio navegador expone para que los desarrolladores las utilicen mediante JavaScript, sin necesidad de librerías externas.

¿Qué son los componentes con JavaScript y por qué importan?

Uno de los conceptos más valiosos del desarrollo dinámico es la idea de componentes. Se trata de tomar fragmentos de código que ya construiste —combinando JavaScript, HTML y CSS— y encapsularlos para poder reutilizarlos [1:02].

La ventaja principal es doble:

Reutilización dentro del mismo proyecto: evitas repetir código y mantienes consistencia visual.
Portabilidad entre proyectos: un componente bien construido puede trasladarse a otro proyecto sin reescribirlo.

Esta práctica de encapsulamiento y reutilización es la base sobre la que se construyen frameworks y arquitecturas modernas del frontend.

Si ya dominas la creación de páginas dinámicas con JavaScript, el camino natural es explorar las APIs del navegador y comenzar a pensar en componentes. Comparte en los comentarios cuál de estas capacidades te resulta más interesante para tus próximos proyectos.

Tomas Arriola

Estudiante

El curso está excelente, solo falta ordenar un poco el repositorio y aclarar algunos fragmentos de código.

Les comparto una alternativa más que me parecio más sencilla: actualizo localStorage con la nueva tarea y luego renderizo la lista completa, asegurando que el almacenamiento y la interfaz estén sincronizados. En contraste, el enfoque del profesor renderiza la tarea primero y luego actualiza localStorage, lo que puede ser más propenso a inconsistencias y generar más código.

const taskForm = document.getElementById("task-form");
const taskList = document.getElementById("task-list");
const taskInput = document.getElementById("task-input");
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
const toggleThemeBtn = document.getElementById("toggle-theme-btn");

// Función para renderizar tareas y asignar eventos
function renderTasks() {
  taskList.innerHTML = ''; // Limpiar la lista de tareas
  tasks.forEach(task => {
    const li = document.createElement('li');
    li.innerHTML = `
      ${task}
      <span class="delete-btn">❌</span>
      <span class="edit-btn">✏️</span>
    `;
    taskList.appendChild(li);

    // Asignar eventos de eliminación
    li.querySelector('.delete-btn').addEventListener('click', function() {
      const taskText = li.childNodes[0].textContent.trim();
      tasks = tasks.filter(t => t !== taskText);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      renderTasks(); // Re-renderizar la lista actualizada
    });

    // Asignar eventos de edición
    li.querySelector('.edit-btn').addEventListener('click', function() {
      const newTask = prompt("Edit your task:", task);
      if (newTask !== null) {
        const index = tasks.indexOf(task);
        tasks[index] = newTask;
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(); // Re-renderizar la lista actualizada
      }
    });
  });
};
window.addEventListener('load', () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-theme');
  } else {
    document.body.classList.remove('dark-theme');
  }
});

  // Añade un evento 'click' al botón para alternar la clase 'dark-theme'
  toggleThemeBtn.addEventListener("click", () => {
    // Alterna la clase 'dark-theme' en el <body>
  document.body.classList.toggle("dark-theme");
     // Guarda la preferencia del tema en localStorage
  localStorage.setItem('theme', document.body.classList.contains("dark-theme") ? 'dark' : 'light');
  });

// Añade un evento 'submit' al formulario de tareas
  taskForm.addEventListener("submit", (event) => {
  event.preventDefault(); // Previene que el formulario se envíe y recargue la página
  const task = taskInput.value; // Obtiene el valor del input
  tasks.push(task); // Agrega la nueva tarea a la lista
  localStorage.setItem('tasks', JSON.stringify(tasks)); // Guarda la lista actualizada en localStorage
  taskInput.value = ''; // Limpia el input
  renderTasks(); // Re-renderiza la lista actualizada
});

// Inicializar el renderizado de tareas al cargar la página
  renderTasks();
```Le doy crédito a ChatGpt por los comentarios en mi código.

Antonio Mesa Casares

Estudiante

Bien por realizarlo de otra manera posiblemente más eficaz, pero tiene una falla de seguridad y es que al usar innerHTML te pueden insertar código malicioso el usuario. En otras clases de Javascript lo comentan mucho, en la medida de lo posible no usar innerHTML.

Pero por lo demás genial el haber buscado otra alternativa al funcionamiento.

Muchas gracias por tu aporte

Calvin Rafael Bobadilla Fernandez

Gregory Subero

Mateo Espinosa Cubillos

Brian Benjamin Rodas Espinoza

Santiago Salamanca Rusinque

Marco Antonio Evangelista Armenta

•

Luis Escobedo

jesus manuel vergara arias

Antonio Ramón Molina Simancas

Julieta Melek Fernanda Eyzaguirre Arenas

Alejandro Aristizabal Londoño

Daniel Jaramillo Palacio

Elias Rodas

Jennifer Yanez Jiménez

Juan Carlos Moncada

Kyb3r Cipher

Mercy María Ix Ballote

Entendiendo el DOM

Qué es el DOM y cómo JavaScript lo cambia

Qué es el DOM y cómo funciona

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegar o DOM por relações de parentesco

Manipulando Elementos del DOM

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

Modificar texto en HTML con JavaScript

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

Uso de classList para Manipular Clases en Elementos HTML

Manipulación del DOM con innerHTML e InsertAdjacentHTML

Agregar elementos HTML sin reemplazar contenido existente

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

remove() vs removeChild() en el DOM

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

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

Eventos del mouse y clic en JavaScript

Qué es event.target y cómo usarlo

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

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

Asincronía en JavaScript

Cómo JavaScript ejecuta código asíncrono

Creando un Administrador de Tareas

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

Editar y borrar tareas con delegación de eventos

Persistencia de Datos con Local Storage en Tareas Web

Guardado y edición de tareas en local storage con JavaScript

Manejo de Errores en Local Storage para Tareas Dinámicas

Persistencia de tema dark/light con localStorage

Creación de Páginas Web Dinámicas con JavaScript

Resumen