Mootools 1.2 チュートリアル入力フィルタリングパート 1 (数値)

Mootools 1.2 チュートリアル入力フィルタリングパート 1 (数値)_Mootools

WBOY

リリース： 2016-05-16 18:46:32

オリジナル

799 人が閲覧しました

注: JavaScript での入力フィルタリングは、(クライアント側) コードのスムーズな実行を保証するだけであり、アプリケーションをインジェクション攻撃から保護するためにサーバー側の文字列フィルタリングを置き換えることはできません。
講義 4 の最後の例では、テキスト入力ボックスから RGB 値を取得し、それを使用してページの背景色を変更します。今日はまずそのコードの一部を見ていきます。例を示し、それを使用して 1 つの講義を拡張します。
rgbToHex()
技術的に言えば、rgbToHex() メソッドは実際には Array コレクションに属します。数値を処理するための配列メソッドですので、今日はこのメソッドを学習します。機能的に言えば、rgbToHex() は非常に簡単に使用できます。
リファレンスコード:

コードをコピーコードは次のとおりです:

function changeColor(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 ){

varnumber = 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();

//それが機能しなかった場合は、number を 0 に設定します 
if ($type(number) != 'number'){number = 0;} 
alert('Best Attempt : 'number); 
} 

 
changeColor() メソッドと組み合わせると、ほぼ完璧な解決策が得られます: 
リファレンス コード: 

コードをコピーします

コードは次のとおりです: var changeColor_2 = function(red_value , green_value, blue_value ){ //すべてが整数であることを確認してください

red_value = red_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() メソッドも非常にシンプルで簡単です。このメソッドを数値に対して呼び出し、その数値の最小許容値と最大許容値をパラメーター
として渡すと、自動的に丸められます。また、これにも留意する必要があります。limit メソッドには整数パラメーターが必要なので、通常、数値として指定したいもの (または数値コレクション (
Number Collection) 内のその他のもの) に対して toInt を使用してから、リミットメソッド。
参照コード:

コードをコピーコードは次のとおりです:

 
var limitDemo = function(number_to_limit ){ 
//整数を取得するために最善を尽くします 
number_to_limit =number_to_limit.toInt(); 
//制限値を取得します 
varlimited_number =number_to_limit.limit(0, 255); 🎜>alert ("Number Limited To : "limited_number); 
} 

 

サンプルコード
上記のメソッドとchangeColor()メソッドを組み合わせてみてください:
リファレンスコード:

コードをコピーしますコードは次のとおりです:

var changeColor = function(red_value, green_value, blue_value ) { 
//すべてが整数であることを確認してください 
red_value = red_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); 
//16 進値を計算します。 color = [ red_value, green_value, blue_value].rgbToHex(); 
alert('色に変換します) 




さらに詳しく