<aside> ⚠️

Ojo 👀 Esta lectura no reemplaza a un curso de JavaScript. De hecho, está enfocado a React.

</aside>

Empezando el proyecto

Puedes descargar el proyecto base aquí:

javascript-refresher.zip

Se recomienda cargarlo en VSCode con la extensión de Live Server.

Añadiendo JS a una página web

Hay dos maneras principales de añadir JavaScript a una página web en su documento HTML:

Entre dos tags <script>:

<script>
alert('Hello')
</script>

Importando con un tag <script>:

<script src='script.js'></script>

La primera forma no es tan utilizada ya que es muy dificil de mantener, mientras que la segunda forma asegura un proyecto más estructurado y mantenible, ya que separa el código HTML y JS.

<aside> 💡

Si agregas defer al tag <script>, este hará que el script espere hasta que cargue todo el <body> antes de ejecutarse.

<script src='script.js' defer></script>

Alternativamente, puedes mover el tag <script> al final de la sección del <body>.

</aside>

<aside> 💡

Si a un tag <script> le agregamos la opción type="module", esto nos permite tratar un archivo JS como un módulo el cual podemos importar.

</aside>

Import y Export

Forma tradicional

Creemos un archivo en assets/scripts/util.js:

export let apiKey = 'thisIsAnAPIKey';

Luego, creamos otro archivo en assets/scripts/app.js donde importaremos lo anterior: