Niveau : Confirmé

Comment bien coder en Javascript ?

Tutoriel par (Développeur Front Office Senior, Expert AccessiWeb en évaluation)
Créé le , mis à jour le (6363 lectures)
Tags : javascript

Sommaire


Désolidarisez vos scripts de l'interface utilisateur

Chaque utilisateur possède son propre mode de navigation. Certains utilisent le clavier, d'autres, la souris. Par exemple, cela signifie qu'il faut, dans le cas d'un drag-and-drop, activer le clic ou la pression sur une touche pour rendre votre script accessible. Un gestionnaire d'événement onclick est lancé par le clic de la souris mais aussi par la touche Entrée de votre clavier. Dans le même ordre d'idée, vous devez doubler vos onmouseover par des onfocus ainsi que les onmouseout par des onblur afin que chacun puisse disposer des méthodes affectées aux éléments, et ce, quelquesoit son mode de navigation. Pour illustrer cette notion, prenons le cas d'un rollover. Dans l'exemple suivant, que vous naviguiez au clavier ou à la souris, cela fonctionne.

<a href="#" id="test">lien test</a>

<script type="text/javascript"><!--

// Rollover sur un élément
function fnRollOver(sId, sCSS, sOverCSS)
{
   // Test de la méthode utilisée
   if(!document.getElementById) return;

   // Identification de l'élément
   var oElem = document.getElementById(sId);
   if(!oElem) return;

   // Définition de la classe CSS d'origine
   oElem.className = sCSS;

   // Comportement au survol ou à la prise du focus
   oElem.onmouseover = function() { oElem.className = sOverCSS; };
   oElem.onfocus = function() { oElem.className = sOverCSS; };

   // Retour à l'état d'origine
   oElem.onmouseout = function() { oElem.className = sCSS; };
   oElem.onblur = function() { oElem.className = sCSS; };
}
// Lancement de la fonction fnRollOver()
fnRollOver('test', 'CSS', 'OverCSS');

//--></script>
Résultat :

lien test