Crashcourse in JavaScript - Part One: Pop Up Windows

Webhelp.org Presents:

Crashcourse in JavaScript

Part One

The Pop Up Window

What is JavaScript? Javascript is a little something that the folks at Netscape came up with so one could embed programs into HTML. Not to be confused with Java, Javascript can be completely inserted into the HTML, whereas Java requires an external program to run, aka, a "class" file, usually written in a programming language like "C" or "Perl".

What is a Pop Up Window?A pop up window is a second browser window that "pop ups" when called by either a link, a button or an action.

First let's write a little HTML file to "pop up" in our window. If you do not know how to do this, you shouldn't even be tackling this tutorial (go to Crashcourse In HTML to learn basic HTML first). Make one with simply one line of text like this:<HTML><BODY><CENTER>
<FONT FACE="Arial" SIZE="4">This is a pop up window!</FONT>
</CENTER></BODY></HTML>

For our examples, we will save this document as "Window.html". Now that you have a seperate HTML document to load into the pop up window, we can proceed. The JavaScript command we will need to define to open another window, we'll call "WinOpen()", but can actually be whatever you want and should have a different name if multiple pop ups will be used on the same page (example: NewWindow(), PopUp(), etc.). By the way, those "()" are parenthesis, not giant 0s. " ( " and " ) ". The script goes something like this:

<SCRIPT LANGUAGE="JAVASCRIPT">

</SCRIPT>This little script will call up the file "window.html" when WinOpen is activated. How do we activate WinOpen? One of many ways. One way is with a link. Try this:

<A HREF="" onclick="WinOpen()">Open Window.html file</A>

If you want to see what happens, click here and try it. Don't like the results? Don't blame you! Why the page you WERE on turns into a directory structure or the index page of that directory is simply some sort of bug. This can be overcome by designating the file from which the pop up window is opened in the A HREF tag. I called the example file popup1.html. Knowing this, you can see that the line that calls up the pop up window could look like this:

<A HREF="popup1.html" onclick="WinOpen()">Open Window.html file</A>

Try the example by clicking here. That's a little better, but still not the finest quality money can buy. What we did here is to call up the original document to fill the void created by the link. It gets the job done. Of course, you are reloading the page from the top, so if the link that opens the pop up is farther down the page, you can use a NAME in the anchor and have the page reload and go to that NAMEd part of the document...

<A NAME="popup">
<A HREF="popup1.html#popup" onclick="WinOpen()">Open Window.html file</A>
</A>

It seems the most consistant way to call up a pop up window, is to use a button. The button is the same type used in HTML FORMs. Using the same JAVASCRIPT we defined above, we can change popup1.html to look like this:

<FORM>
<INPUT TYPE="button" name="Window" value="Open Window.html file" onclick="WinOpen()">
</FORM>

As you can see, even in raw HTML the way you would use a button to open the pop up is not too different then using an anchor tag. To try it click here. As you can see, the page did not need to reload or anything when the button was clicked. The trick will be in fitting the button in with your text.

Let's go ahead and modify our "Window.html" file to include a button as well. This button will be used to close the pop up window. Below is the "Window.html" file with the additions required to "self close". I'll save the new version as "Window2.html".

<HTML><BODY><CENTER>
<FONT FACE="Arial" SIZE="4">This is a pop up window!</FONT>



<FORM>
<INPUT TYPE="button" value="Close Window2.html file" onclick="self.close()">
</FORM>

</CENTER></BODY></HTML>

Now I'm going to take the example that uses the button to open the pop up, to open our new pop up file, "Window2.html". This example will show how the self close works.

Pretty cool, huh? Now if the button didn't quite fit in the pop up window, you can, of course, change the width of the pop up window in the initial JAVASCRIPT that we wrote. There are other things that can be defined that can modify the pop up window. I'll bring up the HTML for the example that uses the button to show you all of the different variables for a pop up window:

<SCRIPT LANGUAGE="JAVASCRIPT">

</SCRIPT>

<HTML><BODY>

<FORM>
<INPUT TYPE="button" name="Window" value="Open Window2.html file" onclick="WinOpen()">
</FORM>

</BODY></HTML>

You can see that not only did I make the width 250 to accomodate our self close button, but also allowed the display of the scrollbars, status window, menubar, location window, and the directories. All of this makes for a fairly ugly pop up window, but I'm sure you can figure out which ones YOU will actually need to use for your intents and purposes.

Another way pop up boxes have been used that I am CERTAIN you have seen, are those windows that pop up when the page loads. This is done with this:

<SCRIPT LANGUAGE="JAVASCRIPT">

</SCRIPT>

<HTML><BODY onLoad="WinOpen()">

<BR><BR><BR>
I'm just some spontaneously typed of text for you to get a sense of perception on this whole JavaScript thing.
<BR><BR><BR>

</BODY></HTML>

So, for this example, we'll use the same pop up window as the last example, only it will pop up automatically when the example is loaded. In other words, when you click on this link to see this example, the pop up window will open up. Why? We define WinOpen() as a function that opens window.html in a Window named Window1 with a width of 200 and a height of 100. In the BODY tag, we call that function to execute when the page is loaded, or on load, onLoad! See?

The BODY tag is the same BODY tag you would use any way. This is not a special BODY tag or anything like that. So, if you want a web page with a white background and black text, you would just add the "onLoad" to that tag. For example:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" onLoad="WinOpen()">

Prior to this example, the "event handler" we've used has been "onclick". Now we'll try another event handler: "onload". "onLoad" is actually used widely in javascript to call scripts into play when the page loads. You'll never guess what the opposite of onLoad is! It's onUnload! So, if you change that BODY onLoad="WinOpen()" to BODY onUnload="WinOpen()" as I did in this example, you'll see that the window pops up when you back out of this page!

In closing I must say, all of this should not be confused with Alert boxes. Alert boxes are those boxes that pop up with OK and CANCEL options on them and are done in a slightly different way and will be covered in a different turorial. The next thing I hope to teach in THIS tutorial is how to write to a pop up window on the fly, but this will have to wait until another weekend! Stay tuned!!!

E-Mail Jonny Webhead