Method/Function Basics
Programmers write methods, also known as functions, to automate tasks that may need to be performed many times. To take advantage of this pre-written code, there are several things that we need to know:
- The name of the method
- What information, if any, does the method need sent into it(parameters)?
- What information, if any, does the method return?
These three items together make up what is known as a method's signature. Notice, that as users of the method, we need not understand how it accomplishes its task. This concept is called information hiding. Thus, if a programmer finds a more efficient way to perform a task, they can re-write the method and not effect any calls to the method as long as they do not alter the method's signature. When calling a method that takes parameters, the parameters must be in the same order as the methods signature.
When a method returns information, that data needs to either be output or stored in a variable.
Basic Methods
In a web page, JavaScript code written in <script> tags executes automatically when the page loads it. For example, a page that has some text, JavaScript alert code and two images (in that order), will load the text, pop up the alert, and will only show the images AFTER the alert has been dismissed. In order to keep the alert from happening until we want it to, we need to put the JavaScript code in a function (also known as a method). A function is defined as a type of procedure or routine. The idea is that we encapsulate several lines of code that may need to be called often into a function so that they can be called with a single line. In JavaScript, a function is written using the following code:
<![CDATA[function functionName() {
//lines of code go here
}]]>
Where "functionName" is any valid identifier name. Like with variables, the name should be indicative of what the function does. If the function is designed to calculate a persons pay, we may call it calculatePay. Regardless of the name, it should always be followed by a set of parenthesis () and curly braces {}. All of the code for the method goes in the curly braces.
<![CDATA[function alertHello(){
window.alert("Hello");
}]]>
Any JavaScript code can be placed in a function. We can write functions that would draw shapes on a canvas, ask users for information and perform calculations, etc. The main difference at this point, is that the code in a function WILL NOT EXECUTE until we call it, whereas all other JavaScript on the page will execute as it is loaded.
Parameters
Variables declared in a method are local to that method. In other words, they have no value oustide of the method. So, if we declare some variables in a method, and want to use their values in another method, we send them into the other method as parameters.
Say we have taken user input on the coordinates of two points in our main method as int x1, y1, x2, y2. The input assigns them a value. If we want to write a method that will find the midpoint of these two points, we need to send the values of the point in. So, in our main we see:
<![CDATA[var x1, y1, x2, y1;
x1=//code for input
y1=//code for input
x2=//code for input
y2=//code for input
showMidpoint(x1, y1, x2, y2);
}//end main method]]>
In the call to showMidpoint, x1, y1, x2, and y2 are what we call the actual parameters. In other words, these are the original values that I wanted to work with.
When we declare the showMidpoint method, we need to prepare it to receive information. We do this by declaring local method variables, called formal parameters, in the parenthesis of the method signature. The signature will look like this:
<![CDATA[function showMidpoint(a1, b1, a2, b2){
// a1 will take on a copy of the value of x1.
// b1 will take on a copy of the value of y1, and so on.
}]]>
Because they are taking on copies of the values, altering the formal parameters will have no effect on the actual parameters.
So, our finished method looks like this:
<![CDATA[public static void showMidpoint(int a1, int b1, int a2, int b2)
{
var midX = (a1+a2)/2;
var midY = (b1+b2)/2;
document.write("The midpoint of the points is: ("+midX+", "+midY")";
}]]>