{ . . . }

Comenzando a trabajar con JavaScript

Sin Comentarios

¡Ya es suficiente de contar historias y hablar del futuro y de lo que puede hacer JavaScript! Así que vamos a escribir nuestro primer programa.

En este apartado vamos a mostrar cómo insertar código JavaScript en un documento web.

Para insertar JavaScript en un documento web usamos el tag <script>, existen dos formas de insertar este elemento en un documento HTML:

  1. Incrustar el código JavaScript directamente en la página HTML.
  2. Referenciar a un archivo de código JavaScript de manera externa.
Hay una tercer forma de utilizar JavaScript en un documento, esta es la forma inline y esta se utilizaba en los inicios del lenguaje. Por ejemplo:

<button id="btn" onClick="alert('Hola mundo')"> Click</button>

Pero trabajar de esta forma traía muchos problemas porque dificultaba ver lo que estaba sucediendo en el documento web, ya que el código JavaScript era mezclado con el HTML por lo que cualquier cambio en el código HTML requería que el código JavaScript también se cambiara y por su puesto esto era un problema ya que el código JavaScript no era reutilizable ni escalable, mas bien teníamos una mezcla de código difícil de ver y entender, así que el utilizar esta forma de trabajar con JavaScript fue considerado una mala practica.

Veamos las dos formas viables de insertar código JavaScript en un documento web.

1. Incrustar código JavaScript en un documento web

Si en realidad necesitamos escribir y tener código  JavaScript dentro de un documento HTML lo mejor es que este en un mismo lugar, es decir entre las dos etiquetas de <script>, aunque no es la mejor practica, es una opción viable que tenemos a disposición. Ejemplo:

<html lang="es">
<head>
</head>
<body>
    <button id="btn"> Click</button>
  
    <!--Inserción código JavaScript -->
    <script>
        const btn = document.getElementById("btn");
        btn.addEventListener('click', function() {
          alert("Hola Mundo!");
        })
    </script>
</body>
</html>

2. Incluir un archivo JavaScript externo

Podemos ir un paso más allá y mantener el código JavaScript totalmente separado del HTML y CSS, es decir en su propio archivo. Esto lo hacemos gracias al atributo src en la etiqueta <script> lo que hacemos es especificar el archivo a vincular:

<html lang="es">
<head>
</head>
<body>
    <button id="btn"> Click</button>
  
    <script src="js/scripts.js"></script>
</body>
</html>
  1. Creamos un archivo cuya extensión sea .js y lo colocamos en una subcarpeta o en directorio raiz del sitio.
  2. Luego usamos la URL del archivo creado en el atributo src del elemento <script>.

Esta es la mejor forma de trabajar con código JavaScript, el mantener los scripts en un archivo separado se considera la mejor práctica pues mantendremos una estructura entendible y lógica, nuestro código será escalable ya este podrá utilizarse en todas las paginas de nuestro sitio web.

Podemos utilizar el atributo src para cargar JavaScript desde dominios externos. Esto nos permite obtener código JavaScript desde varios dominios, por ejemplo desde un CDN (content delivery network)

Cuando incluimos varios archivos JavaScript en una página por medio del atributo src, el motor de JavaScript interpreta los archivos en el orden en que aparecen en la página. Ejemplo:

<script src="js/scripts.js"></script>
<script src="js/aplicacion.js"></script>

En el ejemplo anterior el motor de JavaScript interpretará los archivos en secuencia, una vez terminada la interpretación del archivo scripts.js seguirá con los scripts dentro del archivo aplicacion.js


Los atributos async y defer

Para cambiar la forma de cargar y ejecutar el código JavaScript, podemos usar uno de los dos atributos del elemento <script> async o defer.

Los atributos async o defer tienen efecto solo en los archivos .js que se cargan de forma externa, es decir los que utilizan los atributos src.

Este par de atributos aunque aparentemente tienen un funcionamiento similar su comportamiento es muy diferente

  1.  async (asíncrono) hace ejecutar los scripts en paralelo a la descarga y análisis del documento HTML, pero una vez descargado, el análisis se pausará para que se ejecuten los scripts. (el uso del atributo no garantiza la ejecución de los archivos en el orden especificado,  por tanto, debe de asegurarse de que no haya dependencia entre ellos)
    <script async src="async_script1.js"></script>
    <script async src="async_script2.js"></script>
  2. defer le pide al navegador web que ejecute el archivo de script después de que el documento HTML haya sido completamente analizado, es decir, cuando se ha terminado de parsear toda la página.
    <script defer src="defer-script.js"></script>

Una vez tengamos presente las formas de cargar e implementar código JavaScript en los documentos web, el siguiente paso es escribir código JavaScript, cosa que haremos en el siguiente modulo.

Comentar

avatar