JavaScript Primers #9

By Joe Burns

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

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 the onLoad command in the <BODY>

<BODY BGCOLOR="FFFFcc" onLoad="dateinbar()">

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:

<!-- The text in here would commented out -->

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:
  • The comments go inside the <SCRIPT> and </SCRIPT> command.

    If you put them outside of those commands you would comment out the entire JavaScript and nothing would run.

  • The <!-- command can be followed by a line of text as long as the text is all on the same line.
  • The --> must be commented out using the double slashes or the JavaScript thinks the command is part of the script. Error. Notice, you can also put some text before it since it is commented out.
  • No, you do not have to use text along with these commands. I put it in because it made it easier to explain the purpose of the commands.
  • Follow the format and placement style above and you'll have no trouble.


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 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 + ".";
}

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.

  • A variable is made for the year
  • Another is assigned to the month
  • Another for the day
  • Then a fourth is created to represent the date itself

The last command is new:

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.

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:

Hello first name last name, Welcome to page address, My Great Page!

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.

Here's a possible answer
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date