Groumphy au quotidien

Alors que bon nombre d’entres-nous utilise le javascript dans la conception de ses pages web, nous savons que ce dernier n’est pas des meilleurs pour l’accessibilité.
Bien souvent nous avons donc concédé à ce client des fonctions non nécessaire à la navigation, des fonctions non primaires etc. afin de ne pas gêner tout internaute n’utilisant pas ce langage dans son navigateur.

Au début de la conception de site internet, nous nous permettions d’insérer les scripts javascript à l’intérieur du code. Par la suite, similairement aux bonnes pratiques du net, l’extériorisation de tout ce qui n’était pas contenu est devenu obligatoire (hum !). Nous liions donc le script à la page de cette manière :

<script language="javascript1.1" src="../js/global.js" type="text/javascript">

Le tout placé dans l’en-tête de la page.
Il était alors par la suite appelé la fonction en elle-même :

<a href="maPage.htm" onclick="maFonction(); return false;">Mon Texte Pour Déclencher l’Action</a>

Malheureusement comme le souligne Xavier Borderie de developpeur.JournalDuNet.com, cette séparation n’est pas complète comme nous pourrions le faire dans les autres éléments de la page événementiel : pourquoi laisser l’aspect fonctionnel ?

Ajoutons à cela que ça gâche le code ! Ou tout du moins sa pureté… Ce que nous appliquons au CSS pourrait tout aussi bien s’appliquer au javascript.

Maintenant il faut savoir comment faire. Notre cher auteur que je cite précédemment nous l’indique bien heureusement (il n’est jamais en manque d’imagination !) : appliquer le javascript sur un élément de la même manière qu’on applique un style.

Plus facile à dire qu’à faire… Mais tellement simple qu’on se demande pourquoi nous n’y avions pas pensé avant ! getElementById(), getElementsByTagName() et getElementByName(). getElementsByClass() ou getElementsByAttribute() et getElementByClassName() seront donc nos alliés.

En premier temps il faut prévoir les anciens navigateurs et implémenter ces fonctions qui nous sont déjà connues :

// Simulation de getElementById() à placer en début de script faisant appel
if (!document.getElementById) {
  if (document.all)
    document.getElementById=function() {
      if ( typeof(document.all[arguments[0]]) != "undefined")
        return document.all[arguments[0]];
      else
        return null;
      }
  else if (document.layers)
    document.getElementById=function() {
      if ( typeof(document[arguments[0]]) != "undefined")
        return document[arguments[0]];
      else
        return null;
      }
  }
// Méthode de Dylan Schiemann pour getElementByClassName()
function getElementByClassName(needle) {
  var xpathResult = document.evaluate('//*[@class = "'needle'"]', document, null, 0, null);
  var outArray = new Array();
  var item; while (item = xpathResult.iterateNext()) outArray[outArray.length] = item;
  return outArray;
  }
/*
    Copyright Robert Nyman, http://www.robertnyman.com
    Free to use if this text is included
    Function getElementsByAttribute() de Robert Nyman
*/
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue) {
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
    var oCurrent;
    var oAttribute;
    for(var i=0; i<arrElements.length; i++) {
        oCurrent = arrElements[i];
        oAttribute = oCurrent.getAttribute(strAttributeName);
        if (typeof oAttribute == "string" && oAttribute.length > 0) {
            if (typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
                arrReturnElements.push(oCurrent);
            }
        }
    }
    return arrReturnElements;
}

Les deux autres que je ne cite pas ci-dessus sont dans tous les navigateurs déjà implémentée depuis un laps de temps très long… Il serait à double emploi de les réimplanter.

Maintenant épurons donc notre (x)HTML :

<a href="maPage.htm" id="monID" class="maClasse">Mon texte</a>

Dans le fichier javascript donnons une action à cet élément :

function attacherAction() {
  if (document.getElementById) {
    if (document.getElementById('monID')) {
    var x ;
    x = document.getElementById('monID');
x.onclick = function() {
       maFonction(this);
        }
      }
    }
  }

Nous pourrions aussi bien le faire avec un getElementByClass() :

function attacherActionClasse() {
      if (document.getElementByClass('maClasse')) {
var i ;
i = document.getElementById('monID');
i.onclick = function() {
        maFonction2(this);
        }
      }
    }

Maintenant il nous faut charger cela dès que la page est prête afin de pouvoir l’utiliser. Il est évident que la solution de faciliter est d’utiliser window.onLoad() mais à nouveau c’est un manque de compatibilité et un manque de certitude de réalisation de l’action. Heureusement Simon Willison à créé la fonction addLoadEvent() :

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Que nous appellerons de la manière suivant pour nos besoins :

addLoadEvent(attacherAction); 
addLoadEvent(attacherActionClasse);

Source : Xavier Borderie, remaniement et explications complémentaires Groumphy