Introducción a JavaScript: insertar un script en HTML y «Hello World»
verificado el 7 septiembre 2026 · 6 min
Para añadir JavaScript a una página HTML, crea un archivo app.js y cárgalo con <script src="app.js" defer></script> en el head, o justo antes de </body> sin defer. Escribe console.log('Hello World'); en el archivo, abre la página y la consola (F12): el mensaje aparece.
Este primer capítulo prepara todo lo que necesitan los siguientes: una página HTML, un archivo JavaScript enlazado a esa página y dos formas de mostrar un mensaje para comprobar que el enlace funciona. Con veinte minutos basta. Al final habrás escrito y ejecutado tu primer programa JavaScript en un navegador.
Qué es JavaScript (y qué no es)
JavaScript es el lenguaje de programación de los navegadores web. El HTML describe el contenido de una página, el CSS su apariencia y JavaScript su comportamiento: reaccionar a un clic, comprobar un formulario, modificar el texto de un elemento, cargar datos. Cada navegador incorpora un motor que lee y ejecuta ese código.
Dos aclaraciones que ahorran búsquedas inútiles:
- JavaScript no tiene nada que ver con Java. El nombre data de 1995 y de una decisión de marketing. Los dos lenguajes no comparten ni sintaxis ni uso.
- Ya no se limita al navegador. Con Node.js, el mismo lenguaje sirve para escribir servidores y herramientas. Este tutorial se queda en el navegador: es el entorno más sencillo para aprender y ya está instalado en tu máquina.
Crear la página HTML de partida
Abre un editor de código (Visual Studio Code va muy bien) y crea una carpeta tutoriel-js. Dentro, un archivo index.html con la estructura mínima de un documento:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
</head>
<body>
<h1>Bonjour</h1>
<!-- Le contenu de votre site ira ici -->
</body>
</html>Abre ese archivo en tu navegador (doble clic, o arrástralo a la ventana). La página muestra «Bonjour». Nada de JavaScript por ahora.
La etiqueta script: dónde colocar el JavaScript
El JavaScript entra en una página a través de la etiqueta <script>. Puede contener el código directamente o apuntar a un archivo externo con el atributo src. Hay tres ubicaciones posibles, y la elección tiene consecuencias.
Al final del body: simple y seguro
<body>
<h1>Bonjour</h1>
<script src="app.js"></script>
</body>El navegador lee el HTML de arriba abajo. Cuando llega a la etiqueta, el h1 ya existe: el script puede manipularlo. Es la ubicación clásica y siempre funciona.
En el head con defer: la forma moderna
<head>
<meta charset="UTF-8">
<title>Mon premier script</title>
<script src="app.js" defer></script>
</head>defer pide al navegador que descargue el archivo enseguida, pero que no lo ejecute hasta haber leído todo el HTML. Se obtiene lo mejor de ambos: la descarga empieza pronto y el código se ejecuta cuando la página está lista. Los scripts defer se ejecutan en el orden en que están escritos.
En el head sin nada: el error clásico
<head>
<script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>Aquí el script se ejecuta antes de que el h1 se haya construido. Cualquier intento de leerlo devuelve null, y el error «Cannot read properties of null» aparece en la consola. Si ves este error en el capítulo 9, comprueba primero dónde está tu etiqueta.
async también descarga en paralelo, pero ejecuta el script en cuanto llega, sin esperar al HTML ni a los demás scripts. Es útil para un script independiente (medición de audiencia, por ejemplo), no para código que manipula la página. Para este tutorial, quédate con defer.
¿Script inline o archivo externo?
El código también se puede escribir directamente en la página:
<script>
console.log('Hello World');
</script>Práctico para una prueba de tres líneas, malo para todo lo demás: el código no se reutiliza de una página a otra, el navegador no lo guarda en caché y se mezcla con el HTML. Desde este capítulo trabajamos en un archivo aparte, app.js, colocado junto a index.html.
Primer código: «Hello World» con alert()
Crea app.js en la misma carpeta que index.html y enlázalo con la etiqueta defer vista más arriba. En el archivo:
alert('Hello World!');Recarga la página: un cuadro de diálogo muestra el mensaje. alert() es una función del navegador que bloquea la página hasta que se pulsa OK. Sirve para comprobar que un script se ejecuta; no se usa en un sitio real, donde interrumpe al usuario.
La herramienta de verdad: console.log() y la consola del navegador
Sustituye el contenido de app.js:
console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);Recarga: en pantalla no cambia nada. Abre las herramientas de desarrollo con la tecla F12 (o clic derecho, «Inspeccionar») y luego la pestaña Consola. Las tres líneas aparecen ahí:
Hello World!
Titre de la page : Mon premier script
5La consola es el lugar donde habla JavaScript. Muestra lo que le pides con console.log(), pero también todos los errores, con el nombre del archivo y el número de línea. Mantenla abierta durante todo el tutorial: es tu primera herramienta de depuración, y hasta permite teclear JavaScript directamente, sin archivo, para probar una idea.
Tus primeros errores, y cómo leerlos
Si no aparece nada, la consola dice por qué. Los tres casos más frecuentes en este punto:
- «Failed to load resource: 404»: no se encuentra el archivo
app.js. Comprueba que está en la misma carpeta queindex.htmly que el nombre es idéntico, mayúsculas incluidas. - «Uncaught SyntaxError»: una errata en el código, a menudo un paréntesis o una comilla sin cerrar. El número de línea te lleva hasta ella.
- Nada de nada, ni siquiera un error: el navegador muestra una versión en caché. Recarga con Ctrl+F5 (Cmd+Mayús+R en Mac).
Resumen
- El JavaScript entra en una página con
<script src="app.js" defer></script>en elhead, o con la misma etiqueta sindeferal final delbody. - Un archivo externo es mejor que un script inline en cuanto el código pasa de unas pocas líneas.
alert()confirma que un script se ejecuta;console.log()y la consola (F12) son las herramientas del día a día.- Un error se lee en la consola: archivo, línea, mensaje.
En el capítulo siguiente, Variables y tipos de datos, el programa empieza a memorizar valores. Y si antes prefieres una visión de conjunto del itinerario, la guía para aprender JavaScript presenta los doce capítulos y un plan de treinta días.
document.title. Comprueba que el orden de los dos mensajes es el de tu código.Errores frecuentes
script en el head sin defer se ejecuta antes de que la página esté construida: document.querySelector('h1') devuelve null. Añade defer o coloca la etiqueta al final del body.src="app.js" busca el archivo junto a la página HTML. La pestaña Red de las herramientas de desarrollo muestra el 404; la consola indica «Failed to load resource».App.js y app.js son dos archivos distintos en la mayoría de los servidores, aunque Windows los confunda en local.