Mootools 1.2教程関数

7128 ワード
今日からMooToolsシリーズ教程の第4講義を開始します.前の講義をまだ読んでいないなら、先に前の教程「Mootools 1.2教程(3)―配列使用案内」を調べてください.今日はまずMooToolsではなく、JavaScriptの関数の基本的な知識を話します.
しかし、MooToolsというテーマに合うためには、どこでMooToolsの関数を使うべきかを知る必要があります.以前、私たちはコードの例を全部domready方法に入れました.私達はそれをdomreadyの外に置く必要がある時、関数を使いました.domreadyで関数を呼び出す前に、関数は実行されません.
一般的には、できるだけあなたの関数コードをページの外のどこかに置いて、JavaScriptアプリケーションを通じてそれらを呼び出すのがいいです.コードを書いて遊ぶだけなら、すべてのものを一つのページに書いたほうがいいかもしれません.この教程では、下記の約束を使います.
 
  
 
  <br>/* 
  <br>*          
  <br>*/ 
  <br>window.addEvent('domready', function() { 
  <br>/* 
  <br>*          
  <br>*/ 
  <br>}); 
  <br>
すべての例はこのフォーマットに従い、ページが読み込まれると関数コードが実行されます.各関数の下にはそれぞれのボタンがあります.それらをクリックして結果を見ることができます.これは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(firstmber＋「plus」＋secondunumber＋「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); 
  
});
戻り値
一つのポップアップダイアログで関数の実行結果を表示するのは有用かもしれませんが、他のところでこの結果を使う必要がある場合があります.このタスクを完了するには、関数のリセット機能が必要です.以下のコード例では、関数は上記の例と同じですが、ここでは一つのダイアログを呼び出すのではなく、二つの数値を加算した結果を返します.
参照コード:
return third_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',domreadyfunction);
この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); 
  
});
勉強を続ける…
あなたの勉強に必要なものを全部含めたzipパッケージをダウンロードします.
MooTools 1.2コアライブラリ、外部JavaScriptファイル、簡単なhtmlページとcssファイルを含みます.
JavaScript関数に関する詳細な内容
JavaScript関数上のQuirksmoode(奇異モード)
私はJavaScript関数の資源についてよく分かりません.もし知っている人がいたら教えてください.
例に関する文書
  • ユーティリティ/DomReady
  • Number.toInt()
  • Number.limit()
  • Aray.rgb ToHex()
  • Element.set Style()
  • Element.addEvent()
    • 二種類のよく使うjavascript配列は方法の構想とコードを重視します.