30日間学会MooTools教育(4):関数とMooTools

今日からMooToolsシリーズ教程の第4講義を開始します.前の講義をまだ見たことがないなら、先に前の教程「30日間学会MooTools教育(3):配列管理DOM要素」を調べてください.今日はまずMooToolsではなく、JavaScriptの関数の基本的な知識を話します.しかし、MooToolsというテーマに合うためには、どこでMooToolsの関数を使うべきかを知る必要があります.以前、私たちはコードの例を全部domready方法に入れました.私達はそれをdomreadyの外に置く必要がある時、関数を使いました.domreadyで関数を呼び出す前に、関数は実行されません.一般的には、できるだけあなたの関数コードをページの外のどこかに置いて、JavaScriptアプリケーションを通じてそれらを呼び出すのがいいです.コードを書いて遊ぶだけなら、すべてのものを一つのページに書いたほうがいいかもしれません.この教程では、下記の約束を使います.

<script type="text/javascript">
/*
 *         
 */
 
window.addEvent('domready', function() {
    /*
     *         
     */
});
</script>

すべての例はこのフォーマットに従い、ページが読み込まれると関数コードが実行されます.各関数の下にはそれぞれのボタンがあります.それらをクリックして結果を見ることができます.これはMooToolsを使った事件処理によって完成しました.明日はこれについてお話しします.関数の基礎はJavaScriptにあります.関数を定義するためにいくつかの方法があります.私たちのテーマはMooToolsを説明するため、MooToolsの優先順位を選択します.以下の例は、関数定義の開始です.私たちは変数をなんと呼びましたか?function、そしてこの変数を関数として定義します.

var simple_function = function(){

              alert  ，             ：
alert('This is a simple function');

  ，                 ：
}

この括弧を閉じるのは簡単なことのようですが、この問題を追跡するのはつらいことが多いです.従って,関数定義の閉じた記号を適度に強制的にチェックするのはよい考えである.次の例では、それらを組み合わせました.この関数を宣言した後、ページローディング後のdomreadyイベントにこの関数に対する呼び出しを追加しました.例の下のボタンをクリックして呼び出し関数のsimple_を確認できます.function()後の結果

//   simple_function     
var simple_function = function(){
    alert('This is a simple function');
}
 
window.addEvent('domready', function() {
    //         simple_function
    simple_function();
});

 単一のパラメータは多くのコードを持っていますが、いつでも気軽に呼び出すことができます.これはすでに有用です.パラメータ(情報)を伝達して処理することができれば、より効果的です.関数でパラメータを使うには、functionの後ろの括弧に変数を追加する必要があります.

var name_of_function = function(name_of_the_parameter){
    /*          */
}

このようにすると、この関数の内部でこの変数が使用できます.パラメータに任意の名前を付けてもいいですが、パラメータ名をより有意義にするのはいい選択です.例えば、小さな町の名前を伝えたいなら、パラメータをtown_と名づけるかもしれません.nameは他のものよりもっと形と名前がいいです.以下の例では、一つのパラメータだけを持つ関数を定義し、この変数をポップアップダイアログに表示します.情報の第一部は引用符に含まれていますが、パラメータはありません.パラメータとハードコードの文字列を連結するには、プラス記号(+)の演算子で彼らを連結する必要があります.

var single_parameter_function = function(parameter){
    alert('the parameter is : ' + parameter);
}
 
window.addEvent('domready', function(){
        single_parameter_function('this is a parameter');
});

 複数のパラメータJavaScriptは、一つの関数で定義できるパラメータの個数に制限されていません.一般的には、関数に伝えるパラメータの数をできるだけ少なくするために、コードがより読みやすくなります.関数で定義された複数のパラメータはカンマ分割を使用します.他の挙動は単一のパラメータ関数と同じです.以下の例の関数は2つの数字を持ち、それらの和を3番目の数字に割り当てます.

var third_number = first_number + second_number;

ここに記号(+)を付ける演算子の使用とこれらの結果を文字列に接続するのとは少し違っています.

alert(first_number + " plus " + second_number + " equals " + third_number);

この初一はちょっと乱れているように見えますが、実はとても簡単です.二つの数字の間にプラス記号(+)を使うと、それらを合わせます.任意の組み合わせの数字と文字列の間にプラス記号(+)を使うと、すべてのものを文字列として連結します.

var two_parameter_function = function(first_number, second_number){
    //   first_number second_number    
    var third_number = first_number + second_number;
 
    //     
    alert(first_number + " plus " + second_number + " equals " + third_number);
}
 
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});

 リターン値はポップアップダイアログで関数の実行結果を表示するのに有用ですが、他のところでこの結果を使用する必要がある場合があります.このタスクを完了するには、関数のリセット機能が必要です.以下のコードの例では、関数は上記の例と同じですが、ここでは一つのダイアログを呼び出すのではなく、二つの数値を加算した結果を返します.number;あなたは発見することができて、私達もdomreadyの中で更に多くの事をしました.この結果を表示するために、この関数の戻り値をreturn_という名前で与えました.valueのパラメータをポップアップダイアログに表示します.

var two_parameter_returning_function = function(first_number, second_number){
    var third_number = first_number + second_number;
    return third_number;
}
window.addEvent('domready', function(){
    var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

 関数をパラメータとして、MooToolsのdomreadyの中で私達が包装したものを見たら、一つの関数をパラメータとして伝達していることに気づきます.

window.addEvent('domready', function(){
/*      */
});

                           ：
function(){
    /*      */
}

          ，Boomstix    domready               。         ：
//       domready      
var domready_function(){
    /*      */
}
 
//       domready  
window.addEvent('domready', domready_function);

この2つの方法は性能と機能性のどのような明らかな違いがあるか分かりませんので、基本的にはただのスタイル習慣だと思います.私達は引き続き私達の方式を堅持します.もしこの違いを知っている人がいたら教えてください. コード例明日の食欲を刺激するために(今日のMooToolsの不足を補うために)、意味のない関数を書いています.このページの背景を勝手に変えられます.

var changeColor = function(){
    //             
    // （   ：
    // http://docs.mootools.net/Element/Element#Element:get）
    var red   = $('red').get('value');
    var green = $('green').get('value');
    var blue  = $('blue').get('value');
 
    //            
    // （   ：
    // http://docs.mootools.net/Native/Number#Number:toInt）
    red   = red.toInt();
    green = green.toInt();
    blue  = blue.toInt();
 
    //          1 255  
    //         
    // （   ：
    // http://docs.mootools.net/Native/Number#Number:limit）
    red   = red.limit(1, 255);
    green = green.limit(1, 255);
    blue  = blue.limit(1, 255);
 
    //         
    // （   ：
    // http://docs.mootools.net/Native/Array/#Array:rgbToHex）
    var color = [red, green, blue].rgbToHex();
 
    //           
    // （   ：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', color);
 
}
 
var resetColor = function(){
    //              
    // （   ：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    //          （        ）
    // （   ：
    // http://docs.mootools.net/Element/Element.Event#Element:addEvent）
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});