Note: Input filtering in JavaScript is only to ensure the smooth execution of (client-side) code and cannot replace server-side string filtering to protect your application from injection attacks.
In the last example of Lecture 4, we get the RGB values from the text input box and then use them to change the background color of the page. Today we will first take a look at part of the code of that example and use it to expand our work. One lecture.
rgbToHex()
Technically speaking, the rgbToHex() method actually belongs to the Array collection. Since it is an array method for processing numbers, we will learn this method today. Functionally speaking, rgbToHex() is very simple to use:
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 red, green and blue values are all numbers. Try it if you pass in something else unexpected:
You see a "NaN" at the end of the result, NaN stands for Not a Number (
Not a Number). If you write the color value as hard-coded in the code, this may not happen. But if you get this
value from an input form, then you are likely to encounter a situation where you need to deal with such input values that do not meet the requirements.
toInt()
So, 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 and it will convert it to an integer if possible.
Reference code:
var toIntDemo = function(make_me_a_number ){
var number = make_me_a_number.toInt();
alert ('Best Attempt : ' number);
}
As you can see, toInt() Methods can't handle every situation you can think of, but thanks to another cool method in MooTools called $type(), we can handle that problem very 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 telling you what type the 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 more types that the $type() method can detect - you can find a complete list in this
Core.$type() documentation list. But now, what we really care about is how to detect integers. If we use the $type() method in the
toIntDemo() method, then we can easily handle 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 allowed range of RGB values 0-255, but this value is still faithfully converted to its hexadecimal value. Unfortunately, this means that if we accept a number outside of that range, we won't 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 straightforward. You can call this method on a number, passing in a minimum allowed value and a maximum allowed value of the number as parameters
, and it will automatically round. You also need to keep this in mind: the limit method requires an integer parameter, so generally use toInt on the thing you want to specify as a number (or other things in the number collection (
Number Collection)) before using the limit method. ()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);
}
Example code
Try mixing the above method with our changeColor() method:
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);
}
Learn more
Download a zip package with everything you need to get started
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
