Mootools 1.2 Tutorial Function_Mootools

Today begins the fourth lecture in the MooTools tutorial series. If you haven't read the previous lecture, please check out the previous tutorial "Mootools 1.2 Tutorial (3) - Introduction to Using Arrays" first. Today we will not talk about MooTools, but the basic knowledge of functions in JavaScript.
However, in order to comply with the MooTools theme, you need to know where to use MooTools functions. Previously, we have placed the code in the domready method in all our sample code. When we need to put it outside of domready, we use functions. The function will not be executed until you call it in domready.
Generally speaking, a better way is to put your function codes somewhere outside the page as much as possible, and then call them through JavaScript applications. When you're just writing code for fun, it might be easier to write everything on one page. In this tutorial, we use the following convention:

Copy the code The code is as follows:

< ;script type="text/javascript">
/*
* The function definition is written here
*/
window.addEvent('domready', function() {
/*
* Function calls are written here
*/
});

All examples follow this format, when the page loads When (load) executes the function code. Underneath each function, there is a corresponding button that you can click on and see the results. This is done using MooTools' event handling, which we'll cover tomorrow.
Function Basics
In JavaScript, there are several ways to define functions. Since our topic is to explain MooTools, we will choose the preferred way of MooTools. The following example is the beginning of a function definition. We created a variable and named it simple_function, and defined this variable as a function:
Reference code:
var simple_function = function(){
Then we added an alert statement to this function, It will be executed when the function is called:
Reference code:
alert('This is a simple function');
Finally, we end the definition of this function with a curly brace:
Reference Code:
}
This closing curly brace seems to be a very simple thing, but many times it is a pain to track down this problem. Therefore, it's a good idea to moderately force checking of closing symbols for function definitions.
In the example below, 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 function simple_function();.
Reference code:

Copy code The code is as follows:

// Define simple_function as a Function
var simple_function = function(){
alert('This is a simple function');
}
window.addEvent('domready', function() {
// when Call simple_function after the page loads
simple_function();
});

Single parameter
This is already useful though when you have a lot of code that can easily be called at any time, but This would be more useful if you could pass parameters (information) to it for processing. To use parameters in a function, you need to add a variable in parentheses after the function, like this:
Reference code:

Copy code The code is as follows:

var name_of_function = function(name_of_the_parameter){
/* Function code is written here*/
}

Once you do this, the variable can be used inside the function. Although you can name your parameters whatever you want, it's a good idea to make your parameter names more meaningful. For example, if you are passing the name of a town, you might be better off naming the parameter town_name rather than something more ambiguous (such as user_input).
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 message is enclosed in single quotes, while the parameter is not. When you want to concatenate parameters with hardcoded strings, you need to concatenate them using the plus ( ) operator, like this:
Reference code:

Copy code The code is as follows:

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. Generally speaking, keeping the number of parameters passed to a function as small as possible will make the code more readable. Multiple parameters defined in a function are separated by commas, and otherwise behave the same as a single parameter function. The function in the example below takes two numbers and assigns their sum to a third number, like this:
Reference code:
var third_number = first_number second_number;
Here the plus sign ( ) operator is slightly different from concatenating these results into a string:
Reference code:
alert(first_number " plus " second_number " equals " third_number);
Although this seems possible in the first grade A little confusing, but actually very simple. If you use the plus sign ( ) between two numbers, you are adding them together. If you use the plus sign ( ) between any combination of numbers and strings, you are concatenating everything as strings.
Reference code:

Copy code The code is as follows:

var two_parameter_function = function(first_number , second_number){
// Get 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('domready', function(){
two_parameter_function(10, 5);
});

return value
in a It can be useful to display the execution results of a function in a pop-up dialog box, but sometimes you may need to use the results elsewhere. To accomplish this task, you need to use the return function in the function. In the following example code, the function is the same as the above example, but instead of popping up a dialog box, it returns the result of adding two numbers:
Reference code:
return third_number;
You will Discovery, we also do a lot more in domready. In order to display this result, we assign the return value of this function to a parameter named return_value, and then display it in the pop-up dialog box.
Reference code:

Copy code The 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('domready', function(){
var return_value = two_parameter_returning_function(10, 5) ;
alert("return value is : " return_value);
});

Put function as parameter
If you look at what we package in domready of MooTools, You will notice that we passed a function as a parameter:
Reference code:
window.addEvent('domready', function(){
/* function code*/
});
A function that passes a function as a parameter like this is called an anonymous function:
Reference code:
function(){
/* Function code*/
}
In In the comments of the first tutorial, Boomstix pointed out an alternative way of not using anonymous functions in domready. This method is like this:
Reference code:
// Create a function to be called when domready
var domready_function(){
/* Function code*/
}
// Assign the function to the domready event
window.addEvent('domready', domready_function);
I don't know of any significant difference in performance or functionality between the two approaches, so I think this is basically It's just a stylistic habit. We will continue to stick to our approach, if anyone knows of these differences please let us know.
Code example
In order to stimulate your appetite tomorrow (and make up for the lack of MooTools today), I wrote a meaningless function that allows you to change the background of this page at will:
Reference code:

Copy code The code is as follows:

var changeColor = function(){
// Used to get the color value from the input box
// (please refer to:
// 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
// (please refer to:
// http://docs .mootools.net/Native/Number#Number:toInt)
red = red.toInt();
green = green.toInt();
blue = blue.toInt();
/ / Make sure every number is between 1 and 255
// Round if necessary
// (please refer to:
// http://docs.mootools.net/Native/Number #Number:limit)
red = red.limit(1, 255);
green = green.limit(1, 255);
blue = blue.limit(1, 255);
// Get the hexadecimal code
// (please refer to:
// http://docs.mootools.net/Native/Array/#Array:rgbToHex)
var color = [red, green, blue].rgbToHex();
// Set the background color of the page
// (please refer to:
// 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
// (please refer to:
// http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$('body_wrap').setStyle('background' , '#fff');
}
window.addEvent('domready', function(){
// Add a click event for the button (we will talk about this tomorrow)
// (Please Reference:
// http://docs.mootools.net/Element/Element.Event#Element:addEvent)
$('change').addEvent('click', changeColor);
$ ('reset').addEvent('click', resetColor);
});

Extended learning...

Download the zip package containing everything you need to study

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

More about JavaScript functions

Quirksmode on JavaScript functions

I don’t have a good resource on JavaScript functions, if anyone knows one please let me know.

Documentation on examples

• Utilities/DomReady
• Number.toInt()
• Number.limit()
• Array.rgbToHex()
• Element.setStyle()
• Element.addEvent()