Cargando...

Dónde colocar JavaScript

Ya sabes que JavaScript añade comportamiento. La siguiente pregunta es práctica: dónde vive el código para que el navegador lo encuentre y existan los elementos que quieres cambiar.

¿Dónde debes poner JavaScript en una página HTML?

Pon JavaScript dentro de un elemento <script> — en línea entre las etiquetas o externo con src hacia un archivo .js. Para el trabajo diario de principiantes que tocan la página, coloca el script justo antes del </body> para que el HTML de arriba esté listo. Cuando el código crezca, muévelo a un archivo externo y mantén esa misma costumbre al final del body (más adelante verás defer).

Tres opciones de ubicación de un vistazo

📊 Dónde puede vivir JavaScript

Opción Dónde está Mejor uso para principiantes
En línea en el head <script> dentro de <head> Solo configuración mínima; arriesgado si los elementos aún no existen
En línea al final del body <script> justo antes de </body> Predeterminado para demos cortas que cambian un título o texto
Archivo .js externo <script src="app.js"> (a menudo al final del body) Predeterminado cuando la lógica crece o reutilizas el archivo

Script en el head (conócelo y úsalo con cuidado)

Un script en el head se ejecuta pronto, mientras el navegador aún lee el documento. Puede retrasar el contenido visible. Si tu código busca de inmediato un elemento con getElementById, puede que aún no exista — resultado null o error.

Script en el head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Cuándo un script en el head está bien

  • Registrar un mensaje o fijar un valor simple que no necesite el DOM
  • Cargar una biblioteca con atributos modernos (más adelante verás defer / async)
  • No es tu predeterminado para demos de «cambia este párrafo» en este curso

Script al final del body (predeterminado para principiantes)

Primero el marcado que necesitan los visitantes. Luego ejecuta el script. Los elementos con id por encima del script ya están en el documento cuando corren las instrucciones.

Script al final del body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Por qué ayuda este hábito

  • El título y el párrafo pueden mostrarse antes de que termine el trabajo del script
  • getElementById("title") encuentra un nodo real
  • Las demos cortas siguen en un solo archivo mientras aprendes el lenguaje
  • Luego mueves las mismas instrucciones a un archivo externo sin cambiar la idea

Archivo JavaScript externo (predeterminado de proyecto)

Deja la estructura en HTML y la lógica en app.js. Apunta al archivo con src. Las rutas son relativas al HTML salvo que uses una carpeta.

HTML que carga app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

app.js externo

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Por qué gana lo externo al crecer

  • Un .js puede servir a varias páginas
  • Los editores resaltan mejor JavaScript en su propio archivo
  • Evitas bloques <script> enormes dentro del marcado
  • Una ruta src incorrecta falla en silencio — revisa Console y Network si no corre nada

El orden importa

El navegador lee de arriba abajo. Un script se ejecuta cuando el analizador lo alcanza (salvo atributos avanzados más adelante). Si la línea 1 necesita #title, ese elemento debe aparecer arriba del script en el HTML, o debes esperar a que el documento termine. El final del body es la forma sencilla de acertar el orden.

Pruébalo tú

  1. Crea where.html con el ejemplo del final del body. Ábrelo y confirma que el título se actualiza.
  2. Cambia la cadena de textContent, guarda y actualiza.
  3. Crea app.js con el JavaScript del ejemplo externo. En where.html carga solo <script src="app.js"></script> antes de </body>.
  4. Renombra temporalmente app.js o rompe la ruta src, actualiza y mira la Console — luego corrige la ruta.
  5. Opcional: mueve el mismo script al head (sin defer) y verás que getElementById puede fallar; luego devuélvelo al final del body.

Errores comunes

  • Poner en el head un script que actualiza el DOM para que getElementById corra antes de que exista el elemento
  • Enlazar <script src="app.js"> con un typo o carpeta incorrecta — la página se ve bien pero no corre nada
  • Dejar cientos de líneas en línea en cada HTML en lugar de un .js compartido
  • Confundir esta lección con el cableado de CSS: los estilos usan <link> / <style>; el comportamiento usa <script>

Resumen

  • JavaScript vive en un <script> — en línea o con src a un archivo .js
  • El final del body es el predeterminado amigable cuando el código toca elementos de la página
  • Los scripts del head corren pronto; evita actualizar el DOM ahí hasta conocer atributos de carga
  • Los archivos externos son el predeterminado de proyecto cuando las demos crecen
  • El orden del script sigue el del documento salvo opciones avanzadas más adelante
  • Practica separando una demo en línea que funciona en HTML + app.js

🧠 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

❓
6
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 2 de 4
Javascript Tutorial