Craft > JavaScript Tips

Introduction

This document is not a tutorial, it presents techniques for handling problems that come up when writing javascript in Web development. Keep in mind that users can turn off Javascript in the options settings of their browsers. Note that the examples described here assume you have javascript enabled.

Whenever a page uses javascript for navigation or functionality that is required for viewing the site, be sure to include a check that javascript is enabled and provide a way to view the site if it is not. To determine if javascript is enabled, use the <noscript></noscript> element.

Whatever you put in the element will appear only when javascript is disabled. SwansonSoftware uses this technique and displays alternative navigation with no frames.

Debugging Javascript

Javascript is notoriously aggravating to debug. If your development environment is a text editor with no facilities for stepping through code and viewing variables, you can spend lots of time hunting down bugs.

These examples show techniques for writing values to a debug window and displaying extended error information. ErrorOut displays the page that an error is on - very helpful if you are using frames because the default error dialog does not indicate which page an error is on.

• Debug - Writing debug statements to a debug window.
• ErrorOut - Writing errors to an error window.

Browser and Client Capabilities

• Browser Make and Version - How to determine the browser make and version
• Operating System - How to determine the operating system the browser is running on
• Size of Display - This script is helpful when opening new windows, to make sure that the window will fit in the viewable area of the user's monitor.
• Color Depth of Display - If your site uses images or colors that require some minimum color depth capabilities, you can determine the client's hardware capabilities with this script. You can then determine which set of images to use or notify the user that their system does not have the capabilities required for optimum viewability.

Dynamic Effects That Work In Most Browsers

Be sure that you use the right event model when using javascript to handle events. For example, Internet Explorer and Opera recognize event.keyCode when dealing with keyboard events, and Netscape recognizes event.which.

1. Controls on Forms
   • Add Input to Array - Retrieve user input and add to an array, then access the array by displaying the elements.
2. DIV
   • Menus - Sources for dropdown menus.
   • Hiding and Showing Controls and Content
3. IMG
   • Image Rollovers - Create rollover effects that occur when the mouse pointer is moved over an image.
4. Navigation
   • Auto-tab to next field - Automatically tab from one field to another as user types in phone numbers, SSNs, etc.
5. SELECT
   • Move list items - clear items from the 'from' list and move them to the 'to' list.
   • Drop-down Hyperlinks - When the user selects an item in the drop-down list, they are taken to an URL
   • Create SELECT drop-downs dynamically - clear and re-populate lists without reloading the page

Dynamic Effects That Work in IE only

Internet Explorer's more recent versions have capabilities that allow you to write applications for business, in less time and for less money than it takes writing for other browsers. We are talking about corporate intranet applications, which require functionality like a table DOM that allows you to create tables dynamically and sort them without hitting the server - with full control over the height and width of each cell; styles that allow you to scroll data in a div element when the data does not fit in the window, and that allows you to highlight rows as the mouse pointer moves over them; styles that allow you to draw text at different angles, e.g. along the axis of a chart.

This is a short list and it already points out the futility of supporting various browsers when you are writing business applications. Maybe you don't like it, but I'm not trying to say which browser is best, just that it's not practical to try to make some kinds of applications work in browsers other than Internet Explorer.

Now that browser makers are improving their support of standards, the day is comming when it will be practical to create non-trivial Web-based applications that don't rely on Java and that work in various browsers, maybe even on various operating systems.

So here are some Internet Explorer-only capabilities.

• The Table DOM - Creating and removing tables and table elements without reloading the page.
• Scroller - used in the Table Dom example, this example demonstrates how to hide overflow data in a table using a scroll box, and how to highlight a row when the mouse pointer moves over the row. It also demonstrates how to create a custom behavior: scroller.htc, which implements the highlight and takes care of event handling.
• UserData Behavior - Demonstrates use of Internet Explorer's UserData behavior. This behavior lets you store and retrieve data on the client machine. Much more powerful than cookies, UserData allows up to 64 KB per page, 640 KB per domain.

Validation

If you can find a copy of Eric Krock's FormChek.js at Netscape Communications Corporation, you will find validation functions for everything. You could include the file when you need to validate input, but it is 60k - a bit large if you just want to validate an email address. However you can use the code as the basis for a smaller set of validation functions. In fact, the comments in FormChek.js recommend that you strip out comments and functions that you do not need.

• Phone and fax numbers
• ZIP codes (5 or 9 digit postal codes)
• U.S. State Codes (2 letter abbreviations for names of states)
• Social Security Numbers
• E-mail addresses
• Dates (entry of year, month, and day and validity of combined date)
• Credit card numbers
• Integers - determine if the string variable is a Signed, Positive, Negative, Nonpositive, or Nonnegative integer, or if a number is an integer within a specified range
• Floats - determine if the string variable is a Float or a SignedFloat
• Strings - determine if Alphabetic, Alphanumeric, or Whitespace
• Characters - determine if Letter, Digit, or LetterOrDigit
• Character validation - remove from a string characters which are/are not in a "bag" of selected characters
• Formatted String - reformat a string, adding delimiter characters strip whitespace/leading whitespace from a string
• Formatted Numbers - reformat phone numbers, ZIP codes, and Social Security numbers

Links to More Information

Reference

Tutorials

Free Code

* IE - specific

References

Flanagan, David, 1998, JavaScript, The Definitive Guide, Third Edition: O'Reilly & Associates, Inc., 776 pages. ISBN 1-56592-392-8
Ideas for most of the examples on this page were inspired from this book.

Section on validation uses code from FormChek.js, created 18 Feb 97 by Eric Krock and (c) 1997 Netscape Communications Corporation.

Copyright © 1999-2008. All rights reserved. | Contact | About SwansonSoftware.com