CURSO: JAVASCRIPT PARA LA WEB INTERACTIVA CON DEEPSEEK AI

CURSO: JAVASCRIPT PARA LA WEB INTERACTIVA CON DEEPSEEK AI

Subtítulo: Dale vida a tus páginas web. Aprende a programar en el lenguaje de la web, manipula el DOM, responde a eventos del usuario, consume APIs y crea aplicaciones interactivas completas con un tutor que te explica cada línea de código

—

FICHA TÉCNICA

Campo Descripción

Código MUN-JS-001

Carga horaria total 45 horas (recomendado: 3 horas por semana durante 15 semanas)

Modalidad 100% textual guiada por DeepSeek AI, con ejercicios prácticos de programación, depuración guiada, retos semanales de lógica y un proyecto final de aplicación web interactiva

Nivel educativo Adaptable a Educación Secundaria Obligatoria (4.º curso), Bachillerato, Formación Profesional (Informática) y ámbito universitario. La complejidad de los ejercicios se gradúa según el nivel del alumno.

Riesgo Medio (frustración con la asincronía y las promesas, confusión con el ámbito de variables, posible introducción de vulnerabilidades XSS si no se sanean entradas, dependencia de bibliotecas externas sin comprender JavaScript vanilla). La IA no ve la pantalla del alumno; el facilitador debe verificar la comprensión de la lógica asíncrona y la manipulación segura del DOM.

Dirigido a Estudiantes que ya conocen HTML y CSS y quieren añadir interactividad a sus páginas web. Ideal como continuación de los cursos de HTML y CSS.

Prerrequisito Haber completado los cursos de HTML (MUN-HTML-001) y CSS (MUN-CSS-001), o tener conocimientos equivalentes. Es recomendable tener nociones básicas de programación (variables, condicionales, bucles) aunque se repasarán al inicio. Disponer de un editor de código (VS Code recomendado) y un navegador web actualizado con herramientas de desarrollo. Conexión a internet. Autorización parental para menores de edad.

Corpus obligatorio cargado en DeepSeek Documentación oficial de JavaScript (MDN Web Docs adaptada), Guía del DOM y eventos, Referencia de la API Fetch y asincronía, Manual de buenas prácticas y patrones de JavaScript moderno (ES6+), Guía de seguridad web básica (XSS, CSRF)

Certificación Diploma de aprovechamiento en JavaScript para la Web Interactiva con IA. NO es una certificación profesional de desarrollo web.

—

AVISO PARA EL ESTUDIANTE (LECTURA OBLIGATORIA)

JavaScript es el músculo de la web. Con HTML construiste el esqueleto, con CSS lo vestiste, y ahora con JavaScript le darás movimiento, reacción e inteligencia.

DeepSeek será tu profesor de programación web, tu revisor de código y tu ayudante de depuración. Pero:

· JavaScript no es Java. Son lenguajes completamente distintos. JavaScript es el lenguaje de la web, interpretado por el navegador.

· La consola es tu mejor amiga. console.log() no es un capricho; es tu ventana para ver qué está pasando dentro de tu programa.

· El DOM es un árbol. Cada etiqueta HTML es una rama que puedes leer, modificar, crear o eliminar con JavaScript.

· La asincronía requiere paciencia. Cuando pidas datos a una API, no estarán disponibles inmediatamente. Aprenderás a esperarlos con async/await.

· No copies y pegues código sin entenderlo. Si la IA te sugiere una solución, pídele que te la explique línea por línea.

—

MAPA GENERAL DEL CURSO

Parte Título Horas Enfoque

I Fundamentos de JavaScript: variables, tipos, condicionales y bucles 12 h Sintaxis, tipos de datos, estructuras de control, funciones, arrays, objetos

II El DOM y los eventos: la página cobra vida 14 h Selección de elementos, manipulación del DOM, eventos, formularios, validación

III Asincronía, APIs y almacenamiento local 12 h Fetch, async/await, JSON, localStorage, consumo de APIs REST

IV Proyecto integrador: tu aplicación web interactiva completa 7 h Diseño, desarrollo, depuración y presentación de un proyecto original

—

PARTE I: FUNDAMENTOS DE JAVASCRIPT. VARIABLES, TIPOS, CONDICIONALES Y BUCLES

(12 horas)

—

Capítulo 1. Bienvenido al taller de la web viva

(1 hora)

· Inciso 1.1. ¿Cómo funciona este curso? Tú escribes JavaScript; DeepSeek te guía.

· Inciso 1.2. Conoce a tu tutor DeepSeek: cómo pedirle que revise tu código, que te explique un error o que te ayude a encontrar un bug.

· Inciso 1.3. Tu diario de desarrollador/a web: fragmentos de código, soluciones a errores, ideas de proyectos.

· Inciso 1.4. Primera provocación: «DeepSeek, muéstrame en 3 líneas de código cómo JavaScript puede cambiar el texto de un párrafo al hacer clic en un botón. Luego explícame qué hace cada línea.»

—

Capítulo 2. Sintaxis, variables y tipos de datos

(3 horas)

· Inciso 2.1. ¿Cómo incluir JavaScript en una página web? Tres formas:

  1. En línea: <button onclick=»alert(‘Hola’)»>.

  2. Interna: <script>…</script> al final del <body>.

  3. Externa (recomendada): <script src=»app.js» defer></script>. El atributo defer asegura que el script se ejecute cuando el HTML esté completamente cargado.

· Inciso 2.2. Variables: let (mutable), const (inmutable). var (obsoleto, evitar).

· Inciso 2.3. Tipos de datos: Number, String (con comillas simples, dobles o backticks para template literals ${}«), Boolean (true/false), null, undefined, Object y Array`.

· Inciso 2.4. Operadores aritméticos (+, -, *, /, %, **), de comparación (===, !==, >, <, >=, <=), y lógicos (&&, ||, !). La diferencia entre == y === (igualdad estricta vs. abstracta).

· Inciso 2.5. console.log(): tu ventana al código. typeof: para conocer el tipo de una variable.

· Inciso 2.6. Ejercicio práctico: crea variables con tus datos personales y muéstralas por consola.

—

Capítulo 3. Condicionales y bucles

(3 horas)

· Inciso 3.1. Condicionales: if, else if, else. Operador ternario: condicion ? valor_si_true : valor_si_false.

· Inciso 3.2. switch: alternativa a múltiples if para comparar una variable con valores concretos.

· Inciso 3.3. Bucle for clásico: for (let i = 0; i < 10; i++).

· Inciso 3.4. Bucle while y do…while.

· Inciso 3.5. Iteración de arrays con for…of. Iteración de objetos con for…in.

· Inciso 3.6. Ejercicio práctico: crea un programa que recorra un array de números e imprima solo los pares.

—

Capítulo 4. Funciones: organizando el código

(3 horas)

· Inciso 4.1. Declaración de función: function saludar(nombre) { return Hola, ${nombre}; }.

· Inciso 4.2. Expresión de función y arrow functions: const saludar = (nombre) => Hola, ${nombre};. Ventajas de las arrow functions.

· Inciso 4.3. Parámetros y argumentos. Parámetros por defecto: function sumar(a, b = 0) { return a + b; }.

· Inciso 4.4. Ámbito (scope) de las variables: global, de función y de bloque (let/const).

· Inciso 4.5. Ejercicio práctico: convierte las funciones de tu proyecto de Python a JavaScript.

—

Capítulo 5. Arrays y objetos: colecciones de datos

(2 horas)

· Inciso 5.1. Arrays: let frutas = [«manzana», «plátano»];. Índices desde 0. Propiedad .length.

· Inciso 5.2. Métodos de arrays: .push(), .pop(), .shift(), .unshift(), .splice(), .slice(), .indexOf(), .includes().

· Inciso 5.3. Métodos funcionales de arrays: .forEach(), .map(), .filter(), .find(), .reduce(). Estos son fundamentales y muy utilizados en JavaScript moderno.

· Inciso 5.4. Objetos: let persona = { nombre: «Ana», edad: 16 };. Acceso con punto (persona.nombre) o corchetes (persona[«nombre»]).

· Inciso 5.5. Arrays de objetos (estructura de datos muy común). Ejemplo: lista de productos con nombre y precio.

—

PARTE II: EL DOM Y LOS EVENTOS. LA PÁGINA COBRA VIDA

(14 horas)

—

Capítulo 6. El DOM: el árbol que conecta JavaScript con HTML

(3 horas)

· Inciso 6.1. ¿Qué es el DOM? Document Object Model: representación en memoria de la página HTML que JavaScript puede leer y modificar.

· Inciso 6.2. Selección de elementos del DOM:

  · document.getElementById(«id»).

  · document.querySelector(«selector CSS») (devuelve el primero que coincida).

  · document.querySelectorAll(«selector CSS») (devuelve una NodeList iterable).

· Inciso 6.3. Modificar el contenido: .textContent (solo texto, seguro), .innerHTML (interpreta HTML, usar con precaución por riesgo XSS).

· Inciso 6.4. Modificar atributos: .setAttribute(«atributo», «valor»), .getAttribute(), .removeAttribute(). Modificar clases: .classList.add(), .classList.remove(), .classList.toggle().

· Inciso 6.5. Modificar estilos en línea: elemento.style.color = «red».

· Inciso 6.6. Ejercicio práctico: cambia el texto de un párrafo al hacer clic en un botón usando querySelector y textContent.

—

Capítulo 7. Eventos: respondiendo al usuario

(4 horas)

· Inciso 7.1. ¿Qué es un evento? Una acción del usuario (clic, tecla, scroll, envío de formulario) o del navegador (carga de página, redimensionamiento).

· Inciso 7.2. addEventListener: la forma moderna de escuchar eventos. Sintaxis: elemento.addEventListener(«tipo», funcionCallback);.

· Inciso 7.3. Tipos de eventos comunes:

  · Ratón: click, dblclick, mouseover, mouseout, mousemove.

  · Teclado: keydown, keyup, keypress.

  · Formulario: submit, input, change, focus, blur.

  · Documento/Ventana: DOMContentLoaded, scroll, resize.

· Inciso 7.4. El objeto event (o e): información sobre el evento. e.target (el elemento que disparó el evento), e.preventDefault() (evita el comportamiento por defecto, como recargar la página al enviar un formulario), e.key (tecla pulsada).

· Inciso 7.5. Delegación de eventos: escuchar en un ancestro común eventos de elementos que pueden añadirse dinámicamente.

· Inciso 7.6. Ejercicio práctico: crea un botón que añada un nuevo párrafo a la página cada vez que se pulse.

—

Capítulo 8. Manipulación avanzada del DOM

(3 horas)

· Inciso 8.1. Crear nuevos elementos: document.createElement(«div»).

· Inciso 8.2. Insertar elementos: .appendChild(), .insertBefore(), .append(), .prepend(), .remove().

· Inciso 8.3. Ejercicio: crea una lista de tareas donde el usuario pueda añadir y eliminar elementos dinámicamente.

—

Capítulo 9. Formularios y validación de datos

(4 horas)

· Inciso 9.1. Capturar valores de formulario: .value.

· Inciso 9.2. Evento submit y preventDefault.

· Inciso 9.3. Validación del lado del cliente con JavaScript.

· Inciso 9.4. Feedback visual al usuario (errores, éxito).

· Inciso 9.5. Ejercicio práctico: crea un formulario de registro con nombre, email y contraseña, con validación y mensajes de error personalizados.

—

PARTE III: ASINCRONÍA, APIS Y ALMACENAMIENTO LOCAL

(12 horas)

—

Capítulo 10. Introducción a la asincronía en JavaScript

(3 horas)

· Inciso 10.1. JavaScript es monohilo y síncrono, pero puede delegar tareas (como peticiones HTTP) al navegador y recoger el resultado después.

· Inciso 10.2. Callbacks (función pasada como argumento). Problema: callback hell.

· Inciso 10.3. Promesas: .then(), .catch(), .finally().

· Inciso 10.4. async/await: la sintaxis más moderna y legible.

—

Capítulo 11. Consumo de APIs REST con Fetch

(4 horas)

· Inciso 11.1. ¿Qué es una API? Interfaz para que dos programas se comuniquen. REST: tipo de API web que usa HTTP.

· Inciso 11.2. JSON: el formato de datos universal de las APIs. JSON.parse() y JSON.stringify().

· Inciso 11.3. Fetch API: peticiones GET para obtener datos, y POST para enviarlos.

· Inciso 11.4. Ejercicio guiado: «DeepSeek, guíame para obtener datos de una API pública (como la de Pokémon o la de chistes) y mostrarlos en pantalla.»

—

Capítulo 12. Almacenamiento local y temporizadores

(3 horas)

· Inciso 12.1. localStorage: guardar datos en el navegador del usuario. setItem, getItem, removeItem.

· Inciso 12.2. sessionStorage: similar, pero los datos se borran al cerrar la pestaña.

· Inciso 12.3. Temporizadores: setTimeout (ejecutar una vez tras un retraso) y setInterval (ejecutar repetidamente).

—

Capítulo 13. Introducción a módulos y organización del código

(2 horas)

· Inciso 13.1. Dividir el código en archivos separados.

· Inciso 13.2. export e import en JavaScript moderno.

—

PARTE IV: PROYECTO INTEGRADOR. TU APLICACIÓN WEB INTERACTIVA

(7 horas)

—

Capítulo 14. Planificación del proyecto

(2 horas)

· Inciso 14.1. Elige un proyecto: tienda online con carrito, gestor de tareas con filtros, aplicación de recetas con búsqueda por ingredientes, dashboard de criptomonedas, juego de preguntas y respuestas con puntuación.

· Inciso 14.2. Planifica las funcionalidades y el flujo de la aplicación.

—

Capítulo 15. Desarrollo de la aplicación

(3 horas)

· Inciso 15.1. Implementa manipulación del DOM, eventos, formularios, y (si aplica) Fetch y localStorage.

—

Capítulo 16. Depuración y presentación

(2 horas)

· Inciso 16.1. Depura con las DevTools del navegador.

· Inciso 16.2. Presenta tu proyecto.

· Inciso 16.3. Recapitulación y diploma.

—

RESUMEN EJECUTIVO DEL CURSO

Dimensión Resumen

Rol de la IA Tutora de JavaScript, revisora de código, depuradora de errores, generadora de ejercicios y retos

Rol del estudiante Desarrollador/a frontend en formación: programa la interactividad de la web, manipula el DOM y consume APIs

Meta última Crear aplicaciones web interactivas completas con JavaScript vanilla, manipulando el DOM, respondiendo a eventos y consumiendo datos de APIs

Horas 45

Estructura 4 Partes, 16 Capítulos

—

¿Deseas que continuemos con el siguiente curso de la lista (Desarrollo Web Full Stack con Node.js) o prefieres explorar otro ámbito del ecosistema?