Code dégradable, non intrusif, non obstructif

Le javascript permet d’étendre les possibilités de votre navigateur, de rendre plus fluide l’expérience de surf, de rendre plus rapide certaines opérations via ajax, mais javascript :
- n’est pas activé sur tous les navigateurs
- reste lié à l’environnement de l’utilisateur, et peut crasher

Dès lors, que faire si le javascript est inopérant ?

La bonne conduite du web, les recommandations du w3c, veulent que le code soit dégradable, non intrusif et non obstructif. Qu’est ce que ça signifie ?

Non obstructif

"Non-obstructivif" signifie que l’absence d’interprétation du javascript ne doit pas empêcher le visiteur d’une page d’avoir accès à l’ensemble des informations qu’elle contient. Un bouton "en savoir plus" par exemple, destiné à faire apparaitre une portion supplémentaire de texte, ne doit pas reposer uniquement sur javascript pour être vu. On fera en sorte que par défaut, le texte entier soit visible, et que le javascript au chargement de la page, cache une partie du contenu puis le révèle sur simple clic.
"Non-obstructif" signifie aussi que l’information que permet d’obtenir une fonctionnalité en javascript sera accessible par un autre moyen. Ainsi, un bloc d’information chargé à la place d’un autre par un chargement en ajax risque d’être inaccessible si javascript est indisponible. On veillera dans ce cas à ce que des liens apparaissent par défaut, puis soient chachés au moment du chargement de javascript.

Dégradable

Un code dégradable signifie que l’ensemble des fonctionnalités que propose votre page sont pensée pour faire face au cas où le javascript est inopérant, ou qu’il soit désactivé, incompatible avec le navigateur d’un visiteur ou encore arrêté par un bug.

C’est le prolongement du concept de non-obstructivité.

Ça semble évident mais dans les faits cela demande un surcroit de travail, puisque l’on a deux cas de figure et non un seul, et donc c’est parfois laissé de côté.

Un exemple de dégradabilité

Prenons un cas concret : vous avez fait un code simple qui affiche une image dans un popup lorsque l’on clique sur sa vignette. On imagine ici une fonction "popup()" qui ouvre une fenêtre avec l’image dont la source lui est envoyée.

<a href="javascript:popup('monimage.jpg')"><img src="mavignette.jpg" alt="cliquez" /></a>

Problème : si javascript n’est pas activé ou qu’un bug existe dans mon code, cette image restera invisible. Il faut donc faire en sorte que l’image soit accessible sans javascript.

On fera donc un code du type :

<a href="monimage.jpg" onClick="popup('monimage.jpg')"><img src="mavignette.jpg" alt="cliquez" /></a>

De cette manière, si le javascript n’est pas disponible, l’image s’affichera dans la fenêtre du navigateur. Pas des plus élégant, mais la dégradabilité signifie que l’information reste accessible, pas que l’on fait aussi bien que le javascript.
Notons qu’on s’arrangera pour que javascript inhibe le comportement du lien pour éviter d’avoir un popup + l’image qui s’ouvre dans la page par l’action du href du lien. C’est le fameux surcroit de travail dont je parlais, ici pas très lourd.

Le web 2.0 regorge de bloc loadés en ajax, de formulaire dynamique, ces cas de figure demandent quand à eux plus de travail pour une dégradabilité efficace. Les librairies javascript se chargent souvent d’une partie de celle-ci, heureusement.

Code non-intrusif

Le w3c ne recommande pas seulement la dégradabilité, il demande aussi une séparation des codes. Qu’il n’y aie pas intrusion du code javascript (ni css d’ailleurs) dans le code html, d’où le terme "non-intrusif".

Or, dans notre exemple simple, j’ai placé du code directement dans les balises html, dans les deux cas. Comment faire pour arriver à associer du javascript dans une page web sans le placer dans le code ?

D’abord il nous faudra placer le code javascript dans un fichier externe en plaçant dans le head un appel à un fichier .js :

<script type="text/javascript" src="monjs.js"></script>

Ensuite, on utilisera une librairie javascript (ici, jquery) pour placer le javascript dans la page après son chargement :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="monjs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("a.popup").each(function(){
       var monimage=$(this).attr("href");
       popup(monimage);
       return false;
   });
});
</script>

Et dans le html

<a href="monimage.jpg" alt="mon image" class="popup"><img src="mavignette.jpg" /></a>

Là, c’est plus propre. Le code jquery permet à tout lien qui tag "a" et la classe "popup" d’ouvrir l’image mise dans le href avec la fonction popup, au lieu d’ouvrir l’image dans la page.

Voilà, notre code est non intrusif et dégradable. En outre, nous avons au passage fait un script générique : je peux l’utiliser pour toute vignette à laquelle j’associe la classe "popup". Pratique.