Avant Mootools
Pour rappel, en javascript, tout est objet. A tel point que même les fonctions sont des objets... D'ailleurs, pour nous embrouiller l'esprit, créer une classe (à l'ancienne mode) revenait à écrire une fonction en attribuant des propriétés... Heureusement, Mootools apporte une méthodologie différente qui rendra le code plus clair.
Pour l'heure, un petit rappel est important. En javascript, nous avons une série de types de base: int, float, char, string, array qui représentent respectivement un entier, un nombre décimal, un caractère, une chaine de caractère et un tableau.
Tout ces éléments sont des objets qui ont de méthodes et des propriétés.
Javascript permet non seulement de scripter avec ces types, mais aussi (et surtout !) de pouvoir manipuler la page affichée. C'est en l'occurrence sont but propre et précis. Javascript permet donc de récupérer une descente d'objet à partir de l'objet "window". Le document en lui même est "window.document" et le corps est "window.document.body"...
"window" est appelé implicitement, vous pouvez directement appeler "document" dans appel à "window".
Etant donné que la page web est une série d'éléments avec des attributs, javascript permet de les récupérer de différentes manières. Par exemple par leur identifiant unique ou leur classe. Voici par exemple un élément HTML:
<div id="foo">Test de contenu</div>
Anciennement (car nous allons utiliser Mootools pour nous simplifier la vie), nous utilisions document.getElementById('foo')
pour récupérer une référence de l'objet qui a un identifiant nommé "foo". Cet élément peut être un div, une images, un lien...
bref tout élément de la page.
Puis nous faisions des manipulations sur l'objet, comme par exemple changer le style, changer le contenu, etc...
Par exemple, changer la bordure revenait à faire: document.getElementById('foo').style.border="1px solid blue". La ligne parait longue, et
elle l'est... mais ça va changer.
Avec Mootools
Mootools va surcharger l'ensemble des objets de la page pour leur ajouter des méthodes. De plus, des "accesseurs" ont été créé, réduisant le code que nous devrons taper pour prendre un objet.
Mieux encore, nous allons pouvoir animer et modifier littéralement l'ensemble de la page avec une facilité déconcertante. Enfin, nous allons avoir des classe Ajax permettant de ne pas avoir à recoder la récupération du HTTPRequest-Object.
Attention !
Il est important de comprendre que nous ne pourrons utiliser Mootools et l'arbre dom que si, et seulement si, l'arbre est accessible. De ce fait, tous les exemples que vous verrez devrons être appelés de cette manière:
window.addEvent('domready',function (){
//ici le code
});
Si vous ne faites pas cela, vous risquez fortement de voir une erreur javascript comme quoi des méthodes n'existent pas, ou que les éléments n'ont pas de propriétés...
Justement, parlons de DOM
Suite