and Andree Growney
Use these to jump around or read it all
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
The Concept
In the concept of creating a variable, you assign a one-word title to the output of a JavaScript command or event. Creating a function is doing the exact same thing except you are assigning a title to an entire series of commands. You are combining many
JavaScript commands into one.
The Script
The script is actually in two parts: There is the script itself that contains the function, then the “onLoad” event handler that triggers the function to work.
Here are both parts:
<SCRIPT type=”text/javascript”> <!– Hide from browsers that do not understand Javascript
var y = d.getFullYear();
|
…and the onLoad command in the <BODY>
The Script’s Effect
The script’s effect will display down there in the status bar.
We’ve kept basically the same kind of date script that we’ve been using in past primers so it would all look somewhat familiar to you. How the script is implemented is the concern here. To see this script in action, follow this link.
Deconstructing the Script
Hey! What are those <!– and –> things up there?
They’re yet another extra command stuck in for good measure. Those probably look familiar to you. They’re the two commands you use to comment out text in an HTML document. It looks like this:
I am using them here because, believe it or not, there are still browsers out there that do 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, then it sees that text as something to be printed on the page. It looks bad. But if you use the comment commands, then the browser happily ignores the text and displays the page.
If you use these, there are a few very important rules to follow:
|
Back to the Deconstruction
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> command that triggers the function to work. Let’s look at the concept of the function first.
function dateinbar() var y = d.getFullYear(); |
The format is pretty straightforward. The function is given a name by writing “function” and then the name you want. 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 by creating a function, I am actually creating a new method for performing a task.
Again, just like the variable names, the function names can be as long as you like as long as there are no spaces and the word you choose does not already
appear in the JavaScript language. I went with “dateinbar()” since that’s what the function will do.
Very Important!
When you create a function, the commands that will make up the function must be encased in those fancy parentheses. See above how I have one right after the function statement and then one at the very end?
The text in between the fancy parentheses should look very
familiar by now. It’s the same script we used a couple of primers back.
|
The last command is new:
“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.
But why not just write “window.status”?
Good question. You can’t use it because that format is for use inside of an Event Handler, like “onClick”. Since this status bar statement is not inside an HTML command, you can’t follow that format, you use “defaultStatus” instead. There’s only one status bar — that has to be the default.
The “onLoad=” Command
We have a new Event Handler folks! The command “onLoad” (notice the capitalization pattern) tells the browser that upon loading the page, do what follows. In this case, what follows is the function “dateinbar()”.
This command almost always is found in the BODY portion of the HTML document. It’s almost always followed by a function trigger also, but doesn’t have to be. You could put an object.method statement after it and it would run just fine.
Placement of these Items
Where you put the two sections is pretty 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 below the onLoad command will cause it to start after the entire page has been loaded. Putting it above the onLoad command places it into the computer’s memory first so it’s there ready to go when the onLoad calls for it.
Just about any set of JavaScript commands that produce an effect can be set into a function format. In fact, your assignment today is to try and prove that theory.
What You Have Learned
Your Assignment
This one’s a little involved. Create a function that calls for two prompts. (Hint: One just follows the other on another line.) The first will ask for the person’s first name. The second prompt will ask for the person’s second name. Then, in the same function, have an alert box pop up with the text:
Make sure you make a variable for the page address.
If you’d like to make it a little more fun, make it so that
“My Great Page” is done some other way than simply writing it in text in the alert command. Make a variable for that, too.
(this will open a new window)
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment