Today we will start the fourth lesson of the MooTools series of tutorials. If you haven't read the previous lecture yet, please first check out the previous tutorial "Mootools 1.2 Tutorial (3) - Introduction to Array Use". Today, let’s not talk about MooTools, but about the basic knowledge of functions in JavaScript.
However, in order to comply with the MooTools topic, you need to know where to use MooTools' functions. Previously, we have put the code in the domready method in all our sample code. When we need to put it outside of domready, we use the function. The function will not be executed until you call the function in domready.
Generally speaking, a better way is to put your function code as much as possible outside the page and call them through a JavaScript application. When you just write code to play with it, it may be easier to write everything on one page. In this tutorial, we use the following convention:
<script type="text/javascript">
/*
* Function definition is written here
*/
('domready', function() {
/*
* Function calls are written here
*/
});
</script>
All examples follow this format, and when the page is loaded (load) the function code is executed. Below each function, there is a corresponding button that you can click on and see the results. This is done by using MooTools' event handling, and we'll talk about this tomorrow.
Functional Basics
In JavaScript, there are several ways to define functions. Since our topic is to explain MooTools, we will choose the preferred method for MooTools. The following example is the beginning of a function definition. We have a variable named simple_function, and define this variable as a function:
Reference code:
var simple_function = function(){
Then we add an alert statement to this function, which 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 braces seems like a very simple thing, but it is often painful to track this problem. Therefore, it is a good idea to moderately force the function definition to check the off symbol.
In the following example, we combine them. After declaring this function, we add 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:
// Define simple_function as a function
var simple_function = function(){
alert('This is a simple function');
}
('domready', function() {
// Call simple_function after the page is loaded
simple_function();
});
Single parameter
While you have a lot of code that can be called easily at any time, it is already useful, but it will be even more useful if you can pass parameters (information) to it for processing. To use parameters in a function, you need to add a variable in the parentheses after the function, like this:
Reference code:
var name_of_function = function(name_of_the_parameter){
/* Function code is written here */
}
Once you do this, you can use this variable inside this function. Although you can give the parameter any name you want, making the parameter name more meaningful is a good choice. For example, if you want to pass a town name, you might be better at naming the parameter town_name than other more vague names (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 included in single quotes, while the parameters do not. When you want to concatenate parameters and hardcoded strings, you need to concatenate them with the plus sign (+) operator, just like the following:
Reference code:
var single_parameter_function = function(parameter){
alert('the parameter is : ' + parameter);
}
('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, making 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 divided using commas, and other behaviors are the same as a single parameter function. The function in the following example takes two numbers and assigns their sum to the third number, like this:
Reference code:
var third_number = first_number + second_number;
Here the use of plus sign (+) operators and concatenating these results into strings is slightly different:
Reference code:
alert(first_number + " plus " + second_number + " equals " + third_number);
Although this first year of junior high school 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, then you are concatenating everything as a string.
Reference code:
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;
// Show results
alert(first_number + " plus " + second_number + " equals " + third_number);
}
('domready', 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 this result elsewhere. To complete 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 a dialog box popping up, it returns the result after adding two numbers:
Reference code:
return third_number;
You will find that we do more in domready as well. To display this result, we assign the return value of the function to a parameter named return_value, and then display it in the pop-up dialog box.
Reference code:
var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
alert("return value is : " + return_value);
});
Take functions as parameters
If you look at the things we wrap in MooTools' domready, you will notice that we pass a function as a parameter:
Reference code:
('domready', function(){
/* Function code */
});
A function that passes a function as an argument like this is called an anonymous function:
Reference code:
function(){
/* Function code */
}
In the comments of the first tutorial, Boomstix pointed out an alternative way to not use anonymous functions in domready. This is how it is:
Reference code:
// Create a function to be called when domready
var domready_function(){
/* Function code */
}
// Specify the function to the domready event
('domready', domready_function);
I don't know any obvious differences in performance and functionality between the two approaches, so I think it's basically just a style habit. We will continue to stick to our way and let us know if anyone knows these differences.
Code Example
To stimulate your appetite 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:
var changeColor = function(){
// Used to obtain color values from the input box
// (Please refer to:
// /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:
// /Native/Number#Number:toInt）
red = ();
green = ();
blue = ();
// Make sure every number is between 1 and 255
// If necessary, round
// (Please refer to:
// /Native/Number#Number:limit）
red = (1, 255);
green = (1, 255);
blue = (1, 255);
// Get the hexadecimal code
// (Please refer to:
// /Native/Array/#Array:rgbToHex）
var color = [red, green, blue].rgbToHex();
// Set as the background color of the page
// (Please refer to:
// /Element/#Element:setStyle）
$('body_wrap').setStyle('background', color);
}
var resetColor = function(){
// Reset the background color of the page to white
// (Please refer to:
// /Element/#Element:setStyle）
$('body_wrap').setStyle('background', '#fff');
}
('domready', function(){
// Add a click event to the button (we will talk about this tomorrow)
// (Please refer to:
// /Element/#Element:addEvent）
$('change').addEvent('click', changeColor);
$('reset').addEvent('click', resetColor);
});
However, in order to comply with the MooTools topic, you need to know where to use MooTools' functions. Previously, we have put the code in the domready method in all our sample code. When we need to put it outside of domready, we use the function. The function will not be executed until you call the function in domready.
Generally speaking, a better way is to put your function code as much as possible outside the page and call them through a JavaScript application. When you just write code to play with it, it may be easier to write everything on one page. In this tutorial, we use the following convention:
Copy the codeThe code is as follows:
<script type="text/javascript">
/*
* Function definition is written here
*/
('domready', function() {
/*
* Function calls are written here
*/
});
</script>
All examples follow this format, and when the page is loaded (load) the function code is executed. Below each function, there is a corresponding button that you can click on and see the results. This is done by using MooTools' event handling, and we'll talk about this tomorrow.
Functional Basics
In JavaScript, there are several ways to define functions. Since our topic is to explain MooTools, we will choose the preferred method for MooTools. The following example is the beginning of a function definition. We have a variable named simple_function, and define this variable as a function:
Reference code:
var simple_function = function(){
Then we add an alert statement to this function, which 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 braces seems like a very simple thing, but it is often painful to track this problem. Therefore, it is a good idea to moderately force the function definition to check the off symbol.
In the following example, we combine them. After declaring this function, we add 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 the codeThe code is as follows:
// Define simple_function as a function
var simple_function = function(){
alert('This is a simple function');
}
('domready', function() {
// Call simple_function after the page is loaded
simple_function();
});
Single parameter
While you have a lot of code that can be called easily at any time, it is already useful, but it will be even more useful if you can pass parameters (information) to it for processing. To use parameters in a function, you need to add a variable in the parentheses after the function, like this:
Reference code:
Copy the codeThe code is as follows:
var name_of_function = function(name_of_the_parameter){
/* Function code is written here */
}
Once you do this, you can use this variable inside this function. Although you can give the parameter any name you want, making the parameter name more meaningful is a good choice. For example, if you want to pass a town name, you might be better at naming the parameter town_name than other more vague names (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 included in single quotes, while the parameters do not. When you want to concatenate parameters and hardcoded strings, you need to concatenate them with the plus sign (+) operator, just like the following:
Reference code:
Copy the codeThe code is as follows:
var single_parameter_function = function(parameter){
alert('the parameter is : ' + parameter);
}
('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, making 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 divided using commas, and other behaviors are the same as a single parameter function. The function in the following example takes two numbers and assigns their sum to the third number, like this:
Reference code:
var third_number = first_number + second_number;
Here the use of plus sign (+) operators and concatenating these results into strings is slightly different:
Reference code:
alert(first_number + " plus " + second_number + " equals " + third_number);
Although this first year of junior high school 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, then you are concatenating everything as a string.
Reference code:
Copy the codeThe 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;
// Show results
alert(first_number + " plus " + second_number + " equals " + third_number);
}
('domready', 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 this result elsewhere. To complete 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 a dialog box popping up, it returns the result after adding two numbers:
Reference code:
return third_number;
You will find that we do more in domready as well. To display this result, we assign the return value of the function to a parameter named return_value, and then display it in the pop-up dialog box.
Reference code:
Copy the 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;
}
('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
alert("return value is : " + return_value);
});
Take functions as parameters
If you look at the things we wrap in MooTools' domready, you will notice that we pass a function as a parameter:
Reference code:
('domready', function(){
/* Function code */
});
A function that passes a function as an argument like this is called an anonymous function:
Reference code:
function(){
/* Function code */
}
In the comments of the first tutorial, Boomstix pointed out an alternative way to not use anonymous functions in domready. This is how it is:
Reference code:
// Create a function to be called when domready
var domready_function(){
/* Function code */
}
// Specify the function to the domready event
('domready', domready_function);
I don't know any obvious differences in performance and functionality between the two approaches, so I think it's basically just a style habit. We will continue to stick to our way and let us know if anyone knows these differences.
Code Example
To stimulate your appetite 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 the codeThe code is as follows:
var changeColor = function(){
// Used to obtain color values from the input box
// (Please refer to:
// /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:
// /Native/Number#Number:toInt）
red = ();
green = ();
blue = ();
// Make sure every number is between 1 and 255
// If necessary, round
// (Please refer to:
// /Native/Number#Number:limit）
red = (1, 255);
green = (1, 255);
blue = (1, 255);
// Get the hexadecimal code
// (Please refer to:
// /Native/Array/#Array:rgbToHex）
var color = [red, green, blue].rgbToHex();
// Set as the background color of the page
// (Please refer to:
// /Element/#Element:setStyle）
$('body_wrap').setStyle('background', color);
}
var resetColor = function(){
// Reset the background color of the page to white
// (Please refer to:
// /Element/#Element:setStyle）
$('body_wrap').setStyle('background', '#fff');
}
('domready', function(){
// Add a click event to the button (we will talk about this tomorrow)
// (Please refer to:
// /Element/#Element:addEvent）
$('change').addEvent('click', changeColor);
$('reset').addEvent('click', resetColor);
});
Extended learning...
Download the zip package containing everything you need to learn
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 (weird mode)
I don't have a good resource on JavaScript functions, please let me know if anyone knows.
Documentation about examples
- Utilities/DomReady
- ()
- ()
- ()
- ()
- ()