Tutorial JavaScript moderno: Cómo crear aplicaciones web con JS paso a paso
Introducción
¡Bienvenido a este tutorial JavaScript moderno! Si eres un desarrollador web con conocimientos básicos y quieres aprender a crear aplicaciones web utilizando JavaScript moderno (ES6+), estás en el lugar correcto. Aquí te llevaré paso a paso para dominar conceptos fundamentales como la manipulación del DOM, manejo de eventos, la API Fetch y el uso de módulos.
JavaScript es el lenguaje principal para construir aplicaciones web interactivas. Aprender a usarlo con buenas prácticas y técnicas actualizadas te abrirá un mundo de posibilidades en la programación web. Así que prepárate para practicar mucho con ejemplos reales que iremos construyendo juntos.
Contenidos
- Introducción al JavaScript moderno (ES6+)
- Manipulación del DOM paso a paso
- Manejo de eventos con ejemplos prácticos
- Consumir APIs con Fetch API
- Uso de módulos para organizar tu código
- Conclusión y buenas prácticas para seguir aprendiendo
1. Introducción al JavaScript moderno (ES6+)
JavaScript ha evolucionado muchísimo. ES6 (ECMAScript 2015) y versiones posteriores introdujeron características que facilitan escribir código más claro y eficiente. Algunas de las mejoras más importantes son:
- Let y Const: Para declarar variables con alcance de bloque
- Arrow Functions: Sintaxis reducida para funciones
- Template literals: Para cadenas de texto con variables incrustadas
- Desestructuración: Para extraer valores de arrays u objetos
- Módulos: Código dividido en archivos con
importyexport - Promesas y async/await: Para manejar código asíncrono de forma más legible
Ejemplo básico con ES6:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Constantes y variables const nombre = "Ana"; let edad = 25; // Función flecha const saludar = () => { console.log(`Hola, ${nombre}, tienes ${edad} años.`); }; saludar(); |
En este código usamos const para nombre porque no vamos a cambiarlo, y let para edad porque podría modificarse. La función saludar es una arrow function que imprime un mensaje usando template literals.
2. Manipulación del DOM paso a paso
El DOM (Document Object Model) es la estructura de la página web que JavaScript puede modificar dinámicamente.
Seleccionar elementos del DOM
Primero necesitas seleccionar los elementos HTML para poder manipularlos. Puedes usar:
document.getElementById("id")– selecciona un elemento por su iddocument.querySelector("selector")– selecciona el primer elemento que coincida con un selector CSSdocument.querySelectorAll("selector")– selecciona todos los elementos que coincidan
Ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Manipulación del DOM</title> </head> <body> <h1 id="titulo">Hola Mundo</h1> <button id="boton">Cambiar texto</button> <script src="app.js"></script> </body> </html> |
app.js:
|
1 2 3 4 5 6 7 8 9 10 |
// Seleccionamos el título y el botón const titulo = document.getElementById("titulo"); const boton = document.getElementById("boton"); // Cambiamos el texto del título titulo.textContent = "Bienvenido a JavaScript moderno"; // Cambiamos el color del título titulo.style.color = "blue"; |
Explicación:
textContent: cambia el texto interno del elementostyle.color: permite modificar el estilo CSS del elemento directamente
Esta es la base para que a partir de aquí puedas modificar cualquier parte de la página.
3. Manejo de eventos con ejemplos prácticos
Los eventos permiten que la página responda a acciones del usuario, como clics, movimientos del mouse o teclas.
Añadir un event listener
Usamos addEventListener para asignar funciones que se ejecutan cuando suceden eventos.
Ejemplo para responder al clic del botón:
|
1 2 3 4 5 |
boton.addEventListener("click", () => { titulo.textContent = "¡Has hecho clic en el botón!"; titulo.style.color = "green"; }); |
Ahora, cuando el usuario haga clic en el botón, el texto y color del título cambiarán.
Eventos comunes:
click: cuando se hace clic en un elementoinput: cuando se escribe en un inputsubmit: para formularioskeydown,keyup: teclas presionadas
Ejemplo interactivo con input y evento input:
HTML:
|
1 2 3 |
<input type="text" id="nombreInput" placeholder="Escribe tu nombre" /> <p id="saludo"></p> |
JavaScript:
|
1 2 3 4 5 6 7 |
const input = document.getElementById("nombreInput"); const saludo = document.getElementById("saludo"); input.addEventListener("input", () => { saludo.textContent = `Hola, ${input.value}!`; }); |
Al escribir en el campo, el párrafo mostrará un saludo personalizado dinámicamente.
4. Consumir APIs con Fetch API
Fetch API es una forma moderna y prometedora de hacer solicitudes HTTP para obtener datos externos, por ejemplo de un servicio REST.
Ejemplo básico JSON placeholder
Creamos un botón para cargar una lista de usuarios de una API falsa:
HTML:
|
1 2 3 |
<button id="loadUsers">Cargar usuarios</button> <ul id="userList"></ul> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const loadUsersBtn = document.getElementById("loadUsers"); const userList = document.getElementById("userList"); loadUsersBtn.addEventListener("click", async () => { userList.innerHTML = "Cargando usuarios..."; try { const response = await fetch("https://jsonplaceholder.typicode.com/users"); if (!response.ok) { throw new Error(`Error HTTP: ${response.status}`); } const users = await response.json(); userList.innerHTML = ""; users.forEach(user => { const li = document.createElement("li"); li.textContent = `${user.name} (${user.email})`; userList.appendChild(li); }); } catch (error) { userList.textContent = `No se pudieron cargar los usuarios. ${error}`; } }); |
Explicación paso a paso:
- Usamos
fetchpara llamar la URL de la API await response.json()convierte la respuesta en un objeto JSON- Iteramos el array de usuarios para mostrar su nombre y email
- Manejamos errores con
try-catchpara evitar problemas si falla la llamada
Esta técnica te permite consumir cualquier API pública y mostrar datos dinámicos.
5. Uso de módulos para organizar tu código
Los módulos te permiten dividir tu código en archivos, importando y exportando funciones, constantes u objetos. Esto mejora la mantenibilidad y limpieza.
Definir un módulo
utils.js:
|
1 2 3 4 |
export function saludar(nombre) { return `Hola, ${nombre}! Bienvenido a JS moderno.`; } |
Importar en otro archivo
app.js:
|
1 2 3 4 5 |
import { saludar } from './utils.js'; const mensaje = saludar("Carlos"); console.log(mensaje); |
Detalles importantes:
- Para que funcione en navegador debes usar el atributo
type="module"en el<script>:
|
1 2 |
<script type="module" src="app.js"></script> |
- Los módulos se cargan de forma estricta (strict mode) por defecto
- Puedes importar variables, funciones, clases, e incluso default exports
Esto es vital para proyectos reales donde el código crece y necesitas asegurar modularidad.
Conclusión
En este tutorial JavaScript moderno has aprendido:
- Las características clave de ES6 y cómo aplicarlas
- Manipulación básica del DOM para interactuar con la página
- Manejo de eventos para dinamizar la experiencia del usuario
- Uso de Fetch API para consumir datos remotos y trabajar con JSON
- Organización del código con módulos
Buenas prácticas para seguir aprendiendo:
- Practica modificando los ejemplos y crea tus propias mini apps
- Lee documentación oficial de MDN Web Docs
- Usa herramientas como Babel para compatibilidad si expandes el proyecto
- Familiarízate con frameworks modernos (React, Vue o Angular) tras dominar lo básico
La programación web con JavaScript moderno es una habilidad imprescindible hoy. Te animo a que dediques tiempo a experimentar y construir proyectos reales para consolidar lo aprendido.
¡Empieza ya y crea tu propia aplicación web interactiva!
Código completo ejemplo final
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Demo App JavaScript Moderno</title> </head> <body> <h1 id="titulo">Hola Mundo</h1> <button id="boton">Cambiar texto</button> <input type="text" id="nombreInput" placeholder="Escribe tu nombre" /> <p id="saludo"></p> <button id="loadUsers">Cargar usuarios</button> <ul id="userList"></ul> <script type="module" src="app.js"></script> </body> </html> |
app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// Manipulación DOM const titulo = document.getElementById("titulo"); const boton = document.getElementById("boton"); // Eventos boton.addEventListener("click", () => { titulo.textContent = "¡Has hecho clic en el botón!"; titulo.style.color = "green"; }); // Input dinámico const input = document.getElementById("nombreInput"); const saludo = document.getElementById("saludo"); input.addEventListener("input", () => { saludo.textContent = `Hola, ${input.value}!`; }); // Fetch API const loadUsersBtn = document.getElementById("loadUsers"); const userList = document.getElementById("userList"); loadUsersBtn.addEventListener("click", async () => { userList.innerHTML = "Cargando usuarios..."; try { const response = await fetch("https://jsonplaceholder.typicode.com/users"); if (!response.ok) { throw new Error(`Error HTTP: ${response.status}`); } const users = await response.json(); userList.innerHTML = ""; users.forEach(user => { const li = document.createElement("li"); li.textContent = `${user.name} (${user.email})`; userList.appendChild(li); }); } catch (error) { userList.textContent = `No se pudieron cargar los usuarios. ${error}`; } }); |
¡Felicidades por completar este tutorial JavaScript moderno! Sigue practicando para convertirte en un experto en crear aplicaciones web con JS.
¿Y ahora?
Si te ha gustado este tutorial y quieres seguir aprendiendo programación web, suscríbete a nuestro newsletter para recibir más contenidos como este, ejemplos prácticos y novedades del mundo JavaScript.
¡Manos a la obra y feliz codificación!
