by Susan Ives

JavaScripts - This is your Web site on Caffeine

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 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 all 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 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 be full screen size.

    You can also omit the toolbar or the scrollbar by changing the "yes" to "no". I like to 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 more of an option; 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 useful.

    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 I have typed 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. Here is a popup window that also has a close window button.

The popup windows I've described here are not automatic: the user has to click on a link to trigger them. However, they are treated the same way as automatic popups, so if the user installs popup blocking software, it may block these mini-windows. I use the google toolbar, which blocks popups, and it does not affect this variety. other popup blockers I have tried kill them.

If you want to make an automated popup, here is a code generator that will write the Java for you. I hate them and do not use them.

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. Here are some examples:

    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 www.webmoments.com/java/TrailingCursor.htm. 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 bubbles, for example. You can view it in this popup window.

    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 www.a1javascripts.com/page_effects/flyingimage/flyingimage.html. You can use any image you want: I used a butterfly. You can view it in this popup window.


    Hover your mouse over this button and see the changes.
    		 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 easily create a script with your own images. Try the one at javascript.internet.com/generators/preload-images.html. 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 the same way. 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.

Susan Ives is a former president of Alamo PC. She archives these columns on her Web site, susanives.com. If you visit, you can cut-and-paste the code instead of retyping it from the magazine - the ultimate in lazy Webmastering!


©2003, Susan Ives