Mootools en 30 jours : jour 8 - les nombres

I. Introduction au filtrage des nombres avec Mootools

Aujourd'hui nous allons commencer à regarder de quelle façon Mootools peut filtrer les entrées des utilisateurs. Nous allons commencer avec quelques opérations basiques sur les nombres pour aujourd'hui, et demain nous explorerons les opérations sur les chaines de caractères. Si vous n'avez pas encore regardé le reste des tutoriels sur Mootools 1.2, je vous recommande vivement de le faire avant de continuer.

NOTE: Le filtrage d'entrée en Javascript assure le bon fonctionnement de votre code, il ne doit PAS être utilisé comme remplacement d'un filtrage côté serveur, requis pour protéger vos applications contre les attaques par injection.

II. Explications

Nombres

Dans le Jour 4 nous avions terminé avec un exemple qui prenait des valeurs RGB à partir de champs de texte, et les utilisait pour changer la couleur de fond de la page, aujourd'hui nous allons utiliser le code de cet exemple, et allons l'optimiser un peu.

rgbToHex()

Techniquement parlant, la fonction rgbToHex() vient de la collection Array. Comme c'est une fonction tableau faites pour gérer des nombres, nous allons y jeter un oeil aujourd'hui. rgbToHex() est assez simple à utiliser :

function changeColor(red_value, green_value, blue_value){
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converti en : ' + color);
}
 
changeColor('28', '17', '47')



Cela fonctionne parfaitement, tant que les valeurs du rouge, vert, et bleu sont des nombres. Mais voyez ce qu'il se passe si vous passez quelque chose qui n'est pas un nombre :



Le NaN que vous voyez apparaître signifie Not a Number. Si c'est vous qui tapez les valeurs des couleurs en dur dans le code, ce problème ne se posera certainement pas. Mais si vous récupérez ces valeurs à partir de champs de texte ou d'une autre source, vous allez sûrement avoir des situations dans lesquelles les valeurs entrées seront invalides.

toInt()

Maintenant il faut nous assurer que la fonction rgbToHex() ne prend que des nombres qui lui sont passés - c'est là que la fonction toInt() intervient. toInt() est une autre fonction facile à utiliser. Vous l'appelez sur une variable et elle fait de son mieux pour obtenir/convertir en un nombre entier quoi que contienne la variable.

var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
alert ('Meilleur resultat : ' + number);
}



Comme vous pouvez le voir, toInt() ne peut pas gérer conrrectement tous les cas de figure, mais grâce à une autre partie de Mootools appelée $type(), nous pouvons aussi gérer ce problème

$type()

$type() est une autre fonction incroyablement simple et utile pensée par l'équipe de Mootools. Elle examine la variable que vous lui passez, et retourne une chaine vous indiquant le type de cette variable :

var checkType(variable_to_check){
var variable_type = $type(variable_to_check);
alert("La variable est un : " + variable_type);
}



Il y a beaucoup d'autres types que $type() détecte - vous pouvez avoir la liste complète de ceux-ci dans la documentation Core.$type(). Pour le moment, la seule chose qui nous importe est de détecter les entiers. Si nous utilisons $type() et le plaçons dans la fonction toIntDemo(), nous pouvons assez facilement gérer les entrées que toInt() peut recevoir :

var toIntDemo = function(make_me_a_number){
//Essaie de convertir l'entrée en nombre
var number = make_me_a_number.toInt();
 
//si ça n'a pas marcher, on met le nombre à 0
if ($type(number) != 'number'){number = 0;}
alert('Meilleur resultat : ' + number);
}



Quand nous mettons tout ça ensemble dans changeColor(), nous avons une solution qui fonctionne presque parfaitement : 

var changeColor_2 = function(red_value, green_value, blue_value){
//essaie de vérifier tous sont des nombres
red_value = red_value.toInt();
green_value = green_value.toInt();
blue_value = blue_value.toInt();
 
//Met une valeur par défaut pour tout ceux
//qui ne sont pas des nombres
if ($type(red_value) != 'number'){red_value = 0;}
if ($type(green_value) != 'number'){green_value = 0;}
if ($type(blue_value) != 'number'){blue_value = 0;}
 
//Calcule la valeur hexa
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converti en : ' + color);
}



La dernière fonction passe à la fonction rgbToHex() des nombres en dehors de la plage RGB 0 - 255 valide, qui converti ces valeurs dans le code hexa éqquivalent. Malheureusement cela signifie que si nous recevons un nombre en entrée dont la valeur est en dehors de cette plage, nous n'aurons pas une valeur hexa de couleur valide. Heureusement, il y a tout ce qu'il faut dans le kit Mootools, nous pouvons également gérer ce problème.

limit()

La fonction Mootools limit() va pouvoir s'occuper de ça. Vous l'appelez sur un nombre en spécifiant en arguments les valeurs minimales et maximales que le nombre peut prendre, et si le nombre est en dehors des limites que vous avez définies, la fonction arrondi comme il faut. C'est important de garder en tête que limit NECESSITE un entier pour fonctionner, donc c'est généralement une bonne idée d'utiliser toInt() sur ce qui doit être un nombre avant d'utiliser limit() (ou quoi que ce soit d'autre dans la Collection des Nombres).

var limitDemo = function(number_to_limit){
//Fait de son mieux pour obtenir un entier
number_to_limit = number_to_limit.toInt();
 
//limite la valeur à la plage spécifiée
var limited_number = number_to_limit.limit(0, 255);
alert("Nombre limité à : " + limited_number);
}




Mettons tout ensemble

var changeColor = function(red_value, green_value, blue_value){
//vérifie que tous sont des entiers
red_value = red_value.toInt();
green_value = green_value.toInt();
blue_value = blue_value.toInt();
 
//Met une valeur par défaut sur tous ceux qui n'en sont pas
if ($type(red_value) != 'number'){red_value = 0;}
if ($type(green_value) != 'number'){green_value = 0;}
if ($type(blue_value) != 'number'){blue_value = 0;}
 
//Limite tout à la plage de valeurs RGB (0 - 255)
red_value = red_value.limit(0, 255);
green_value = green_value.limit(0, 255);
blue_value = blue_value.limit(0, 255);
 
//Calcule la valeur hexa
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converti en : ' + color);
}



III. Conclusion du tutorial