Desarrollo De Frontend (Clase) - JAVASCRIPT Y EL DOM: Manipulación dinámica de etiquetas (parte 5) 🔥

Estos vídeos no están hechos con propósitos de enseñar, solo los subo para mantener un recuerdo de la Universidad, y para eventos futuros (errores, ¿Cómo diseñé esto?, ¿Qué error cometí?), lo digo porque no me fijo en la musica de fondo ni esos detalles mínimos ... clase 03-03-2025 Desarrollo De Frontend ¡Bienvenidos a la quinta sesión de nuestro curso de *Desarrollo Frontend*! En esta clase, entramos en el corazón de la lógica web con *JavaScript*. Pasamos de maquetar con HTML y CSS a programar comportamientos inteligentes que responden a las acciones del usuario. Comenzamos estableciendo una base profesional mediante una *arquitectura por capas* (Views, Controllers, Models), evitando las arquitecturas monolíticas. Aprenderás a utilizar el *DOM (Document Object Model)* como un puente para que tu código JavaScript lea y escriba sobre tu HTML. Vemos ejemplos prácticos desde un Hola Mundo hasta la creación de una calculadora funcional y un sistema de creación dinámica de etiquetas. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Arquitectura MVC: Organización del proyecto en carpetas especializadas. • Manejo del DOM: Uso de document.getElementById y createElement. • Eventos: Captura de acciones del usuario mediante addEventListener. • Manipulación de Estilos: Cómo agregar o remover clases de CSS dinámicamente. • Lógica de Programación: Uso de variables (let), condicionales y funciones. • Depuración: Impresiones por consola para rastrear el flujo de los datos. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción a la semana de JavaScript 01:36 Preparación del proyecto y repositorio de teoría 04:10 Arquitectura Monolítica vs. Buenas Prácticas 06:08 Capa de Presentación: Estructura de carpetas /views y /styles 10:12 Capa de Controladores: El rol de /controllers 12:16 Introducción a la Capa de Modelos (/models) 15:09 Trilogía Web: HTML, CSS y la llegada de JS 16:42 Historia de los lenguajes: De Assembler a JavaScript 20:18 Integración de técnicas: Etiquetas desde el código 22:21 Práctica 1: Hola Mundo y configuración del controlador 25:31 El atributo defer y la carga del script 27:39 Alertas vs. Impresiones por Consola (console.log) 32:22 Práctica 2: Ejecución de eventos en botones 34:50 Identificadores (ID): La clave para manipular el HTML 37:29 Tipado débil en JS: Uso de la palabra reservada let 39:11 El método addEventListener y el evento click 41:57 Práctica 3: Construcción de una Calculadora Básica 45:02 Inputs de tipo number y obtención de valores 47:18 Conversión de tipos: Uso de parseFloat para operar números 51:18 Manipulación de resultados: Actualizando el textContent 55:37 Condicionales en JS: Validando sumas positivas o negativas 59:34 Ciclos y Estructuras: Comparativa con Java 1:05:46 Práctica 4: Creación dinámica de etiquetas (Append Child) 1:08:03 El método createElement: Generando HTML desde el aire 1:15:46 Práctica 5: Manejo de CSS dinámico (classList.add) 1:19:57 Funciones con parámetros para cambiar colores de texto 1:24:50 Generación de IDs automáticos con contadores globales 1:30:53 Explicación del reto final: Lógica de un juego de Triqui 1:34:20 Análisis de validación de ganadores y cierre de clase 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=RGASNgPeHqc • Video Siguiente: ¡Próximamente disponible! 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • FRONTEND CLASE 1: https://www.youtube.com/watch?v=4C3LX5cSl4Q • IPv4 Y MÁSCARAS (Clase 8): https://www.youtube.com/watch?v=5uIGQV5DWRI #Frontend #JavaScript #DOM #Programacion #DesarrolloWeb #MVC #IngeSRM #WebDevelopment #JS #Coding javascript, js, curso javascript, aprender javascript, javascript desde cero, javascript avanzado, tutorial javascript, javascript fácil, programación en javascript, javascript moderno, trucos javascript, desarrollo frontend, curso frontend, aprender frontend, frontend desde cero, desarrollo web, programación web, diseño web, html css javascript, cómo hacer una página web, universidad de caldas, frontend universidad, clases de frontend, universidad caldas manizales, programación desde cero, html y css, curso de programación, curso de desarrollo web, frontend avanzado, fullstack javascript, desarrollo web con javascript, js frontend, web development, coding, programación, aprender a programar, desarrollo web 2025, cómo aprender a programar, programación para principiantes, javascript básico, programación en la universidad, clases de programación en universidad, cursos de desarrollo web, curso html css js, js desde cero, desarrollo web en manizales, universidad de caldas desarrollo web, universidad en colombia, programación en colombia, clases de desarrollo web, tutorial de desarrollo frontend, framework javascript, javascript framework, curso de frontend gratis, curso online de desarrollo web, programación en vivo, universidad en manizales, cómo ser desarrollador web, qué es frontend, qué es javascript, aprender js en 2025, javascript full course, curso de frontend en español, universidad