Mootools en 30 jours : jour 3 - les tableaux

I. Introduction aux Tableaux avec Mootools 1.2

Si vous ne l'avez pas déjà fait, assurez-vous d'avoir lu le tutoriel d'hier : Jour 2 - les sélecteurs

Dans le dernier tutoriel, nous avons vu les sélecteurs, dont certains crééent des tableaux (une liste spéciale qui vous donne un contrôle intéressant sur les contenus). Aujourd'hui, nous allons voir comment utiliser les tableaux pour gérer les éléments DOM.

II. Explications

Les bases

.each();

.each(); est votre meilleur ami pour gérer les tableaux. Il apporte un moyen simple de boucler sur les itérations d'une liste d'éléments, en appliquant le script nécessaire. Par exemple, disons que vous souhaitez appeler une boite d'alerte pour chaque div d'une page:

$$('div').each(function() {
alert('a div');
});

Avec ce code html suivant, le code javascript précédent produira deux boites d'alerte, une pour chaque div.

One

Two

.each(); ne nécessite pas forcément l'utilisation de $$. Un autre moyen de créer un tableau (comme nous l'avions vu hier), est d'utiliser .getElements();.

$('body_wrap').getElements('div').each(function() {
alert('a div');
});

One

Two

Il y a encore un autre moyen d'accomplir cette même tâche en passant le tableau dans une variable, puis en utilisant .each(); sur cette variable:

//d'abord vous déclarer la variable avec "var VARIABLE_NAME"
//puis vous utiliser le signe "=" pour définir ce qui va dans la variable
//dans ce cas, un tableau de divs
var myArray = $('body_wrap').getElements('div');
 
//maintenant, vous pouvez utiliser cette variable comme un sélecteur
myArray.each(function() {
alert('a div');
});

Pour finir, vous pouvez aussi séparer votre fonction du sélecteur et de .each();. Nous parlerons plus en détails de l'utilisation des fonctions dans le tutoriel de demain, mais pour l'heure, nous pouvons en créer une très simple comme ceci:

 
var myArray = $('body_wrap').getElements('div');
 
//pour créer une nouvelle fonction, vous déclarez une variable comme avant, et la nommez
//apres le signe égal =, "function()" pour déclarer la variable comme une fonction
//puis, vous placez le code de votre fonction entre { et };
var myFunction = function() {
alert('a div');
};
 
//enfin vous appelez juste la fonction dans le .each();.
myArray.each(myFunction);

Note: Quand vous appelez une fonction comme nous l'avons fait à l'intérieur du .each();, vous n'avez pas besoin de mettre des guillemets autour du nom de la fonction.


Faire une copie d'un tableau

$A

Mootools fournit un moyen de copier simplement un tableau avec la fonction $A. Prenons un autre tableau dans une variable comme nous l'avons déjà fait plus haut :

//créez une variable tableau
var myArray = $('body_wrap').getElements('div');

Pour créer une copie du tableau :

//créez une nouvelle variable, appelée "myCopy," puis assignez 
//la copie de "myArray" à votre nouvelle variable

var myCopy = $A(myArray );

Maintenant myCopy contient les mêmes éléments que myArray.


Obtenir un élément spécifique d'un tableau

.getLast();

.getLast(); renverra le dernier élément d'un tableau. Tout d'abord on créer notre tableau :

var myArray = $('body_wrap').getElements('div');

Puis nous pouvons obtenir le dernier élément qui se trouve dans le tableau :

var lastElement = myArray.getLast();

La variable lastElement représente maintenant le dernier élément contenu dans myArray.

.getRandom();

Fonctionne comme .getLast();, mais renverra un élément du tableau au hasard.

var randomElement = myArray.getRandom();

La variable randomElement représente maintenant un élément choisi au hasard dans myArray.


Ajouter un Element à un tableau

.include();

Avec cette méthode, vous pouvez ajouter un autre objet au tableau. Placez simplement le sélecteur de l'élément dans .include(); et attachez le à votre tableau. Avec la configuration html suivante :


one

two

add to array

nous pouvons créer un tableau comme nous l'avions fait auparavant en appelant tous les divs qui sont des enfants de ‘body_wrap.’

var myArray = $('body_wrap').getElements('div');

Pour ajouter un autre élément à ce tableau, ajouter tout d'abord l'élément que vous voulez inclure dans une variable, puis utilisez la méthode .include();.

//ajouter votre element à une variable
var newToArray = $('add_to_array');
 
//puis incluez votre variable dans le tableau
myArray.include(newToArray);

Maintenant, le tableau contient chacun des éléments divs et span.

.combine();

Fonctionne juste comme .include();, sauf qu'il vous permet d'ajouter un nouveau tableau à un tableau existant sans avoir à vous inquiétez d'un contenu dupliqué. Disons que nous avons deux tableaux venant du code html suivant :


one

two

add to array
add to array, also
add to array, too

Nous pouvons alors construire les deux tableaux suivants :

//créez votre tableau comme nous l'avons fait auparavant
var myArray= $('body_wrap').getElements('div');
 
//puis créez un tableau de tous les éléments avec .class_name
var newArrayToArray = $$('.class_name');

Maintenant, nous pouvons utiliser .combine(); pour combiner les deux tableaux, et la méthode s'occupera de tous les contenus en double pour nous.

//puis combinez newArrayToArray avec myArray
myArray.combine(newArrayToArray );

Maintenant myArray contient tous les éléments de newArraytoArray.


Exemples

Les tableaux vous permettent d'itérer dans une liste d'éléments, et d'appliquer le même morceau de code sur chacun d'eux. Dans cet exemple, remarquez l'utilisation de “item” comme symbole de l'élément courant.

//créez un tableau de tous les éléments de #body_wrap avec la classe .class_name
var myArray = $('body_wrap').getElements('.class_name');
 
//créons d'abord un nouvel élément à ajouter à notre tableau
var addSpan = $('addtoarray');
//puis créons un tableau à combiner avec notre tableau
var addMany = $$('.addMany');
 
//maintenant nous pouvons inclure le nouveau span
myArray.include(addSpan);
//et combiner notre tableau addMany avec myArray
myArray.combine(addMany);
 
//créez une fonction pour passer en revue chaque ITEM du tableau
var myArrayFunction = function(item) {
//item fait maintenant référence à l'élément courant du tableau
item.setStyle('background-color', '#eee');
}
 
//puis vous pouvez appeler la fonction myArrayFunction
//pour CHAQUE élément (item) du tableau

myArray.each(myArrayFunction);

one

two

three

add to array

one of many

two of many

III. Conclusion du tutorial

Pour en savoir plus…

Ce tutoriel ne couvre pas toutes les choses merveilleuses que vous pouvez faire avec les tableaux, mais j'espère qu'il vous aura donner une idée de ce que Mootools vous permet de faire. Pour en savoir plus sur les tableaux, regardez de plus près :

Téléchargez un zip contenant tout ce qu'il faut pour débuter

Il inclut un fichier html simple, le noyau Mootools 1.2, un fichier JavaScript externe, un fichier css et l'exemple ci-dessus.

Demain

Demain nous nous intéresserons aux fonctions et à leur utilisation avec Mootools.

Demandes de tutoriel ou Questions

Pendant les prochains jours, nous continuerons à couvrir les bases, mais au fil des semaines nous nous attaquerons à des projets un peu plus complexes, et j'aimerais beaucoup savoir quels sujets vous intéressent le plus. N'hésitez pas à me laisser un message avec vos suggestions, commentaires ou questions. Merci, et j'espère que vous trouvera cela utile.