Apprendre JQuery - Leçon : Ne pas dépendre de Javascript

Afin de devenir un développeur Javascript efficace, il faut toujours avoir en perspective qu'il ne faut pas dépendre de ce dernier afin de délivrer l'information. Il est facile et efficace d'utiliser Javascript afin d'afficher de l'information, mais on ne peut assumer que Javascript est activé sur le navigateur du client. Cette règle d'art peut aussi s'appliquer à beaucoup d'autre technologie comme Java ou Flash par exemple. Il faut donc s'assurer que l'information soit quand même disponible au cas ou ces technologies serait désactivé.

Mauvaise méthode :

Le code suivant montre ce qu'il faut éviter de reproduire. Ce dernier ne fait qu'afficher un message du type : Bonjour ou Bonsoir en fontion de l'heure de la journée. L'exemple peut vous semblez banal, mais vous serez en mesure de comprendre facilement oè nous voulons en venir.
<script language="javascript">
   var now = new Date();
   if(now.getHours() < 12)
      document.write('Bon matin!');
   else
      document.write('Bonne après-midi!');
</script>
Le script ici présent est 100% fonctionnel alors où est le problème me direz-vous ? En effet, si le navigateur client a désactivé le Javascript, un espace blanc sera rendu à l'écran ou rien n'y sera écrit. Ceci n'est pas très professionnel! Corrigons donc cette lacune.

Bonne méthode :

Voici ici comment à l'aide de JQuery et de quelques manipulations, rendre notre code plus efficace dans les cas où le Javascript serait désactivé. Nous allons aussi, utilisé un code orienté (X)HTML qui est plus sémantique.
<p title="Message d'accueil">Bon matin!</p>
   En incluant l'attribut «title», le paragraphe peut est sélectionné grâce aux sélecteurs de JQuery. Ce dernier pourra ensuite être modifié en fonction de l'heure. Par contre, dans le cas où Javascript serait désactivé, le message «Bon matin!» serait quand même visible à la place d'un espace blanc sans texte.
var now = new Date();
if(now.getHours() >= 12)
{
   var MessageAccueil = $('p[title="Message d'accueil"]');
   MessageAccueil.text('Bonne après-midi!');
}

Ajouter cette page à votre Digg-Like préféré
Reddit!