 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Le JavaScript non intrusif par l'exemple |
| |
| Nettoyez vos pages HTML des codes JavaScript, et apprenez à utiliser la puissance du DOM pour créer des évènements stockés dans un fichier externe.
(19/01/2007) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Les développeurs soucieux des standards du Web ont aujourd'hui compris la leçon : la séparation du contenu et du style n'est pas seulement raisonnable, elle est un passage obligatoire pour profiter pleinement des CSS. En appliquant ce principe de séparation, les développeurs se facilitent la vie, ainsi que celle de ceux qui auront à reprendre et modifier leur code plus tard.
La séparation devrait également s'appliquer à d'autres aspects de la page HTML, et ce n'est pas toujours le cas : l'aspect fonctionnel (ou comportemental, événementiel, ...), régit par JavaScript, repose encore souvent sur des blocs de code placés en tête de fichier, ou pire, sur les éléments eux-mêmes - à la manière de styles CSS en ligne. La pratique de sortir le code JavaScript fonctionnel du contenu HTML est appelée JavaScript non intrusif (unobstrusive JavaScript), et devient le nouveau commandement du développeur soucieux de la propreté de ses pages.
A cette idée d'unobstrusive JS, s'ajoute également celle de dégradation élégante (graceful degradation), déjà en vogue dans le monde des CSS, stipulant que si le navigateur d'un utilisateur ne reconnaît pas toutes les règles CSS ou fonctionnalité JavaScript, la page devrait néanmoins être pleinement utilisable. Dans les faits, cela signifie qu'un site marchera aussi bien, selon que l'utilisateur ait désactivé JavaScript ou pas. Dans un monde où Ajax devient monnaie courante, cela peut sembler une gageure, mais avec de la préparation et de l'adaptation, même GMail peut être utilisé sans JavaScript...
Reste à savoir par quoi remplacer son JavaScript "intrusif". L'exemple canonical est le suivant : déclencher une action JavaScript lorsque l'on clique sur un lien. Plusieurs techniques existent :
<a href="javascript:maFonction();">Déclencher l'action</a>
<a href="#" onclick="maFonction();">Déclencher l'action</a>
<a href="unePage.html" onclick="maFonction(); return false;">Déclencher l'action</a>
Chacune est une amélioration de la précédente, mais au final elles sont toutes intrusives : le code JavaScript ne devrait même pas être présent au sein de la balise, mais dans un fichier externe importé via une balises script placée dans la section head de la page.
<script type="text/javascript" src="mesFonctions.js"></script>
Le code HTML devrait donc ressembler à ceci :
<a href="unePage.html">Déclencher l'action</a>
Comment, donc, appliquer une fonction JavaScript à cet élément ? De la même manière que l'on applique un style CSS : à l'aide des attributs id et class, et des fonctions idoines (DOM). La plupart des navigateurs modernes implémentent déjà les fonctions getElementById(), getElementsByTagName() et getElementByName(). getElementsByClass() ou getElementsByAttribute() sont facilement implémentables, et vous pouvez utiliser d'autres fonctions encore pour mieux cibler vos éléments (lire notre article "5 JavaScripts vraiment utiles").
Ainsi, pour notre simple lien, on pourra lui ajouter un id ou une classe, puis cibler l'élément avec JavaScript :
<a href="unePage.html" id="monAction">Déclencher l'action</a>
function attacherAction() { if (document.getElementById) { if (document.getElementById('monAction')) { leLien = document.getElementById('monAction'); leLien.onclick = function() { maFonction(this); } } } }addLoadEvent(attacherAction);
La fonction attacherAction() vérifie tout d'abord que la fonction getElementById existe (sans quoi il faudrait l'implémenter nous-mêmes), puis qu'il existe bien un élément avec l'id monAction, enfin attache un évènement onclick sur cet élément, qui pointe vers la fonction que l'on souhaite déclencher lors du clic. Pour ne pas prendre de risque, on évite de faire appel directement au gestionnaire d'événement window.onload, auquel on préférera par exemple la fonction addLoadEvent(), conçue par Simon Willison.
|
|
|
|
|
|
|
