Normalmente, el código JavaScript se ejecuta dentro del navegador web, gracias a que está referenciado desde un archivo HTML, que comúnmente llamamos página web.
De la misma manera que un documento HTML carga y ejecuta un archivo CSS para aplicar los estilos a una página web, cuando encuentra una referencia a un script JavaScript, lo descarga y ejecuta las instrucciones.
La forma más sencilla de cargar código JavaScript dentro de un documento HTML es a través del elemento script, tal como se ve en el siguiente bloque de código.
<html>
<head>
. . .
</head>
<body>
<p>Ejemplo de uso de script</p>
**<script>**
**alert('Hello, world!');**
**</script>**
</body>
</html>
Gracias a script, el navegador identifica que debe ejecutar el bloque de código que está contenido. Esta forma de cargar JavaScript se llama carga inline.
Si copiamos este código en un documento HTML y lo ejecutamos, podremos ver que el navegador mostrará una alerta con el texto Hello, world!.
El elemento script también nos permite cargar archivos JavaScript completos sin necesidad de copiar su contenido dentro de las etiquetas <script> y </script>. Esta segunda forma, se llama carga externa.
Para cargar un archivo JavaScript externo, necesitamos conocer la ubicación del archivo y pasarla a script como un valor en el atributo src:
<html>
<head>
. . .
</head>
<body>
<p>Ejemplo de uso de script</p>
**<script src="/ruta/al/script.js"></script>**
</body>
</html>
El valor que espera el atributo src puede ser absoluto —por ejemplo https://cdn.jsdelivr.net/npm/[email protected]/underscore-esm-min.js— o relativo al documento HTML que lo está invocando.
Cuando hacemos uso del atributo src, el contenido que se agregue entre <script> y </script> será ignorado.
Dentro de un documento HTML podemos agregar todos los scripts que sean necesarios, no hay límite teórico. Sin embargo, mientras más bloques de scripts incorporemos, más lenta será la carga del contenido.
<aside> 💡 Es una buena práctica utilizar la forma inline sólo para los scripts más sencillos, mientras que los más complejos se guardan en archivos independientes y se cargan de forma externa para aprovechar la capacidad del navegador de almacenarlos en la memoria cache y optimizar la carga del sitio.
</aside>
Si has trabajado con herramientas como Angular o React, recordarás que ambas tienen un archivo index.html que tiene en algún lugar una referencia que carga el archivo principal de la aplicación.
En el caso de React, el archivo index.html carga el script que está en la ruta relativa /src/main.jsx:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
**<script type="module" src="/src/main.jsx"></script>**
</body>
</html>
En Angular, la carga se realiza usando el elemento script con la referencia al archivo ./main.js acompañada de un nodo especial llamado app-root, que es donde se cargará el contenido de la app.