JavaScript functions
In this lesson, you need to have complete knowledge of how to use functions, they are necessary and important in JavaScript in order to make HTML tags manageable and portable while the page is running. After we know the functions, we will call them and run them in a simple way.
Definition
A function is a set of commands executed in the form of a single block of code that returns a base value through which the processing stages in the compiler are completed, and its syntax is just like linear functions in mathematics that return an algebraic value and is expressed in JavaScript as follows:
function hello() {
document.write("I will say hello!");
}
The function declaration language is written followed by the name with parentheses, and then the command is executed inside.
Benefits
functions have many benefits which should sometimes be used to:
- Organizing code parts.
- Ease of knowing the purpose of each block of code and what we are going to use it for, sometimes functions help others understand our code.
- Avoid clutter and errors in compilers. When working with functions with overloading, we will give raw values that are filled in according to the specified purpose.
- Avoid code duplication, we may make one function for more than one stage and this saves reading time and increases execution speed.
Declaring
There is more than one option available in displaying the definition of functions in JavaScript. Either we create a function and execute it directly as in the previous example, or we make an initial definition of it at the beginning of the page as follows:
function myFunctionName()
Where we displayed it at the beginning of the page by specifying the word function and its name, then parentheses to be used later, and the goal of that process, as we said, is to facilitate the understanding of the code.
Defining
Processing of the function inside begins at the beginning of the curly brace. When we open the curly brace, we do all the arithmetic operations inside, and after completing them, we close this bracket so that the function is ready to be called in other places.
function myFunctionName()
{
//javascript code here
}
Naming functions
Do not violate the rules of naming, as we mentioned in variables lesson, where it must be adhered to not to use spaces in the label of the function and not to use reserved words in the JavaScript language.
And do not forget that the same name with which we defined the function must be maintained at the beginning of the page in order to avoid browser errors when executing. Here are also some conditions for naming functions in general:
- Functions should begin with a letter or an underscore to be approved.
- Do not use spaces between names.
Proposals
- We prefer to use meaningful names in functions to save time in analyzing the code.
Loading parameters
Parameters are values that are defined in the parentheses of the function before the curly brackets and are more used when hosting a function in code that contains values passed from outside for the function to perform its programmatic role and are defined like this:
function myFunctionName(variable1,variable2, variable...n)
We can do more than one parameter in one function, and this is a good feature of functions, as it is the beginning of a clear abstraction of codes before the appearance of classes.
<input type="text" id="txt" value="Mutawe"/>
<button onclick="hello(5)">Press Me !</button>
<label id="lbl"></label>
<script>
function hello(testPara)
{
document.write(testPara);
}
</script>
Return function
Return in JavaScript functions is used if we have an important value inside the function and we need to return it again outside to be used in other purposes and it is added in the JavaScript language like this:
function myFunctionName(){
var test = 50;
return test;
}
Example
Please, to understand JavaScript functions and how it works, copy the following HTML template codes and run it in your browser.
<button onclick="showinfo(1 , 'JAVASCRIPT' , 'HTML');" >Show info !</button>
<label id="lbl"></label>
<script>
function showinfo(id , name , address) {
var msg = "<br><br> ID : " + id +
"<br> name : " + name +
"<br> Address : " + address ;
window.lbl.innerHTML = msg;
}
</script>