User-defined functions

As you saw in lecture, you can define your own JavaScript functions. Such functions are called user-defined, as opposed to predefined functions which you get from a library, such as the prompt() function.

What is important to know about user-defined functions:

Functions allow you to group a set of statements and give them a name.
Functions are defined in the head of a document.
When you define a function, the statements inside are not executed.
Later you invoke the function in the body of the document, and the statements inside execute. Once more, functions, after they have been defined, can be called/invoked/used any number of times.
A function may have inputs (for instance, parseFloat() always has one input: the string to be parsed into a float number). Values of inputs are sent to the function in parentheses when the function is invoked.
A function may return a value, like the prompt() and parseFloat() functions. These are called fruitful functions and you will talk about them soon in your lecture.

Below is an example of a user-defined function to convert distance in feet, to distance in meters. This function, after computing the result, prints it in on the page.

<HTML>
<!-- Wendy Wellesley   cs110  11/11/07 -->
<!-- Converts distance in feet to distance in meters -->
<!-- using a function that computes and displays the distance ---->

<HEAD>
<TITLE> Feet to Meters </TITLE>
<SCRIPT TYPE="text/JavaScript">
  	function displayMeters(feet) {
  	// the function takes distance in feet
  	// and writes the conversion in the document
       
       	document.write("<P>You entered " + feet + " feet.<BR>");
     	
       	// meters is a local variable:
       	var meters = feet * 0.3048;
     	
       	document.write("That's equivalent to " + meters + " meters.");
  	}
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT TYPE="text/JavaScript">
       var distance_in_feet = prompt("Please enter the distance measured in feet", "");
       displayMeters(distance_in_feet);

       distance_in_feet= prompt("Give me one more - distance in feet -");
       displayMeters(distance_in_feet);
       
</SCRIPT>

</BODY>
</HTML>

Carefully study the example above. Answer the following questions:

What is the name of the function that converts the distance?
Where do we specify the formula for the conversion?
Where is the function defined, and where invoked?
When is it invoked? How many times?
What is the input (or argument or parameter) of the function?
How is the result displayed on the web page?

Notice that the function above uses a local variable meters.

Click here to run the example.

Task 1: Old Macdonald

Remember the Old MacDonald song? All the verses of the Old MacDonald song are the same. The only thing that changes from verse to verse, is the animal and the sound. Suppose we want to print on a web page several verses of the song. This situation is a good candidate for defining and using a function! The function we will define will print on the page one verse of the song. Then, we will call/invoke/use the function as many times as the number of verses we wish to print.
Copy and paste the HTML file skeleton below, into a new file OldMac.html which you will create on your Desktop.
Define a JavaScript function OldMacVerse() that displays one verse of the Old MacDonald song. Your function should have two arguments, one for the animal, and one for its sound.
Invoke the function several times with different animals and sounds.
The resulting page should look something like this old macdonald page. Of course, feel free to use any animals/sounds you would like! Also, give the viewer of your page the chance to input their favorite animal and sound, creating a dynamic page
Test your web page to make sure that it works as it should.

<HTML>
<HEAD>
<TITLE> Old MacDonald and New Functions!</TITLE>

<SCRIPT TYPE="text/JavaScript">
//Define function in the HEAD part of your document:




</SCRIPT>
</HEAD>

<BODY>

<SCRIPT TYPE="text/JavaScript">
  // Here is one call to the function, using specific values for the arguments:
  
     OldMacVerse("cow", "moo");
     
  //Call your function several more times.
  //Ask the user for an animal and a sound, 
  //and call the function with what you get:
     
     
</SCRIPT>
</BODY>
</HTML>

Task 2: Restaurant Tips

Your next task is to write a function that calculates a restaurant tip. In this version, tips are always 15 percent.

Set up the syntax to define the function. The function should be named displayTip. It will take one argument, namely the amount of the bill.
The function should compute the amount of the tip.
The function should then display the result by writing it into the document. The function should do all the writing.
Next, write some code that will invoke your function, so that you can test it. Try several different amounts. The result should look like this 15% tip page.
Finally, write some code that will prompt the user for the amount of the bill and then invoke the function on that amount. Remember, you'll need to use parseFloat to convert the result of the prompt to a number. The result could be like this flexible 15 tip page

Note: There is a method named round(), in the Math Javascript object, that can be useful if you want to eliminate extra decimal digits in your results. Try to look it up and figure out how to use it.

If you have more time, here are some more exercises to try.