blog

rss

Nociones básicas de JavaScript no intrusivo

29/05/2006, 06h58

Siempre ha sido una cuestión que preguntan amenudo ¿cómo seguir usando JavaScript sin perjudicar a la accesibilidad? La respuesta es bien fácil: JavaScript no intrusivo.

El concepto es bien sencillo: conseguir que el script se abstraiga de su propia capa (comportamiento), superponiendose al resto de capas sin estar mezclado con estas. Con ello conseguimos una ventaja (ética y técnica) importantisima en web: el extra es el JavaScript, y la web es completamente funcional aunque nuestro agente de usuario no disponga de soporte JavaScript.

Mejor lo vemos con un sencillo ejemplo.

Es muy habitual encontrarnos con cosas de este estilo:

<a href="#" onclick="javascript:nombrefuncion();return false">enlace</a>

Una buena practica sería sacar el evento de elemento, marcando el HTML con algo así:

<a href="enlace.html" class="onclick">enlace</a>

Y asociar los eventos en un fichero .js externo con un código parecido a:

function onclicks() {
  var actions = { 'id1':'action1', 'id2':'action2' };
  var links = document.getElementsByTagName('a');

  for (one in links) {
    if (links[one].hasAttribute('class') && links[one].getAttribute('class')=='onclick') {
        links[one].href = '#';
        links[one].onclick = 'javascript:'+actions[links[one].id]+'return false';
    }
  }
}
window.onload = onclicks();

Para asociar varias acciones distintas yo he echado mano del diccionario actions, donde tendreis que sustituir action1 por la acción que queréis que se ejecute en el elemento id1.

  • -->