Page 12 —
Functions with No Parameters
This HTML page contains a function called announceTime(). To call announceTime from a link you'd do this:
<a href="#" onClick="announceTime(); return false;">
time!</a>
Like so ... time!
You saw something like this in the second lesson:
<a href="#" onClick="alert('Hello!'); return false;">
Hello!</a>
This was calling the alert method from a link. A function is just like a method, the only difference being that a method is attached to an object. In the case of alert, the object is a Window object.
Let's go on to the function itself. If you View Source, you'll see the function sitting in the head of the HTML document. Here it is:
<html>
<head>
<title>Function with No Parameters</title>
<script langauge="JavaScript">
<!-- hide me
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 the_second = the_date.getSeconds();
//put together the string and alert with it
var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert("The time is now: " + the_time);
}
// show me -->
</script>
</head>
<body>
...
</body>
</html>
OK, let's go over this function line by line. First, all functions come in this format:
function functionName(parameter list)
{
statements ...
}
Functions' naming rules are the same as those for variables. The first character has to be a letter or an underscore. The rest of the characters can be numbers or dashes. Also, you must make sure you don't name a function the same as a variable. If you do, you'll get really strange, hard to debug, results. I use internal capitalization for my function names to make sure I don't accidentally name a function and a variable the same thing.
After the function name comes a list of parameters. This function has no parameters, so I'll hold off describing parameters until the next example.
After the parameters comes the body of the function. This is the set of statements you want to run when the function is called. I'm going to use this timer for the next few examples, so let me describe how it works.
The first line ...
var the_date = new Date();
... gets a new date object. Just like you have to get a new array object before you can do anything with it, you need to get a new date object before you can find out what time it is. When you get a new date object, it is automatically preset to the current date and time. In order to get the information out of the object, you have to use the object's methods:
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
You might be asking yourself, how am I supposed to know what methods a date object knows? How do I even know there's such a thing as a date object? Well, these are reasons you need to have access to a JavaScript library. I'll do my best to explain as many of the built-in JavaScript objects as I can, but there's no way I can go through all of them.
The rest of the function is pretty clear. It takes the numbers returned by the method calls, turns them into a string, and calls the alert method to put up a dialog box with the string. Note that you
can call methods and functions from within functions. We'll see a lot more of this.
Now, if you've played with the time link enough, you might have noticed something isn't quite right. Every once in a while you get something like this: "The time is now: 12:14:4". What's the deal here?
Well, it turns out that the getSeconds() method returns a number. If it's 12:14:04, getSeconds() will return the value 4. Then when we do the string concatenation, the_minute + ":" + the_second, we get 14:4 instead of what we want. There's an easy way out of this, and that's to make a new function that fixes the minutes and seconds if they need fixing. This new function will demonstrate parameters and return values, two crucial parts of functions, so it deserves a page of its own.
On to parameters and return values.
next page»
|
