Niveau Niveau confirmé

Comment bien coder en Javascript ?

Tutorieljavascript

Publié par koala64 le 11 Octobre 2006, mis à jour le 02 Novembre 2012 (119821 lectures)

javascript bonnes pratiques code optimiser obstrusif

Cet article vous montre, au travers de bonnes pratiques, comment obtenir un code Javascript non intrusif, évolutif, accessible, facilitant la maintenance et minimisant les risques d'interaction. Ce document regroupe diverses notions de base et d'autres plus avancées telles que les tests de fonctions, les variables globales, la séparation de la structure, de la présentation, du comportement voire des données, le modèle objet, les littéraux, une introduction à JSON ou encore la gestion des événements.

Une bonne page web doit être consultable et entièrement fonctionnelle sans Javascript. Ce langage est optionnel du fait que tout le monde n'en dispose pas. Aussi, Javascript est principalement utile lorsqu'il s'agit d'améliorer et d'étendre le comportement de vos pages.

Cela veut donc dire que vous ne disposez pas forcément de toutes les fonctionnalités de votre page si ce langage est indisponible. En revanche, chacun des éléments présents dans votre page fonctionne (liens, boutons, etc...). Si un bouton ne fonctionne pas sans Javascript, c'est que celui-ci n'a pas sa place dans le code XHTML et qu'il devrait être créé via le script. Les codes suivants illustrent ces propos.

Mauvais code pour un lien d'impression :

<a href="#" onclick="window.print(); return false;">Imprimer</a>

Résultat (lien présent mais non fonctionnel sans Javascript) :

Imprimer

Bon code pour un lien d'impression :

<script type="text/javascript"><!--

function fnInsertPrint()
{
   // Création d'un lien
   var oA = document.createElement('a');
   oA.setAttribute('href', '#');
   var oTxtA = document.createTextNode('Imprimer');
   oA.appendChild(oTxtA);

   // Affectation de la méthode print() au clic sur le lien
   oA.onclick = function() { window.print(); return false; }
	
   // Positionnement du lien dans la page
   var oCont = document.getElementById('conteneur');
   if(!oCont) return;
   oCont.appendChild(oA);
}
// Lancement de la fonction fnInsertPrint()
fnInsertPrint();

//--></script>

Résultat (lien optionnel disponible avec JS) :

Nota : return false; empêche le navigateur de suivre le lien lorsque Javascript est activé et if(!oCont) return; annule l'insertion du lien si le conteneur récepteur n'existe pas. (bonne pratique à retenir)

Pour les mêmes raisons, on évite l'ajout de contenu via un document.write(). Les méthodes d'écriture doivent être réservées à ces contenus optionnels.

Méthode d'insertion de contenu à éviter :

<script type="text/javascript"><!--

document.write('Salut, ça va ?');

//--></script>

Résultat (disponible uniquement avec JS) :

Quiz