MooTools - Filtrage d'entrée
MooTools peut filtrer l'entrée utilisateur et reconnaître facilement le type d'entrée. Les types d'entrée de base sont Number et String.
Fonctions numériques
Laissez-nous discuter de quelques méthodes qui vérifieront si une valeur d'entrée est un nombre ou non. Ces méthodes vous aideront également à manipuler l'entrée numérique.
toInt ()
Cette méthode convertit toute valeur d'entrée en entier. Vous pouvez l'appeler sur une variable et il essaiera de donner l'entier régulier de tout ce que la variable contient.
Prenons un exemple qui conçoit une page Web contenant une zone de texte et un bouton nommé TO INT. Le bouton vérifiera et renverra la valeur que vous avez entrée dans la zone de texte en tant qu'entier réel. Si la valeur n'est pas un entier, elle renverra leNaNsymbole. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value');
var number = input.toInt();
alert ('Value is : ' + number);
}
window.addEvent('domready', function() {
$('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
Essayez différentes valeurs et convertissez-les en nombres entiers réels.
Type de()
Cette méthode examine la valeur d'une variable que vous transmettez et renvoie le type de cette valeur.
Prenons un exemple dans lequel, nous concevons une page Web et vérifions si la valeur d'entrée est Number, String ou Boolean. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value');
var int_input = input.toInt();
if(typeOf(int_input) != 'number'){
if(input == 'false' || input == 'true'){
alert("Variable type is : Boolean"+" - and value is: "+input);
} else{
alert("Variable type is : "+typeof(input)+" - and value is: "+input);
}
} else{
alert("Variable type is : "+typeof(int_input)+"
- and value is:"+int_input);
}
}
window.addEvent('domready', function() {
$('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
Essayez les différentes valeurs et vérifiez le type.
limite()
La méthode limit () est utilisée pour définir les valeurs de limite inférieure et supérieure pour un nombre particulier. Le nombre ne doit pas dépasser la valeur limite supérieure. S'il dépasse, le nombre est remplacé par la valeur limite supérieure. Ce processus est le même avec la borne inférieure également.
Prenons un exemple qui fournit une zone de texte pour entrer une valeur, fournissez un bouton pour vérifier la limite de cette valeur. La limite par défaut que nous avons utilisée dans l'exemple est de 0 à 255. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value');
var number = input.toInt();
var limited_number = number.limit(0, 255);
alert("Number is : " + limited_number);
}
window.addEvent('domready', function() {
$('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
Essayez différents nombres pour vérifier la limite.
rgbToHex ()
La méthode rgbToHex () consiste à convertir les valeurs rouge, verte et bleue en valeur hexadécimale. Cette fonction traite des nombres et appartient à la collection Array. Prenons un exemple dans lequel, nous allons concevoir une page Web pour entrer les valeurs individuelles pour le rouge, le vert et le bleu. Fournissez un bouton pour convertir les trois en valeurs hexadécimales. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value');
var red_value = red.toInt();
var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value');
var blue_value = blue.toInt();
var color = [red_value, green_value, blue_value].rgbToHex();
alert(" Hexa color is : " + color);
}
window.addEvent('domready', function() {
$('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
Essayez différentes valeurs de rouge, vert et bleu et trouvez les valeurs hexadécimales.
Fonctions de chaîne
Laissez-nous discuter de quelques méthodes de la classe String qui peuvent manipuler la valeur String d'entrée. Avant de continuer, examinons la syntaxe suivante pour savoir comment appeler une fonction de chaîne.
Chaîne
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Ou,
var result_of_function = "Heres some text".someStringFunction();réduire()
Cette méthode est utilisée pour supprimer l'espace blanc de la position avant et de la position finale d'une chaîne donnée. Il ne touche aucun espace blanc à l'intérieur de la chaîne. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Vous recevrez la sortie suivante -
Output
Dans les boîtes d'alerte ci-dessus, vous pouvez trouver les différences dans String avant d'appeler la méthode trim () et après l'appel de la méthode trim ().
nettoyer()
Cette méthode est utilisée pour supprimer tous les espaces blancs de la chaîne donnée et conserver un seul espace entre les mots. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Vous recevrez la sortie suivante -
Output
contient ()
Cette méthode est utilisée pour rechercher une sous-chaîne dans une chaîne donnée. Si la chaîne donnée contient la chaîne de recherche, elle renvoie true sinon elle retourne false. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value');
var string_contains = input_string.contains(search_string);
alert("contains : " + string_contains);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
remplacer()
Cette méthode est utilisée pour insérer la chaîne d'entrée dans la chaîne principale. Jetez un œil au code suivant.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value');
var two_str = $('two').get('value');
var three_str = $('three').get('value');
var substitution_string = {
one : one_str,
two : two_str,
three : three_str
}
var new_string = input_string.substitute(substitution_string);
document.write("NEW STRING IS : " + new_string);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>Vous recevrez la sortie suivante -
Output
Entrez le texte dans les trois zones de texte et cliquez sur le bouton de chaîne de substitution, vous verrez alors la chaîne de substitution.