JS functions

Creating JavaScript functions is a way of "packaging" code, which will get used when the programmer calls the function. This is particularly useful when you have similar tasks to perform several times in one program, or across several programs. For example, if you are running a site that sells merchandise, you will likely need a function to compute totals, round off numbers, and calculate shipping, for example. When you create a JavaScript function, you are essentially creating a new JavaScript "command" that you can use over and over again in your programs. First we'll look at the basic syntax of a function, and then how to call it. Then we'll look at passing arguments to a function. Finally, we'll have the function return a value to your program.

The basic syntax of JS functions

To create a function, you must first provide a function definition. This, essentially, tells the browser what it's supposed to do when the function gets called. Function definitions are usually placed in the HEAD section of the HTML document. A basic function definition looks like this: 
function someFuncName(arg1, arg2) {
	first line to be executed;
	second line to be executed;
	any JavaScript statements go here;
	etc. ;
}

Calling a JS function

Calling a JS function is simply. So, for example, to use the example function above, I would simply call it this way: 
document.write("write this!");
alert("here comes the function call!");
someFuncName("cat", 2);
alert("I just called the function in the previous line!");

Passing arguments to a function

In the example above, we passed 2 arguments to the function, "cat" and 2. Arguments are simply pieces of information that your function needs in order to execute properly. Passing arguments to functions is just like passing parameters to methods (for example, the document.write() method requires a parameter, the string that you want written to the screen). Let's look at a working function to make this clearer. 
<html>
<head>
<script type="JavaScript">
 <!--
 function findSeconds(name,age)
 {
 var secs = age * 365 * 24 * 60 * 60;
 document.write ("Hi "+name+"! You have lived " + secs + " seconds! ");
 }
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
 var userName = prompt ( "Please enter name : ", "" );
 var userAge = prompt ( "Please enter your age : ", "" );
 findSeconds(userName,userAge);
 // -->
 </script>


 </body>

 </html>
see the code in action

In the example above, we defined the function findSeconds() in the HEAD portion of the document. In the definition, we indicated that findSeconds() requires 2 pieces of information, name and age. You can think of name and age as being variables created for findSeconds() to use. When you call findSeconds(), you provide values for findSeconds() put into name and age. I could also have called findSeconds() this way:
findSeconds("joe", 25)
but instead I created another set of variables used to hold the user's response, and then passed the values contained in those variables into the function. Confused? Let me know at this point in the lecture!

Here's another example: 

<html>
 <head>

 <script type="JavaScript">
 <!--
 function findTotal(first,next,last)
 {
var total = first + next + last;
 document.write ("Your total is " + total + ". ");
 }
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
findTotal(2,3,4);
findTotal(1,5,8);
findTotal(6,8,2);
 // -->
 </script>


 </body>

 </html>
see the code in action

Returning values

JS functions can also return values to their caller. This is essentially the flip-side of passing arguments: instead of passing information into the function, you pass information back out to the program. So, for example, we could have written our function findTotal() this way instead: 
<html>
 <head>

 <script type="JavaScript">
 <!--
 function findTotal(first,next,last)
 {
var total = first + next + last;
return total;
 }
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
total1 = findTotal(2,3,4);
document.write ("Your total is " + total1 + ". ");

total2 = findTotal(1,5,8);
document.write ("Your total is " + total2 + ". ");

total3 = findTotal(6,8,2);
document.write ("Your total is " + total3 + ". ");
 // -->
 </script>


 </body>

 </html>
see the code in action

Although this example looks more complicated than the first, this way of setting up your function would be much better if you might need to do something else with total later on, such as determine if the order qualifies for shipping. 

<html>
 <head>

 <script type="JavaScript">
 <!--
 function findTotal(first,next,last)
 {
var total = first + next + last;
return total;
 }
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
total1 = findTotal(2,3,4);
document.write ("Your total is " + total1 + ". ");
if (total1 > 15) {
	document.write("This order qualifies for free shipping!");
}

total2 = findTotal(1,5,8);
document.write ("Your total is " + total2 + ". ");
if (total2 > 15) {
	document.write("This order qualifies for free shipping!");
}

total3 = findTotal(6,8,2);
document.write ("Your total is " + total3 + ". ");
if (total3 > 15) {
	document.write("This order qualifies for free shipping!");
}
 // -->
 </script>


 </body>

 </html>
see the code in action

Actually, you'll notice that you keep using the same basic code over and over again for determining free shipping, which is a sure-fire sign that you should use a function instead to clean up your code. So you might have the following: 

<html>
 <head>

 <script type="JavaScript">
 <!--
 function findTotal(first,next,last)
 {
var total = first + next + last;
return total;
 }
 
 function freeShip(total)
{
 if (total > 15) {
	document.write("This order qualifies for free shipping!");
	}
}
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
total1 = findTotal(2,3,4);
document.write ("Your total is " + total1 + ". ");
freeShip(total1);

total2 = findTotal(1,5,8);
document.write ("Your total is " + total2 + ". ");
freeShip(total2);

total3 = findTotal(6,8,2);
document.write ("Your total is " + total3 + ". ");
freeShip(total3);
 // -->
 </script>


 </body>

 </html>
see the code in action

Actually, we could improve the function freeShip() even more. Right now, the function always checks if the total is greater than 15, but say the qualifying total changes from month to month, or maybe the qualifying total is different for different types of items (say $15 for cd's, but $5 for books). We could redefine freeShip() to make it more flexible this way: 

<html>
 <head>

 <script type="JavaScript">
 <!--
 function findTotal(first,next,last)
 {
var total = first + next + last;
return total;
 }
 
 function freeShip(total, qualify)
{
 if (total > qualify) {
	document.write("This order qualifies for free shipping!");
	}
}
 // -->
 </script>

 </head>
 <body>

 <script type="JavaScript">
 <!--
total1 = findTotal(2,3,4);
document.write ("Your total is " + total1 + ". ");
freeShip(total1, 5);

total2 = findTotal(1,5,8);
document.write ("Your total is " + total2 + ". ");
freeShip(total2, 15);

total3 = findTotal(6,8,2);
document.write ("Your total is " + total3 + ". ");
freeShip(total3, 15);
 // -->
 </script>


 </body>

 </html>
see the code in action

Note that once a function returns a value, the function ends, even if there is more code following the return statement!

Exercise 1

Write a function called picInfo that pops up an alert box with a message when the user passes the mouse over an image on your page.

Exercise 2

Write a function called hint that you use to tell the user of your game 2 from project 5 whether their guess was too high or too low.