Comment bien coder en Javascript ?

Prenons un cas très simpliste mais qui explique correctement la démarche à suivre :

<a href="coucou.htm"
   style="color: red;"
   onclick="alert('coucou !'); return false;">
      Hello world !
</a>

Comme vous l'aurez compris, ce code alerte l'utilisateur d'un "coucou !" lorsqu'on clique sur le lien. Doter toutes vos balises de ces attributs alourdit considérablement vos pages. La sémantique en souffre ainsi que la maintenance. Le langage CSS nous a montré comment externaliser les styles en accédant directement à la balise ou en mettant un identifiant ou une classe afin de lier la propriété de style au lien. Cela comporte de nombreux avantages tels que l'amélioration de la sémantique, du poids, de la portabilité, de la maintenance et j'en passe. Et bien devinez quoi ? On peut en faire de même avec DOM, avec les mêmes avantages. Considérons que nous avons plusieurs liens disséminés sur la page, nous n'écrivons plus que :

<a href="coucou.htm" class="alert">
      Hello world !
</a>

Pour accéder aux liens via CSS, vous mettez dans votre feuille de style:

a.alert { color: red; }

Pour accéder aux liens via Javascript, vous pouvez vous servir de la méthode getElementsByTagName. On crée donc un fichier à part où on place un objet comme ci-dessous tout en prenant soin de charger la méthode une fois la page XHTML interprétée. Cela donne :

// Alerte au clic sur des éléments particuliers
function Alert(sA)
{
   if(!document.getElementsByTagName) return;

   var oA = document.getElementsByTagName(sA);
   if(!oA) return;

   var iI = oA.length - 1;
	
   for(iI; iI >= 0; iI--)
   {
      if(oA[iI].className == 'alert')
      {
         oA[iI].onclick = function()
         {
            window.alert('coucou');
            return false;
         };
      }
   }
}
// Initialisation une fois la page chargée
window.onload = function()
{
   Alert('a');
};

On retrouve ici la même fonction que précédemment mais vous pouvez maintenant séparer votre code Javascript du code XHTML en l'incluant dans un fichier externe (Alert.js par exemple) et en le liant à votre page via la déclaration suivante :

<script type="text/javascript" src="Alert.js"></script>

Comme nous nous servons de l'attribut class pour identifier nos liens et vu que la page XHTML est complètement interprétée lorsque le script est lancé, nous pouvons placer notre déclaration dans l'entête head du document. Dorénavant, à chaque classe "alert" rencontrée sur un lien, votre alerte se lancera. Il est donc inutile de répéter les codes CSS et JS dans la page XHTML.

Aussi, lorsque vous utilisez un gestionnaire d'événement (tel que onload ou onclick pour l'exemple décrit ci-dessus), vous devez lui affecter une propriété telle que la définition d'une fonction et non directement l'éxécutable sous peine de ne pas fonctionner (onload) ou de transmettre l'argument de la fonction sans attendre l'événement (onclick).