Web Design: Javascript

Oops. Hate to tell you this but you've come to the Javascript topic without Javascript support in your browser. There's not much I can do about this personally and my complaint department is useless. All I can really do is let you click on the icon on your right and I'll take you to my feedback page. Please tell me why your browser has Javascript disabled. I really would like to know.

If you wish, you can scroll down and see what's in this topic, but you won't have any fun I'm afraid.

Thanks .... Sam

You can take away my Java but don't take my Javascript.

---- Sam Gerber

There's no question in my mind that Javascript is one of the most interesting assets a webmaster has available. I think you'll agree once you realize how powerful a tool it is and what it can do to help you manage your web pages.

This overview topic has several interesting Javascript examples and a few good references to enable you to pursue this exciting technology once you leave here.

First off, I'll tell you that your browser supports Version . If no Version # appeared, then you have Javascript disabled. When you view the source of this page you'll see how I used Javascript itself to figure this out.

Make Javascript Your Best Friend

An impressive feature is opening and closing windows for you. Most web users know that if they want to close a window they just use "File Exit" or in Windows click the X on the upper right of the window. But it never hurts to have a button for them which uses Javascript's 'window.close' statement to do it for them. Opening a new window is very powerful since we have the capability of making the window a smaller size, remove navigation bars and resizing controls, and other effects. It's quite useful for displaying a logon screen, an advertisement or some other special message.

Here's a pushbutton which will pop up a new window with a kitty dancing to some music. There's also a javascript button to close the window. I'll leave it to you to discover how I did it.

Similarly, Javascript 1.2 introduced a "method" called 'window.print()'. For those of you who wished you could place a button on your page to easily print the window or the current frame, well now you can. I'm about to show you an example but first I'll introduce you to another very significant feature of javascript, writing dynamic HTML to your page.

Since only Javascript 1.2 supports the 'window.print()' method, let's dynamically write that button, but ONLY if the user's browser supports JS 1.2. The syntax looks like this (you would change the image location and attributes):

This javascript is placed exactly where you want the button to be. If you look at the href statement above, that strange syntax is called a Javascript URL and it functions like any other link. Since it's not a button on a form, we have considerable flexibility about where we can place it on our page.

Let's now take a look at this in action. Click the button below and I'll take you to a simulated order receipt. After you've seen and [optionally] printed the page, perhaps you'd want to disable Javascript in your browser and reload the page. You'll notice that the button is gone because Javascript 1.2 is not detected. Just close the window when you're finished.

A very popular use for javaScript is image swapping. You'll see this a lot when a designer creates 'mouseovers'. This is the capability to execute javascript conditionally on a mouse event, called onMouseOver, onMouseOut, and onClick. I've loaded a button which can be used for navigation. As you can see, it's monochrome and somewhat faint. When you place your mouse on it, it magically changes to color. If you click it, I'm going to make you watch the dancing kitty again.

After I revised this site, I decided I wanted to do something which would enable you to always see where you are. Initially you will see the topic's banner, but after you scroll down the page it's gone. Well, javascript to the rescue!

One of javascript's many awesome capabilities is enabling you to manage the activity of frames in your frameset. (If you don't understand frames, see my topic Frames vs. Tables.) I noticed that I had some space to spare in my top banner area, so I decided to 'steal' a little from there to place a graphic which had the name of the topic. Now, you've already seen 'image swapping' in the small icon above, but that was happening within the same frame. Here's what I did to access a different frame.

I created a graphic that was invisible and placed it in the banner frame below my large 'Sam's Web Stop' banner. I created a small banner graphic for every topic, exactly the same size as the invisible one. If you view the source of every one of my main topic pages, you'll see the following syntax in the <BODY> tag.

onload=(parent.banner.document.topic.src=
'images/topic_javascript.gif');

In English, this means that when the page is loaded "goto to the parent of this frame" (that would be the frameset itself), goto the child of that parent which has the name banner, goto the document property and find the object called topic (which is the name I gave to the transparent image I placed there), and finally, set its src property to the image I want swapped, and presto ... it does my bidding!

Doesn't this stuff really Grab Ya?

I'd like to supply one more example of the power of javascript, as it applies to framesets. A frame like the one you're reading cannot be allowed to occupy the entire window because it has no navigation elements. The user becomes lost. Click here and I'll show you what I mean, except that I'll bring up a slightly different version of this frame in a new window so that you still have this one to return to. The HTML syntax will be:

Just look at it for a moment or two and then close that window and come back here.

This can easily happen when a search engine looks thru your web site and finds frames based on their content. When the URL is clicked on at the search engine's 'hit list', the very problem you witnessed will occur. The solution is to place the following javascript in this frame:

This says that if the highest frame in the window's heirarchy is THIS frame, then that's just not what we want. So the javascript tells the browser to set the URL instead to:

http://www.samswebstop.com/

The required javascript has now been inserted into this page and I want you to see what happens this time when we try to bring this frame up all by itself. Watch carefully because it can happen really fast.

Is that slick, or what? There's another similar use for this which I won't do for you now, but it handles the situation where your frameset ends up inside of someone else's frameset and you want to 'break free'. That can happen more often than you might think, especially if you use a search engine like 'ask Jeeves' which keeps your page inside his frameset. He does allow you to break free however.

There's one caveat with javascript that I must call to your attention. Not everyone has it enabled in their browser. Some browsers don't support it well but it's usually the case that a user will turn the feature off, perhaps for performance reasons or because they're in fear of catching a virus from it.

So ... be careful implementing an important feature of your web site that depends on javascript. If you do, consider giving your reader an alternative. If you place a pair of statements in your page <NOSCRIPT> and </NOSCRIPT> then a browser without javascript enabled will process the HTML in between these 'bookends'.

This topic would be useless to such a user so I placed a few messages on the page for a non-javascript enabled browser. You may have seen this already or if you're curious you can turn javascript off and reload this page. You'll notice I placed this material high up on the page, lest the user see all the other material which doesn't apply to them.

Hopefully through these examples I have whetted your appetite for javascript. If so, go to my topic Reference Material [Javascript] and you'll find Netscape's Javascript Guide and Javascript Reference books there, available for study here, if you wish. There's also a nice tutorial written a little while back which is an excellent way to get started. Finally, you'll see reference there to a book I purchased and have enjoyed it as supplementary reference material.

In my opinion, the best way to cut your teeth with javascript is to skim through this type of material and then go over to javascript Source (see Sites to Visit) and pick up a couple free scripts that interest you and just try them. That's how I did it.

Hopefully you've found this topic interesting and are ready to give javascript your best shot.