|
LILLY ROBOT |
Functions
Functions are created to carry out various tasks. For example you might want to calculate the total cost of your shopping or write the same codes several times in different parts of your program.
It would save so much time calling on a function to carry out these tasks.
The block of codes in a function can be called from anywhere in your program.
Syntax of a Function:
function functionName (arg1,arg2,arg3,arg...)
{
statments to be executed
}
JavaScript functions are written inside the html head tags. A function starts of with the keyword function followed by the function name, which should be related to what the task is going to do.
Inside the parentheses you can have zero to a number of arguments, which are seperated by a comma. Arguments are the values of the variables.
Inside the curly brackets is the statement(s) that is going to be executed.
Varible Scope
There are two variable scopes Local and Global.
Global
In JavaScript variables declared outside the function can be accessible to any of the functions on the program page, which means the variable has global scope.
Local
A variable declared inside a function is only accessible to that particular function, which means the variable has local scope.
Example
<script>
var arg1=6;
var arg2=5;
function nameOfFunction()
var arg1=10;
var num=16;
{
statement to be executed
}
</script>
</head>
The global variables are arg1=6 and arg2=5 because they are outside the function.
The local variables are arg1=10 and num=16 because they are inside the function.
It does not matter if you declare a variable with the same name as the global variable inside your function.
The local variable arg1=10 is only accessible to that particular function.
In the example below we have a function called areaOfARectangle, which calculates the area of a rectangle. The function has two arguments called lenght and height.
Note: The variables l and h are global variables they have been declared outside the function. The values assigned to the variables l and h are passed to the arguments length and height.
Example
<script>
var l=6;
var h=6;
function areaOfRectangle(length,height)
{
document.write("area of a rectangel is:" + (length*height)+"cm");
}
</script>
</head>
Call Function
Once a function has been created you then have to call the function. The function is called inside the HTML body tags. Remember! The values assigned to the variables l and h will be passed to the arguments length and height.
<script>
areaOfRectangle(l,h)
</script>
</body>
Displays
Return a Value
A function can return a value. Any statement after the return statement will not be excuted. In the example below we have created a function called squareRoot, which calculates the square root of a number. The variable x is declared outside the function, which means it has global scope. The function is called inside the html body tags.
<script>
var x=3;
function squareRoot(x)
{
return x*x;
}
</script>
</head>
<script>
document.write("Ans=" + squareRoot(x));
</script>
</body>
Displays
We can even call the squareRoot(x) function with a click of a button.
<form name="myForm">
<INPUT type="text" value=" " />
<INPUT type="button" value="click here" onClick="document.getElementById('rec').value=
squareRoot(x)"/>
</form>
</body>
Click the button to display the answer inside the text box.
Displays
In the example below, a viewer can enter the length and width of their choice. Once the button is clicked the area of a rectangle will be displayed inside the answer text box.
Converting Data Type
There are functions that allows you to convert the value of a string to a number or vice versa. Let us have a look at some:
parseInt()
The parseInt() function lets you convert a string to an integer. The value of the string conversion must be inside the parseInt parenthesis with quotation marks.
var num1="8";
document.write("String:"+ num1 + num1);
document.write("Number:"+(parseInt("8")+20));
//or you could do the following:
document.write("Result:"+(parseInt(num1)+20))
</script>
Displays
parseFloat()
The parseFloat() converts a string to a decimal number.
var dec="10.5";
document.write("String:"+ dec + dec);
document.write("Number:"+(parseFloat('10.5')+20));
//or you could do the following:
document.write("Result:"+(parseFloat(dec)+20))
</script>
Displays