El lenguaje HTML tiene ciertos límites, ya que ciertas cosas no se pueden realizar sin Javascript. Para ello podemos utilizar las etiquetas para scripts.

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. Para ello tenemos que hacer uso de un lenguaje de programación llamado Javascript. Este lenguaje es muy potente y flexible, pero también requiere mayor dominio del código que con HTML y CSS, puesto que estos últimos sólo son lenguajes de marcas, mientras que Javascript es un lenguaje de programación que requiere ciertos conocimientos y metodología de desarrollo.

La etiqueta script

Para utilizar Javascript, lo que hacemos normalmente es indicar al HTML que queremos cargar un script (una lista de órdenes) y hacerlas funcionar sobre la página actual. Para hacer esto, utilizaremos la etiqueta <script>, que permite indicar una serie de atributos:

Atributo Valor Descripción
src URL Dirección URL de un script externo a cargar.
type tipo Tipo de script a cargar. Si se omite, se asume text/javascript como valor.
charset codificación Codificación con la cuál se cargará el script definido en el atributo src.

La etiqueta <script> tiene esencialmente dos modos de funcionar: como script en línea y como script externo. El siguiente es un script en línea:

<script>
  alert('¡Hola!');
</script>

Y el siguiente es un script externo, que se encuentra en un archivo separado del HTML:

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

Si utilizamos el segundo método (uno de los más habituales), debemos tener en cuenta tres conceptos importantes: la carga del HTML

Modo de carga del script

Cuando indicamos la carga de un script externo mediante el atributo src, el navegador realiza varias tareas:

Este es el modo de carga básico de los scripts por parte del navegador. Sin embargo, existen dos métodos de carga más: asíncrono y diferido.

Modo de carga Atributo Descripción
Normal (ninguno) Se bloquea la carga de la página y se ejecuta inmediatamente.
Asíncrono async Ejecuta el script de forma asíncrona (tan pronto como esté disponible).
Diferido defer Ejecuta el script de forma diferida (cuando la página termina de renderizarse).

Estos dos métodos tienen ligeras diferencias respecto al modo de carga básico que vimos anteriormente, y que aparece el primero en la siguiente ilustración:

Modo de carga de scripts

Lenguajes de scripting

Por defecto, el lenguaje de scripting soportado por los navegadores es Javascript, por lo que la mayoría de las veces que hablamos de scripting en el navegador (o en el front-end, o en el lado del cliente) hablamos de este lenguaje. Javascript está basado en ECMAScript, que son las normas que indican como debe actuar el lenguaje. Luego, es misión de cada navegador implementarlo de acuerdo a esas normas, aunque siempre hay diferencias entre navegadores.

Existen otras alternativas para no utilizar Javascript en el navegador, sino algún lenguaje alternativo. Directamente, sólo podemos utilizar Javascript, puesto que es el que está soportado por los navegadores, pero en muchos casos, algunos desarrolladores prefieren aprender otros lenguajes que se pueden compilar a Javascript.

La etiqueta noscript

Debemos ser conscientes de que, aunque actualmente la mayoría de los navegadores poseen Javascript, un usuario puede acceder desde un dispositivo que no tenga Javascript o que tenga Javascript deshabilitado. Aunque día a día, cada vez se está perdiendo esta buena costumbre de accesibilidad, es una buena práctica proporcionar una alternativa (aunque sea más pobre) para los usuarios que no tengan Javascript.

Para ello, utilizaremos la etiqueta <noscript>:

<script>
  var usuario = prompt('¿Cuál es tu nombre?');
  alert('¡Hola, ' + usuario + '!');
</script>
<noscript>
  ¡Hola, usuario!
</noscript>

En caso de que el usuario tenga capacidades de Javascript en su navegador, se ejecutará el código de la etiqueta <script>, sin embargo, si el navegador no tiene Javascript, se mostrará el texto proporcionado en la etiqueta <noscript>, que aunque no puede recoger el nombre de usuario, mostrará una alternativa.

De esta forma evitamos que si el usuario no tiene Javascript, vea una página en blanco.

La etiqueta template

La etiqueta <template> es un método ideal para reutilizar información HTML y tratarla mediante Javascript. En el siguiente ejemplo tenemos una tabla HTML que sólo tiene definida la cabecera de la misma. Sin embargo, un poco más abajo hay una etiqueta <template> que contiene una fila con 3 celdas:

<table id="tabla">
  <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Calificación</th>
  </tr>
  <template id="usuario">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </template>
</table>

El contenido de una etiqueta <template> es inerte, de modo que el navegador no interpreta su interior (no descarga imágenes, no ejecuta scripts, etc...) hasta que el usuario clona su contenido para insertarlo en el HTML.

En este ejemplo anterior, nosotros podríamos desde Javascript obtener el contenido de la plantilla <template>, clonarlo y añadirlo al final de la tabla de forma dinámica, para posteriormente modificar los datos de cada fila:

var template = document.getElementById('usuario')
var tabla = document.getElementById('tabla')

tabla.appendChild(template.content.cloneNode(true));

Las plantillas HTML tienen relativamente buen soporte, aunque algunos navegadores no las implementan aún:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).