Friday, November 29, 2019

How to implement JavaScript functions in your program


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

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.

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>

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 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 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>

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.

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>

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.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.