MooTools - Functions

Functions in MooTools is a concept from JavaScript. We already know how to use functions in JavaScript. Generally, it is better to keep the function outside the page body in the script tag. In MooTools, we follow the same pattern. Here, you can design your own function according to the requirement. We now have to call all the user-defined functions in the domready function.

Take a look at the following syntax to understand how to use generalized function in MooTools.

Syntax

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

Basic Structure

There are a few basic ways to define a function in MooTools. There is no difference between the function syntaxes of JavaScript and MooTools but the difference is in calling a function. Let us take a small example that defines a function named demo_function. Take a look at the following code.

Example

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

You will receive the following output −

Output

Single Parameter Function

You can also create a function that accepts a parameter. To use parameters with functions, you need to add a variable name in the parenthesis. Once you provide it, the variable is available inside for use. Let us take an example that defines a function that takes a single parameter and prints a message along with the parameter.

Take a look at the following code.

Example

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

You will receive the following output −

Output

Returning a Value

Whenever you want to use the result of one function as input for another variable, you are required to use the return value for that function. You can use the return keyword for returning a value from the function. Let us take an example that defines a function that will accept two parameter values and return the sum of those two parameters. Take a look at the following code.

Example

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

You will receive the following output −

Output

Advertisements