Cargando...

JavaScript en HTML

Antes, la accesibilidad hacía la página usable con estructura. JavaScript añade comportamiento sobre ese HTML: clic, actualizar texto, hablar con un servidor. Esta lección se queda en el lado HTML: cómo la página carga scripts con <script>, no un curso completo del lenguaje.

Por qué importa cargar el script

Los navegadores pintan HTML primero. Los scripts pueden retrasarlo, fallar en silencio con una ruta mala u ocultar contenido que debería estar en el marcado. Saber dónde poner <script>, cuándo usar src y qué pertenece a HTML mantiene la página honesta: contenido legible, controles presentes, comportamiento opcional. Los hábitos de accesibilidad siguen valiendo.

Respuesta directa

1) <script>…</script> para un fragmento pequeño o <script src="app.js"></script> para un archivo externo. 2) Prefiere .js externo cuando crece la lógica. 3) Muchos colocan scripts cerca del final de body. 4) Mantén texto y controles significativos en HTML. 5) Apps modernas pueden usar type="module". 6) Este curso solo cubre la incrustación.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Script en línea con botón real

Página pequeña: un <button> real con id, luego un <script> que escucha el clic y cambia el texto. El marcado sigue accesible; el script solo añade comportamiento.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Leer el demo en línea

  • El botón es HTML real — usable sin JS
  • id da un gancho estable al script
  • El bloque script guarda pocas líneas JS en línea
  • addEventListener cablea comportamiento; no sustituye el botón
  • Si el script no corre, sigue «Say hi»
  • Lección anterior: estructura; aquí acoplar comportamiento

Script externo con src

La misma idea escala mejor como archivo aparte. HTML solo declara la ruta; la lógica vive en app.js. Las rutas deben coincidir con tu carpeta.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Leer el patrón externo

  • src pide al navegador traer y ejecutar el archivo
  • HTML queda corto; editas comportamiento en un .js compartido
  • Ruta incorrecta = no carga — revisa Network
  • Coloca el script tras el botón o espera al elemento
  • Prefiere esto a bloques enormes en línea
  • Siguen lecciones HTML; JS profundo es otro curso

Cómo cargar el comportamiento

  • Demo minúscula: en línea junto al control puede bastar
  • Lo reutilizable o que crece: muévelo a app.js y src
  • Texto o navegación crítica: primero HTML, luego JS
  • Sensación rota: verifica la ruta src antes
  • Accesibilidad: mantén button/a/labels — no divs clicables
  • Estudio completo del lenguaje: bucles y frameworks en un curso JS

Práctica — HTML carga el script

  1. Copia el demo en línea; haz clic y confirma el cambio.
  2. Mueve el listener a app.js, usa src y confirma.
  3. Rompe la ruta (wrong.js); el botón sigue «Say hi».
  4. Quita el script por completo; el HTML sigue teniendo sentido.
  5. Segundo botón con nuevo id y otro listener.
  6. Frase: HTML posee contenido y estructura; script carga comportamiento opcional.
  7. Siguiente lección: resumen corto de HTML.

Errores fáciles

  • Frases críticas solo dentro de JavaScript
  • Typo o carpeta incorrecta en src
  • Scripts enormes en línea difíciles de mantener
  • Ejecutar el script antes de que exista el elemento
  • Sustituir botones accesibles por divs clicables
  • Tratar esta lección como currículo completo de JS
  • Olvidar hábitos de accesibilidad

Resumen

  • script carga JavaScript en una página HTML
  • En línea para demos pequeñas; src para .js externos al crecer
  • Coloca scripts para que el contenido aparezca y siga usable
  • Mantén contenido real y controles accesibles en HTML
  • Accesibilidad era estructura; esta lección es cableado de comportamiento
  • Siguiente: un resumen corto de HTML del camino hasta aquí

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
5
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 58 de 68
Html Tutorial