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
}
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
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…!...’)
}
|
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.
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..
No comments:
Post a Comment