Mootools-functions
提供：Dev Guides
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>次の出力が表示されます-
