programminghead Logo

JavaScript Tutorial 4 : JavaScript Functions

JavaScript Functions :

Functions are the part of fundamental building blocks in JS. A function is a JavaScript procedure(a set of statements that performs a task or calculates a value). To use Functions in JavaScript we have to Define a function inside JavaScript file or inside HTML's <script> ... </script> Script Tag and call that function to perform a specific Task.

Function Declarations :

For Declaring/Defining a Function in JavaScript we have to Define function keywords followed by :
function name,
parameters enclosed in parentheses (parameter) and
JavaScript Code/Statement inside Function's curly braces {..}

JavaScript Function Syntax :-

JavaScript Function Syntax :


function function_name(argument) {
		JavaScript code...
	}

Function calling/Invocation

The JavaScript code Written/Declared inside the function will execute only when "something" invokes/calls the function. Simply to run or Execute functions Data we to to call the function first.
But how to call a JavaSCript Function?

Calling/Invoking JS Function :

There are many ways to Call/Invoke JavaScript function like:

1. Calling/Invoking by Click Event.

2. Calling/Invoking by JavaScript Code.

3. Calling/invoking JavaScript Function Automatically.

1. Calling/Invoking a Function by Click Event :

Calling/Invoking a JavaSCript Function by Click Event is very simple. You just have to target any HTML Element and by using onClick="" attribute we can run any JavaScript by clicking any HTML Element/Button.
we have to just specify our HTML onClick="" attribute in the Starting tag and JavaScript Functions name in onClick="" attributes double quotes.

Calling/Invoking a Function by Click Event Example


  <button onClick="myFunction();"></button>

   <script type="text/javascript">
     function myFunction(argument){
        JS Code...
     }
   </script>

2. Calling/Invoking a JS Function by JavaScript Code :

To Call/Invoke JavaScvript Function using JavaScript code we only have to write our function name and right after function name Parenthesis () and inside pare you can assign argument values like myFunction(2);.
Simply Write your function's name and then parentheses/braces () and terminate the line using semicolon ; .

Calling/Invoking by JavaScript Code Example


   <script type="text/javascript">
     
     myFunction();

     function myFunction(argument){
        javaScript code ....
     }

   </script>	

3. Calling/invoking JavaScript Function Automatically.

If you don't want to Call a function using a Click Event or using JavaScript code and you just want to do this Calling process in a More Easy / Short way and kind of Automatic way then you just have to write / Declare your whole function inside these () parenthesis and at the end again parenthesis and terminate code using semicolon. ;
This will call and Declare your function at same time and will runs your Function Automatically.

Calling/invoking JavaScript Function Automatically Example


   <script type="text/javascript">

     (function myFunction(argument){
        javaScript code ....
     })();

   </script>		

Function Return Method

This Return method used Inside JavaScript Functions to return some values and when code reaches the Return statement, function will stops Executing. So keep in mind if you want to return any value through function then Declare this Return method at the End otherwise function's codes after the Return method will be ignored.

Return method Example


  var a = myFunction(2,3);
  
  function myFunction(x,y){
    return x+y;
  }

  document.write("value of a = " +a);

Results


Arithmetic Operations in JavaScript Functions

Arithmetic Operations like addition, subtraction, multiplication, division and ETC can we created using JavaScript Function (for more JavaScript Operation Tutorial Click here).
We have to know about some Arithmetic Operators :
addition (+),
subtraction (-),
multiplication (*),
and division (/).

Arithmetic Operations in JavaScript Functions Example


<html>
 <head>
  <title>Local Variables in JS</title>
 </head>
 <body>

   <button onClick="addition(6,2);">Addition</button>
   <button onClick="subtraction(6,2);">subtraction</button>

   <script type="text/javascript">

    var sum,sub;

    function addition(a,b){
     sum= a + b; 
     document.getElementById('result-para').innerHTML=a+"+"+b+"= "+sum;          
    }

    function subtraction(a,b){
     sub= a - b; 
     document.getElementById('result-para').innerHTML=a+"-"+b+"= "+sub;         
    }

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

Results

Results will be Here


About the Example :

button <button> ... </button>

Button Tag to create a Button for Click Events like onClick=""

onClick Method <button onclick="function()">

onClick Method to run a Function on the Click Event.

Variables var sum,sub;

Variable to store numbers addition and subtraction values. and sum is a variable name for storing Numbers Additions and sub for Numbers subtraction Values.

JavaSCript function function addition(){...}

JavaScript Function with Addition function name with JavaScript code to Add two numbers (a and b) and giving Output in the P (ParaGraph) Tag.

Addition sum=a+b;

Using Addition's Parameter + we are Adding two number a+b and storing the Value in the Variable called sum (sum=a+b).

document.getElementById(IdName).innerHTML=variable;

This document.getElementById(IdName) Method will select the HTML Element by ID Name and .innerHTML export the Given Variable Values to the Selected HTML Element.

Concatenation a+"+"+b+"= "+sum

Concatenation to join Variable and String Value at Single sine. Where a will export our First Arguments value (which is 6) and + sign will concatenates the First Arguments value with string + like (6+) and again Concatenation will export the 2nd Argument's value (which is 2) and another Concatenation will export equal sign as string like (6+2=) and at the end Concatenation method will export the Variable with Result's Value like (6+2=8).

onclick="addition(6,2);"

Here on Click method/Attribute will run the given Function on Click and here we have Given function addition(6,2); with 2 values (6,2) six and two, where 6 is the value for First argument a and 2 is for the 2nd Argument b.

Comments

minecraft download

http://leaf.halfmoon.jp/userinfo.php?uid=3178904
08:46 am

Howdy! This blog post could not be written much better! Reading through this post reminds me of my previous roommate! He continually kept preaching about this. I most certainly will send this article to him. Fairly certain he'll have a very good read. Thanks for sharing!

download minecraft free

http://tinyurl.com/y5unvh6p
10:03 am

Howdy just wanted to give you a quick heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different internet browsers and both show the same outcome.

g

http://tinyurl.com/y4k9sv3z
11:20 pm

I do not even know how I ended up here, but I thought this post was great. I don't know who you are but certainly you're going to a famous blogger if you aren't already ;) Cheers!

g

http://t.co/BCldSwC6nt
06:57 am

fantastic points altogether, you just won a emblem new reader. What would you suggest about your submit that you just made some days ago? Any certain?

download minecraft pc

http://tinyurl.com/y4vg95ua
06:59 pm

Hi! I know this is kind of off topic but I was wondering which blog platform are you using for this website? I'm getting tired of Wordpress because I've had problems with hackers and I'm looking at alternatives for another platform. I would be fantastic if you could point me in the direction of a good platform.

g

http://t.co/RcWM4eUh76
09:34 am

That is really attention-grabbing, You are a very skilled blogger. I've joined your feed and look ahead to in the hunt for extra of your excellent post. Also, I've shared your web site in my social networks

g

http://tinyurl.com/y6f5wyh5
08:21 am

I was curious if you ever considered changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or 2 pictures. Maybe you could space it out better?

g

http://t.co/HrbQRtcaU5
05:47 am

What's up to all, how is the whole thing, I think every one is getting more from this web site, and your views are fastidious designed for new visitors.

minecraft download free

http://tinyurl.com/y47vldt8
03:46 pm

Howdy! I could have sworn I've been to this web site before but after looking at many of the articles I realized it's new to me. Anyways, I'm definitely pleased I found it and I'll be bookmarking it and checking back frequently!

minecraft pc download

http://tinyurl.com/yywoet3a
10:31 am

Thank you for the good writeup. It if truth be told used to be a entertainment account it. Glance complicated to far introduced agreeable from you! However, how could we communicate?

minecraft download mojang

http://t.co/9iLvUiRiTh
05:09 pm

I was pretty pleased to discover this great site. I wanted to thank you for your time just for this fantastic read!! I definitely really liked every part of it and i also have you bookmarked to check out new information in your blog.

gamefly

http://t.co/2ReYFZuhfS
08:20 pm

Hi there, yes this article is genuinely pleasant and I have learned lot of things from it on the topic of blogging. thanks.

Write to Us