go to the content followme

Wikier.org

  1. 29 May 2006

    Nociones básicas de JavaScript no intrusivo

    written by Sergio Fernández at 07h58

    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.

    1. # nOvaZuZu on May 29, 07:24

      Gracias anticipadas por ese librito de JavaScript que me vas a prestar, me será muy útil :D

    2. # dahernan on May 30, 04:38

      Incluso con Prototype puedes reducir todo ese codigo a dos lineas con un Event.observe y un $$ , ademas abstraes el navegador y lo haces un poco mas orientado a objetos.

      http://www.sergiopereira.com/articles/prototype.js.html

      http://wiki.script.aculo.us/scriptaculous/show/Prototype

    3. # Wikier on May 30, 05:28

      Si, Prototype es una biblioteca muy buena que ayuda en un montón de cosas, y que evidentemente es útil de usar para cosas más serias.

      Pero sólo trataba de hacer un ejemplo de andar por casa de como separar las cosas.

      Gracias David por el comentario :-)