Mootools 1.2 チュートリアル関数_Mootools-jsチュートリアル-php.cn

今日から MooTools チュートリアルシリーズの 4 番目の講義が始まります。前回の講義をまだ読んでいない場合は、まず前回のチュートリアル「Mootools 1.2 チュートリアル (3) - 配列の使い方入門」をご覧ください。今日は MooTools についてではなく、JavaScript の関数の基本的な知識について話します。
ただし、MooTools テーマに準拠するには、MooTools 機能をどこで使用するかを知る必要があります。以前は、すべてのサンプルコードの domready メソッドにコードを配置しました。 domready の外に置く必要がある場合は、関数を使用します。この関数は、domready で呼び出すまで実行されません。
一般的に、関数コードをできる限りページの外に配置し、JavaScript アプリケーションを通じて呼び出す方が良い方法です。趣味でコードを書いているだけの場合は、すべてを 1 ページに書くほうが簡単かもしれません。このチュートリアルでは、次の規則を使用します:

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

 
< ;script type="text/javascript"> 
/* 
* 関数の定義はここに記述されます
*/ 
window.addEvent('domready', function() { 
/* 
* 関数呼び出しはここに記述されます 
*/ 
}) 
 

ページの場合、すべての例はこの形式に従います。 loads 関数コードを実行（ロード）するとき。各関数の下には、対応するボタンがあり、クリックすると結果が表示されます。これは MooTools のイベント処理を使用して行われます。これについては明日説明します。
関数の基本
JavaScript では関数を定義する方法がいくつかあります。今回のトピックは MooTools を説明することなので、MooTools の推奨される方法を選択します。次の例は、関数定義の始まりです。変数を作成して simple_function という名前を付け、この変数を関数として定義しました。
リファレンスコード:
var simple_function = function(){
次に、この関数にアラートステートメントを追加しました。これが実行されます。関数が呼び出されるとき:
リファレンスコード:
alert('This is a simple function');
最後に、中括弧でこの関数の定義を終了します:
リファレンスコード:
}
この閉じ中括弧は非常に単純なことのように見えますが、多くの場合、この問題を追跡するのは骨が折れます。したがって、関数定義の終了記号のチェックを適度に強制することをお勧めします。
以下の例では、それらを組み合わせています。この関数を宣言した後、ページが読み込まれた後の domready イベントにこの関数への呼び出しを追加しました。関数 simple_function(); を呼び出した後、例の下のボタンをクリックして結果を表示できます。
参照コード:

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

// 定義関数としての simple_function
var simple_function = function(){ 
alert('これは単純な関数です') 
} 
window.addEvent('domready', function() { 
 // ページの読み込み後に simple_function を呼び出すとき 
simple_function(); 
}); 

単一パラメータ
これは、実行できるコードがたくさんある場合にはすでに役に立ちます。いつでも簡単に呼び出すことができますが、処理のためにパラメータ（情報）を渡すことができればさらに便利です。関数でパラメーターを使用するには、次のように、関数の後にかっこ内の変数を追加する必要があります:
リファレンスコード:

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

var name_of_function = function(name_of_the_parameter){ 
/* 関数コードはここに記述されます*/ 
} 

これを実行すると、関数内で変数を使用できるようになります。パラメータには任意の名前を付けることができますが、パラメータ名をより意味のあるものにすることをお勧めします。たとえば、町の名前を渡す場合は、パラメータに曖昧な名前 (user_input など) を付けるよりも、town_name という名前を付けた方がよい場合があります。
次の例では、パラメータを 1 つだけ持つ関数を定義し、この変数をポップアップダイアログボックスに表示します。メッセージの最初の部分は一重引用符で囲まれていますが、パラメーターは一重引用符で囲まれていないことに注意してください。パラメータをハードコードされた文字列と連結したい場合は、次のようにプラス ( ) 演算子を使用してパラメータを連結する必要があります。
参照コード:

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

var single_parameter_function = function(parameter){ 
alert('パラメータは : ' パラメータ); 
} 
window.addEvent('domready', function(){ 
 single_parameter_function('これはパラメータです'); 
}); 

複数のパラメータ
JavaScript では、関数内で定義できるパラメータの数は制限されません。一般に、関数に渡されるパラメータの数をできるだけ少なくすると、コードが読みやすくなります。関数内で定義された複数のパラメーターはカンマで区切られ、それ以外の場合は単一パラメーター関数と同じように動作します。以下の例の関数は、次のように 2 つの数値を受け取り、その合計を 3 番目の数値に割り当てます。
リファレンスコード:
var third_number = first_number Second_number;
ここでのプラス記号 ( ) 演算子は、これらの結果を文字列に連結します。
参照コード:
alert(first_number " plus " Second_number "等しい" third_number);
これは 1 年生では可能であるように見えますが、少し混乱しますが、実際は非常に簡単です。 2 つの数値の間にプラス記号 ( ) を使用すると、それらを加算することになります。数値と文字列の組み合わせの間にプラス記号 ( ) を使用すると、すべてが文字列として連結されます。
参照コード:

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

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 "等しい" third_number ); 
} 
window.addEvent('domready', function(){ 
two_parameter_function(10, 5); 
}); > in a 関数の実行結果をポップアップ ダイアログ ボックスに表示すると便利ですが、結果を別の場所で使用する必要がある場合もあります。このタスクを実行するには、関数内で return 関数を使用する必要があります。次のコード例では、関数は上の例と同じですが、ダイアログ ボックスを表示する代わりに、2 つの数値を加算した結果を返します。 
参照コード: 

return third_number; Discovery では、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 では、パラメーターとして関数を渡していることがわかります。
参照コード: 
window.addEvent('domready', function(){ 
/* 関数コード*/ 
}); 

このように関数をパラメータとして渡す関数を匿名関数と呼びます。
リファレンスコード:
function(){
/* 関数コード*/
}
In最初のチュートリアルのコメントで、Boomstix は domready で匿名関数を使用しない別の方法を指摘しました。このメソッドは次のようになります。
参考コード:
// domready 時に呼び出される関数を作成します。
var domready_function(){
/* 関数コード*/
}
/ / 関数を domready イベントに割り当てます。
window.addEvent('domready', domready_function);
2 つのアプローチのパフォーマンスや機能に大きな違いがあるかどうかはわかりません。基本的には次のとおりだと思います。ただの文体の癖。私たちは今後も私たちのアプローチを貫きますので、これらの違いをご存知の方がいらっしゃいましたら、ぜひお知らせください。
コード例
明日の食欲を刺激するために (そして今日の MooTools の不足を補うために)、このページの背景を自由に変更できる無意味な関数を書きました:
リファレンスコード:

コードをコピー

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

var changeColor = function(){ 
// Used to get the color value from the input box 
// (please refer to: 
// http://docs.mootools.net /Element/Element#Element:get) 
var red = $('red').get('value'); 
var green = $('green').get('value'); 
var blue = $('blue').get('value'); 
// Make sure everything is an integer 
// (please refer to: 
// http://docs .mootools.net/Native/Number#Number:toInt) 
red = red.toInt(); 
green = green.toInt(); 
blue = blue.toInt(); 
/ / Make sure every number is between 1 and 255
// Round if necessary
// (please refer to: 
// http://docs.mootools.net/Native/Number #Number:limit) 
red = red.limit(1, 255); 
green = green.limit(1, 255); 
blue = blue.limit(1, 255); 
 // Get the hexadecimal code 
// (please refer to: 
// http://docs.mootools.net/Native/Array/#Array:rgbToHex) 
var color = [red, green, blue].rgbToHex(); 
// Set the background color of the page 
// (please refer to: 
// http://docs.mootools.net/Element/Element.Style #Element:setStyle) 
$('body_wrap').setStyle('background', color); 
} 
var resetColor = function(){ 
// Reset the background color of the page to White 
// (please refer to: 
// http://docs.mootools.net/Element/Element.Style#Element:setStyle) 
$('body_wrap').setStyle('background' , '#fff'); 
} 
window.addEvent('domready', function(){ 
// Add a click event for the button (we will talk about this tomorrow) 
// (Please Reference: 
// http://docs.mootools.net/Element/Element.Event#Element:addEvent) 
$('change').addEvent('click', changeColor); 
$ ('reset').addEvent('click', resetColor); 
}); 