30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
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:
var changeColor = function(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 = function(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);
}
Input Filtering Part 2 -Strings