JavaScript no molesto (4): separación del JavaScript

La entrada de ayer terminaba con la pregunta ¿No se puede separar el código JavaScript del código HTML como se hace con CSS?

Sí, sí que se puede. Una página web se puede construir mediante capas:

• Capa de contenido: la estructura y el contenido con etiquetas de XHTML.
• Capa de presentación: la presentación del contenido definida con CSS.
• Capa de comportamiento: el comportamiento del contenido (por ejemplo, la respuesta ante una acción del usuario) definido con JavaScript.

Con un diseño basado en capas logramos reducir el acomplamiento entre los distintos componentes (contenido, presentación y comportamiento), lo que se traduce en importantes beneficios: disminución de los errores, reducción en los costes de mantenimiento, etc. Pero además, una página web construida de esta forma (que se conoce como progressive enhancement) casi siempre es graceful degradation, y por tanto la página web funcionará correctamente aun en el caso de que falte algún tipo de componente (CSS o JavaScript).

¿Cómo se puede lograr esto? En el código HTML no vamos a escribir ni una sola línea de código JavaScript. Más aun, tampoco se van a emplear los manejadores de eventos como onclick, onblur, etc.

Desde JavaScript, se puede asignar código de JavaScript a un manejador de eventos con el siguiente código:

elemento.evento = acccion;

Para seleccionar un elemento de la página web (una celda en una tabla, un botón en un formulario, un enlace, etc.) se puede emplear:

• getElementById(id): selecciona el emento indicado por el id.
• Usar una combinación de getElementsByTagName(etiqueta) y getAttribute(atributo) para seleccionar elementos con un atributo específico.

En la entrada JavaScript no molesto (3): las ventanas emergentes se puso como ejemplo los enlaces que se abren en ventanas emergentes. Para indicar que un enlace es de este tipo, vamos a añadir al atributo class un valor que no se emplea en el CSS, pero que desde CSS nos va a permitir saber que se trata de una ventana emergente:

<a href="http://www.ua.es/" class="estilo popup">Universidad de Alicante</a>
En el atributo class, el valor estilo se emplea en el CSS para asignar una presentación concreta, mientas que el atributo popup se emplea en JavaScript para identificar los enlaces que se tienen que abrir en ventanas emergentes:

window.onload = prepareLinks;
function prepareLinks() {
  var links = document.getElementsByTagName("a");
  for (var i=0; i= 0) {
      links[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }

}

function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

En el código anterior se realizan los siguientes pasos:

1. Se asigna al evento onload la función prepareLinks: esta función será llamada automáticamente cuando la página termine de cargarse.
2. La función prepareLinks obtiene un array con todos los enlaces de la página web.
3. Para cada enlace, se comprueba si el atributo class contiene el valor popup.
4. Si el enlace está marcado como popup, le asigna una función de JavaScript al evento onclick.

Para más información sobre cómo lograr la separación del código JavaScript:

• DHTML no intrusivo
• Nociones básicas de JavaScript no intrusivo
• Behavioral Separation
• Unobtrusive Javascript
• Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)
• 7 reglas de oro para hacer un javascript no obstructivo