Ejercicios de JavaScript para principiantes
Estos ejercicios están escritos como tickets de trabajo (work tickets): un encargo, unos criterios de aceptación (acceptance criteria) y tú resolviéndolo con tu propio código. Puedes leerlos aquí gratis y practicarlos dentro de DevTrainer con el editor en el navegador.
4 ejercicios de ejemplo
Nivel 1 — DOM y eventos
El equipo necesita un botón que muestre cuántas veces lo ha pulsado la persona. El número debe verse en pantalla, no en la consola.
Criterios de aceptación
- Al cargar la página el contador muestra 0.
- Cada clic suma exactamente 1.
- El texto se actualiza sin recargar la página.
Código inicial (starter code)
<button id="btn">Pulsar</button>
<p>Clics: <span id="total">0</span></p>
<script>
// Escucha el evento click (evento = event) y actualiza #total
</script>Nivel 2 — Validación (validation)
Un formulario de contacto está enviando datos vacíos. Añade validación en el navegador y muestra un mensaje claro debajo de cada campo con error.
Criterios de aceptación
- El nombre no puede estar vacío.
- El correo debe contener @ y un punto.
- Si hay errores, el formulario no se envía.
Código inicial (starter code)
<form id="contacto">
<input name="nombre" placeholder="Nombre" />
<input name="email" placeholder="Email" />
<button>Enviar</button>
</form>
<script>
// Usa addEventListener("submit", ...) y event.preventDefault()
</script>Nivel 3 — Arrays y objetos
Necesitamos una lista de tareas donde se pueda añadir, marcar como completada y filtrar solo las pendientes.
Criterios de aceptación
- Se puede añadir una tarea escribiendo y pulsando Enter.
- Al marcar una tarea se ve tachada.
- El filtro 'Pendientes' oculta las completadas.
Código inicial (starter code)
<script>
const tareas = [];
// Guarda objetos { texto, completada } y vuelve a dibujar la lista
</script>Nivel 4 — Fetch y async/await
La página debe mostrar una lista de usuarios traída de una API pública, con mensaje de carga y mensaje de error.
Criterios de aceptación
- Mientras carga se ve un texto de carga (loading).
- Si la petición falla se muestra un mensaje de error.
- Al terminar se listan los nombres recibidos.
Código inicial (starter code)
<script>
async function cargar() {
// usa fetch + try/catch
}
cargar();
</script>