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 elemento <script>. Hay dos formas de usar el elemento <script> en una página 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. JavaScript se diseñó para insertarse directamente en el código HTML, por ejemplo:

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

Pero trabajar de esta forma traía muchos problemas, esto 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 para detenerlo 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 codigo JavaScript en un documento web.

1. Incrustar código JavaScript en un documento web

Aunque no es una buena practica colocar código JavaScript dentro de un documento HTML, la opción disponible mas viable es utilizar el elemento <script>. Veamos un 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>

Si en realidad necesitamos escribir y tener código  JavaScript dentro de un documento HTML lo mejor es que este en un mismo lugar, entre las dos etiquetas de <script>, en vez de mezclarlas con las etiquetas 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 se puede vincular al uso del atributo src en la etiqueta <script> para especificar el archivo a vincular:

<html lang="es">
<head>
</head>
<body>
    <button id="btn"> Click</button>
  
    <script src="js/scripts.js"></script>
</body>
</html>
  • Creamos un archivo cuya extensión sea .js y lo colocamos en una subcarpeta o en directorio raiz del sitio, aunque mantener los archivos JavaScript en la carpeta es una buena práctica.
  • Luego usamos la URL del archivo de código JavasScript en el atributo src del elemento <script>.

Comenzando a trabajar con JavaScript Inclusión del Código

Esta es la mejor forma de trabajar con código JavaScript, mantener los scripts en un archivo separado se considera la mejor práctica, mantendremos una estructura entendible y lógica, nuestro código será escalable ya este podrá utilizarse en todas las paginas de nuestro sitio web, al igual que lo hacemos con los archivos de CSS, cosa que no ocurriría con los métodos anteriores.

Tenga en cuenta que puede usar el atributo src para cargar JavaScript desde dominios externos. Esto le permite enviar JavaScript desde varios dominios, por ejemplo desde un CDN (content delivery network) para acelerar la página.


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