In the last example, we had a problem when the getMinutes and getSeconds methods of the Date object returned numbers less than 10. We wanted them to come out as 04 instead of just 4.

We could have done something like this:

var the_minute = the_date.getMinutes();
if (the_minute < 10) 
{
	the_minute = "0" + the_minute;
}

var the_second = the_date.getSeconds();
if (the_second < 10)
{
	the_second = "0" + the_second;
}

This would work fine. Notice, however, that we're basically writing the same code twice: If something is less than 10, stick a "0" in front of it. When you start to notice that you're writing almost the same exact code a bunch of times in your JavaScript, you should start thinking about writing a function to do it. In this case, I wrote a function called fixNumber:

function fixNumber(the_number)
{
	if (the_number < 10)
	{
		the_number = "0" + the_number;
	}
	return the_number;
}

fixNumber takes one parameter, called the_number. A parameter is just a variable that gets set when the function is called. In this case, if we call the function like this:

var fixed_variable = fixNumber(4);

The parameter the_number gets set to 4 in the function. The body of fixNumber should make sense to you by now. It says, "if the variable the_number is less than 10, add a 0 to the front of it." The only new thing is the return command: return the_number. The return command is used when you say something like this:

var some_variable = someFunction();

The variable some_variable gets set to the value returned by the someFunction() function. In fixNumber, I wrote: return the_number. This exits the function and returns the value of the_number to whatever variable is waiting to be set. So, if I write ...

var fixed_variable = fixNumber(4);

... the_number will be initially set to 4 by the function call. Then, because 4 is less than 10, the_number will be changed to "04". Then the_number is returned, and the variable fixed_variable will be set to "04."

To include fixNumber in original function, announceTime(), I've made the following additions:

function announceTime()
{
  //get the date, the hour, minutes, and seconds
  var the_date = new Date();

  var the_hour = the_date.getHours();
  var the_minute = the_date.getMinutes();
  var fixed_minute = fixNumber(the_minute);
  var the_second = the_date.getSeconds();
  var fixed_second = fixNumber(the_second);

  //put together the string and alert with it
  var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;
  alert("The time is now: " +the_time);
}	

Let's say it's 12:04:05 when the time link is clicked on. We get the date using new Date(), get the hour using getHours(), which doesn't need fixing, get the minute as we did before, which in this case will be the number 4, and then call fixNumber on the_minute:

var fixed_minute = fixNumber(the_minute);

When fixNumber() is called, the parameter the_number gets set to the value of the_minute. In this example, since the_minute is 4, the_number will be set to 4. Once the parameter is set, we go into the body of the function. Since 4 is less than 10, the_number is changed to be "04". Then the_number is returned, using the return command. Once "04" is returned by fixNumber, the variable fixed_minute will equal "04".

Once you get this working, it should look like this!

Let's go through this step by step and then do an exercise. Assume the time is 12:04:05.

We start in function announceTime()

1. the_minute = the_date.getMinutes();
   Now the_minute = 4

2. fixed_minute = fixNumber(the_minute);
   Call the fixNumber() function and return its value to fixed_minute

   Now we're in function fixNumber()

3. function fixNumber(the_number)
   fixNumber() is called with the value of the_minute, which is 4, now the_number = 4

4. if (the_number < 10) {the_number = "0" + the_number;}
   Since 4 is less than 10, the_number now equals "04"

5. return the_number
   The function exits and returns "04"

   Function fixTime() has exited, so we're back in announceTime()

6. The function returns with "04"
   So fixed_minute now equals "04"

This example used a function which only had one parameter. You can actually have as many parameters as you'd like. For example, here's a function that takes two arrays and returns a list of elements that the arrays have in common.