Note: The input filtering in JavaScript is just to ensure that (client) code executes smoothly, and does not replace the server-side string filtering to protect your application from being injected into the attack.
In the last example of the fourth, we get the RGB values from the text input box and use them to change the background color of the page, so let's start by looking at some of the code for that example.
Rgbtohex ()
Technically, the Rgbtohex () method actually belongs to the array collection. Since it's an array method for dealing with numbers, let's take a look at this method today. Functionally speaking, Rgbtohex () uses
To be simple:
Reference code:
Copy Code code as follows:
function ChangeColor (Red_value, Green_value, Blue_value) {
var color = [Red_value, Green_value, Blue_value].rgbtohex ();
Alert (' Converts to: ' + color);
}
This is perfectly normal, because the values of red, green, and blue are all numbers. Try it if when you're passing something else unexpected:
At the end of this result you see a "Nan", and Nan represents not a number (
Not a number). This may not happen if you write the value of the color as hard-coded in the code. But if you get it from an input form, this
Value, you are likely to encounter situations where you need to handle some of the input values that do not meet the requirements.
ToInt ()
So now we need a way to make sure that the parameters passed to the Rgbtohex () method are numbers--and we need to use the ToInt () method here. ToInt () is another relatively simple function. You can use it on a variable, so it will convert it to an integer as much as possible.
Reference code:
Copy Code code as follows:
var Tointdemo = function (make_me_a_number) {
var number = Make_me_a_number.toint ();
Alert (' Best attempt: ' + number);
}
As you can see, the ToInt () method does not handle all of the things you could think of, but thanks to the other cool method in MooTools called $type (), we can deal with that problem well.
$type ()
$type () is another incredibly simple and useful thing from MooTools. It can check whatever variable you pass in and return a string that tells you what type of variable it is:
Reference code:
Copy Code code as follows:
var checktype = function (Variable_to_check) {
var variable_type = $type (Variable_to_check);
Alert ("Variable is a:" + Variable_type);
}
There are also many types of $type () methods that can be detected--you can
A complete list is found in the Core. $type () document. But now, what we really care about is how to detect integers. If we are
Using the $type () method in the Tointdemo () method, we can easily handle the input that ToInt () cannot process:
Reference code:
Copy Code code as follows:
var Tointdemo = function (make_me_a_number) {
Try to make the input number
var number = Make_me_a_number.toint ();
If that's didn ' t work, set number to 0
if ($type (number)!= ' number ') {number = 0;}
Alert (' Best attempt: ' + number);
}
When we combine them with the ChangeColor () method, we can get an almost perfect solution:
Reference code:
Copy Code code as follows:
var changecolor_2 = function (Red_value, Green_value, Blue_value) {
Try to make sure everything are an integer
Red_value = Red_value.toint ();
Green_value = Green_value.toint ();
Blue_value = Blue_value.toint ();
Set default values on anything thats not a number
if ($type (red_value)!= ' number ') {red_value = 0;}
if ($type (green_value)!= ' number ') {green_value = 0;}
if ($type (blue_value)!= ' number ') {blue_value = 0;}
Calculate hex Value
var color = [Red_value, Green_value, Blue_value].rgbtohex ();
Alert (' Converts to: ' + color);
}
The number passed to the Rgbtohex () method in the last method exceeds the RGB allowable value of 0-255, and the value is faithfully converted to its hexadecimal value. Unfortunately, this means that we accept a number over that range and we will not be able to get a valid hexadecimal color value. Luckily, MooTools. Another method that we can use to deal with this problem.
Limit ()
The limit () method in MooTools is also very straightforward. You can call this method on a number, passing in a minimum value allowed by this number and a maximum allowable value as a parameter
Number, it is automatically rounded. You also need to keep this in mind: the limit method needs to pass in the integer argument, so it's generally important to use the Limit method before you specify what you want to be a number (or else set in a number (
Number Collection) using the ToInt () method.
Reference code:
Copy Code code as follows:
var Limitdemo = function (number_to_limit) {
Do we best to get an integer
Number_to_limit = Number_to_limit.toint ();
Get the Limited value
var limited_number = number_to_limit.limit (0, 255);
Alert ("Number Limited to:" + limited_number);
}
Sample code
Try mixing the above method with the ChangeColor () method we just made:
Reference code:
Copy Code code as follows:
var changecolor = function (Red_value, Green_value, Blue_value) {
Try to make sure everything are an integer
Red_value = Red_value.toint ();
Green_value = Green_value.toint ();
Blue_value = Blue_value.toint ();
Set default values on anything thats not a number
if ($type (red_value)!= ' number ') {red_value = 0;}
if ($type (green_value)!= ' number ') {green_value = 0;}
if ($type (blue_value)!= ' number ') {blue_value = 0;}
Limit Everything to the RGB Scale (0-255)
Red_value = red_value.limit (0, 255);
Green_value = green_value.limit (0, 255);
Blue_value = blue_value.limit (0, 255);
Calculate hex Value
var color = [Red_value, Green_value, Blue_value].rgbtohex ();
Alert (' Converts to: ' + color);
}
Learn More
Download a Zip package that contains all the things you need to start
- Standard Digital (number) processing function
- MooTools Digital (number) processing function
- MooTools Array processing function
