Formas de agregar scripts

javascript

Tiempo de lectura:

Publicado:

Existen dos formas principales de agregar scripts a nuestro proyecto web: Interno y Externo.

Scripts internos

Este m茅todo se refiere a usar la etiqueta <script> y colocar el c贸digo dentro de ella:

<script>
  console.log("Un mensaje en consola");
</script>

Podemos colocar esta etiqueta en diferentes partes del documento, por ejemplo en la cabeza (<head>) o en alguna parte del cuerpo (<body>).

Cuando usamos este m茅todo hay que tener cuidado ya que el lugar donde coloquemos el script puede influir en los resultados.

Sobre el orden de ejecuci贸n

El c贸digo es interpretado por el navegador de arriba hacia abajo, por lo tanto, tratar de manipular un elemento que todav铆a no existe provocar谩 que el script no se ejecute correctamente.

El siguiente es un script que deber铆a cambiar el mensaje dentro del p谩rrafo de Mi p谩rrafo a Actualizado mediante c贸digo.

<body>
  <script>
    document.querySelector("p").textContent("Actualizado mediante c贸digo");
  </script>
  <p>Mi p谩rrafo</p>
</body>
Visualizaci贸n

Como puedes ver no surti贸 efecto. Esto se debe a que el p谩rrafo es creado hasta despu茅s del script y por lo tanto no puede ser encontrado.

Usualmente colocamos el script justo antes del cierre del cuerpo </body>. As铆 nos aseguramos de que todos los dem谩s elementos ya hayan cargado.

<body>
  <p>Mi p谩rrafo</p>
  <script>
    document.querySelector("p").textContent("Actualizado mediante c贸digo");
  </script>
</body>
Visualizaci贸n

Sobre el uso en <head>

Tambi茅n podemos colocar el script en la etiqueta <head>, y a pesar de que puede suceder el mismo problema, podemos deshacernos de 茅l f谩cilmente.

<head>
  <script type="module">
    document.querySelector("p").textContent("Actualizado mediante c贸digo");
  </script>
</head>
<body>
  <p>Mi p谩rrafo</p>
</body>
Visualizaci贸n

Scripts externos

La forma m谩s adecuada para agregar scripts una vez que comenzamos a utilizar m谩s c贸digo, es por medio de scripts externos. El proceso es similar a ligar un archivo CSS.

Para ello tenemos que crear un nuevo archivo con las extensi贸n .js. Usualmente lo nombramos script.js, aunque puede ser el nombre que queramos.

script.js
document.querySelector("p").textContent = "Actualizado mediante c贸digo";

Para ligar este tipo de archivos con nuestro documento HTML debemos usar la misma etiqueta <script>. S贸lo que esta vez debemos agregar el atributo src junto con la ruta del archivo.

index.html
<!-- Resto de etiquetas -->
<head>
  <script src="script.js" type="module"></script>
</head>
<body>
  <p>Mi p谩rrafo</p>
</body>
<!-- <Resto de etiquetas> -->

Tambi茅n debemos utilizar el atributo type="module" para evitar errores en el orden de ejecuci贸n.

Comentarios