MooTools - Lọc đầu vào
MooTools có thể lọc đầu vào của người dùng và nó có thể dễ dàng nhận ra loại đầu vào. Các loại đầu vào cơ bản là Số và Chuỗi.
Hàm số
Hãy để chúng tôi thảo luận về một số phương pháp sẽ kiểm tra xem giá trị đầu vào có phải là số hay không. Các phương pháp này cũng sẽ giúp bạn thao tác với việc nhập số.
toInt ()
Phương thức này chuyển đổi bất kỳ giá trị đầu vào nào thành số nguyên. Bạn có thể gọi nó trên một biến và nó sẽ cố gắng cung cấp số nguyên thông thường từ bất cứ thứ gì mà biến đó chứa.
Hãy để chúng tôi lấy một ví dụ thiết kế một trang web chứa một hộp văn bản và một nút có tên TO INT. Nút sẽ kiểm tra và trả về giá trị mà bạn đã nhập vào hộp văn bản dưới dạng số nguyên thực. Nếu giá trị không phải là số nguyên, thì nó sẽ trả vềNaNBiểu tượng. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Hãy thử các giá trị khác nhau và chuyển đổi chúng thành số nguyên thực.
loại()
Phương thức này kiểm tra giá trị của một biến bạn truyền vào và trả về kiểu của giá trị đó.
Hãy để chúng tôi lấy một ví dụ trong đó, chúng tôi thiết kế một trang web và kiểm tra xem giá trị đầu vào là Number, String hay Boolean. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Hãy thử các giá trị khác nhau và kiểm tra loại.
giới hạn()
Phương thức limit () được sử dụng để đặt giá trị giới hạn dưới và giới hạn trên cho một số cụ thể. Số không được vượt quá giá trị giới hạn trên. Nếu vượt quá, thì số sẽ được thay đổi thành giá trị giới hạn trên. Quá trình này cũng tương tự với giới hạn dưới.
Chúng ta hãy lấy một ví dụ cung cấp một hộp văn bản để nhập một giá trị, cung cấp một nút để kiểm tra giới hạn của giá trị đó. Giới hạn mặc định mà chúng tôi đã sử dụng trong ví dụ này là 0 đến 255. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Hãy thử các số khác nhau để kiểm tra giới hạn.
rgbToHex ()
Phương thức rgbToHex () là chuyển đổi từ các giá trị màu đỏ, xanh lục và xanh lam sang giá trị Hệ thập lục phân. Hàm này xử lý các số và thuộc về bộ sưu tập Mảng. Hãy để chúng tôi lấy một ví dụ trong đó, chúng tôi sẽ thiết kế một trang web để nhập các giá trị riêng lẻ cho Đỏ, Xanh lục và Xanh lam. Cung cấp một nút để chuyển đổi cả ba thành giá trị thập lục phân. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Hãy thử các giá trị Đỏ, Xanh lục và Xanh lam khác nhau và tìm các giá trị thập lục phân.
Hàm chuỗi
Chúng ta hãy thảo luận một vài phương thức của lớp String có thể thao tác với giá trị String đầu vào. Trước khi tiếp tục, chúng ta hãy xem cú pháp sau về cách gọi một hàm chuỗi.
Chuỗi
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Hoặc là,
var result_of_function = "Heres some text".someStringFunction();trim ()
Phương thức này được sử dụng để loại bỏ khoảng trắng của vị trí phía trước và vị trí cuối của một chuỗi nhất định. Nó không chạm vào bất kỳ khoảng trắng nào bên trong chuỗi. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Trong các hộp cảnh báo ở trên, bạn có thể tìm thấy sự khác biệt trong Chuỗi trước khi gọi phương thức trim () và sau khi gọi phương thức trim ().
dọn dẹp()
Phương thức này được sử dụng để loại bỏ tất cả các khoảng trắng khỏi chuỗi đã cho và duy trì khoảng trắng đơn giữa các từ. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
chứa đựng()
Phương thức này được sử dụng để tìm kiếm một chuỗi con trong một chuỗi đã cho. Nếu chuỗi đã cho có chứa chuỗi tìm kiếm, nó trả về true nếu không sẽ trả về false. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
thay thế ()
Phương thức này được sử dụng để chèn chuỗi đầu vào vào chuỗi chính. Hãy xem đoạn mã sau.
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>Bạn sẽ nhận được kết quả sau:
Output
Nhập văn bản vào ba hộp văn bản và nhấp vào nút chuỗi thay thế, sau đó bạn sẽ thấy chuỗi thay thế.