Introducción a JavaScript para principiantes

Ejecución en el navegador

Ya lo tenemos todo preparado para escribir nuestro código JavaScript, ¿cómo y dónde lo hacemos?

HTML integra una etiqueta llamada script, ella es la encargada de contener el código JavaScript.

En cuanto al dónde, hay dos lugares posibles: dentro de la cabecera head o dentro del body.

Lo más recomendable es añadirlo al final del body, justo después de todo el contenido. Hay dos razones para ello:

  • La primera es que el navegador ejecuta el código de arriba hacia abajo, por lo que si ponemos el script en la cabecera, en el caso en que tengamos mucho código, el navegador no seguirá renderizando la web hasta que no haya procesado todo ese código y eso podría afectar negativamente a la experiencia de los usuarios.

  • La segunda es la propia naturaleza de Javascript, y es que como explicamos antes está pensado para interactuar con el DOM. El problema es que para hacer referencia a esos elementos, estos tienen que haberse creado antes. En otras palabras, si por ejemplo ejecutamos un código para interactuar con un campo de texto, si ese campo no se ha renderizado no podremos interactuar con él. Solo podemos interactuar con los elementos HTML definidos antes del bloque script, y por eso poniéndolo al final estaremos seguro de que existen todos y podemos interactuar con cualquier elemento de la página.

index.html

<body>
  <h1>Hola mundo</h1>
  <script>
  </script>
</body>

Es importante comentar que hay un caso excepcional donde sí se está bien definir un bloque script en la cabecera antes del body, relacionado con la carga de recursos y librerías de terceros, pero de eso ya hablaremos más adelante.

Por ahora vamos a intentar ejecutar algo simple:

<script>
  // Esto es un comentario
  console.log('Hola mundo');
</script>

Si volvemos al navegador ya nos debería aparecer el mensaje en la consola del inspector.