JavaScript Functions:
Function is slice of code that will be executed by an event or by a call to the function. It can be defined both in the and in the section of a document. But it could be wise to put functions in the section.
Function will be defined as with parameters or without parameters.
Syntax without parameters
function functionname()
{
code;
}
Syntax without parameters
function functionname(var1,var2,...,varX)
{
some code
}
Example of function without parameters
<html> <head> <script type="text/javascript"> function display() { alert("Function executed!"); } </script> </head> <body> <form> <input type="button" value="OK" onclick="display()" /> </form> </body> </html>
Example of function with parameters
<html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> var n,m; n=parseInt(prompt("Enter First No.")); m=parseInt(prompt("Enter Second No.")); document.write(product(n,m)); </script> </body> </html>
The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement.
Benefits of Using a Function:
- Function makes the code reusable. You can declare it once and use it multiple times.
- Function makes the program easier as each small task is divided into a function.
- Function increases readability.
Example To find Simple Interest and Compound Interest
<html> <head> <title>JavaScript Program to find Simple Interest and Compound Interest</title> </head> <body> <table> <tr> <td> <input type="text" name="a" id="first" placeholder="Enter principal"/> </td> </tr> <tr> <td> <input type="text" name="b" id="second" placeholder="Enter time period "/> </td> </tr> <tr> <td> <input type="text" name="c" id="third" placeholder="Enter rate of interest(%)"/> </td> </tr> <tr> <td> <button onclick = "simple_interest()" >Submit</button> </td> </tr> </table> <div id="num"> </div> <div id="num1"></div> <!-- RESPONSIVE TEXT AD --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- iskadd --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6055911503196436" data-ad-slot="1847983690" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- START SIDEBAR CONTENT RIGHT --> <div id="sidebar-content" class="SB-width sidebar-pad printhide"> <!-- START SIDEBAR CONTENT TEXT --> <!-- START GOOGLE AD CONTAINER --> <div class="google-ad-sidebar"> <!-- 250 X 250 SQUARE AD --> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- iskadd --> <!-- 250x250ad --> <ins class="adsbygoogle" style="display:inline-block;width:250px;height:650px" data-ad-client="ca-pub-6055911503196436" data-ad-slot="1847983690"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- END GOOGLE AD CONTAINER --> <script type="text/javascript" src="../js/javasidebar.js"></script> <br> </body> <script type="text/javascript"> function simple_interest() { var p,t,r,si,ci; p = document.getElementById ("first").value; t = document.getElementById ("second").value; r = document.getElementById ("third").value; si = parseInt((p*t*r)/100 ); amount = p*Math.pow((1 +r/100),t ); ci = amount-p; document.getElementById ('num').innerHTML ="Simple interest : "+si; document.getElementById ('num1').innerHTML ="Compound interest : "+ci; } </script> </html>
Example simple ATM Program
<html>
<head>
<title></title>
</head>
<body>
<form method ="post">
Please Enter Your Pin Number:<input type="text" name="number" id="number" />
<input type="button" name="submit" id="submit" onclick="getaction()" value="go"/>
<p id="demo"> </p>
<div id="options12" style="display:none;">
<input type='radio' name='radio' onclick='myfunction(this.value)' value='1'/>Balance
<input type='radio' name='radio' onclick='myfunction(this.value)' value='2'/>Withdraw
<input type='radio' name='radio' onclick='myfunction(this.value)' value='3'/>Fastcash
</div>
<p id="demo1",></p>
<div id="display" style="display:none;">
<label>Please Enter Your Withdraw Amount</label>
<input type="text" name="amount1" id="amount1" value=""/>
<input type="submit" name="submit1" value="submit" onclick="getamount()"/>
</div>
<div id="display1" style="display:none;">
<label>Please Select Your Fastcash Option</label>
<select id="myselect1">
<option value="10000">10000</option>
<option value ="20000">20000</option>
< option value ="50000">50000</option>
</select>
<input type="submit" name="submit2" value="submit" onclick="getamount1()">
</div>
</form>
</body>
<script type="text/javascript">
function getaction()
{
//Intialise Pin value with varible P
var p = document.getElementById ('number').value;
var a = 1234;
//To check Pin entered is correct or not
if(p==a)
{
document.getElementById ("demo").innerHTML ="Please Choose transcation";
document.getElementById ('options12'). style.display = 'block'; //if pin number is correct options will Display.
}
else
{
document.getElementById ("demo").innerHTML = "Invalid pin";
}
}
function myfunction(val)
{
//function to display balance amount
m = 10000;
if(val==1)//Option 1 is select to shows balance amount
{
document.getElementById ('demo1' ).innerHTML ="Your amount is: "+m;
document.getElementById ('display' ). style.display = 'none';
document.getElementById ('display1' ). style.display = 'none';
}
if(val==2)//Option 2 select to display text field to enter withdraw amount
{
document.getElementById ('display').style.display = 'block';
document.getElementById ('display1').style.display = 'none';
}
if(val==3)//Option 3 is select to display fastcash option
{
document.getElementById ('display1').style.display = 'block';
document.getElementById ('display').style.display = 'none';
}
}
function getamount()
{
//function To Withdraw Amount
m = 10000;
//Intialise the textbox value in a varible
var a = document.getElementById ('amount1' ).value;
//Check if entered amount is greater than the original amount or not and it also should be mulitple of 100
if(a<=m&&a%100==0)
//alert("" +a);
document.getElementById ('display').innerHTML ="Your withdraw amount : "+a;
else
//alert("invalid cash");
document.getElementById ('display').innerHTML ="Invalid cash";
}
function getamount1()
{
//Intialise the Dropdown value in a varible
var x = document.getElementById ("myselect1").value
m = 10000;
//check if selected amount is greater than the original amount or not and it should be mulitple of 100
if(x<=m&&x%100==0)
//alert("take your amount" +x);
document.getElementById ('display1').innerHTML ="Please take your amount : "+x;
else
document.getElementById ('display1').innerHTML ="Invalid cash";
}
</script>
</html>
0 Comments