Conectar un script a la página

Cupcake aceptó varios encargos de tiendas en línea y pronto pasará a verte para repartir las tareas. Mientras llega el Jefe, veamos cómo conectar scripts a una página.

En este capítulo trabajaremos con los elementos de una tienda en línea. Para hacerlo, primero hay que conectar bien nuestro código.

Hay dos formas de conectar scripts a una página con la etiqueta script:

Código en línea. El código se escribe dentro de la etiqueta script.

<body>
  …
  <script>console.log('Soy un script en línea');</script>
</body>

Archivo externo con código. Se agrega a la etiqueta script el atributo src, que indica la ruta al archivo del script.

<body>
  …
  <script src="script.js"></script>
</body>

Ten en cuenta que estas dos formas no se combinan en una misma etiqueta. Si script tiene un atributo src, el código en línea se ignora y no se ejecuta. Por eso debe ir en otra etiqueta script.

<body>
  …
  <!-- El script en línea no podrá presentarse -->
  <script src="script.js">console.log('Soy un script en línea');</script>

  <!-- Ahora toda la consola escucha al script en línea -->
  <script src="script.js"></script>
  <script>console.log('Soy un script en línea');</script>
</body>

Estos scripts se ejecutan cuando el navegador los encuentra en la página. Si hay más código HTML después de la etiqueta script, el navegador espera a que termine el script antes de procesarlo. En el caso de un archivo externo, también tiene que esperar a que se descargue.

Por eso conectaremos el script antes de la etiqueta de cierre body: así nos aseguramos de que el navegador ya haya procesado todo el HTML y podamos trabajar con sus elementos.

Para comprender mejor lo que viene, te recomendamos completar el capítulo «HTML y CSS: profundización en la sintaxis».