Mootools en 30 jours : jour 4 - les fonctions

I. Introduction aux fonctions avec Mootools 1.2

Bienvenue dans le jour 4 des 30 jours de Mootools. Si vous ne l'avez pas encore fait, lisez les précédents Tutoriels Mootools de la série. Aujourd'hui nous allons faire un pas en arrière avec Mootools pour nous concentrer sur les fonctions de base de javascript.

Toutefois le thème de ce tutoriel ne va pas s'éloigner beaucoup de Mootools, vous devez savoir où placer des fonctions pour bien les utiliser avec Mootools. Nous avons déjà vu précédemment un exemple de code avec la fonction domready. Quand vous faites des fonctions, vous préférez les placer en dehors de la boucle domready. Les fonctions ne sont pas exécutées tant que vous ne les avez pas appelé à l'intérieur du domready.

II. Explications

Généralement c'est une bonne idée d'essayer de garder le code de vos fonctions en dehors du corps de votre page html, et de l'appeler avec un include javascript. Par contre quand vous faites justes des tests avec le code, je trouve plus pratique de garder tout le code dans la même page. Nous utilisons les conventions suivantes pour ces tutoriels :

<script type="text/javascript">
/*
* Les définitions de fonctions vont ici
/

 
window.addEvent('domready', function() {
/
*les appels de fonctions vont ici
*/

});
script>

Tous les exemples suivent ce format, ce qui exécutera la fonction après le chargement de la page. Elles ont également toutes des boutons sur lesquels vous pouvez appuyer pour voir les résultats. C'est réalisé en utilisant le gestionnaire d'évènements de Mootools dont nous parlerons plus en détails demain.

Les Bases

Il y a plusieurs façons de définir une fonction en javascript—puisque nous nous attardons sur Mootools nous utiliserons leur méthode préférée. L'exemple ci-dessous est la fonction la plus basique possible. Nous déclarons une variable qui s'appelle simple_function et la définissons en tant que fonction :

var simple_function = function(){

Puis nous ajoutons un message d'avertissement (alert) qui sera exécuté lorsque cette fonction sera appelée :

alert('Voici une fonction simple');

Enfin, nous fermons la définition de la fonction avec une accolade de fermeture :

}

Cette accolade de fermerture est une des choses les plus faciles à assimiler, mais peut vite devenir un cauchemar à la maintenance—ça peut être une bonne idée de vérifier plusieurs fois que vous avez bien fermé les définitions de vos fonctions.

Dans l'exemple ci-dessous, tout est rassemblé. Après avoir déclaré la fonction, nous ajoutons un appel à la fonction dans l'évènement domready qui s'exécutera à la fin du chargement de la page. Appuyez sur le bouton ci-dessous pour voir le résultat d'un appel à simple_function(); .

//Definissez simple_function en tant que function
var simple_function = function(){
alert('Voici une fonction simple');
}
 
window.addEvent('domready', function() {
//Appelez simple_function quand le dom(page) est prêt
simple_function();
});


Paramètre simple

Quand vous avez un morceau de code, vous pouvez facilement l'appeler de partout et c'est pratique, c'est même encore plus pratique quand vous pouvez lui passer des paramètres (informations) avec lesquels il travaillera. Pour utiliser les paramètres avec les fonctions, il vous faudra ajouter un nom de variable dans les parenthèses après le nom de la fonction, comme ceci :

var name_of_function = function(name_of_the_parameter){
/*le code de la fonction va ici*/
}

Quand c'est fait, la variable est disponible pour une utilisation à l'intérieur de la fonction. Bien que vous pouvez appeler un paramètre à peu près comme vous le souhaitez, le mieux est de spécifier un nom de paramètre aussi représentatif que possible. Par exemple, si vous aviez à passer un paramètre qui serait le nom d'une ville, appeler le paramètre nom_ville serait préférable que de lui mettre un nom plus vague (comme user_input).

Dans l'exemple ci-dessous, nous définissons une fonction qui prend un seul paramètre (appelé parameter) et qui envoie une alerte contenant la valeur du paramètre en question. Notez que le partie du message est entourée d'apostrophes, mais le paramètre ne l'est pas. Quand vous voulez utiliser un paramètre ou tout autre variable en combinaison avec une chaine de caractère en dur, il vous faudra utiliser l'opérateur + pour faire une concaténation, comme ci-dessous :

var single_parameter_function = function(parameter){
alert('le parametre est : ' + parameter);
}
 
window.addEvent('domready', function(){
single_parameter_function('ceci est un parametre');
});


Plusieurs Paramètres

Javascript ne limite pas le nombre de paramètres que vous pouvez passer à une fonction. C'est généralement une bonne idée d'essayer de garder le nombre de paramètres que vous passer à une fonction au minimum pour la lisibilité. Les multiples paramètres d'une définition de fonction sont séparés par des virgules, mais sinon ils se comportent de la même façon que lorsqu'il n'y a qu'un seul paramètre. L'exemple de fonction ci-dessous prend deux paramètres, et place la somme des deux dans la variable third_number comme ceci :

var third_number = first_number + second_number;

Puis l'opérateur + est utilisé d'une façon un peu différente pour joindre les résultats ensemble dans une chaine de caractères :

alert(first_number + " plus " + second_number + " equals " + third_number);

Cela peut paraître assez compliqué et confus au premier abord, mais vous allez voir que ça ne l'est pas. Si vous utilisez le + entre des nombres, vous faites une addition de ces nombres. Si vous utilisez le + entre une combinaison de nombres et chaines de caractères, vous les concaténez (regroupez bout à bout pour former une seule chaine de caractères).

var two_parameter_function = function(first_number, second_number){
//Renvoie la somme de first_number et second_number
var third_number = first_number + second_number;
 
// affiche le resultat
alert(first_number + " plus " + second_number + " est egal a " + third_number);
}
 
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});


Renvoyer une valeur

Afficher les résultats d'une fonction dans un alert peut être d'une grande utilité, mais parfois vous voulez prendre le résultat et l'utiliser ailleurs. Pour réaliser ceci,  vous devez utiliser l'instruction "return" dans la fonction. L'exemple ci-dessous fonctionne presque pareil que l'exemple précédent, sauf qu'au lieu d'envoyer une alerte, le script retourne la somme des deux nombres ici :

return third_number;

Vous remarquerez que l'on en fait un peu plus dans le domready. Pour afficher cette valeur, nous assignons la valeur retournée à un paramètre qui s'appelle return_value puis affichons une alerte.

var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
alert("la valeur renvoyee est : " + return_value);
});



Fonctions en paramètres

Si vous regardez au code du domready de Mootools dans lequel nous plaçons des choses, vous remarquerez que l'on passe une fonction en paramètre :

window.addEvent('domready', function(){
/*code*/
});

Une fonction passée en paramètre comme cela fait référence à une fonction anonyme :

function(){
/*code*/
}

Dans les commentaires du Jour 1 quelqu'un a fait remarqué qu'il y a une autre méthode pour utiliser le domready sans utiliser de fonctions anonymes. Cela donnerait quelque chose comme :

//Construction de la fonction à appeler dans domready
var domready_function(){
/*code*/
}
 
//Assignation de la fonction à l'évènement domready
window.addEvent('domready', domready_function);

Je ne suis pas au courant de l'existence d'une différence sur la performance ou fonctionnalité de chacune des deux méthodes, donc je pense que c'est essentiellement un choix de style. Pour le moment nous allons continuer avec notre méthode, et si quelqu'un a plus d'informations, qu'il nous le fasse savoir.

Exemples

Pour vous mettre un peu en appétit pour demain (et combler le manque de mootools), je vous présente une fonction un peu inutile (juste pour le fun) permettant de changer la couleur de fond de cette page à la volée :

 
var changeColor = function(){
//Utilisez get pour recuperer les valeurs
//de la couleur à partir des champs de texte
//( http://docs.mootools.net/Element/Element#Element:get )
var red = $('red').get('value');
var green = $('green').get('value');
var blue = $('blue').get('value');
 
//Assurez-vous d'avoir des nombres entiers
//( http://docs.mootools.net/Native/Number#Number:toInt )
red = red.toInt();
green = green.toInt();
blue = blue.toInt();
 
//Assurez-vous d'avoir des nombres compris
//entre 1 et 255, puis arrondir si besoin
//( http://docs.mootools.net/Native/Number#Number:limit )
red = red.limit(1, 255);
green = green.limit(1, 255);
blue = blue.limit(1, 255);
 
//Recuperer le code hexa
//( http://docs.mootools.net/Native/Array/#Array:rgbToHex )
var color = [red, green, blue].rgbToHex();
 
//Changer la couleur de fond de cette page
//( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
$('body_wrap').setStyle('background', color);
 
}
 
var resetColor = function(){
//On remet notre image d'arriere-plan
//Vous pourriez aussi remettre une couleur etc.
//( http://docs.mootools.net/Element/Element.Style#Element:setStyle )
$('body_wrap').setStyle('background', 'url(/img/arriere_plan.gif)');
}
 
window.addEvent('domready', function(){
//Ajouter l'évènement click sur les boutons
//(nous en verrons plus là-dessus demain)
//( http://docs.mootools.net/Element/Element.Event#Element:addEvent )
$('change').addEvent('click', changeColor);
$('reset').addEvent('click', resetColor);
});

Rouge :

Vert :

Bleu :


III. Conclusion du tutorial

Pour en savoir plus…

Télécharger un zip avec tout ce qu'il vous faut pour débuter

Il inclut le noyau Mootools 1.2, un fichier javascript externe, une page html simple et un fichier css.

Plus sur les fonctions Javascript

Quirksmode sur les fonctions Javascript

Documentation de l'exemple

Utilities/DomReady
Number.toInt()
Number.limit()
Array.rgbToHex()
Element.setStyle()
Element.addEvent()

Le tutoriel Mootools 1.2 de Demain - Les évènements

Voir le tutoriel de demain : Jour 5 - Les évènements