- 206.420.2394
- Contact Us
-
Chat
- |
- Client Login
Hey folks, today we’re going to starting looking at how Mootools can make filtering user input a breeze. We’re going to be starting off with some basic number filtering today, and digging into the world of string filtering tommorrow. If you haven’t already checked out the rest of the 30 Days of Mootools tutorials, I’d highly recommend doing so before continuing on.
NOTE: Input filtering in Javascript is to ensure that your code runs smoothly, it should NOT be used as a substitute for the server side input filtering required to protect your applications against injection attacks.
On Day 4 we ended with an example that took RGB values from textboxes and used them to change the background of the page, today we’re going to start by going over some of the code from that example and expanding upon it.
Technically speaking, the rgbToHex() function actually belongs to the Array collection. Since it’s an array function built to deal with numbers, we’re going to tackle it today. Functionally, rgbToHex() is pretty straightforward to use:
function changeColor(red_value, green_value, blue_value){ var color = [red_value, green_value, blue_value].rgbToHex(); alert('Converts to : ' + color); } changeColor('28', '17', '47')
This works perfectly, as long as the values for red, green, and blue are numbers. Check out the behavior when you pass it something unexpected :
The NaN you see at the end there stands for Not a Number. If you’re hard coding color values into the array, this situation probably isn’t going to come up. If you’re getting input from any other source though, you’re most likely going to run into situations where you have to deal with invalid input.
So now, we need a way to make sure that the rgbToHex() function is only getting numbers passed to it - that is where the toInt() function comes in. toInt() is another relatively straightforward function. You call it on a variable and it does its best to get a regular integer from whatever the variable contains.
var toIntDemo = function(make_me_a_number){ var number = make_me_a_number.toInt(); alert ('Best Attempt : ' + number); }
As you can see, toInt() can’t handle every conceivable situation, but thanks to another piece of Mootools coolness called $type(), we can deal with that problem as well.
$type() is another one of the incredibly straightforward and useful goodies from the Mootools crew. It examines whatever variable you pass it, and returns a string telling you what type of variable it is:
var checkType(variable_to_check){ var variable_type = $type(variable_to_check); alert("Variable is a : " + variable_type); }
There’s a buttload of other types that $type() detects - you can get a full list of them in the Core.$type() documentation. For now though, all we’re really worried about is detecting integers. If we take $type() and throw into the toIntDemo() function we can very easily deal with input that toInt() can’t handle :
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 pull it all together into changeColor(), we get a solution that works almost perfectly :
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 last function is passing rgbToHex() numbers outside of the RGB range of 0 - 255, which quite dutifully converts the value into it’s hex equivalent. Unfortunately this means that if we receive a number outside of that range as input, we aren’t going to be able to get a valid hex color value. Fortunately, there’s of one more piece from the Mootools kit, we can throw in to take care of this problem too.
The Mootools limit() function is pretty no frills. You call it on a number with the lower and upper bounds you want to limit the number to as arguments, and if that number is outside of the range you define, it rounds appropriately. It’s important to keep in mind that limit REQUIRES an integer to function, so it’s a generally a good idea to use toInt() on something you’re assuming to be a number before using limit (or anything else in the Number Collection).
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); }
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); }
Standard Number Functionality
Mootools Number Functionality
Mootools Array Functionality
Input Filtering Part 2 -Strings
While we’re starting to get into more complex areas of the library, we’ve still got plenty of time left to fit in any topics or areas you’re interested in. If there’s something you’d like to learn to do with Mootools, please let us know and we’ll do our best to work it in to the schedule.
