Hello dear readers! welcome back to another section of my tutorial on Javascript. In my last tutorial post i talked about the JavaScript Loop Control and i believe that by now you all know how to use the break and continue statements in controlling loops in JavaScript.
Now in this new tutorial guide, am going to be discussing about the Javascript functions. A function is a group of reusable code which can be called anywhere in your program. This eliminates the need to write the same code over and over again. It helps programmers in writing modular codes.
Now in this new tutorial guide, am going to be discussing about the Javascript functions. A function is a group of reusable code which can be called anywhere in your program. This eliminates the need to write the same code over and over again. It helps programmers in writing modular codes.
Function allows a programmer to divide a big program into groups of small functions which can be managed.
Like other programming language, JavaScript also supports all the features that is necessary to write modular code using functions. You must have seen few functions like alert() and write() in my previous tutorials on JavaScript. We made use of these functions severally, but they had been written in core JavaScript only once.
Like other programming language, JavaScript also supports all the features that is necessary to write modular code using functions. You must have seen few functions like alert() and write() in my previous tutorials on JavaScript. We made use of these functions severally, but they had been written in core JavaScript only once.
You can also check out our tutorial post on: How to add JavaScript to Html (JavaScript placement)
JavaScript allows us to write our own functions as well. This tutorial explains how to write Your own functions in JavaScript.
Function Definition
Before a function is used, it must be defined. The easiest means of defining a function in JavaScript is by using the function keyword, then followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.
Syntax
The basic syntax is shown below:
<script type="text/javascript">
<!--
function functionname (parameter-list) {
statements
}
//-->
</script>
<!--
function functionname (parameter-list) {
statements
}
//-->
</script>
Example
Try the following example below. It defines a function called sayHello that takes no parameters:
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World");
}
//-->
</script>
<!--
function sayHello() {
alert("Hello World");
}
//-->
</script>
You can check out our tutorial post on: JavaScript Variables
Calling a Function
To invoke a function somewhere later in the script, you simply need to write the name of the function as shown in the example below:
<html>
<head>
<script typle="text/javascript">
function sayHello() {
document.write("Hello World");
}
</script>
</head>
<body>
<p>Click the button below to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="SayHello ">
</form>
</body>
</html>
<head>
<script typle="text/javascript">
function sayHello() {
document.write("Hello World");
}
</script>
</head>
<body>
<p>Click the button below to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="SayHello ">
</form>
</body>
</html>
Output
Below is the output of the above example:
Click the button below to call the function
Function Parameter
Till now, we have seen functions without parameters. But there is a tool to pass different parameters while calling a Javascript function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters. A function can take multiple parameters that are separated by comma.
You can check out our tutorial post on: JavaScript For Loop
Example
Try the following example below. We have modified our sayHello function here. Now it takes two parameters.
<html>
<head>
<script type="text/javascript">
function sayHello(name, age) {
document.write(name + " is " + age + " years old. ");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Kennedy' , 18)" value="SayHello" >
</form>
</body>
</html>
<head>
<script type="text/javascript">
function sayHello(name, age) {
document.write(name + " is " + age + " years old. ");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Kennedy' , 18)" value="SayHello" >
</form>
</body>
</html>
Output
Below is the output of the above example:
Click the following button to call the function
The return Statement
JavaScript can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in the function.
For example you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program.
For example you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program.
Example
Try the following example. It defines a function that takes two parameters and it concatenates them before returning the resultant in the calling program.
<html>
<head>
<script type="text/javascript">
function concatenate(first , last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Kennedy' , 'Nkpara');
document.write(result);
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="CallFunction">
</form>
</body>
</html>
<head>
<script type="text/javascript">
function concatenate(first , last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Kennedy' , 'Nkpara');
document.write(result);
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="CallFunction">
</form>
</body>
</html>
Output
Below is the output of the above example:
Click the following button to call the function
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the Javascript Nested Functions
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.