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

Clase 27 de 27 • Curso de JavaScript: Manipulación del DOM

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
Programación Síncrona y Asíncrona en JavaScript
04:37 min

Creando un Administrador de Tareas

Tomar examen

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.

Comentarios

Calvin Rafael Bobadilla Fernandez

student•

Excelente curso diego! La explicacion estuvo excelente, y el proyecto final tambien.

Antes de concluir, quisiera compartir un proyecto "secreto" que estoy haciendo. Tiene que ver con el to-do pero a una escala mas grande (lo llevo haciendo desde mucho antes del curso, aun falta algunas cosas) El nombre (temporal claro) es un super todo-list, con notas, manejadores de eventos, personalizar tu perfil y todo, pero una imagen vale mas que mil palabras asi que, aca lo enseno!

Calvin Rafael Bobadilla Fernandez

student•

Cualquier sugerencia o info, con gusto pueden decirlo!. Exitos a todos!

Gregory Subero

student•

Calvin, esta genial! Te felicito

Mateo Espinosa Cubillos

student•

faltaron algunos fragmentos del curso, pero estuvo bueno, seria bueno que lo completaran bien

Brian Benjamin Rodas Espinoza

student•

Santiago Salamanca Rusinque

student•

Quede así con el curso, pero tengo que practicar para afianzar estos nuevos conocimientos jaja, suerte a todos con sus estudios.

Tomas Arriola

student•

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

student•

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

Marco Antonio Evangelista Armenta

student••

Fue muy satisfactorio concluir este curso. Por iniciativa propia integré otras tecnologías, como Tailwind CSS, además de implementar algunas funciones que vimos en las primeras clases. Sin duda, valió la pena ir un paso más allá y hacer algo extra. A continuación, les comparto el resultado final:

PD: ahora ya tengo mi propia app web para ir por la despensa 😅

Demo:

Luis Escobedo

student•

La verdad es que el diseño fue con chatGPT pero la lógica si fue conforme a este curso y tome las notas que me sirvieron, si les es de ayuda les comparto mis notas

jesus manuel vergara arias

student•

Buen curso, muy claro el profe en todo. Hay un solo punto, el orden del repo..... 9/10

Alejandro Aristizabal Londoño

student•

Así me quedó la página <3

Daniel Jaramillo Palacio

student•

Curso perfecto hasta la clase 20, de ahí en adelante un desorden impresionante que deja mucho que desear.

Elias Rodas

student•

Intento tomar el examen y me manda al Home de la pagina, no me deja tomarlo :(

Jennifer Yanez Jiménez

student•

Me encanta como quedo el proyecto y me gusto mucho este curso, gracias Diego!

Aqui mi repo de GitHub :)

Y fotito de como quedo mi dark mode

Juan Carlos Moncada

student•

Muy Buen Curso, el Profesor domina muy buen la Materia

Kyb3r Cipher

student•

Siento a este curso incompleto el DOM es muy complejo y tiene mas cosas incluso se mencionan en este video. Si es una escuela deberia ser completo y no solo esto. Deberian complementar pero los videos que estan buena explicacion por parte de Diego

Mercy María Ix Ballote

student•

excelente curso, más claro y basico que el que estaba antes

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.

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

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

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

Navegación Jerárquica del DOM en JavaScript

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

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

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

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

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut

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

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

Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas

Asincronía en JavaScript

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

Creando un Administrador de Tareas

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

Interactividad en Botones de Tareas: Borrar y Editar en JavaScript

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

Cambio de Tema Dinámico y Persistente en Aplicaciones Web

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