n’est pas activé sur tous les navigateurs
La bonne conduite du web, les recommandations du web, veulent que le code soit dégradable, et encore mieux, non intrusif. Qu’est ce que ça signifie ?
Dégradable Un code dégradable signifie que l’ensemble des fonctionnalités que propose votre page reste accessible si le javascript est inopérant, qu’il soit désactivé, incompatible avec le navigateur d’un visiteur ou encore arreté par un bug.
Ç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.