Mootools 1.2 tutorial Functions

Today, we will begin lecture 4th in the MooTools series. If you have not read the previous lecture, first check the previous tutorial "Mootools 1.2 tutorial (3) -- Introduction to array usage". Today, we will not talk about MooTools, but about the basic knowledge of functions in JavaScript.
However, to comply with the MooTools topic, you need to know where to use the functions of MooTools. Previously, we put the code in the domready method in all our sample code. When we need to put it out of domready, we use a function ). Before you call a function in domready, the function will not be executed.
In general, a better way is to place your function code somewhere outside the page as much as possible, and then call them through JavaScript applications. When you just write code for fun, it is easier to write everything on a single page. In this tutorial, we use the following conventions:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
/*
* The function definition is written here.
*/
Window. addEvent ('domainready', function (){
/*
* The function call is written here.
*/
});
</Script>

All examples follow this format. When the page is loaded (load), the function code is executed. There is a corresponding button under each function. You can click them and then see the result. This is done by processing events using MooTools. We will talk about this tomorrow.
Function Basics
In JavaScript, there are several methods to define functions. Since our topic is to explain MooTools, we will choose the preferred method of MooTools. The following example is the beginning of a function definition. Let's name a variable simple_function, and define it as a function:
Reference code:
Var simple_function = function (){
Then we added an alert statement to this function. When the function is called, it will execute:
Reference code:
Alert ('this is a simple function ');
Finally, we end the definition of this function with curly brackets:
Reference code:
}
Closing curly braces seems to be a simple task, but it is very painful to track the problem many times. Therefore, it is a good idea to forcibly check the function-defined closed symbols.
In the following example, we combine them. After declaring this function, we added a call to this function in the domready event after the page is loaded. You can click the button below the example to view the result after calling the simple_function (); function.
Reference code:
Copy codeThe Code is as follows:
// Define simple_function as a function
Var simple_function = function (){
Alert ('this is a simple function ');
}
Window. addEvent ('domainready', function (){
// Call simple_function after the page is loaded
Simple_function ();
});

Single Parameter
Although you have a lot of code that can be easily called at any time, this is very useful, but if you can pass it parameters (information) for processing, this will be more useful. To use parameters in a function, you must add a variable to the brackets behind the function, as shown in the following figure:
Reference code:
Copy codeThe Code is as follows:
Var name_of_function = function (name_of_the_parameter ){
/* Write the function code here */
}

Once you do this, you can use this variable within this function. Although you can give the parameter any name you want, it is a good choice to make the parameter name more meaningful. For example, if you want to pass the name of a town, it is better to name the parameter town_name (such as user_input) than to name it in a more fuzzy way ).
In the following example, we define a function with only one parameter and display this variable in the pop-up dialog box. Note that the first part of the information is enclosed in single quotes, but the parameter does not. When you want to connect parameters with hard-coded strings, you need to use the plus sign (+) operator to connect them, as shown below:
Reference code:
Copy codeThe Code is as follows:
Var single_parameter_function = function (parameter ){
Alert ('the parameter is: '+ parameter );
}
Window. addEvent ('domainready', function (){
Single_parameter_function ('this is a parameter ');
});

Multiple Parameters
JavaScript does not limit the number of parameters that can be defined in a function. In general, the number of parameters passed to the function should be as few as possible, which makes the code more readable. Multiple parameters defined in the function are separated by commas. Other actions are the same as those of a single parameter function. In the following example, a function has two numbers and assigns their sum to the third number, as shown in the following figure:
Reference code:
Var third_number = first_number + second_number;
Here, the use of the plus sign (+) operator is slightly different from concatenating these results into strings:
Reference code:
Alert (first_number + "plus" + second_number + "equals" + third_number );
Although this first day may seem a bit confusing, it is actually very simple. If you use the plus sign (+) between two numbers, you add them together. If you use the plus sign (+) between any combination of numbers and strings, everything is connected as a string.
Reference code:
Copy codeThe Code is as follows:
Var two_parameter_function = function (first_number, second_number ){
// Obtain the sum of first_number and second_number
Var third_number = first_number + second_number;
// Display the result
Alert (first_number + "plus" + second_number + "equals" + third_number );
}
Window. addEvent ('domainready', function (){
Two_parameter_function (10, 5 );
});

Return Value
It may be useful to display the execution result of a function in a pop-up dialog box, but sometimes you may need to use the result elsewhere. To complete this task, you need to use the return function in the function. In the following sample code, the function is the same as the preceding example. However, a dialog box is not displayed, but the result of adding two numbers is returned:
Reference code:
Return third_number;
You will find that we have done more in domready. To display this result, we assign the return value of this function to a parameter named return_value and display it in the pop-up dialog box.
Reference code:
Copy codeThe Code is as follows:
Var two_parameter_returning_function = function (first_number, second_number ){
Var third_number = first_number + second_number;
Return third_number;
}
Window. addEvent ('domainready', function (){
Var return_value = two_parameter_returning_function (10, 5 );
Alert ("return value is:" + return_value );
});

Use a function as a parameter
If you look at the encapsulated items in domready of MooTools, you will notice that we have passed a function as a parameter:
Reference code:
Window. addEvent ('domainready', function (){
/* Function Code */
});
A function that passes a function as a parameter is called an anonymous function:
Reference code:
Function (){
/* Function Code */
}
In the comments in the first tutorial, Boomstix pointed out an alternative way to do not use anonymous functions in domready. This method is as follows:
Reference code:
// Create a function to be called in domready
Var domready_function (){
/* Function Code */
}
// Specify the function to the domready event
Window. addEvent ('domready', domready_function );
I don't know any significant difference in performance and functionality between the two methods, so I think this is basically just a style habit. We will continue to stick to our approach. If anyone knows these differences, please let us know.
Sample Code
To stimulate your appetite for Tomorrow (and make up for today's lack of MooTools), I wrote a meaningless function that allows you to change the background of this page at will:
Reference code:
Copy codeThe Code is as follows:
Var changeColor = function (){
// Used to obtain the color value from the input box
// (See:
// Http://docs.mootools.net/Element/Element#Element:get)
Var red = $ ('red'). get ('value ');
Var green = $ ('green'). get ('value ');
Var blue = $ ('blue'). get ('value ');
// Make sure everything is an integer
// (See:
// Http://docs.mootools.net/Native/Number#Number:toInt)
Red = red. toInt ();
Green = green. toInt ();
Blue = blue. toInt ();
// Make sure that each number is between 1 and 255.
// Get the integer if needed
// (See:
// Http://docs.mootools.net/Native/Number#Number:limit)
Red = red. limit (1,255 );
Green = green. limit (1,255 );
Blue = blue. limit (1,255 );
// Obtain the hexadecimal code
// (See:
// Http://docs.mootools.net/Native/Array/#Array:rgbToHex)
Var color = [red, green, blue]. rgbToHex ();
// Set it to the background color of the page
// (See:
// Http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$ ('Body _ wrap '). setStyle ('background', color );
}
Var resetColor = function (){
// Reset the background color of the page to white
// (See:
// Http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$ ('Body _ wrap '). setStyle ('background',' # fff ');
}
Window. addEvent ('domainready', function (){
// Add a click event for the button (we will talk about this tomorrow)
// (See:
// Http://docs.mootools.net/Element/Element.Event#Element:addEvent)
$ ('Change'). addEvent ('click', changeColor );
$ ('Reset'). addEvent ('click', resetColor );
});

Extended learning...

Download a zip package containing everything you need

Contains the core library of MooTools 1.2, an external JavaScript file, a simple html page, and a css file.