Note: Input filtering in JavaScript is only to ensure the smooth execution of (client) code, and it cannot replace server-side string filtering to protect your application from injection attacks.
In the last example of Lecture 4, we get RGB values from the text input box, and then use them to change the background color of the page. Today we first look at some of the code of that example and expand our lecture with this.
rgbToHex()
Technically, the rgbToHex() method actually belongs to the Array collection. Since it is an array method to process numbers, let's learn about this method today. From a functional perspective, rgbToHex() starts to use
It's very simple to come:
Reference code:
function changeColor(red_value, green_value, blue_value){
var color = [red_value, green_value, blue_value].rgbToHex();
alert('Converts to : ' + color);
}
This is normal and perfect because the values of red, green and blue are all numbers. Try it if when you pass in something other unexpected:
At the end of this result you see a "NaN", which means not a number (
Not a Number). This may not happen if you write the value of the color in the code as hardcoded. But if you get this from an input form
If you have a value, you may encounter such a situation, and you need to deal with such input values that do not meet the requirements.
toInt()
Therefore, now we need a way to ensure that the parameters passed to the rgbToHex() method are all numbers - here we need to use the toInt() method. toInt() is another relatively simple function. You can call it on a variable, then it will convert it to an integer as much as possible.
Reference code:
var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
alert ('Best Attempt : ' + number);
}
As you said, the toInt() method doesn't handle all the situations you can think of, but thankfully, with another cool method in MooTools called $type(), we can handle that problem well.
$type()
$type() is another incredibly simple and useful thing from MooTools. It can check whatever variable you pass in, and then return a string to tell you what type of variable is:
Reference code:
var checkType = function(variable_to_check){
var variable_type = $type(variable_to_check);
alert("Variable is a : " + variable_type);
}
There are many types that the $type() method can detect - you can do this in
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
Use the $type() method in the toIntDemo() method, so we can easily process inputs that toInt() cannot handle:
Reference code:
var toIntDemo = function(make_me_a_number){
//Try to make the input number
var number = make_me_a_number.toInt();
//If That 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:
var changeColor_2 = function(red_value, green_value, blue_value){
//Try to make sure everything is 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 range of RGB allowable values 0-255, and this value is faithfully converted to its hexadecimal value. Unfortunately, this means that we accept a number that exceeds that range and we will not be able to get a valid hexadecimal color value. Fortunately, there is another method in MooTools that we can use to deal with this problem.
limit()
The limit() method in MooTools is also very simple and direct. You can call this method on a number, passing in a minimum allowable value and a maximum allowable value as arguments
, it will automatically round. You also need to keep this in mind: the limit method needs to pass in integer parameters, so generally before using the limit method, you want to specify something as a number (or other in a collection of numbers (
Number Collection) uses the toInt() method.
Reference code:
var limitDemo = function(number_to_limit){
//Do our 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
Let's try mixing the above method with the changeColor() method we just did:
Reference code:
var changeColor = function(red_value, green_value, blue_value){
//Try to make sure everything is 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);
}
In the last example of Lecture 4, we get RGB values from the text input box, and then use them to change the background color of the page. Today we first look at some of the code of that example and expand our lecture with this.
rgbToHex()
Technically, the rgbToHex() method actually belongs to the Array collection. Since it is an array method to process numbers, let's learn about this method today. From a functional perspective, rgbToHex() starts to use
It's very simple to come:
Reference code:
Copy the codeThe code is 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 normal and perfect because the values of red, green and blue are all numbers. Try it if when you pass in something other unexpected:
At the end of this result you see a "NaN", which means not a number (
Not a Number). This may not happen if you write the value of the color in the code as hardcoded. But if you get this from an input form
If you have a value, you may encounter such a situation, and you need to deal with such input values that do not meet the requirements.
toInt()
Therefore, now we need a way to ensure that the parameters passed to the rgbToHex() method are all numbers - here we need to use the toInt() method. toInt() is another relatively simple function. You can call it on a variable, then it will convert it to an integer as much as possible.
Reference code:
Copy the codeThe code is as follows:
var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
alert ('Best Attempt : ' + number);
}
As you said, the toInt() method doesn't handle all the situations you can think of, but thankfully, with another cool method in MooTools called $type(), we can handle that problem well.
$type()
$type() is another incredibly simple and useful thing from MooTools. It can check whatever variable you pass in, and then return a string to tell you what type of variable is:
Reference code:
Copy the codeThe code is as follows:
var checkType = function(variable_to_check){
var variable_type = $type(variable_to_check);
alert("Variable is a : " + variable_type);
}
There are many types that the $type() method can detect - you can do this in
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
Use the $type() method in the toIntDemo() method, so we can easily process inputs that toInt() cannot handle:
Reference code:
Copy the codeThe code is as follows:
var toIntDemo = function(make_me_a_number){
//Try to make the input number
var number = make_me_a_number.toInt();
//If That 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 the codeThe code is as follows:
var changeColor_2 = function(red_value, green_value, blue_value){
//Try to make sure everything is 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 range of RGB allowable values 0-255, and this value is faithfully converted to its hexadecimal value. Unfortunately, this means that we accept a number that exceeds that range and we will not be able to get a valid hexadecimal color value. Fortunately, there is another method in MooTools that we can use to deal with this problem.
limit()
The limit() method in MooTools is also very simple and direct. You can call this method on a number, passing in a minimum allowable value and a maximum allowable value as arguments
, it will automatically round. You also need to keep this in mind: the limit method needs to pass in integer parameters, so generally before using the limit method, you want to specify something as a number (or other in a collection of numbers (
Number Collection) uses the toInt() method.
Reference code:
Copy the codeThe code is as follows:
var limitDemo = function(number_to_limit){
//Do our 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
Let's try mixing the above method with the changeColor() method we just did:
Reference code:
Copy the codeThe code is as follows:
var changeColor = function(red_value, green_value, blue_value){
//Try to make sure everything is 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);
}
More learning
Download a zip package with all the things you need to start
- Standard number (Number) processing function function
- Mootools' Number (Number) processing function function
- Mootools' array (Array) processing function