MooTools-関数
MooToolsの関数はJavaScriptの概念です。JavaScriptで関数を使用する方法はすでに知っています。一般に、スクリプトタグのページ本文の外側に関数を保持することをお勧めします。MooToolsでも同じパターンに従います。ここでは、要件に応じて独自の機能を設計できます。ここで、のすべてのユーザー定義関数を呼び出す必要があります。domready 関数。
MooToolsで一般化された関数を使用する方法を理解するには、次の構文を見てください。
構文
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>基本構造
MooToolsで関数を定義する基本的な方法はいくつかあります。JavaScriptとMooToolsの関数構文に違いはありませんが、違いは関数の呼び出しにあります。demo_functionという名前の関数を定義する小さな例を見てみましょう。次のコードを見てください。
例
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//Define simple_function as a function
var simple_function = function(){
document.write('This is a simple function');
}
window.addEvent('domready', function() {
//Call simple_function when the dom(page) is ready
simple_function();
});
</script>
</head>
<body>
</body>
</html>次の出力が表示されます-
出力
単一パラメータ機能
パラメータを受け入れる関数を作成することもできます。関数でパラメーターを使用するには、括弧内に変数名を追加する必要があります。指定すると、変数は内部で使用できるようになります。単一のパラメーターを受け取り、パラメーターと一緒にメッセージを出力する関数を定義する例を見てみましょう。
次のコードを見てください。
例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var single_parameter_function = function(parameter){
document.write('The parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('DEMO PARAMETER');
});
</script>
</head>
<body>
</body>
</html>次の出力が表示されます-
出力
値を返す
ある関数の結果を別の変数の入力として使用する場合は常に、その関数の戻り値を使用する必要があります。関数から値を返すためにreturnキーワードを使用できます。2つのパラメーター値を受け入れ、それら2つのパラメーターの合計を返す関数を定義する例を見てみましょう。次のコードを見てください。
例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
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);
document.write("Return value is : " + return_value);
});
</script>
</head>
<body>
</body>
</html>次の出力が表示されます-