MooTools - Giriş Filtreleme
MooTools, kullanıcı girişini filtreleyebilir ve giriş türünü kolayca tanıyabilir. Temel girdi türleri Sayı ve Dizedir.
Sayı İşlevleri
Bir giriş değerinin sayı olup olmadığını kontrol edecek birkaç yöntemi tartışalım. Bu yöntemler ayrıca sayı girişini değiştirmenize yardımcı olacaktır.
toInt ()
Bu yöntem, herhangi bir girdi değerini tam sayıya dönüştürür. Onu bir değişken üzerinde çağırabilirsiniz ve o, değişkenin içerdiği her şeyden normal tamsayıyı vermeye çalışacaktır.
Metin kutusu ve adında bir düğme içeren bir web sayfası tasarlayan bir örnek alalım. TO INT. Düğme, metin kutusuna girdiğiniz değeri kontrol edecek ve gerçek tam sayı olarak döndürecektir. Değer bir tamsayı değilse, o zamanNaNsembolü. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Farklı değerleri deneyin ve bunları gerçek tam sayılara dönüştürün.
bir çeşit()
Bu yöntem, geçtiğiniz bir değişkenin değerini inceler ve bu değerin türünü döndürür.
Bir web sayfası tasarladığımız ve giriş değerinin Number, String veya Boolean olup olmadığını kontrol ettiğimiz bir örnek alalım. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Farklı değerleri deneyin ve türünü kontrol edin.
limit ()
Limit () yöntemi, belirli bir sayı için alt sınır ve üst sınır değerlerini ayarlamak için kullanılır. Sayı, üst sınır değerini aşmamalıdır. Aşarsa, sayı üst sınır değerine değiştirilir. Bu süreç, alt sınırla da aynıdır.
Bir değer girmek için bir metin kutusu sağlayan bir örnek alalım, bu değerin sınırını kontrol etmek için bir düğme sağlayın. Örnekte kullandığımız varsayılan sınır 0 ile 255 arasındadır. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Sınırı kontrol etmek için farklı sayılar deneyin.
rgbToHex ()
RgbToHex () yöntemi kırmızı, yeşil ve mavi değerlerden Onaltılık değere dönüştürmektir. Bu işlev sayılarla ilgilenir ve Array koleksiyonuna aittir. Kırmızı, Yeşil ve Mavi için tek tek değerleri girmek için bir web sayfası tasarlayacağımız bir örnek alalım. Üçünü de onaltılık değerlere dönüştürmek için bir düğme sağlayın. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Farklı Kırmızı, Yeşil ve Mavi değerleri deneyin ve onaltılık değerleri bulun.
String Fonksiyonları
Girdi String değerini işleyebilen String sınıfının birkaç yöntemini tartışalım. Devam etmeden önce, bir dize işlevinin nasıl çağrılacağına ilişkin aşağıdaki sözdizimine bir göz atalım.
Dize
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Veya,
var result_of_function = "Heres some text".someStringFunction();trim ()
Bu yöntem, belirli bir dizinin ön konumunun ve son konumunun beyaz boşluğunu kaldırmak için kullanılır. İpin içindeki herhangi bir beyaz boşluğa dokunmaz. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Yukarıdaki uyarı kutularında, trim () yöntemini çağırmadan önce ve trim () yöntemini çağırdıktan sonra String'deki farklılıkları bulabilirsiniz.
temiz()
Bu yöntem, verilen dizedeki tüm beyaz boşlukları kaldırmak ve sözcükler arasında tek boşluk bırakmak için kullanılır. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
içerir ()
Bu yöntem, belirli bir dizedeki bir alt dizeyi aramak için kullanılır. Verilen dizge arama dizesini içeriyorsa, doğru, aksi takdirde yanlış döndürür. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
vekil()
Bu yöntem, giriş dizesini ana dizeye eklemek için kullanılır. Aşağıdaki koda bir göz atın.
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>Aşağıdaki çıktıyı alacaksınız -
Output
Üç metin kutusuna metin girin ve ikame dize düğmesine tıklayın, ardından ikame dizesini göreceksiniz.