JabbaScript pour les nuls

Je me suis enfin mis au Web 2.0 ! Le vrai et pas celui qui fait style c'est du Web 2.0 alors que c'est du Flash. Comme je suis gentil et que ça m'a énervé d'avoir du mal à trouver de la doc la dessus, je vous fait un petit pense-bête sur ce qu'il faut savoir en JavaScript pour faire du vrai Web 2.0 de 1337.

1) Le DOM

Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.

Pas très clair n'est-ce pas ? En fait il s'agit d'une manière simplifiée pour manipuler un document, ou plutôt ce qui le compose. Il est essentiel de manipuler le DOM pour faire du Web 2.0, sinon c'est du Web 1.5 que l'on fait (et ça, c'est pas très l33t)... Pour mieux illustrer je pense que des exemples seraient plus parlant, je vais donc vous parler des noeuds (ou node est anglais) :

Petit rappel, pour sélectionner un élément sur lequel on veut travailler : document.getElementById('id_de_l_element') ou si vous ne voulez pas vous encombrer d'id de partout document.getElementsByTagName('nom_de_l_element') (je vous déconseille cette méthode pour sélectionner des éléments précis).
Notez bien que getElementsByTagName prend un S à elements, alors que getElementbyId non, de plus le premier retourne un tableau d'éléments, alors que le second renvoi un seul élément (logique : il peut y avoir plusieurs balises du même type, mais normalement qu'une seule balise avec tel identifiant).

createElement() : Cette méthode s'applique à l'objet document, comme ceci : document.createElement('div');
Utiliser cette méthode ne revient pas à insérer une balise, mais à la créer seulement, il faut ensuite l'ajouter au document.

appendChild() : Cette méthode sert à rajouter un noeud à un élément :

var menu = document.getElementById('menu');
var maDiv = document.createElement('div');
menu.appendChild(maDiv);

Dans cette exemple on commence par sélectionner le menu, ensuite on crée une balise div, puis on la rajoute dans le menu (menu.appendChild(maDiv) = menu -> ajouter (maDiv) ).

createTextNode() : Crée un noeud texte, permet d'insérer du texte dans une balise par exemple.

var menu = document.getElementById('menu');
var maDiv = document.createElement('div');
var texte = document.createTextNode('Yeah! l33t !');
maDiv.appendChild(texte);
menu.appendChild(maDiv);

Comme vous pouvez le voir cette méthode s'applique à document tout comme createElement, il suffit de rajouter le noeud à un élément ensuite.

A vrai dire je ne compte pas énumérer toute les méthodes et propriétés qui s'appliquent aux noeuds, SELFHTML le fait à ma place (un vrai bible cette section), ainsi que cette section relative à document. Vous pouvez trouver que de manipuler le DOM est lourd en code, et je serais assez d'accord avec vous mais il s'agit de la seule alternative pour avoir un code JavaScript propre. En quelque lignes vous pouvez faire quelque chose de plus propre qu'un innerHTML (qui est à éviter au maximum, même si ne plus s'en servir est assez dur)

2) Sa marche pas !

Le DOM c'est bien beau, mais vous vous rendrez vite compte que même avec du JavaScript les 'différences' de certains navigateurs vous embêteront (non non, je ne vise aucun navigateur). Voila des astuces pour que vous n'ayez plus à chercher :

Attribuer un onclick, ou un autre gestionnaire d'évènement : Il y a plusieurs méthode pour assigner un attribut à un noeud, mon_element.setAttribute('onclick', alert('espèce de geek !')), mon_element.onclick = alert('espèce de geek !'); ou encore créer un noeud d'attribut. Mais... cela ne fonctionne pas partout, en particulier sur notre navigateur préféré qu'est Internet Explorer... Pour arranger ça, il y a deux solutions :

• mon_element.onclick = function () { alert('espèce de geek !'); };
  C'était pas méchant... mais si vous essayez d'utiliser ça dans une boucle vous risquez d'avoir des problèmes...
  En fait cette astuce crée bien un onclick sur les élements, mais il applique la valeur une fois la boucle terminée.
• mon_element.onclick = new Function('alert(\'espèce de geek\');');
  C'est déjà un peu plus compliquer, et je ne me tenterai pas à vous l'expliquer... Je vous conseille de l'utiliser dans des boucles, mais utilisez l'autre méthode pour le reste.
  Notez bien que function prend un F Majuscule, et qu'il prend en paramètre une chaîne de caractère, si jamais vous voulez utiliser une variable dans la fonction il faut échapper les quotes :
  mon_element.onclick = new Function('alert(\'geek N°' + numero + '\');');

3) Hey ho ! Il manque l'AjAx pour que ce soit Ouèbeu 2.0 !

Oui c'est vrai... Mais vous n'en avez pas eu assez ? non ? eh bien utilisez ma classe XHRConnexion() ou encore ma classe XHRConnexion() spécial débuggage.
Pour s'en servir c'est très simple :

• Chargez le fichier (non je ne vous dirai pas comment, si vous ne savez pas vous êtes trop nul !! booouuuhhh!!)
• Créez l'objet XHRConnexion comme cela :
  var ajax_roxor = XHRConnexion();
ou var ajax_roxor = XHRConnexion(true, 'div_debug'); pour le mode débuggage (utilisez le bon fichier bien sur...)
le true signifie que vous activez le debuggage, le 'div_debug' correspond à l'id d'un élément ou afficher les messages.
• ajax_roxor.appendData('id', 4) : Ajoute des données à envoyer, 'id' correspond au champ, 4 à sa valeur (dans ce cas id=4 sera prêt à être envoyé)
• ajax_roxor.send('POST', ajax_de_la_balle.php); : Et on envoi !

Bon vous voyez c'est pas compliquer... Bon ok je suis loin d'avoir tout dit, mais je ferai un autre billet pour présenter plus en détail cette classe.

4) Ayè t'es prêt, tu peux aJaXeR !

Fin de l'histoire, c'est pas vraiment compliquer, mais entre manipulation de DOM, envoi de requêtes grâce à XMLHTTPrequest et des navigateurs qui n'en font qu'a leur tête on peut facilement perdre du temps... Mais avec de l'entraînement et un peu d'abnégation tu y arrivera jeune padawan !