Lección 1 de 13 · Lectura y práctica

Fundamentos JavaScript

Lección práctica para aplicar Fundamentos JavaScript dentro de JavaScript Fundamentals, con criterios de decisión, ejemplo guiado, ejercicio y checklist de salida.

Del concepto a la práctica

Taller de esta lección

Esta ampliación conecta variables, tipos, funciones y eventos en una sola secuencia de decisión: una tarea entra como texto, se valida, se convierte en objeto y actualiza un resumen. El dato fuente será "Leer|20", separado en título y minutos para evitar sumar texto.

Ejemplo resuelto

const entrada = "Leer|20";
const [titulo, textoMinutos] = entrada.split("|");
const minutos = Number(textoMinutos);
const tarea = { titulo, minutos, completada: false };
console.log(tarea.titulo, tarea.minutos + 5);
// Leer 25

Pruébalo

Ejecuta el fragmento con "Pasear|35".
Comprueba que minutos sea un número, no una cadena.
Añade una segunda tarea sin cambiar la primera.
Calcula la suma de ambas duraciones.

Error frecuente: sumar directamente textoMinutos + 5, lo que produce "205". Corrige convirtiendo antes con Number y validando Number.isFinite(minutos).

Comprueba tu resultado

Usa "Pasear|35" y "Cocinar|40": los títulos deben conservarse y el total esperado es 75 minutos. Si aparece otro resultado, imprime cada tipo con typeof antes de continuar.

Rechaza una entrada si falta el separador, el título limpio está vacío o el texto de minutos limpio es vacío. Number("") devuelve 0: la conversión por sí sola no confirma que la persona haya escrito una cantidad.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista. — **Cómo avanza un programa**
Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.
Ver la infografía en tamaño completo ↗

Fuentes para profundizar

MDN: conversión numérica ↗

Variables, tipos, operadores

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Estado, formularios y una API pequeña: HTML, Estado, Validación, Respuesta — De la idea al resultado: una secuencia para practicar y revisar.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

Sigue con JavaScript Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

Siguiente: Que es JavaScript? →Entrar y guardar mi progreso