Learn MooTools for 30 days (4): Functions and MooTools

Today, we will begin lecture 4th in the MooTools series. If you have not read the previous lecture, first check the previous tutorial "Learn MooTools for 30 days (3): Managing DOM elements in arrays". 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 that callback may place all your function code somewhere outside the page 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:

<Script type = "text/javascript">
/*
* The function definition is written here.
*/

Window. addEvent ('domainready', function (){
/*
* Function calls are 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:

Var simple_function = function (){

Then we added an alert statement to this function. When the function is called, it will execute:
Alert ('this is a simple function ');

Finally, we end the definition of this function with curly brackets:
}

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.

// 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 called at any time, it is very useful, but if you can pass the parameter (information) to it for processing, it 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:

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. You can give the parameter any name you want, but 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 may be better to name the parameter town_name (such as user_input) than other name of the model ).

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:

var single_parameter_function = function(parameter){
    alert('the parameter is : ' + parameter);
}

window.addEvent('domready', 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 to be passed to the function may be smaller, 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:

var third_number = first_number + second_number;

The use of the plus sign (+) operator here is slightly different from concatenating these results into strings:

alert(first_number + " plus " + second_number + " equals " + third_number);

Although this first day may seem a bit messy, 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.

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, instead of a dialog box popped up, the result of adding two numbers is returned:
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.

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);
    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:

Window. addEvent ('domainready', function (){
/* Function Code */
});

A function that passes a function as a parameter is called an anonymous function:
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:
// 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 food 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:

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 );
});