Saturday, March 10, 2018

Functions in JavaScript for Beginners


If you are learning JavaScript from any training center in Delhi then this blog can really help you in understanding the essential concepts of Functions which is one of the most complex topics in JavaScript.

A program that performs a specific task is known as function. A function is a group of reusable code and we can invoke anywhere in the program. So, we need not to write the same code again and again. With the help of function, we can divide a big program into many small functions.

We define the JavaScript function with a keyword ‘Function’ followed by a name and parentheses(). In JavaScript Function name could be a letter, underscore, digit and dollar sign. The code to execute by the function is to be inside the curly brackets {}
Function name (parameters,….a,…. b, ….c.) {
Code
}

Example:
Syntax:
The basic syntax is shown here.


1
2
3
4
5
6
7
8
<script type="text/javascript">
   <!--
      function functionname(parameter-list)
      {
         statements
      }
   //-->
</script>


To execute a function we have to call it. To invoke the function, we have simply write the name of the function and invoke it. When we call a function, it receives the value which is nothing but arguments.

Here I call my function, it does division and it will return the result by doing division operation i.e. X/y
Whenever we call the function it returns value.
function myFunction (x, y) {
return x / y;
}

Example:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>

<head>

<script type="text/javascript">

function sayHello()

{

document.write ("Hello there!");

}

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type="button" onclick="sayHello()" value="Say Hello">

</form>

<p>We can use different text in write method and then try...</p>

</body>

</html>

Example:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p id="ex1"></p>

<script>

function myFunction(x, y) {

return x / y;

}

document.getElementById("EX1").innerHTML = myFunction(104, 2);

</script>

</body>

</html>

Output: 54

Advantages of Using Functions:

Re-usability:

  • If we want to use same code multiple times and in different location we can make function for that.
  • By using function with  different arguments we can produce different results

Reduce cost:
  • By using function we can reduce our project time so it reduce project cost
Less execution time:
  • It will take less time to execute so more user friendly (ex: loading speed of website will be faster)

Types of Functions:

  • Named Functions
  • Anonymous Functions
  • Parametric Functions
  • Nested Functions
1. Named Functions:
Named functions are declared by name.

Example:

1
2
3
4
5
6
7
function myFunction()

{

alert(Are you ready to fight…!...);

}


2. Anonymous Functions:

These functions are declared by using var.


Example:


1
2
3
4
var myFunction = function()
{
alert(Are you ready to fight…!...)
}


3. Parametric Functions:
These are those functions which uses ‘return’ keyword:

Example:


1
2
3
4
5
6
7
function myFunction (x, y)

{

return x*y

}

The result will be value of x*y

At the time JavaScript reaches to return statement, the function stop

executing. It will not read anything after it.


4. Nested Functions:

In Nested Functions there are many functions inside a main

function. The main function is called as parent function and

functions inside main function are called child function.

Example:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function welcome()

{

Function warning()

{

alert(Be aware of Dog )

}

Warning();

}

Welcome();


5.functions as formula
The conversion is 63.8 rupees:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"The convertion is " + toDollars(1) + " rupees";

function toDollars(rupees) {

return (63.8) * (rupees);

}

</script>

</body>

</html>

Conclusion:
Functions play a vital role in web designing and UI development from writing code to execution. It makes the job of the programmer easy and save time and increase efficiency.

I hope this blog will be helpful for you. To learn advanced JavaScript course, you can visit Web Development Institute a leading web designing and development training center in Delhi.

Thanks for reading..



Featured Post

ADMEC Multimedia Institute Scholarship Program

The ADMEC Multimedia Institute scholarship program aims to select and trained talented non working female, married woman and non married m...