Cómo añadir JavaScript a HTML
Programación en JavaScript
27.01.2026
Reading time: 6 min
Share
En este artículo veremos cómo añadir JavaScript a HTML. Existen tres formas de hacerlo:
-
Colocar código JS dentro de una etiqueta <script> emparejada
-
Conectar un archivo externo
-
Escribir el código directamente dentro de una etiqueta HTML usando atributos especiales
Veamos cada método para entender sus ventajas y desventajas.
Insertar código dentro de una etiqueta <script> emparejada
La forma más sencilla de insertar código JS en una página HTML es utilizar la etiqueta <script>. Esta indica al navegador que todo su contenido debe interpretarse como un script ejecutable y no como texto o código HTML.
Por ejemplo, añadamos un script que muestre la fecha y hora actuales:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date and Time</title>
</head>
<body>
<script>
let date = new Date();
alert("Now " + date);
</script>
</body>
</html>
Cuando la página se carga, aparecerá una notificación con la fecha y hora actuales.
Puedes escribir un programa completo dentro de la etiqueta <script>. Como ejemplo, creemos un reloj electrónico:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script>
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
</script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>
¡Genial! Has utilizado JavaScript para añadir información de la hora actual a un elemento HTML que se actualiza cada segundo.
Los comentarios describen en detalle lo que hace el script. Encuentra el elemento con id="clock" dentro del <div> situado justo debajo del encabezado. Luego obtiene la hora actual, que se muestra inmediatamente después de cargar el documento y se actualiza cada segundo.
Parece conveniente, pero este enfoque tiene algunas desventajas. Imagina que quieres mostrar la hora en cada página del sitio. En ese caso, tendrás que duplicar el contenido de la etiqueta <script>.
Otro problema es que cuanto más grande sea el script, peor será la legibilidad del código. En el ejemplo solo hay una función, pero si necesitas 5, 10 o 20, resulta más práctico usar el siguiente enfoque: conectar JavaScript desde archivos externos.
Conectar archivos externos
La etiqueta <script> también se utiliza para conectar JavaScript desde archivos externos mediante el atributo src. Puede ser un archivo creado por ti o una biblioteca JS que añade funcionalidad a la página.
Por ejemplo, movamos el script del reloj a un archivo separado:
# Time.js file
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
Ahora eliminamos todo el JS del archivo HTML y dejamos solo la etiqueta <script> con el enlace:
#File time.html
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script src="./time.js"></script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>.
El resultado es el mismo: JavaScript añade la hora actual al <div>.
Ventajas de este enfoque:
-
Los archivos HTML son más simples
-
Todo el código JS puede mantenerse en un solo archivo
-
Si varias páginas usan el mismo script, se cargará solo una vez y luego se reutilizará desde la caché del navegador
JavaScript dentro de etiquetas HTML
Puedes colocar JavaScript directamente en una etiqueta HTML usando atributos especiales como onclick, onmouseover, onkeypress, onload, etc.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript inside an HTML tag</title>
</head>
<body>
<button onclick="alert('Hi! This is how JS works too')">Click me</button>
<button onmouseover="alert('This works too')">Hover over me</button>
</body>
</html>.
Al hacer clic en el primer botón aparecerá una notificación. Al pasar el cursor sobre el segundo botón, aparecerá otro mensaje.
También puedes añadir múltiples manejadores:
<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>
Sin embargo, esto se considera una mala práctica. La mayoría de los desarrolladores prefieren separar el contenido del control del comportamiento. Además, como puedes ver, usar manejadores dentro del HTML reduce considerablemente la legibilidad del código.
Dónde es mejor colocar los scripts
Técnicamente, no hay restricciones para insertar la etiqueta <script>. Puedes añadir JavaScript en <head> o <body>, al principio o al final del documento.
Sin embargo, normalmente los scripts se colocan al final del cuerpo, justo antes de </body>. Esto permite que la página cargue más rápido y que el usuario vea el contenido antes.
Cada etiqueta <script> bloquea el renderizado hasta que el JavaScript se carga y ejecuta por completo. Los archivos externos (y especialmente las bibliotecas grandes) pueden ralentizar notablemente la carga, sobre todo con conexiones lentas.
Solo deberías colocar scripts en <head> si existe una razón clara. En la mayoría de los casos, es mejor añadir JavaScript justo antes de la etiqueta de cierre </body>.
Programación en JavaScript
27.01.2026
Reading time: 6 min
Share
Similares
¿Necesita ayuda para
elegir un producto?
Nuestros expertos están disponibles para ayudarle a encontrar la solución cloud
adecuada para su empresa, incluso si no sabe por dónde empezar.
adecuada para su empresa, incluso si no sabe por dónde empezar.
