Interno externo JavaGuión: Aprende con el ejemplo

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Interna y Externa JavaEste artículo describe las dos ubicaciones compatibles para el código de script dentro de un proyecto web. Compara ambos enfoques, muestra ejemplos prácticos, explica la vinculación correcta con async y defer, e indica cuándo cada ubicación ofrece mejor mantenibilidad y rendimiento.

  • 📄 Colocación interna: Code Se ubica entre etiquetas de script dentro del documento HTML y se carga con la página a la que pertenece.
  • 🗂️ Colocación externa: Code Se encuentra en un archivo .js independiente al que se hace referencia mediante el atributo src, por lo que muchas páginas comparten una misma fuente.
  • 🔗 Regla de enlace: Siempre se debe cerrar la etiqueta de script externa, y la ruta src se resuelve en relación con el documento HTML a menos que se proporcione una ruta completa.
  • ⚙️ Control de carga: El atributo defer ejecuta el archivo después de que finalice el análisis HTML, mientras que async lo ejecuta tan pronto como finaliza la descarga.
  • 🚀 Beneficio del almacenamiento en caché: Los archivos externos son almacenados en caché por el navegador una sola vez y reutilizados en todas las páginas que hacen referencia a ellos.
  • 🧭 Criterio de selección: Mantén la lógica breve específica de cada página internamente y traslada la lógica compartida o extensa a un archivo externo para facilitar la depuración.
  • 🚫 Controladores en línea: Los manejadores basados ​​en atributos, como onclick, mezclan marcado con comportamiento y deberían reemplazarse por addEventListener.
Descubre más

Interna y Externa JavaScript

¿Qué son internos y externos? Java¿Texto?

Puedes usar JavaCódigo de script de dos maneras.

  1. Puedes incluir el JavaCódigo de secuencia de comandos internamente dentro de su documento HTML misma.
  2. Puedes quedarte con el JavaCódigo de script en un archivo externo separado y luego apunte a ese archivo desde su documento HTML.

Ambas implementaciones ejecutan exactamente el mismo lenguaje y producen el mismo resultado en el navegador. La diferencia radica en dónde se almacena el código fuente, cómo lo descarga el navegador y con qué facilidad se puede reutilizar y mantener el código en un sitio web.

¿Qué es interno? Java¿Texto?

Interno JavaEl código script se escribe directamente dentro de un par de etiquetas <script> en el archivo HTML. El navegador lee el código de arriba abajo y, al llegar a la etiqueta <script>, ejecuta las instrucciones inmediatamente, sin necesidad de realizar ninguna solicitud de red adicional.

Hemos estado usando JS interno hasta ahora. Aquí hay una muestra –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Salida:

Today is Wednesday.

El día impreso cambia según la hora del sistema del visitante, ya que getDay devuelve un número del 0 para el domingo al 6 para el sábado, y ese número se utiliza como índice en la matriz de días de la semana.

¿Qué es externo? Java¿Texto?

Planeas mostrar la fecha y hora actuales en todas tus páginas web. Supongamos que escribiste el código y lo copiaste en todas tus páginas (digamos 100). Pero luego quieres cambiar el formato en el que se muestra la fecha o la hora. En ese caso, tendrás que hacer cambios en las 100 páginas web. Esto será una tarea muy laboriosa y difícil.

Entonces, guarda el JavaScript código en un nuevo archivo con la extensión .js. Luego, agregue una línea de código en todas sus páginas web para que apunte a su archivo .js como este:

<script type="text/javascript" src="currentdetails.js"></script>

Nota: Se asume que el archivo .js y todas sus páginas web están en la misma carpeta. Si el archivo external.js está en una carpeta diferente, debe especificar la ruta completa a su archivo en el atributo src. El cierre </script> La etiqueta es obligatoria aunque el elemento no tenga contenido, porque una etiqueta de script de cierre automático no es HTML válido y el resto de la página quedaría oculta por el elemento sin terminar.

Este es el código que debes colocar dentro de currentdetails.js:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Este es tu archivo currentdetails.js. No te preocupes por las largas líneas de código. Pronto aprenderás a programar. Realiza cambios en tu documento HTML como este:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️ Advertencia: El script heredado anterior antepone un cero a cada hora, por lo que las 11 de la mañana se muestran como 011. También asigna hours1 Sin declararla, se crea una variable global implícita y se produce un error en modo estricto. La versión corregida que se muestra a continuación soluciona ambos problemas.

Una versión moderna del mismo archivo es más corta, declara todas las variables y rellena los valores correctamente:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Muestra de salida:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

ARTÍCULOS RELACIONADOS

Cómo vincular un enlace externo JavaArchivo de script correctamente

Tres detalles determinan si un archivo externo se carga o no: la ruta escrita en el atributo src, la posición de la etiqueta script en el documento y el atributo loading que se le aplica.

Las rutas se resuelven en relación con el documento HTML, a menos que se proporcione una barra diagonal inicial o una dirección completa.

Valor de origen Significado Resuelve a
currentdetails.js Misma carpeta que la página HTML /pages/currentdetails.js
js/currentdetails.js Subcarpeta de la carpeta actual /pages/js/currentdetails.js
../currentdetails.js Una carpeta por encima de la actual /currentdetails.js
/assets/js/currentdetails.js Ruta absoluta desde la raíz del sitio /assets/js/currentdetails.js

El atributo loading controla cuándo el navegador deja de analizar el HTML para ejecutar el archivo. La siguiente tabla resume los tres comportamientos disponibles.

Atributo Descargar Momento de ejecución Orden preservado
Ninguna Bloquea el análisis HTML Inmediatamente después de la descarga Sí:
aplazar Paralelo con el análisis sintáctico Después de que el documento sea analizado Sí:
async Paralelo con el análisis sintáctico En cuanto finalice la descarga No 
<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡 Consejo: El type="text/javascript" El atributo es opcional en HTML5 y puede omitirse. Manténgalo solo cuando admita navegadores muy antiguos, o reemplácelo con type="module" al utilizar las declaraciones de importación y exportación.

Interno vs. Externo JavaGuion: Diferencias clave

La comparación que se muestra a continuación sitúa ambas opciones una al lado de la otra en función de los factores que suelen determinar la elección.

Factor Interno JavaScript Externo JavaScript
Ubicación de almacenamiento Dentro del archivo HTML Archivo separado con extensión .js
Reutilizar en diferentes páginas Requiere copiar en cada página. Un archivo referenciado por cada página
Almacenamiento en caché del navegador Se vuelve a descargar con cada página. Almacenado en caché una vez y reutilizado.
Esfuerzo de mantenimiento Alto cuando se comparte el código Bajo, un archivo para editar
Solicitud HTTP adicional No Sí, uno por archivo.
Depuración Más difícil en un archivo HTML largo Más fácil con nombres de archivo y números de línea claros.
Mejores adecuados para Lógica breve específica de la página Bibliotecas compartidas y scripts largos

Cuándo utilizar interno y externo JavaScript Code?

Si sólo tiene unas pocas líneas de código específicas para una página web en particular, entonces es mejor mantener su JavaCódigo de script internamente dentro de su documento HTML.

Por otro lado, si tu JavaEl código de script se utiliza en muchas páginas web, por lo que deberías considerar mantenerloping Guarda tu código en un archivo aparte. De esta forma, si deseas realizar cambios, solo tendrás que modificar un único archivo, lo que facilita su mantenimiento. Si tu código es muy extenso, también es recomendable guardarlo en un archivo aparte. Esto facilita la depuración.

Una regla práctica para principiantes es un límite de aproximadamente diez líneas. Cualquier texto más corto y específico de una página puede permanecer en el archivo interno, mientras que cualquier texto más largo o compartido debe estar en un archivo externo.

En línea: JavaEl guion y por qué debe evitarse

En páginas antiguas, existe una tercera opción: el código se inserta directamente dentro de un atributo HTML. Si bien sigue funcionando, mezcla estructura con comportamiento y no se puede almacenar en caché, reutilizar ni proteger con una política estricta de seguridad de contenido.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Una vez que te sientas cómodo colocando guiones, continúa con JavaMétodos de matriz de script, estudiar bucles en JavaScripty trabajar a través de la Información JavaEjemplos de código de scriptLos archivos externos también facilitan mucho la gestión de la lógica de almacenamiento del navegador, como por ejemplo: cookies en JavaScript.

Preguntas Frecuentes

Colócalo justo antes de la etiqueta de cierre del cuerpo, o en la sección `<head>` con el atributo `defer`. Ambas opciones permiten que el HTML se renderice primero, de modo que los elementos existan cuando se ejecute el código.

Sí. Añade una etiqueta de script por archivo. Sin async, el navegador las ejecuta en el orden en que aparecen, así que coloca los archivos que definen funciones compartidas antes que los que las llaman.

Las causas habituales son una ruta de origen incorrecta, la falta de una etiqueta de cierre de script o un nombre de archivo con mayúsculas y minúsculas diferentes. Abre el panel de red del navegador y busca una respuesta 404.

Solo en la primera visita, cuando se realiza una solicitud adicional. Posteriormente, el archivo se sirve desde la caché del navegador, lo que suele ser más rápido que repetir el mismo código en cada página.

La mayoría de los asistentes devuelven un único archivo HTML con etiquetas de script internas, ya que se ejecuta sin configuración. Solicita explícitamente un archivo .js independiente cuando necesites una estructura lista para producción.

Los archivos externos con el atributo async son adecuados para widgets de IA de terceros, como los chatbots, porque se cargan de forma independiente y nunca impiden que la página circundante se muestre correctamente.

Resumir este post con: