Sabemos que una página web está principalmente constituida por código HTML, es decir, por etiquetas. Pero también hemos podido colocar código CSS en ella, ya sea directamente o a través de una hoja de estilo creada aparte. Pero es hora de dar la bienvenida al recién llegado.
JavaScript también se integra en el código HTML (al igual que CSS). Por lo tanto, nuestra página web puede contener tres sintaxis diferentes: HTML, CSS y JavaScript. Pero para que el navegador sepa dónde comienza nuestro script, debemos colocarlo de cierta maneras.
Podemos colocar código JavaScript en tres lugares diferentes:
- Directamente dentro de la etiqueta de apertura de un elemento HTML.
- Dentro de un elemento script, dentro de una página HTML.
- En un archivo separado que contenga exclusivamente JavaScript y tenga la extensión
.js. En esta lección veremos cómo escribir código JavaScript en cada una de estas ubicaciones y destacaremos las diferentes ventajas e inconvenientes asociados con cada forma de hacerlo.
Si estás buscando la mejor manera de incrustar código JavaScript en HTML, puedes ir directamente a la tercera forma.
Colocar Código JavaScript dentro de la Etiqueta de Apertura de un Elemento HTML
Es posible que aún encuentres hoy en día código JavaScript colocado directamente dentro de la etiqueta de apertura de elementos HTML.
Este tipo de construcción era común en el pasado, especialmente para manejar eventos como por ejemplo un clic.
Mira el ejemplo a continuación:
See the Pen JS Etiqueta Apertura Elemento HTML by Alex (@htmldesdecero) on CodePen.
Aquí creamos dos botones en HTML y colocamos nuestro código JavaScript dentro de atributos onclick. El código dentro de los atributos se ejecutará tan pronto como se haga clic en el botón correspondiente.
<button onclick="alert('¡Hola!')">Haz clic en mí</button>
<button onclick="(function(){
let para = document.createElement('p');
para.textContent = 'Párrafo añadido';
document.body.appendChild(para);
})();">
Agregar un párrafo
</button>En el caso presente, hacer clic en el primer botón abre una ventana de alerta que muestra “¡Hola!“.
Hacer clic en el segundo botón agrega un elemento p que contiene el texto “Párrafo añadido” después de los botones.
Por el momento, les pido que no se detengan demasiado en los códigos JavaScript en sí mismos, ya que tendremos mucho tiempo para descubrir las estructuras de este lenguaje, sino más bien que se concentren en el tema de la lección que se refiere a los lugares posibles para el código JavaScript.
Hoy en día, nuevas técnicas nos permiten no utilizar este tipo de sintaxis y generalmente se desaconseja y se considera una mala práctica escribir código JavaScript dentro de las etiquetas de apertura de elementos HTML.
La razón principal de esto es que la web y los elementos que la componen son cada vez más complejos y, por lo tanto, debemos ser cada vez más rigurosos para explotar esta complejidad.
Por lo tanto, la separación de los diferentes lenguajes o códigos es hoy en día la norma para tratar de mantener un conjunto lo más limpio, comprensible y fácilmente mantenible posible.
Además de esto, contaminar el código HTML de esta manera puede llevar a algunos errores en el código y es ineficiente ya que tendríamos que volver a copiar los diferentes códigos para cada elemento al que quisiéramos aplicarlos.
Colocar Código JavaScript dentro de un Elemento Script, dentro de una Página HTML
También podemos colocar nuestro código JavaScript dentro de un elemento script, que es el elemento utilizado para indicar que estamos codificando en JavaScript.
Podemos ubicar nuestro elemento script en cualquier lugar de nuestra página HTML, tanto dentro del elemento head como dentro del elemento body.
Además, podemos indicar varios elementos script en una página HTML para colocar varios fragmentos de código JavaScript en diferentes lugares de la página.
Mira el ejemplo a continuación. Este código produce el mismo resultado que el anterior:
See the Pen Código JS dentro Elemento script by Alex (@htmldesdecero) on CodePen.
Este método es mejor que el anterior, pero una vez más no es ideal para varias razones.
En primer lugar, como antes, la separación de los códigos no es óptima aquí, ya que estamos mezclando JavaScript y HTML, lo que puede hacer que el conjunto sea confuso y complejo de entender en el contexto de un proyecto grande.
Además, si queremos usar los mismos códigos en varias páginas, tendremos que copiarlos y pegarlos cada vez, lo cual no es eficiente y es muy malo para la mantenibilidad de un sitio web. Si alguna vez tenemos que cambiar algo en un código copiado en 100 páginas de nuestro sitio, tendríamos que hacer la modificación en cada una de las páginas.
<script>
let agregar = document.getElementById('b2');
agregar.addEventListener('click', agregarParrafo);
function agregarParrafo(){
let para = document.createElement('p');
para.textContent = 'Párrafo agregado';
document.body.appendChild(para);
}
</script>Colocar el Código JavaScript en un Archivo Separado (Mejor Manera)
Colocar el código JavaScript en un archivo separado que contenga solo código JavaScript es el método recomendado y preferido siempre que sea posible.
Para hacer esto, tendremos que crear un nuevo archivo y guardarlo con la extensión .js. Luego, vamos a llamar a nuestro archivo JavaScript desde nuestro archivo HTML.
Para ello, nuevamente utilizaremos un elemento script, pero esta vez no escribiremos nada dentro. En su lugar, agregaremos un atributo src a nuestro elemento script y le pasaremos como valor la dirección del archivo. Si tu archivo .js está en la misma carpeta que su archivo .html, simplemente indica el nombre del archivo como valor del atributo src.
Ten en cuenta que un elemento script solo puede tener un atributo src. En el caso de que deseemos utilizar varios archivos JavaScript en un archivo HTML, tendremos que especificar tantos elementos script en el archivo, cada uno llamando a un archivo en particular.
El siguiente código produce los mismos resultados que antes. No te preocupes por el atributo async por el momento.
See the Pen Código JS Archivo Separado by Alex (@htmldesdecero) on CodePen.
Esta metodología será tu método preferido ya que permite una excelente separación del código y una óptima mantenibilidad del mismo. De hecho, si deseas insertar el código JavaScript contenido en nuestro archivo en 100 páginas diferentes, aquí simplemente llamarás a este archivo JavaScript en las 100 páginas. En caso de que modifiques el código, simplemente será necesario modificarlo una vez en el archivo JavaScript.
Nota
<!DOCTYPE html>
<html>
<head>
<title>HTMLDESDECERO.ES</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="curso.css">
</head>
<body>
<h1>Título principal</h1>
<button id='b1'>Haz clic en mí</button>
<button id='b2'>Agregar un párrafo</button>
</body>
</html>
let saludo = document.getElementById('b1');
let agregar = document.getElementById('b2');
saludo.addEventListener('click', alerta);
agregar.addEventListener('click', agregarParrafo);
function alerta(){
alert('¡Hola!');
}
function agregarParrafo(){
let para = document.createElement('p');
para.textContent = 'Párrafo agregado';
document.body.appendChild(para);
}
La Ubicación del Código y el Orden de Ejecución del Mismo
Hay otro factor del que aún no he hablado y que es absolutamente necesario tener en cuenta y comprender cuando agregamos código JavaScript a nuestras páginas HTML, que es el orden de ejecución del código por parte del navegador.
Es posible que lo que voy a explicar te parezca complejo y abstracto, y es completamente normal. Sin embargo, no te preocupes, tendremos la oportunidad de hablar más sobre esto más adelante en este blog. Por ahora, simplemente trata de hacer tu mejor esfuerzo para visualizar lo que está sucediendo.
Aquí, es importante entender que por defecto, un navegador leerá y ejecutará el código en el orden en que está escrito.
Específicamente, cuando el navegador encuentra un elemento script, detendrá el procesamiento del resto del HTML hasta que el código JavaScript se cargue en la página y se ejecute.
Nuestros códigos JavaScript anteriores necesitan los elementos button de nuestra página HTML para funcionar. De hecho, los códigos getElementById('b1') y getElementById('b2') recuperarán los elementos cuyos id son “b1” y “b2” para manipularlos.
Esto podría ser un problema en este caso porque si nuestro código JavaScript se ejecuta antes de que el código HTML de nuestros botones sea procesado por el navegador, no funcionará ya que intentará usar elementos que aún no existen.
Por eso, cuando decidí insertar el código JavaScript directamente en la página HTML dentro de elementos script, tuve que envolver el código JavaScript que muestra la alerta declarada en el elemento head con el código document.addEventListener('DOMContentLoaded', function(){}) ;. Este código le indica al navegador que primero debe cargar todo el contenido HTML antes de ejecutar el JavaScript dentro de él.
En el mismo ejemplo, mi segundo elemento script estaba ubicado al final del body y, por lo tanto, se ejecuta automáticamente después del resto del código. Por lo tanto, no hubo ningún problema en este caso.
Ten en cuenta que el mismo problema ocurrirá cuando se llame a un archivo JavaScript externo por defecto: dependiendo de dónde en el código se solicite el archivo, puede que no funcione si utiliza código HTML que aún no está definido.
Este problema es la razón por la cual durante mucho tiempo se ha recomendado colocar los elementos script justo antes del cierre de la etiqueta body, después de todo el código HTML.
Esta forma de hacer las cosas parece resolver el problema a primera vista, pero no siempre es óptima en términos de rendimiento.
En resumen, esto es lo que sucede en este caso:
- El navegador comienza a analizar (o procesar) el código HTML.
- El analizador del navegador encuentra un elemento script.
- El contenido JavaScript se solicita y se descarga (en caso de que esté en un archivo externo) y luego se ejecuta. Durante todo este tiempo, el analizador bloquea la visualización del HTML, lo que puede ralentizar significativamente el tiempo de carga de la página si el script es largo.
- Una vez que se ha ejecutado el JavaScript, el contenido HTML termina de ser analizado y se muestra.
Este problema específico de tiempo de espera para cargar archivos JavaScript puede resolverse en gran parte gracias a la descarga asíncrona de datos, que puede ser ordenada especificando los atributos async o defer en nuestros elementos script.
La descarga asíncrona es un concepto complejo y lo estudiaremos mucho más adelante en este blog. Por ahora, simplemente recuerda que solo podremos usar los atributos async y defer cuando llamemos a archivos JavaScript externos (es decir, código JavaScript almacenado en archivos separados).
Esta es otra razón por la cual preferiremos guardar el código JavaScript en archivos separados.
