DWEC

Appearance

Integración de JavaScript en documentos HTML ​

La etiqueta <script> ​

Para que un navegador pueda ejecutar código JavaScript, este debe incluirse en el documento HTML mediante la etiqueta <script>.

Cuando el navegador encuentra esta etiqueta durante el procesamiento del documento, interpreta y ejecuta el código JavaScript asociado. Dependiendo de cómo se incluya el script, el código podrá escribirse directamente dentro del documento HTML o almacenarse en un archivo independiente.

La etiqueta <script> constituye el mecanismo estándar para integrar JavaScript en cualquier página web.

Ejemplo

html
<script>
  console.log("Hola, mundo");
</script>

Scripts internos y externos ​

JavaScript puede incorporarse a una página web de dos formas diferentes.

Los scripts internos contienen el código directamente dentro de la etiqueta <script>. Son adecuados para ejemplos sencillos o pruebas rápidas, aunque dificultan el mantenimiento cuando el proyecto crece.

Los scripts externos almacenan el código en un archivo independiente con extensión .js, que posteriormente se enlaza desde el documento HTML mediante el atributo src.

En aplicaciones reales se recomienda utilizar archivos externos, ya que favorecen la reutilización del código, mejoran la organización del proyecto y permiten que el navegador almacene los archivos en caché.

Ejemplo

html
<script src="main.js"></script>

Ubicación de los scripts ​

La posición de la etiqueta <script> dentro del documento HTML influye en el momento en que se ejecuta el código.

Tradicionalmente los scripts se situaban justo antes del cierre de la etiqueta </body>, permitiendo que el navegador cargara previamente todo el contenido de la página antes de ejecutar JavaScript.

Actualmente es más habitual incluir los scripts dentro del elemento <head> utilizando los atributos defer o async, que permiten optimizar el proceso de carga.

Comprender el momento en que se ejecuta un script resulta fundamental cuando el código necesita acceder a elementos del documento HTML.

Los atributos defer y async ​

Los atributos defer y async modifican el comportamiento de carga y ejecución de los scripts externos.

El atributo defer descarga el archivo JavaScript en paralelo mientras se procesa el documento HTML, pero retrasa su ejecución hasta que el documento ha sido completamente analizado. Además, garantiza que los scripts se ejecuten respetando el orden en el que aparecen.

Ejemplo

html
<script src="main.js" defer></script>

El atributo async también descarga el script en paralelo, pero lo ejecuta inmediatamente después de finalizar la descarga, sin esperar a que el documento termine de procesarse ni respetar necesariamente el orden entre varios scripts.

Ejemplo

html
<script src="analytics.js" async></script>

Como norma general:

  • defer resulta adecuado para la mayoría de aplicaciones web.
  • async suele utilizarse para scripts independientes, como sistemas de analítica o publicidad.

Módulos ECMAScript ​

JavaScript moderno permite organizar el código mediante módulos, dividiendo una aplicación en múltiples archivos con responsabilidades claramente diferenciadas.

Los módulos utilizan las instrucciones export e import para compartir funciones, clases, constantes u otros elementos entre distintos archivos.

Para que el navegador interprete correctamente un archivo como un módulo es necesario utilizar el atributo type="module".

Ejemplo

html
<script type="module" src="main.js"></script>

El uso de módulos mejora la organización del código, favorece su reutilización y facilita el mantenimiento de aplicaciones de mayor tamaño.

Organización básica de un proyecto ​

Una correcta organización de los archivos facilita el mantenimiento y la evolución de cualquier aplicación web.

Aunque la estructura puede variar según el proyecto, es habitual separar los distintos recursos según su función.

Una organización sencilla podría ser la siguiente:

text
proyecto/
├── index.html
├── css/
│   └── styles.css
├── js/
│   ├── main.js
│   └── utils.js
└── images/

A lo largo del módulo esta organización evolucionará progresivamente mediante el uso de herramientas modernas como Vite, que automatizan gran parte de la gestión del proyecto y facilitan el desarrollo de aplicaciones web profesionales.