JavaScript is a scripting language developed by Netscape, used to create
interactive Web sites. It holds two main attractions for lazy Webmasters.
- It can be used client-side. In layman’s terms, this means that you can type the code right into your HTML document. You don’t always have to upload it separately to your server as you do with CGI (Common Gateway Interface) scripts. If this is gobbledygook to you, read on — JavaScript is perfect for people who find CGI confusing.
- There are hundreds of free JavaScripts on the Internet. All you have to do is find one you like and cut-and-paste it into your HTML document. They frequently come with instructions and are relatively idiot–proof.
So what is JavaScript used for? Here are three examples:
Popup windows:
If you have been reading this column and referring to the companion Web site, you will have seen the popup windows I use for some of the examples. These are created with JavaScript. The code that will open a link in a popup window:
<A href="http://www.susanives.com/lazy/index.html" onClick="window.open('', 'popup', 'height=300, width=200, toolbar=yes, scrollbars=yes')" target="popup">Your link here</A>
If you deconstruct this, you’ll see several options. First, see that it starts out with a normal link tag, <A HREF>. Here, of course, you put the URL of the HTML document you want to appear in the popup window. It can be a page on your own site (in which case you don’t need the http://) or a remote site, as illustrated here. Next, note that you can change the width and height of the popup window. If you delete one or both of these parameters, it will default to your browser size.
You can also omit the toolbar or the scrollbar by changing the “yes”
to “no”. I always keep the scrollbar. You never know what screen resolution
your user will have and there’s nothing worse than not being able to access
content that slopped down below the screen. The toolbar is optional; I
often leave it off. However, I’ve found that many people can’t figure out
how to print a page if they don’t have a toolbar (they can right-click
and select print), so if you expect the page to be printed, the toolbar
is a useful courtesy.
Close Window:
Often, if I use a popup, I will include a button to close the window when the user is done with it. If they don’t close the window, they end up with a bunch of little windows open. It’s confusing. Here’s a little script that will create a button that will close a popup window:
<form>
<input type="button" style="background-color: #000080; color: #FFFFFF;
font-weight: bold; font-size: 10pt;" value="Close Window" onClick="window.close()">
</form>
The code in bold is CSS (Cascading Style Sheet) and is optional. If you leave this off, you will get a plain gray button. This code changes the button background to navy blue and the button text to white.
Not all JavaScripts are this straightforward. Some require you to put some of the code nested in the <HEAD> tag, some within the <Body> tag and the rest under the <BODY> tag. A few require that you upload graphics or other files to your server. The instructions for most of them are quite clear, however — just follow them carefully. Many JavaScripts are long and would take pages and pages to reproduce.
Here are some examples, with links to obtain the code:
Trailing Cursor:
The starburst trailing cursor will insert a little trail of starbursts that follow the mouse cursor around. There are complete instructions for integrating it into your site at webmoments.com. This involves inserting code in three places and uploading six graphic files to your server. It’s not as hard as it looks. There are also other tiny images you can use instead of the starburst: hearts, dust, and bubble, for example. You can even make custom graphics.
Flying objects:
This will take a transparent gif image and fly it around on your screen. You can have the code mailed to you by going to a1javascripts.com. You can use any image you want: I used a butterfly.
Mouse image rollovers:
This is one of the most popular uses for JavaScripts. Many Web design programs, such as Dreamweaver, will create them automatically for you. There are also online utilities that let you fill in the blanks to create a script with your own images. Try the one at internet.com. This utility makes up to six images, so it’s useful for navigation buttons. Before you start, have your images ready. For each rollover you will need two images of the same size. I will often use a navigation button that changes the text color when the mouse rolls over it.
For more scripts:
This is just the tip of the iceberg. For more scripts, try these sites. Most of them also have tutorials to help you learn more.
The catch:
There’s always a catch. JavaScripts may not work with all browsers,
or may not work in consistently. Some people disable Java in their browsers.
More than one script per page may confuse browsers. Some scripts are evil
(like ones that won’t let you leave a page until you click a sponsor’s
link) and some are cute the first time, irritating with repeated exposure.
Use them judiciously; test them thoroughly.
| 
