HTML Goodies: Script Tip: Week 9

 You there, Tippy! We're slowly getting to the bottom of this script. Now we'll get into the history statement right at the end and wrap it up. Here's the script so you can familiarize yourself again:

---

<SCRIPT LANGUAGE="javascript"> function JemWebCONFIRM()

{if (!confirm ("YOUR MESSAGE GOES HERE"))

history.go(-1);return " "} </SCRIPT>

---

If you've used any of the 3- or 4-level Navigator or Explorer browsers, then you've probably already seen this "history" in action. You go up to the location bar at the top of the browser and type in part of a URL and poof! The remainder of the address just pops up.
But how does the browser know that? It knows it because every place you go, in the order you go, is kept in a file called "history." So, when you start to type in a URL, if you type in something that's similar to an address that's already in the history folder, the browser attempts to be nice and finish it off for you.
What's nice about that history file is that JavaScript sees it as an object to be acted upon. In the case of this script, the method that acts upon it is "go." That tells the browser to, well, go to the URL.
Notice in this script that not only is the browser being told to go somewhere within the history file, it is being told to go somewhere specific. In this case it is to go one back. See that (-1)?
Well, if that's the case, then you should be able to tell the browser to jump three back, or four ahead (by using the plus sign instead of the minus). You can. As long as the user has surfed enough to have that many pages in their history file, it'll work just fine. The problem comes in when you say to jump back four pages and the user has only visited three. The JavaScript cannot complete the command and it all comes to a standstill.
And That's That
So, now you've seen another script explained note for note. Look at it again and see if you are not now starting to see the process of JavaScript. There is a real order to things that you have to understand before you can start writing your own scripts. Here, again, are the steps in the script:

• You log into the page and the script is loaded into the browser.
• The function is enacted upon the loading of the page.
• A confirm box pops up with text written on it.
• If the person chooses OK, the script is done and the page loads.
• If the person chooses Cancel, then the history.go is enacted and the browser goes one page back or reloads the page the user just came from.

HTML Goodies: Script Tip: Week 8

 Hey, Tippy... Okay, let's talk about that confirm statement. Here's the script once again:

---

<SCRIPT LANGUAGE="javascript"> function JemWebCONFIRM()

{if (!confirm ("YOUR MESSAGE GOES HERE"))

history.go(-1);return " "} </SCRIPT>

---

Confirm. Verb. The act of verifying a statement. That's the point of the confirm statement. Take a moment and look again at what the script does. Try clicking here.
See that gray box that popped up? That's what the confirm command does. It posts that box with two choices, OK and CANCEL. The OK button is the default. If you click it, then you confirm the command and you get to go to the page you originally wanted to go to.
     Clicking CANCEL is another matter. The CANCEL button can have a few different functions. If you have nothing more than this:

confirm ("YOUR MESSAGE GOES HERE") ...then the CANCEL button does just that: It cancels the effect. The box goes away, but your user still goes to the page as the link has already occurred and the page has started to load. Remember: This script is sitting on the page we wanted to go to.
But that CANCEL default is not what's happening here. Here the author has set it up so that when you click Cancel, the browser goes back one page to the original page you came from.
It probably has something to do with that history.go(-1) thing.

HTML Goodies: Script Tip: Week 7

Hey, Tipmeisters... This week we tear a little further into this fine script in an attempt to better understand it.

---

<SCRIPT LANGUAGE="javascript"> function JemWebCONFIRM()

{if (!confirm ("YOUR MESSAGE GOES HERE"))

history.go(-1);return " "} </SCRIPT>

---

Now, last time around we talked about the function, JemWebCONFIRM(), and what it did. This week we're going to talk about those parentheses that always seem to follow.
Believe it or not, those parentheses actually have a name. They're called an "instance." Here's a textbook-type definition:

The instance of a command is contained in parentheses immediately following the command. The instance contains information about what an object is to do or how a method is to be carried out. Notice that this script has a few sets of parentheses. One set follows right after the function, the second surrounds the If statement, and the third surrounds the confirm command.
I can always keep my parentheses straight if I think of them like mathematical statements: Everything inside the parentheses gets done first. That means every open parenthesis needs a closer to go along with it.
But why are some parentheses empty, like the function, and others full of commands, like the confirm? It's because of what they do. Remember, the function is really a method. The method is carried out through a long series of commands. Remember that from last week? If the parentheses are empty, then the script looks for commands included inside of fancy parentheses { }. Those parentheses that have commands inside, run them.
Later in the Tips, we'll get into actually adding a name into the function parentheses so that you make it act upon a specific part of the page. But that's later...

HTML Goodies: Script Tip: Week 6

We're underway with a new script. Here's the code again to get us up to date.

---

<SCRIPT LANGUAGE="javascript"> function JemWebCONFIRM() {if (!confirm ("YOUR MESSAGE GOES HERE")) history.go(-1);return " "} </SCRIPT>

---

In this Tip we're going to focus on that "function" up in the script. Here's the basic concept.

There are a lot of commands in JavaScript that do things. One command, one effect. But, as you probably know by now, you can also combine a bunch of those singular events into a secondary output. For instance, you can use a getDate() method to grab the date, then use another series of JavaScript commands to change the numeric value of the date into text, and finally post that text to the status bar. Generally, that would be done with three different commands, and you can certainly write it that way.

But wouldn't it be nice if you could set up those three commands and assign a title to it? One command would enact all three commands to get the desired effect. Well, you can! That's a function.

Above, the function is named JemWebCONFIRM(). See that? The format is to write the word "function" to denote that it is a function, then immediately offer a name for the function followed by the two parentheses (). The name of the function can be just about anything. The only function names usually frowned upon are those that already exist in the JavaScript language.

Okay, so you've named it. Now what's it going to do? Look again at the script above. Notice that right after the function name are some commands inside of those fancy brackets {}. That's what it will do. Whatever appears within the fancy brackets is what will occur when you call for the function. In this case, an alert window will pop up and do a few other things, but that's another Script Tip...

HTML Goodies: Script Tip: Week 5

 Hello, Script Tip Folk... Let's start looking at a new script. This is a little more involved than the last one, so we should be able to really tear it apart and get a lot out of it.
Basically, here's what this script does:

• Posts a dialogue box when a person enters the page.
• The box has text on it that can be altered.
• The box gives the user the opportunity to click OK to enter the page or Cancel not to enter the page.
• If the user clicks OK, then the page loads as usual.
• If the user clicks Cancel, then the script reloads the page the user was coming from.

The script is Copyright ) JemWeb 1997, but HTML Goodies has permission to use it to help you along with your JavaScripting.
That said, here's what it looks like:

---

<SCRIPT LANGUAGE="javascript"> function JemWebCONFIRM()

{if (!confirm ("YOUR MESSAGE GOES HERE"))

history.go(-1);return " "} </SCRIPT>

---

How about that? All that functionality in such a small script!
We'll start tearing this pup apart by looking at the very first line in the script:

<SCRIPT LANGUAGE="javascript"> I am asked all the time if that LANGUAGE="javascript" item is actually needed (many people have found that simply writing SCRIPT will get the job done). The quick answer is yes, that LANGUAGE attribute is needed. Not all the time, but you should simply get into the habit of using it. The reason has to do with the fact that there are so many different types of scripts out there including JavaScript, Live Script, JScript, and VBScript. Each is quite similar and yet quite different.
By using the LANGUAGE attribute, you specifically lock in which script type you're using. It can be quite beneficial to the browser if the script you're using has commands found in different scripting languages.
So use it!

HTML Goodies: Script Tip: Week 4

 It's Time For Tip Four... 

  Let's get into part four, the last part of the discussion of this basic image flip script:

<A HREF="http://www.cnn.com"

onMouseOver="document.pic1.src='menu1on.gif'"

onMouseOut="document.pic1.src='menu1off.gif'">

<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"></a>

You know what it does, you have seen the hierarchy statement explained, and you know what the onMouseOver and onMouseOut Event Handlers do. Now we answer the question from the last Tip:

How do two Event Handlers and two hierarchy statements sitting inside the "A HREF=" command affect the image command to post new images when the mouse passes over? First off, the image really isn't an item apart from the Event Handlers. This entire script is in the format of an HREF link using an image as the item to be clicked upon. So, the IMG command is part of the whole. Still, how does the script know to change out that image and no other? The answer lies in the hierarchy statement:

document.pic1.src We know that the "document" is this page. At the other end of the statement, we know that "src" means source. It's that thing in the middle, "pic1", that represents the IMG command. How, you ask? Well, let's have a look at the IMG command:

<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"> See the attribute, NAME="pic1"? Ta da! That's it. We named the image "pic1." Then we called for the hierarchy statement to affect something called pic1.
That's how they're linked.
That wraps up this script. Put it on your page and enjoy it.
Next Week: A New Script! Do I Really Need That LANGUAGE="javascript"?

HTML Goodies: Script Tip: Week 3

 Hello, again, Tippers...

Let's spend a little more time looking at how this basic image flip actually works its magic. Here's the code again:

<A HREF="http://www.cnn.com"

onMouseOver="document.pic1.src='menu1on.gif'"

onMouseOut="document.pic1.src='menu1off.gif'">

<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"></a>

If you're far enough along in your HTML knowledge, you have already noticed that the image flip is put together in the form of a hypertext link.
In the "A HREF=" statement, there are two strangely capitalized items: onMouseOver and onMouseOut. Those two JavaScript commands are what are known as "Event Handlers."
An Event Handler is a dream for us HTML coders in that it does not require that we set it aside with its own <Script Language="javascript"> and </Script> commands. These Event Handler commands sit right in the HTML you already know how to create. What a concept! (What was the name of the comedian who always said that? My wife and I can't come up with it.)
onMouseOver tells the browser to do something when the mouse is passed over the item. onMouseOut, as if you didn't already know, does something when the mouse leaves the area, no SCRIPT commands needed. These Event Handlers just sit right inside the "A HREF=" command and work from there.
You'll notice in the code that the Event Handler is pointed at the hierarchy statement that we talked about in last week's Script Tip. That statement is telling the browser where to find the image. Remember that?
So, you may be asking, how do two Event Handlers and two hierarchy statements sitting inside the "A HREF=" command affect the image command to post the new images when the mouse passes over? That's a solid question, indeed!

HTML Goodies: Script Tip: Week 2

     In this tip we'll quickly discuss the use of those objects in what I call a hierarchy statement. Here's a very bare-bones image flip script:

<A HREF="http://www.cnn.com" onMouseOver="document.pic1.src='menu1on.gif'" onMouseOut="document.pic1.src='menu1off.gif'"> <IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"></a>

     We'll actually use this script for this and the next Script Tip. The portion of this script I am interested in most is this one "document.pic1.src='menu1on.gif".

     Remember from the last tip that document is an object? Well, it is. Here we're using the document object to set up a hierarchy statement. Hierarchy statements are listings of elements under a specific object. This statement, for instance, is under the object document--the HTML document.
     Always in these statements, it's biggest to smallest in stature reading left to right. So in this case, the statement is saying:

• The document...
• that contains something called pic1...
• receives this source (denoted by src)...
• an image called menu1on.gif.

     Notice it's always a dot (.) that separates the items in the hierarchy statements. I should say here that the pic1 item is the name of the image command. See that in the full code above?

     So now you have a general idea of what is happening when you see long lists of elements in JavaScripts. You're seeing a hierarchy statement denoting a specific portion of an object.

HTML Goodies: Script Tip: Week 1

 Tip One

  JavaScript is a great computer language in that it is quite versatile and can be understood by the common Weekend Silicon Warrior. Here, we start off a series of tips to help you place JavaScript on your HTML pages.
We'll start with the basics. JavaScript offers the user a series of what it calls "objects." These are things that already exist without having to be created through scripting. This HTML page you're looking at is, in my opinion, the most commonly used object. In JavaScript speak, the page is named "document."
Okay, fine. You have an object, so what? Well, now you get to act upon it. These things that JavaScript uses to act upon "object" are called "methods." You can always tell a method by its tail. Every method has this at the end: ().
     Those two parentheses denote the method and hold instructions on what should happen. For instance:

<SCRIPT LANGUAGE="javascript">

document.write('<FONT COLOR=green>Green Text</FONT>')

</SCRIPT>

That script will produce this: Green Text
See what's happening? The document is being acted upon by the method "write." Inside the ( and the ) is what should be written to the page. In this case, green text.
You don't get a much more simple JavaScript than the one above. All it does is use scripting to place text upon the page. Whatever is in between those parentheses is written to the page. It's a very simple hierarchy statement.