HTML y JavaScript

Cómo Cargar un Archivo JS Externo en HTML

HTML y JavaScript

En la anterior lección del Curso de JavaScript vimos como crear un Hello World con JS y entre las varias cosas que aprendimos, una de ellas fue a añadir código JS a un fichero HTML mediante la utilización de la etiqueta <script></script>

Este es un método perfecto para tener una primera toma de contacto con JavaScript, pero en la mayoría de los casos, no va a ser la metodología más adecuada para utilizar tus scripts. ¿Por qué?

Bueno, por varios motivos:

  • Puede que quieras tener todo tu código JS en un fichero aparte para tener tu código más ordenado y ensuciar menos tu código HTML. Tener un código ordenado y limpio es algo muy importante.
  • Si tienes que añadir unas pocas líneas de script no hay problema, pero imagínate que vas a crear una importante y extensa funcionalidad que requiere de miles y miles de líneas de código, ¿cómo vas a meter todo eso en una página HTML? No es práctico.

Por motivos como estos, tenemos otra forma mucho más útil de utilizar scripts en una página web: Cargar un fichero .js externo en nuestro código HTML.

¿Cómo se carga un JS externo con Código HTML?

Pues en realidad es algo muy sencillo, este es el código que debes añadir a tu HTML:


<script src="url"></script>

Donde Url es la url donde está alojado tu fichero .js externo.

Haciendo esto, tu fichero HTMl digamos que tendrá la capacidad de leer y de realizar todas las cosas que hayas añadido en tu fichero externo JS, tal y como si lo hubieses incrustado directamente en tu HTML pero de una forma mucho más limpia y ordenada.

¿Dónde coloco el código?

Pues depende. Lo normal es cargar todos los scripts en el head de la página, todos juntos y ordenados y sobretodo poniendo nuestro script personalizado por debajo de scripts de librerías como por ejemplo jQuery, esto evita conflictos.

Esto se debe a que el navegador leerá los scripts en el orden que los tengas en el código, y si en tu script utilizas algo de jQuery y además lo has colocado por delante del script de la librería, el código fallara. Esto pasa por que en el momento en que se lea tu código personal, el navegador todavía no habrá leído la librería (en este caso Jquery) necesaria para entender tu código. En resumen, librerías, frameworks y demás, siempre por delante.

De todos modos, por poder, tu puedes poner el código donde te de la gana y hablando ahora sobre SEO, este es un aspecto importante a tratar. Dependiendo de cual sea la función del plugin, deberías añadir su código de llamada en un lugar o en otro.

Por ejemplo, si tu script no es excesivamente importante y es algo bastante secundario que podría cargarse perfectamente tras cargar otras cosas más importantes (como por ejemplo el HTML y CSS), puedes colocarlo al final del código, en el footer… sitios así.

Haciendo esto mejoraremos el rendimiento de la página, pero insisto, solo debes hacerlo cuando tu script no sea algo indispensable en tu página, por lo tanto nada de librerías.

Scripts asíncronos

Otro modo incluso más sencillo de mejorar el rendimiento de la página en el caso de scripts no vitales para la página es convertirlos en scripts asíncronos. Así es como se hace:


<script async src="url"></script>

Al añadir la propiedad async, el script se cargará de forma asíncrona y por lo tanto se irá cargando en segundo plano mientras se siguen cargando otros elementos de la página.

Esto es algo que no debería hacerse con librerías o frameworks, ya que puede crear conflictos.

De todos modos, si estás empezando con JavaScript casi desde cero, no te ralles mucho ahora con esto, simplemente que sepas que tienes estas opciones. Mientras te haya quedado claro como llamar a un fichero .js desde HTML, tendrás suficiente por el momento.

¡Y eso es todo! ¿Tienes alguna duda? ¿Quieres aportar algo? ¡Deja tu comentario!

Give a Comment