Javascript non-obstructif

Marc

Marc


Feb 27th 2009 in code

Avant d’entrer dans le vif du sujet, il est important de comprendre plusieurs concepts.

La mise en place de codes Javascript non-obstructif permet de faire fonctionner le site sans l’utilisation du javascript. (aujourd’hui presque tout le monde active le javascript ce qui n’est donc pas l’argument principal).

Cette technique permet surtout de garder le code xhtml propre et de l’utiliser pour ce dont il est conçu, c’est-à-dire, l’organisation du contenu.

Un code xhtml tout basique, il s’agît d’un bouton de formulaire de ce type :

[code lang="html"]

[/code]

ce bout de code est sémantiquement correct, il décrit un bouton tel que spécifié dans les standards du W3C.

Mais nous aimerions que le design de celui-ci soit plus … disons …. attractif comme ça :

Et moi un beau bouton


 

Pour ce faire, il faut donc dynamiquement remplacer le code html du bouton par une balise de type lien. Nous en reparlerons, mais l’utilisation de la technique « sliding-doors » permet d’avoir un bouton redimentionnable.

Le framework jQuery permet facilement d’effectuer ce remplacement.

[code lang="javascript"]
$(document).ready(function() {
// dès que la page est chargée
// pour chaque élément contenant la class "submitbutton"
$('.submitButton').each(function(e){
//récupéré les attributs suivants
var val = $(this).attr('value');
var formsend = $(this).attr('name');
var bt_id = $(this).attr('id');
// remplacer le bouton par un lien
$(this).parent().html(''+val+'').click(function(){
// comportement du lien lors du clique
$('form#'+formsend).submit();
});

});
});
[/code]

La propreté du code dans une page web, c’est surtout les avantages suivants :

  • Une meilleure sémantique améliore grandement le référencement dans les moteurs de recherche
  • Une meilleure « maintenabilité » du code, et donc moins de frais :-)



Voir la démo


Pour aller plus loin