Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

Продолжаем наши уроки Mootools и сегодня рассмотрим, как можно использовать Mootools для фильтрации пользовательских данных. Начнем с простой фильтрации чисел, а потом продолжим с фильтрацией текстовых строк в следующем уроке.

Примечание:Фильтрация входящих данных в Javascript используется для того, чтобы обеспечить нормальную работу ваших скриптов. Не нужно использовать ее для полной замены серверной фильтрации, которая используется для защиты приложений от внешних атак.

Числа

Помните, в 4-м уроке мы брали значения текстовых полей, отображающих RGB значения цветов, и использовали их для замены фонового цвета страницы, а сегодня мы снова возьмем за основу этот код, приделав к нему небольшие модификации.

rgbToHex()

С точки зрения структуры, функция rgbToHex() принадлежит коллекции функции для работы с массивами. Но, т.к. эта функция для работы с числовыми массивами, мы будем рассматривать ее именно в этом уроке. С точки зрения предназначения и использования, функция rbgtoHex() вполне проста:

function changeColor(red_value, green_value, blue_value){
  	var color = [red_value, green_value, blue_value].rgbToHex();
   	alert('Конвертируется в : ' + color);
   }
     changeColor('5', '41', '18')

changeColor(‘54′, ‘41′, ‘18′);

Этот код идеально работает, если передавать в качестве аргументов цифры. Посмотрите, как поведет себя браузер, когда вместо одного из аргументов мы передадим текст:

changeColor(‘54′, ‘41′, ‘опля’);

«Nan» виднеющийся в конце сообщения имеет значение Not a Number (Не Число). Если именно вы вводите вручную массив цифр для значения цвета, такой ошибки может вы и не увидите. Но если используется какой-либо внешний источник, очень вероятно, что придется частенько почитывать такие ошибочки.

toInt()

Теперь нам нужно убедиться в том, что фукнция rgbToHex() получает в качестве аргумента, именно числа, а не данные в каком-либо другом формате. Для этого мы можем использовать функцию toInt() – это еще одна относительно простая и понятная функция. Ей можно передать любую переменную, а она позаботится о том, чтобы извлеч из данных этой переменной число.

var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
 
alert ('Что получилось : ' + number);
}

toIntDemo(’613.234′)
toIntDemo(’83_ура!’)
toIntDemo(’а_нет_ли_тут_26?’)

Ну вот! Как видно, toInt() несправляется с каждой неоднозначной ситуацией, но, благодяра другой классной вещи в Mootools, которая называется $type(), мы можем спокойно разобраться и с этой проблемкой!

$type()

$type() – это еще одна вкусняшка нашей любимой библиотеки. Она анализирует переданную ей перменную и возвращает текстовую строку с названием типа данных, которому придлажала переменная. Что-то я тут запутал… Лучше разюерем на примере:

var checkType = function(variable_to_check){
	var variable_type = $type(variable_to_check);
	alert("Данные являются типом : " + variable_type);
}

checkType(43)checkType(’a string’)checkType(false)

На самом деле, функция $type() не ограничивается определением этих трех типов данных. $type() возвращает следующие значения в текстовой форме:

• 'element' – Если переданный объект является элементом DOMa
• 'textnode' – текстовый элемент DOMa.
• 'whitespace' – пустое пространство DOMa.
• 'arguments' – аргумент.
• 'array' – массив.
• 'object' – объект.
• 'string' – текстовая строка.
• 'number' – число.
• 'date' – дата.
• 'boolean' – булев тип.
• 'function' – функция.
• 'regexp' – регулярной выражение.
• 'class' – класс (созданный с помощью new Class или является расширением другого класса).
• ‘collection’ – когда переданный объект – это набор из html-элементов, как при вызове childNodes, getElementsByTagName, и т.д.
• ‘window’ – окно.
• ‘document’ – документ.
• false – (булев тип – единственный в своем роде при использовании $type()) Возвращается тогда, когда объект имеет тип undefined, null, NaN или ни один ииз вышеперечисленных.

var toIntDemo = function(make_me_a_number){
	//попробуем сделать число из введенного текста
	var number = make_me_a_number.toInt();
 
	//Если это не срабатывает, устанавливаем число ноль (0)
	if ($type(number) != 'number'){number = 0;}
	alert('Что получилось : ' + number);
}

toIntDemo_2(’613.234?)

toIntDemo_2(’83_Ё_моЁ!’)
toIntDemo_2(’а_что_если_83?)

Если соединить все это воедино, получиться почти идеальная версия нашего скрипта по конвертированию цветов из формата RGB в шестнадцатиричный код – changeColor():

var changeColor_2 = function(red_value, green_value, blue_value){
	//Убедимся в том, что у нас все данные - числа
 
    red_value = red_value.toInt();
    green_value = green_value.toInt();
    blue_value = blue_value.toInt();
    //Устанавливаем значения по умолчанию на всё, что не является числом
 
    if ($type(red_value)   != 'number'){red_value = 0;}
    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}
    //Вычисляем шестнадцатиричное значение
 
    var color = [red_value, green_value, blue_value].rgbToHex();
    alert('Конвертируется в : ' + color);
}

changeColor(‘208′, ‘127′, ‘74′);
changeColor(‘82′, ‘7′, ‘скунс’);

changeColor(‘522′, ‘847′, »);

Обратите внимание, что последняя кнопка передает числа куда более высокие, чем могут приминать цвета в формате RGB (0-255), а это, нужно сказать, делает шестнадцатиричное число не особо пригодным для обозначения цветов. К сожалению, это означает, что если мы получим число большее или меньшее диапазона 0-255, мы не получим шестнадцатиричного значения цвета. К счастью, Mootools поможет нам забыть и об этой проблеме.

limit()

Функция limit() не выдиляется сложностью, т.к. этим словом ее охарактеризовать нельзя. Она помогает удержать числа в заданном диапазоне:

//вызываем функцию
limit(n1, n2)
//где n1 наименьшее число требуемого диапазона
// а n2 - наивысшее

Ничего сложного! Елинственное «но», это то, что нужно иметь ввиду, что функция предполагает, что n1 и n2 – это числа. Поэтому крайне рекомендуется применять toInt() к данным, которые предположительно являются числами и которые предствоит передавать в функцию limit() (или любую другую функцию для работы с числами).

var limitDemo = function(number_to_limit){
	//Получаем число
 
	number_to_limit = number_to_limit.toInt();
 
	//получаем число из требуемого диапазона
	var limited_number = number_to_limit.limit(0, 255);
	alert("Ограничиваем до : " + limited_number);
}

limitDemo(6535634);

А вот и полный рецепт

var changeColor = function(red_value, green_value, blue_value){
	//Убеждаемся, что все данные у нас - это числа
 
	red_value   = red_value.toInt();
	green_value = green_value.toInt();
	blue_value  = blue_value.toInt();
 
	//Устанавливаем значения по умолчанию на все, что не является числом
	if ($type(red_value)   != 'number'){red_value = 0;}
	if ($type(green_value) != 'number'){green_value = 0;}
	if ($type(blue_value)  != 'number'){blue_value = 0;}
 
	//Ограничиваем все до диапазона значений RGB (0 - 255)
 
	red_value   = red_value.limit(0, 255);
	green_value = green_value.limit(0, 255);
 
	blue_value  = blue_value.limit(0, 255);
 
	//Конвертируем в шестнадцатиричную систему
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color); 
}

changeColor(’28′, ‘17′, ‘47′);changeColor(‘28′, ‘17′, ‘oops’);changeColor(’428′, ‘317′,
‘265000′);

Обратите внимание, что функция .rgbToHex() нигде не принимает никаких атрибутов. Это все потому, что эта функция может принять 2 атрибута булев типа: true, false. По умолчанию установлен false, что и возвращает нам строку в таком виде, в котором она нам нужна для вставки в атрибут цвета, т.е. "#000000". Если же передать атрибут true, функция вернет данные в виде массива.

var rgb2HexTrue = function(r, g, b){
  var rgbArray = [r, g, b].rgbToHex(true);
  var rgbHex = [r, g, b].rgbToHex();
  alert('rgbToHex с параметром TRUE: ' + rgbArray + 'и с параметром FALSE: ' + rgbHex);
}

rgb2Hex('34', '117', '247')