Mootools 1.2 튜토리얼 입력 필터링 1부(번호)

Mootools 1.2 튜토리얼 입력 필터링 1부(번호)_Mootools

WBOY

풀어 주다： 2016-05-16 18:46:32

원래의

783명이 탐색했습니다.

참고: JavaScript의 입력 필터링은 (클라이언트 측) 코드의 원활한 실행을 보장하기 위한 것일 뿐이며 주입 공격으로부터 애플리케이션을 보호하기 위한 서버 측 문자열 필터링을 대체할 수는 없습니다.
4강의 마지막 예에서는 텍스트 입력 상자에서 RGB 값을 가져온 다음 이를 사용하여 페이지의 배경색을 변경합니다. 오늘은 먼저 해당 코드의 일부를 살펴보겠습니다. 예를 들어 작업을 확장하는 데 사용하세요.
rgbToHex()
기술적으로 말하면 rgbToHex() 메서드는 실제로 Array 컬렉션에 속합니다. 숫자를 처리하는 배열 방식이므로 오늘은 이 방식을 배워보겠습니다. 기능적으로 말하면 rgbToHex()는 사용이 매우 간단합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

functionchangeColor(red_value, green_value, blue_value){ 
var color = [red_value, green_value, blue_value].rgbToHex() 
alert('다음으로 변환: ' color ); >} 

 
빨간색, 녹색, 파란색 값이 모두 숫자이므로 정상적이고 완벽합니다. 예상치 못한 다른 것을 전달하는 경우 시도해 보세요. 

결과 끝에 "NaN"이 표시됩니다. NaN은 Not a Number(
Not a Number)를 나타냅니다. 코드에 색상값을 하드코딩해서 적으면 이런 일이 발생하지 않을 수도 있습니다. 하지만 입력 양식에서 이
값을 얻으면 요구 사항을 충족하지 않는 입력 값을 처리해야 하는 상황에 직면할 가능성이 높습니다.
toInt()
이제 rgbToHex() 메서드에 전달된 매개 변수가 모두 숫자인지 확인하는 방법이 필요합니다. 여기서는 toInt() 메서드를 사용해야 합니다. toInt()는 비교적 간단한 또 다른 함수입니다. 변수에서 호출할 수 있으며 가능하면 정수로 변환합니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var toIntDemo = function(make_me_a_number ){

var number = make_me_a_number.toInt(); 
alert ('Best Attempt : ' number) 
} 

 
보시다시피 toInt( ) 메서드는 여러분이 생각할 수 있는 모든 상황을 처리할 수는 없지만 $type()이라는 MooTools의 또 다른 멋진 메서드 덕분에 해당 문제를 매우 잘 처리할 수 있습니다. 

$type()
$type()은 MooTools의 매우 간단하고 유용한 또 다른 기능입니다. 전달한 변수가 무엇이든 확인한 다음 변수 유형을 알려주는 문자열을 반환할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var checkType = function(variable_to_check){

var Variable_type = $type(variable_to_check) 
alert("변수는 "입니다. Variable_type); 
} 

 
$type() 메소드가 감지할 수 있는 유형이 더 많습니다. 

Core.$type() 문서 목록에서 전체 목록을 찾을 수 있습니다. . 하지만 이제 우리가 정말로 관심을 갖는 것은 정수를 감지하는 방법입니다.
toIntDemo() 메서드에서 $type() 메서드를 사용하면 toInt()가 처리할 수 없는 입력을 쉽게 처리할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

var toIntDemo = function(make_me_a_number){

//입력번호를 만들어 보세요 
var number = make_me_a_number.toInt(); 
//작동하지 않으면 숫자를 0으로 설정하세요. 
if ($type(number) != 'number'){number = 0;} 
alert('Best Attempt : ' number); 
} 

 
changeColor() 메소드와 결합하면 거의 완벽한 솔루션을 얻을 수 있습니다. 

참조 코드:

코드 복사 코드는 다음과 같습니다.

varchangeColor_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;}
//16진수 값 계산
var color = [red_value, green_value , blue_value ].rgbToHex();
alert('다음으로 변환: ' 색상)

마지막 메서드에서 rgbToHex() 메서드에 전달된 숫자가 RGB 값의 허용 범위인 0~255를 초과했지만 이 값은 여전히 16진수 값으로 충실하게 변환됩니다. 불행하게도 이는 해당 범위를 벗어나는 숫자를 허용하면 유효한 16진수 색상 값을 얻을 수 없음을 의미합니다. 다행히 MooTools에는 이 문제를 해결하는 데 사용할 수 있는 또 다른 방법이 있습니다.
limit()
MooTools의limit() 메소드도 매우 간단하고 간단합니다. 숫자에 대해 이 메소드를 호출하여 숫자의 최소 허용 값과 최대 허용 값을
매개변수로 전달하면 자동으로 반올림됩니다. 또한 이 점을 명심해야 합니다: 제한 메소드에는 정수 매개변수가 필요하므로 일반적으로 숫자로 지정하려는 항목(또는 숫자 컬렉션(
Number Collection)의 다른 항목)에 대해 toInt를 사용합니다. () 방법.
참조 코드:

코드 복사 코드는 다음과 같습니다.

 
varlimitDemo = function(number_to_limit ){ 
//정수를 얻기 위해 최선을 다하세요 
number_to_limit = number_to_limit.toInt() 
//제한된 값을 얻으세요 
var Limited_number = number_to_limit.limit(0, 255); 🎜>alert ("Number Limited To : "limited_number); 
} 

 

예제 코드
위 메소드를 우리의changeColor() 메소드와 혼합해 보세요:
참조 코드:

코드 복사 코드는 다음과 같습니다.

varchangeColor = 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)//16진수 값 계산 
var color = [ red_value, green_value, blue_value].rgbToHex(); 
alert('다음으로 변환: ' color) 




자세히 알아보기

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

표준수(Number) 처리 기능 기능