A medida que aprendemos HTML vemos que se trata de un lenguaje de marcas estupendo y muy potente, pero también nos vamos dando cuenta que ciertos detalles no se pueden cubrir sólo con HTML y CSS, y se requiere la potencia y flexibilidad de un lenguaje de programación. Para ello, usaremos Javascript.
Javascript es muy potente y flexible, pero también requiere unas capacidades de desarrollo diferentes que no suelen existir en HTML y CSS. En el caso de Javascript requeriremos ciertos conocimientos que es recomendable dominar de programación.
En este artículo cubriremos una parte básica de Javascript muy relacionada con HTML. Si estás empezando en programación y vas a aprender Javascript en profundidad, echa un ojo a los fundamentos de programación.
Lenguajes de scripting
Por defecto, el lenguaje de scripting soportado por los navegadores es Javascript, por lo que cuando hablamos de scripting en el navegador (front-end, o en el lado del cliente) hablamos de este lenguaje de programación.
Javascript está basado en ECMAScript, la especificación estándar que indica como debe actuar el lenguaje. Luego, es misión de cada navegador implementarlo de acuerdo a esas normas, aunque siempre hay algunas diferencias entre navegadores (habitualmente, porque no han implementado ciertas características).
La etiqueta <script>
Para utilizar Javascript en una página, debemos indicar en nuestro HTML que vamos a cargar un script (un archivo de texto con código Javascript) y hacerlo funcionar sobre el documento web actual. Para hacer esto, utilizaremos la etiqueta <script>.
Dicha etiqueta cuenta con los siguientes atributos básicos, que comentaremos más adelante:
| Atributo | Descripción |
|---|---|
src | Dirección URL relativa o absoluta del script externo a cargar. |
type | Modalidad en la que se va a cargar el script. |
Para empezar, ten en cuenta que la etiqueta <script> se puede escribir de dos formas en nuestro HTML:
- Como script en línea: El código JS se incluye en el HTML, dentro de la propia etiqueta.
- Como script externo: El código JS se incluye en el fichero Javascript enlazado en el atributo
src.
Lo más habitual suele ser utilizar un script externo. El código Javascript se encuentra en un archivo separado del HTML. En la etiqueta <script> se indica mediante el atributo src el fichero externo, que en este ejemplo, se encuentra en la ruta /js/script.js:
<script src="/js/script.js"></script>
En ese otro archivo /js/script.js se encontraría el código Javascript en cuestión:
alert('¡Hola!');
Esta modalidad suele ser la más conveniente, ya que separamos bien los archivos, de modo que es más fácil de reutilizarlos y tener todo nuestro código mejor organizado.
Sin embargo, tenemos otra modalidad denominada script en línea. Un ejemplo sería el siguiente. Observa que el código se incluye en el interior de la etiqueta <script>, por lo que dicho código Javascript permanece en el documento HTML:
<script>
alert('¡Hola!');
</script>
Esta modalidad es útil en algunos casos donde queremos que un cierto código solo afecte a ese documento, o porque simplemente queremos una forma simple y rápida de escribir un código Javascript en un cierto documento.
Sin embargo, por norma general, lo más conveniente es crear un script externo, ya que tendríamos nuestro código Javascript en un fichero independiente, algo más fácil de reutilizar.
Tipos de scripts
La etiqueta <script> actualmente se puede utilizar en dos modalidades diferentes mediante el atributo type: la modalidad clásica tradicional o la de un módulo de Javascript (ESM). Se puede utilizar tanto en los scripts externos como en línea.
Históricamente, el atributo
typese utilizaba en el pasado para indicar el tipo de script que ibamos a utilizar, escribiendo generalmente el valortext/javascript(algo que aún podemos encontrar en código antiguo u obsoleto).
Hoy en día, el atributo type cumple otras funciones, dependiendo del valor que se establezca. Los valores válidos que se pueden indicar en el atributo type de la etiqueta <script> son los siguientes:
| Valor | Modalidad | En línea | Externo | Descripción |
|---|---|---|---|---|
| (se omite) | Script clásico | ✅ | ✅ | Carga Javascript en modo tradicional. |
module | Módulo Javascript | ✅ | ✅ | Carga Javascript como módulo (permite import y export). |
importmap | Mapa de módulos | ✅ | ❌ | Carga un JSON como mapa de módulos. |
| (otro valor) | Bloque de datos | ✅ | ❌ | Establece un bloque de datos. El navegador lo ignora. |
Explicaremos más adelante cada una de estas modalidades. De momento, vamos a centrarnos en el modo de script clásico, cuando no indicamos ningún valor en el atributo type.
Cuando indicamos un script externo mediante el atributo src, el proceso de carga del script por parte del navegador es el siguiente:
- 👁🗨 El navegador parsea (lee) y renderiza (dibuja) el
.htmlen la página. - 🛑 Detiene temporalmente el dibujado en el HTML, cuando encuentra un
<script src>. - 🔽 Descarga el script
.jsreferenciado en el atributosrcen el caché del navegador. - 🏃♀️ Ejecuta el código javascript una vez descargado.
- 👁🗨 Reanuda el proceso de parseo y renderizado del documento HTML por donde lo dejó.
Este es el modo de carga por defecto de los scripts por parte del navegador (modo clásico). Sin embargo, existen dos métodos de carga diferentes que permiten hacer algunos cambios en la forma de carga de Javascript: la carga diferida y la carga asíncrona. Las veremos más adelante en el artículo el atributo defer y async.
Si quieres aprender más sobre Javascript, te aconsejo echar un vistazo a Javascript. Si eres nuevo en el mundo de la programación y no has programado nunca, o sólo has tocado código HTML y/o CSS, te recomiendo aprender antes los Fundamentos de programación.
Más adelante hablaremos de los módulos Javascript, que podemos cargar simplemente añadiendo un atributo type="module". Básicamente es una modalidad donde el Javascript tiene funcionalidades más avanzadas e interesantes:
- 1️⃣ El Javascript se carga siempre cuando el HTML ya está cargado.
- 2️⃣ Permite utilizar
importyexportpara importar módulos de otros archivos. - 3️⃣ El código es mucho más moderno y tiene ciertas mejoras de rendimiento.
Hablaremos un poco más adelante de ellos, en Módulos Javascript (ESM).
La etiqueta <noscript>
Debemos ser conscientes de que, aunque actualmente la mayoría de los navegadores poseen Javascript y es un lenguaje de programación muy común en la web, hay que intentar no abusar y utilizarlo para todo. Siempre que puedas hacer algo (equivalente) con HTML y/o CSS antes que con Javascript, será una mejor opción, ya que suelen ser soluciones más accesible, eficiente, fáciles de posicionar en buscadores y en general, más apropiadas.
Un usuario podría acceder desde un dispositivo que no tenga Javascript habilitado (aunque es algo muy poco frecuente hoy en día, es posible), y si tu página sólo funciona con Javascript, no podrá utilizarla. Una buena costumbre, es proporcionar una alternativa (aunque sea mínima o para avisar al usuario) para aquellos usuarios que no tengan Javascript habilitado.
Para ello, se suele utilizar la etiqueta <noscript>:
<script>
const usuario = prompt("¿Cuál es tu nombre?");
alert("¡Hola, " + usuario + "!");
</script>
<noscript>
<p>¡Hola, usuario!</p>
</noscript>
En el caso de que el usuario tenga capacidades de Javascript en su navegador, se ejecutará el código de la etiqueta <script> y se ignorará la etiqueta <noscript>. Sin embargo, si el navegador no posee Javascript o no lo tiene habilitado, se mostrará el contenido HTML proporcionado en la etiqueta <noscript>, que aunque no puede obtener el nombre de usuario, mostrará una alternativa.
Si no es posible realizar una alternativa al código Javascript, lo ideal sería mostrar al usuario un mensaje donde se le avisa que la página actual sólo es capaz de funcionar con Javascript, y que parece que el navegador que está utilizando no es capaz de procesarlo.
De esta forma conseguimos que el usuario tenga siempre feedback de lo que está ocurriendo.
Alternativas a Javascript
Existen alternativas para no utilizar Javascript directamente, sino utilizar algún lenguaje similar que traduce (o mejor dicho, transpila) a Javascript. De esta forma, puedes utilizar otros lenguajes que tienen características que Javascript no posee.
Sin embargo, hay que tener claro que los navegadores sólo soportan Javascript de forma nativa, de forma que si quieres utilizar alguno de estos lenguajes, tienes que integrarlo en tu workflow de trabajo y acostumbrarte a que el código debe ser transpilado (convertido a Javascript) y entonces esa versión es la que debes utilizar en tu web final, ya que es la que entienden los navegadores.
Los transpiladores o lenguajes más populares a Javascript que existen actualmente son los siguientes:
| Nombre | Descripción |
|---|---|
| TypeScript | Meta-lenguaje que amplia Javascript con más características, pareciendose más a lenguajes como Java o C#. |
| Babel | Transpilador de Javascript moderno a versiones más antiguas, dando así soporte a navegadores más antiguos. |
| CoffeeScript | Transpilador a Javascript, enfocado en hacer el código más legible. |
| Dart | Un lenguaje creado para ser una versión moderna de Javascript. |
| Bublé | Compilador de Javascript moderno a Javascript más antiguo. Similar a Babel. |
| Sucrase | Alternativa rápida a Babel. |
Probablemente, los más populares y utilizados hoy en día, son Typescript y Babel.
