Después de afianzar HTML y CSS, salté a JS para convertir páginas estáticas en experiencias. Esa transición me dio un “plus” que me empujó a seguir en desarrollo web.
JavaScript es el lenguaje que permite interactividad en el navegador: responder a clics, validar formularios, cambiar el contenido sin recargar la página o traer datos de una API.
Si vienes de HTML/CSS, piensa así: HTML es la estructura, CSS el estilo, JS el comportamiento.
Ejemplo rápido (cambia texto al hacer clic):
<h1 id="titulo">¡Hola!</h1>
<button id="btn">Cambiar saludo</button>
<script>
const titulo = document.querySelector('#titulo');
document.querySelector('#btn').addEventListener('click', () => {
titulo.textContent = '¡Hola, JavaScript!';
});
</script>
Recomendaciones (aquí y ahora):
Coloca tu <script> justo antes de </body> o usa defer en el <head> para que el HTML cargue primero.
<!-- Opción recomendada --> <script src="main.js" defer></script>
Recomendaciones de entorno:
Lo práctico manda: mis mejores avances llegaron con mini-proyectos guiados en mi propio entorno, no leyendo teoría eterna.
El DOM es la representación del HTML que JS puede leer y modificar.
<p id="status">Aún no has hecho clic.</p>
<button id="accion">Haz clic</button>
<script>
const status = document.querySelector('#status');
document.querySelector('#accion').addEventListener('click', () => {
status.textContent = '¡Evento detectado! El DOM cambió.';
status.classList.add('activo');
});
</script>
Recomendaciones DOM:
Empieza con const y let (evita var).
Tipos básicos: string, number, boolean, null, undefined, object, symbol, bigint.
Mini-ejercicio: ¿Qué imprime la consola?
const nombre = 'Ana';
let edad = 20;
edad = edad + 1;
console.log(`${nombre} tiene ${edad} años`); // ?
Recomendaciones de base:
// Declarativa
function saludar(nombre) {
return `Hola, ${nombre}`;
}
// Flecha
const saludarFlecha = (nombre) => `Hola, ${nombre}`;
Recomendación: empieza con funciones puras y nombres claros. Más adelante sumarás closures y this/bind cuando te salga natural.
const frutas = ['manzana', 'pera', 'uva'];
const usuario = { nombre: 'Ana', activo: true };
const primeras = frutas.slice(0, 2);
const activo = usuario?.activo ?? false;
Recomendaciones clave:
El mayor cambio para mí fue entender el DOM y combinarlo con arrays/objetos: haces clic y ves cómo cambia la UI. Te engancha.
<ul id="lista"></ul>
<script>
const datos = ['HTML', 'CSS', 'JS'];
const ul = document.querySelector('#lista');
ul.innerHTML = datos.map(item => `<li>${item}</li>`).join('');
</script>
Recomendación: cuando generes HTML desde datos, escapa o valida el contenido si proviene del usuario o de una API.
<ul id="todos">
<li>Aprender JS</li>
<li>Practicar DOM</li>
</ul>
<script>
const ul = document.querySelector('#todos');
ul.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') e.target.classList.toggle('done');
});
</script>
Recomendación: con listas dinámicas, usa un solo listener en el contenedor (delegación) en vez de uno por cada ítem.
Objetivo: añadir tareas, marcarlas como hechas y filtrarlas.
<input id="txt" placeholder="Nueva tarea">
<button id="add">Añadir</button>
<select id="filtro">
<option value="todas">Todas</option>
<option value="hechas">Hechas</option>
<option value="pendientes">Pendientes</option>
</select>
<ul id="lista"></ul>
<script>
const tareas = [];
const $txt = document.querySelector('#txt');
const $add = document.querySelector('#add');
const $filtro = document.querySelector('#filtro');
const $lista = document.querySelector('#lista');
$add.addEventListener('click', () => {
const titulo = $txt.value.trim();
if (!titulo) return;
tareas.push({ titulo, hecho:false });
$txt.value = '';
render();
});
$lista.addEventListener('click', (e) => {
if (e.target.matches('li')) {
const i = e.target.dataset.i;
tareas[i].hecho = !tareas[i].hecho;
render();
}
});
$filtro.addEventListener('change', render);
function render(){
const filtro = $filtro.value;
const visibles = tareas.filter(t =>
filtro === 'todas' ? true :
filtro === 'hechas' ? t.hecho : !t.hecho
);
$lista.innerHTML = visibles.map((t,i) =>
`<li data-i="${i}" class="${t.hecho?'done':''}">${t.titulo}</li>`
).join('');
}
render();
</script>
Recomendaciones extra (to-do):
<button id="cargar">Cargar usuarios</button>
<ul id="users"></ul>
<script>
const $btn = document.querySelector('#cargar');
const $ul = document.querySelector('#users');
$btn.addEventListener('click', async () => {
$btn.disabled = true; $btn.textContent = 'Cargando...';
try {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
if (!res.ok) throw new Error('Error de red');
const users = await res.json();
$ul.innerHTML = users.map(u => `<li>${u.name} — ${u.email}</li>`).join('');
} catch (e) {
$ul.innerHTML = `<li class="error">${e.message}</li>`;
} finally {
$btn.disabled = false; $btn.textContent = 'Cargar usuarios';
}
});
</script>
Recomendaciones para datos:
Cuando probé a consumir una API real por primera vez, entendí la potencia de JS moderno: con async/await y un par de líneas, la página cobra vida.
Recomendaciones de arquitectura:
En mi día a día, pequeñas reglas (const por defecto, defer, mostrar estados) marcan la diferencia entre un demo frágil y una app que se sostiene.
Recomendación de rutina (30–45 min/día):
¿Dónde coloco <script>?
Al final del body o en el head con defer. Evita bloquear el render.
¿var, let o const?
const por defecto; let si reasignas; evita var.
¿Cómo manejo errores con fetch?
Comprueba res.ok, usa try/catch, muestra mensajes claros al usuario.
¿Qué mini-proyecto hago primero?
Un contador o un to-do. Te obliga a manejar eventos, estado y DOM.
Si ya dominas lo esencial de HTML/CSS, JS es el paso que convierte tu sitio en algo vivo. Empieza pequeño, practica cada día y sube la dificultad con mini-proyectos. Con las recomendaciones de entorno, buenas prácticas y rutina, verás progreso muy rápido.
No hay comentarios aún. ¡Sé el primero en comentar!
🍪 Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al continuar navegando, aceptas nuestro uso de cookies. Más información
