MooTools - Fonctions

Les fonctions dans MooTools sont un concept de JavaScript. Nous savons déjà comment utiliser les fonctions en JavaScript. En général, il est préférable de conserver la fonction en dehors du corps de la page dans la balise de script. Dans MooTools, nous suivons le même schéma. Ici, vous pouvez concevoir votre propre fonction en fonction des besoins. Nous devons maintenant appeler toutes les fonctions définies par l'utilisateur dans ledomready fonction.

Jetez un œil à la syntaxe suivante pour comprendre comment utiliser la fonction généralisée dans MooTools.

Syntaxe

<script type = "text/javascript">
   /*
   Function definitions go here
   */
   window.addEvent('domready', function() {
      /* Calls to functions go here */
   });
</script>

Structure basique

Il existe quelques méthodes de base pour définir une fonction dans MooTools. Il n'y a pas de différence entre les syntaxes de fonction de JavaScript et MooTools mais la différence réside dans l'appel d'une fonction. Prenons un petit exemple qui définit une fonction nommée demo_function. Jetez un œil au code suivant.

Exemple

<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>

Vous recevrez la sortie suivante -

Production

Fonction de paramètre unique

Vous pouvez également créer une fonction qui accepte un paramètre. Pour utiliser des paramètres avec des fonctions, vous devez ajouter un nom de variable entre parenthèses. Une fois que vous l'avez fournie, la variable est disponible à l'intérieur pour être utilisée. Prenons un exemple qui définit une fonction qui prend un seul paramètre et imprime un message avec le paramètre.

Jetez un œil au code suivant.

Exemple

<!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>

Vous recevrez la sortie suivante -

Production

Renvoyer une valeur

Chaque fois que vous souhaitez utiliser le résultat d'une fonction comme entrée pour une autre variable, vous devez utiliser la valeur de retour pour cette fonction. Vous pouvez utiliser le mot-clé return pour renvoyer une valeur à partir de la fonction. Prenons un exemple qui définit une fonction qui acceptera deux valeurs de paramètres et retournera la somme de ces deux paramètres. Jetez un œil au code suivant.

Exemple

<!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>

Vous recevrez la sortie suivante -

Production