Niveau Niveau confirmé

Comment bien coder en Javascript ?

Tutorieljavascript

Publié par koala64 (membre du staff)
le 11 Octobre 2006, mis à jour le 24 Septembre 2026 (121985 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.

Sommaire

Ne misez pas tout sur Javascript

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="#" <strong>onclick="window.print(); return false;"</strong>>Imprimer</a>

Bon code pour un lien d'impression :

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

function fnInsertPrint()
{
   <span style="font-weight: bold; color: #4D98DC">// Création d'un lien</span>
   var oA = document.createElement('a');
   oA.setAttribute('href', '#');
   var oTxtA = document.createTextNode('Imprimer');
   oA.appendChild(oTxtA);

   <span style="font-weight: bold; color: #4D98DC">// Affectation de la méthode print() au clic sur le lien</span>
   oA.onclick = function() { window.print(); return false; }

   <span style="font-weight: bold; color: #4D98DC">// Positionnement du lien dans la page</span>
   var oCont = document.getElementById('conteneur');
   if(!oCont) return;
   oCont.appendChild(oA);
}
<span style="font-weight: bold; color: #4D98DC">// Lancement de la fonction fnInsertPrint()</span>
fnInsertPrint();

//--></script>

Note: 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>

Ne misez pas tout sur Javascript

Quiz