Friday, November 29, 2019

How to implement JavaScript functions in your program


Hello guys! afternoon and welcome to my new tutorial post on JavaScript. In my last tutorial post i talked about JavaScript Loop Control and I believe that each and every one of you now know how to make use of break and continue statements in controlling loops in JavaScript.

Now in this tutorial am going to be discussing about 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 allow a programmer to divide a big program into groups of small and manageable functions.

Like any other advanced programming language, JavaScript also supports all the features necessary to write modular code using functions. You must have seen function like alert() and write() in my previous tutorials on JavaScript. We were using these functions over and over again, 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 most common way to define a function in  JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrendered by curly braces.

Syntax

The basic syntax is shown below:

<script   type="text/javascript">
     <!--
          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>

You can check out our tutorial post on: JavaScript Variables

Calling a Function

To invoke a function somewhere later in the script, you would 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> 

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 for passing different parameters while calling a 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 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>

Output

Below is the output of the above example:

Click the following button to call the function

 

The return Statement
The 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.

Example
Try the following example. It defines a function that takes two parameters and 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>

Output
Below is the output of the above example:

Click the following button to call the function

 

Alright guys we have come to the end of this tutorial post on JavaScript functions, in my  next tutorial post i will be discussing about JavaScript Nested Functions.

Always feel free to ask your questions via the comment box below, thanks for reading and bye for now.
Share:

0 comments:

Post a Comment