Formas de agregar JavaScript a tu web

25.08.23 | By Jesús Cárdenas

Agregar interactividad y dinamismo a tus proyectos web es esencial en la era digital actual. Una de las herramientas más poderosas para lograrlo es JavaScript. En este artículo, exploraremos varias formas de incorporar JavaScript en tu código, cada una con sus propias ventajas y casos de uso.

1. Incrustación en Línea:

La forma más sencilla de introducir JavaScript es mediante la incrustación en línea. Puedes insertar pequeños fragmentos de código directamente dentro de las etiquetas <script> en tu archivo HTML. Si bien es ideal para scripts breves, ten en cuenta que esta técnica puede dificultar la reutilización y la organización del código.

Fragmento de código

<script>
  // Tu código JavaScript aquí
  console.log("Hola desde JavaScript");
</script>

2. Archivo Externo:

Para proyectos más grandes y organizados, es recomendable colocar tu código JavaScript en archivos separados y enlazarlos en tu HTML con la etiqueta script. Esto facilita la gestión del código y promueve la reutilización.

Fragmento de código

<!-- <script src="ruta/a/tu/archivo.js"></script> -->

Recomendacion

Recuerda que es una buena práctica poner tus etiquetas <script> al final del <body> para evitar bloquear la renderización de la página mientras se cargan los scripts.

Mas opciones

Ademas lo mencionado hay formas "modernas" de agregar javascrio mediante archivos en la parte superior de tu html como lo son:

async

Al agregar el atributo async a la etiqueta <script>, el navegador descargará y ejecutará el script en segundo plano sin bloquear la carga y renderización del resto de la página. Sin embargo, ten en cuenta que el orden de ejecución de los scripts no está garantizado, por lo que si tienes dependencias entre scripts, es posible que necesites tomar precauciones adicionales.

Fragmento de código

<!DOCTYPE html>
  <html>
  <head>
    <title>Mi Página</title>
    <!-- <script src="ruta/a/tu/archivo.js" async></script> -->
  </head>
  <body>
    <p>Hola, mundo</p>
  </body>
  </html>

defer

permite cargar scripts en paralelo, pero asegura que se ejecuten en el orden en que aparecen en el documento.

Fragmento de código

<!DOCTYPE html>
  <html>
  <head>
    <title>Mi Página</title>
    <!-- <script src="ruta/a/script1.js" defer></script> -->
    <!--  <script src="ruta/a/script2.js" defer></script> -->
  </head>
  <body>
    <p>Hola, mundo</p>
  </body>
  </html>

En este caso, script1.js se ejecutará antes que script2.js, pero ambos se descargarán en paralelo y no bloquearán la renderización de la página. Recuerda que, en general, la colocación de los scripts al final del cuerpo (<body>) sigue siendo una buena práctica para garantizar una carga rápida y una experiencia de usuario fluida, pero estas alternativas pueden ser útiles en situaciones donde necesitas controlar el comportamiento de carga de los scripts.

Recuerda que en el desarrollo web, no hay una regla estricta y definitiva para todas las situaciones, ya que cada sitio puede tener necesidades y consideraciones específicas. Sin embargo, estas recomendaciones son buenas prácticas comunes para optimizar la carga y presentación de una página web.

Formas de agregar JavaScript a tu web

1. Incrustación en Línea:

2. Archivo Externo:

Recomendacion

Mas opciones

async

defer

JavaScript

Programación

Jesús Cárdenas

Ultimas Publicaciones