MooTools Tutorial
MooTools Useful Resources
Selected Reading
- MooTools - Fx.Events
- MooTools - Fx.Options
- MooTools - Fx.Morph
- MooTools - Fx.Tween
- MooTools - Fx.Slide
- MooTools - Fx.Element
- MooTools - Classes
- MooTools - Tabbed Content
- MooTools - Tooltips
- MooTools - Accordion
- MooTools - Sortables
- MooTools - Sliders
- MooTools - Periodicals
- MooTools - Regular Expression
- MooTools - Drag and Drop
- MooTools - Input Filtering
- MooTools - Style Properties
- MooTools - DOM Manipulations
- MooTools - Event Handling
- MooTools - Functions
- MooTools - Using Arrays
- MooTools - Selectors
- MooTools - Program Structure
- MooTools - Installation
- MooTools - Introduction
- MooTools - Home
MooTools Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MooTools - Functions
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 generapzed 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 calpng 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 −