programminghead Logo

JavaScript Function Declaration :

A Function Declaration defines a function withe the Specified Parameters and some code which will Execute only if Function Invoked/Called.
To Define a Function in JavaScript we can use function constructor or a Function Expression. To Declare Functions in JavaScript we have to Follow some set of rules AKA JavaScript Function's Syntax to Declare a Proper function in JavaScript Document.

javascript-function-declaration-Image

JavaScript Functions Syntax :

To Declare Function in JavaScript we have to write function Constructor so JavScript can understand that we are Defining a Function and after that we have to write/gave a Name to our Function (or it will become anonymous Function) and followed by two Round Braces "()" where we xcan Declare Parameters for Our Function and two Curly Braces "{}" and inside those "{}" Curly Braces we have to write Codes for our Function which we want to Execute later on Function Call.

JavaScript Functions Syntax


  function functionName(Parameters){
     code to be executed
  }

javaScript functions examples

In this Example we are going to Declare a Function inside JavScript according to the JavaScript Functions Syntax.
Where we add two numbers on Function call.
So keep in mind, JavaScript Function only Executes when function Invoked/Called. Otherwise Code present inside Your function will not Execute/Run.

JavaScript Functions Example


  <html>
  <body>
     <script> 

       myFunction();

       function myFunction(){
         document.write(2+5);
       }

     </script>
  </body>
  </html>

Results

Example Explained :

<html>....</html>

These are HTML's starting <html> and closing </html> used inside HTML Document to write or Declared HTML Elements.

<body>....</body>

These are HTML Body's starting <body> and closing </body> tags which used inside HTML Document to Target Browser to display HTML Elements.

Script Tag <script>....</script>

Script is Tag used inside HTML Document to Insert JavaScript. Using this Script tag we can Write JavaScript Code inside HTML Document or we also can Link External JavaScript using Script Tag with the Help of Script Tag's SRC attribute where we have to gave out External JavaScaript file's Path
like <script src="myJavaScript.js"></script>

Defining Function function myFunction(){}

here using JavaScript function we have Define our Function called myFunction() and between the Curly braces "{..}" we have some Lines which will execute in the Output.

document.write(2+5) :

Here we are using JavaScript document.write method which will add the given number because of the add arithmetic operator is used + inside it. Which will give us 7 as Output of 2+5;

myFunction();

using myFunction(); at the beginning of JavaScript Code will tell Browser to Execute/Call the Function. Because JavaScript Function wont Execute without invoking/Calling.

Named Function :

Named functions are the Functions with name, with Unique Identify where we can Distinguish them and call them by There unique Name.

Named Functions Example:


   function myFuncName(){.....}

Anonymous Function :

Anonymous functions are Works same as Other Named function but in Anonymous Function we don't gave/write name to our Function. That will makes it hard to call. But when we are using Click Events, Load Events or Self Invoking methods to Execute any function where we Don't need to write a name to our Function, then we can use Anonymous Functions there.

Anonymous Function example:


   function(){.....}

JavaScript Function Expression :

Function Expression is another way to Define Functions in JavaScript. Where we define a Variable first and inside that Variable we store/assign our Function.
We can Define both Anonymous and Named function inside our Variable. But in Function Expression we can only call our Functions after defining our variable, Otherwise our Program will return "undefined function/variable" Error.

Anonymous Function Expression


  var a = function(){....} 

Named Function Expression



  var a = function myfunction(){....} 

JavaScript Function Call / Invoke :

To run/Execute any Function's code we have to Invoke/Call that Function using that function's Name. There are several ways to call JavaSCript Functions. LIKE

1. Calling/Invoking Function inside JavaScript Code.
2. Calling/Invoking Function by Click Event.
3. Calling/Invoking Function on PageLoad.
4. Self Calling/Invoking Function.

1. Calling/Invoking Function inside JavaScript Code.

This way of calling a JavaScript code is Very easy. You just have to Call your Function using Function name "myFunction()" and your Browser will call/Invoke that Function.

Example : Calling Function inside JavaScript Code


  myAddFun();
  
  function myAddFun(){
    document.write(7+2);
  }

Results

2. Calling/Invoking Function by Click Event.

We also can Call/Invoke JavaScript on Click Events like "On Button Click ETC" so function can only Executes the Code when used Clicks on Particular Button or Other Elements.
In our Example we are going to use HTML Onclick attribute to Invoke/Call the JavaScript function.
We can use the same method to apply this Click Event on HTML DIV,Table,Image,Navigation(Nav) ETC. But in this Example we are going to use a HTML Button to Execute (call/Invoke) JavaScript Function.

Example : Calling Function inside JavaScript Code


  <html>
  <body>
    
    <button onclick="thanksFunc();"> Click Me </button>

     <script> 

       function thanksFunc(){
         document.write("Thanks for Clicking me");
       }

     </script>
  </body>
  </html>

Results

3. Calling/Invoking Function on PageLoad.

Using onload we can Invoke/Call JavaScript Function on Page Load. We are going to Cover three ways to do that.

1. HTML Onload attribute:
2. JavaScript Event Listen Method
3. Object.load method

1. HTML Onload attribute:

HTML onload attribute invoke given Function when it's Data Finish/Completes Loading it's Data.

2. Event Listener:

JavaScript's object.addEventListener can react on such events like Load,Click and ETC and Invoke/Call JavaScript FUnction.

3. Objech.load Method:

JavScript Object.load method can Invoke/call JavaScript Function when Selected Object Finishes Loading.

Example : Calling Function Function on PageLoad.


<html>
  <body onload="bodyloaded();">
    
    <img src="http://programminghead.com/images/cat.jpg" id="catImg"/>
    <img src="http://programminghead.com/images/logo.jpg" id="logImg"/>    
    <p id="p"></p><p id="p1"></p><p id="p2"></p>

     <script> 

       var cat=document.getElementById("catImg");
       var logo=document.getElementById("logImg");

       function bodyloaded(){
         document.getElementById("p").innerHTML="Body data Loading Completed";
       }

       cat.addEventListener("load", catImgFun);
       function catImgFun(){
        document.getElementById("p1").innerHTML="Cat Image Loading Completed";
       }

       logo.onload=function(){
        document.getElementById("p2").innerHTML="Cat Image Loading Completed";
       }

     </script>

  </body>
  </html>

Results

3. Self Calling/Invoking Function.

We can make JavaScript Function Self Invoking so they can Called automateclly at the time of Execution.
To do that we have to write or define our Function as we are calling it. We call our functions in JavaScript by it's name followed by two function braces () where we can assign arguments and terminate line using SemiColon. Here we have to do the same but this time insted of writing function name we define our Function inside there () round brackets"(functionDefine here)();" so browser can take this line as "Call to the Function" and this will create a Self Invoking / self calling Function.

Self Invoking / calling Function

.


  <html>
  <body>
     <script> 
       (function(){
         document.write("This is Self Invoking Function's Output");
       })();
     </script>
  </body>
  </html>	

Results

Comments

Write to Us

Captcha