This chapter is from the book
This chapter is from the book
This chapter is from the book
Lesson 14: Creating a Function
In the creation of a variable, you assign a one-word title to the output of a JavaScript command or event. Creating a function is doing the same thing, except you are assigning a title to an entire series of commands. You are combining many JavaScript commands into one.
Here's an example. Let's say you have some JavaScript code that grabs the hour, minute, and second. Then you have some code that writes that code to the page. You want the return from that code to appear on the page four times. There's no reason why you couldn't write the code again and again. It will work just fine, but wouldn't assigning a one-word title to both pieces of code be easier? Then you could call for the two pieces of code by just calling on that one word.
It's good programming, too, because you must call on only one name to get an effect. Your page isn't full of extra, and probably confusing, code.
To illustrate, let's use a script that's actually in two parts: the script itself, which contains the function; and the onLoad event handler, which triggers the function to work.
Here are both parts:
<SCRIPT LANGUAGE="javascript">
<!-- Hide from browsers that do not understand JavaScript
function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + '/' + d + '/' + y + ' ';
defaultStatus = "You arrived at the page on " + t + ".";
}
// end hiding -->
</SCRIPT>
And here's the onLoad command in the <BODY>:
<BODY BGCOLOR="FFFFcc" onLoad="dateinbar()">
The script's effect displays in the status bar, as shown in Figure 3.6.
){kind=link}
We kept basically the same type of date script we've been using in past lessons so it would all look somewhat familiar to you. See how we assigned the getSomething() method's variable names and added 1?
Figure 3.6 The function displays the date in the status bar.
Click Here!
You can see this effect on your computer by clicking Lesson Fourteen Script's Effect, or see it online at http://www.htmlgoodies.com/JSBook/lesson14effect.html.
Hey! What Are Those <!-- and --> Things?
They're yet another couple of extra commands stuck in for good measure. Those probably look familiar to you because they're the two comment flags you use to comment out text in an HTML document. It looks like this:
<!-- The text in here would comment out -->
I am using them here because, believe it or not, there are still browsers out there that do not read JavaScript. I wrote this section on June 28, 2001, and yes, even today there are browsers that will not read JavaScript. By using these comment commands, the text of the JavaScript is commented out so that it isn't printed on the page. You see, if the browser doesn't understand JavaScript, it sees that text as something to be printed on the page, and it looks bad. But if you use the comment flags, the browser that can't read JavaScript happily ignores the text and displays the page.
If you use these comment flags, there are a few very important rules to follow.
The commands go inside the <SCRIPT> and </SCRIPT> flags. If you put them outside those commands, you would comment out the entire JavaScript on all browsers and nothing would run. The <!-- flag can be followed by a line of text as long as the text is all on the same line. The --> flag must be commented out using the double slashes; otherwise, the JavaScript thinks the command is part of the script, causing an error.
Notice you can also put some text before it because it is commented out. No, you do not have to use text along with these commands. I put the text in because it made explaining the purpose of the flags easier. Follow the format and placement style discussed earlier, and you'll have no trouble.
Deconstructing the Script
Two things are happening here. The first is the script section that creates the function. The second is the command found in the HTML <BODY> flag that triggers the function to work. Let's look at the concept of the function first:
function dateinbar()
{
var d = new Date();
var y = d.getFullYear() + 1900;
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + '/' + d + '/' + y + ' ';
defaultStatus = "You arrived at the page on " + t + ".";
}
The format is straightforward:
The function is given a name by writing function and then the name you want to assign to the function. It's very similar to the way you create a variable name.
But please note that the function name has the parentheses following it the same way that method commands do. I always keep it straight by thinking that in creating a function, I am actually creating a new method for performing a task.
A variable is made for the year. Another variable is assigned to the month, and another for the day.
A fourth variable, t, is created to represent the entire date format. It should look familiar. It was created to enable you to call for the full date anywhere in the HTML document by just calling for t.
The last command is new to you:
defaultStatus = "You arrived at the page on " + t + ".";
defaultStatus is a property of the object window. Its purpose is to place text into the status bar at the bottom of the browser window.
There's only one status bar, so that has to be the default.
The onLoad= Command
The command onLoad tells the browser that upon loading the page, do what follows. In this case, what follows is the function dateinbar().
This onLoad=functionname() command format is almost always found in the BODY portion of the HTML document.
Placement of These Items
Where you put the two sections—the function and the onLoad command—is important. You know the onLoad command goes in the BODY portion. The script that contains the function should be placed between the <HEAD> and </HEAD> commands in the HTML document. You can actually stick it anywhere on the page and it'll run, but placing it after the onLoad command causes it to start after the entire page has been loaded. Putting it before the onLoad command places it in the computer's memory first, so it's there ready to go when the onLoad calls for it.
A Word About Global and Local Variables
Okay, now you understand how to assign a variable name and how to create a function. What you might not know is that variables are seen differently by JavaScript, depending on whether they are inside the function or outside the function.
JavaScript allows for two levels of variables, local and global.
Local variables are variables that are viable only within a function. JavaScript understands that whenever a variable is encased within a function, that variable name is viable only inside that function. That way, if you copy and paste a script onto a page that already has a script on it, any existing variables that are equally named will not clash as long as that variable name is found within a function.
Global variables are variables that are not found within functions, and thus can clash with the existing variables on the same page.
Here's an example:
<SCRIPT LANGUAGE="javascript">
var joe = 12
function writeit()
{
var joe = "Joe Burns"
document.write(joe)
}
</SCRIPT>
The variable joe is used twice, but because one is found outside the function (the global variable) and one is found inside the function (the local variable), the two will not clash.
Now, with all that said it is not a good idea to follow the preceding format and use like variable names within your scripts. The purpose of the local variables being hidden is far more for protection against clashes with other scripts on the same page than clashes with variable names within the same script.
Name all your variables descriptively and differently, and you'll run into very few, if any, problems.
Your Assignment
Just about any group of JavaScript commands that produce an effect can be set into a function format. In fact, your assignment today is to try to prove that theory.
This one's a little involved:
Create a function that calls for two prompts. The first asks for the person's first name, whereas the second prompt asks for the person's last name.
Then, in the same function, have an alert box pop up with the text Hello first name last name. Welcome to page address, My Great Page!
Make sure you make a variable for the page address.
If you want to make this assignment a little more fun, present My Great Page to the viewer some other way than simply writing it in text in the alert command. Make a variable for that, too.
Click Here!
You can see a possible answer by clicking Lesson Fourteen Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/assignment14.html.