Puedes empezar sin programar. Saber reconocer etiquetas HTML ayuda, pero la lección construye el modelo de navegador, documento y script desde cero.
CONTENIDO ORIGINAL
Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.
ANTES DE EMPEZAR
Ubícate antes de avanzar
Al terminar deberías poder relacionar Lenguaje y entorno anfitrión con HTML semántico y resolver un caso nuevo.
Reserva entre 35 y 55 minutos para lectura, ejemplos, tres comprobaciones y cierre.
04 / PREPARA EL LABORATORIO
Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.
Abrir la guía de herramientas →Diagnóstico rápido: ¿cómo se relacionan Lenguaje y entorno anfitrión y HTML semántico? ＋
No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.
Aprende el tema paso a paso
Separarás el lenguaje de sus entornos y prepararás una página mínima donde HTML, CSS y JavaScript tengan responsabilidades claras.
Al terminar podrás
- JavaScript es el lenguaje; navegador y Node.js son entornos
- HTML expresa significado y CSS presentación
- Consola, módulos y errores forman el primer laboratorio
01
Modelo mental
JavaScript es el lenguaje; navegador y Node.js son entornos
El lenguaje define valores, funciones, objetos y reglas de ejecución. El navegador agrega DOM, eventos, almacenamiento y red; Node.js agrega archivos, procesos y servidores. Distinguir estas capas evita buscar una API del navegador dentro de Node o atribuir al lenguaje algo que pertenece al entorno.
ECMAScript especifica el núcleo del lenguaje.
Una API host depende del entorno donde se ejecuta.
El mismo módulo puede compartir lógica pura entre cliente y servidor.
¿document.querySelector pertenece al lenguaje JavaScript?
Mostrar respuesta ＋
No. Es una API del DOM proporcionada por navegadores y otros entornos que implementan un documento; el núcleo de JavaScript no define document.
02
Documento y presentación
HTML expresa significado y CSS presentación
Una interfaz comienza con HTML semántico que sigue siendo comprensible antes de ejecutar JavaScript. CSS controla diseño y estados visuales. JavaScript añade comportamiento cuando una interacción o cambio de estado lo necesita; no debe reconstruir sin motivo lo que HTML ya expresa mejor.
Usa elementos por su significado, no por su apariencia.
Una etiqueta label debe identificar su control.
El comportamiento debe conservar teclado, foco y lectura asistida.
¿Por qué no conviene usar un div como botón solo porque puede recibir un listener?
Mostrar respuesta ＋
Porque obligaría a reconstruir semántica, foco y activación por teclado. El elemento button ya ofrece esas capacidades y comunica su función.
03
Entorno de práctica
Consola, módulos y errores forman el primer laboratorio
Las herramientas del navegador muestran consola, DOM, red y almacenamiento. Un script type="module" usa alcance propio, modo estricto, import y export; además suele necesitar servirse por HTTP para que las rutas y políticas del navegador coincidan con un proyecto real.
Lee el primer error y su ubicación antes de cambiar código.
Usa módulos en proyectos nuevos.
Comprueba la pestaña Network cuando un recurso no carga.
¿Qué evidencia revisarías antes si el navegador dice que no puede cargar ./utilidades.js?
Mostrar respuesta ＋
La solicitud en Network y la URL resuelta. Debes confirmar que el archivo existe en esa ruta y que el servidor lo entrega correctamente.
Tu recorrido en tres ideas
- JavaScript es el lenguaje; navegador y Node.js son entornos
- HTML expresa significado y CSS presentación
- Consola, módulos y errores forman el primer laboratorio
CIERRE DE LA SECCIÓN
Comprueba que puedes usarlo
Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.
Confundir el lenguaje con APIs exclusivas del navegador o de Node.js.
Añadir interacción sobre elementos sin semántica ni funcionamiento por teclado.
Ahora hazlo sin guía
Crea una página semántica con un contador: HTML define controles y salida, CSS presenta estados y un módulo JavaScript actualiza el valor.
Mostrar pauta de corrección ＋
Una respuesta sólida:
- Funciona con clic y teclado usando elementos nativos.
- El módulo no crea contenido que HTML puede expresar.
- Puedes explicar qué parte pertenece al lenguaje y cuál al navegador.