Beyond HTML - JavaScript

Beyond HTML: Tools for Interactivity

Tool #1: JavaScript

JavaScript is a scripting language for the Internet. It was first known as LiveScript, until Sun Microsystems came out with Java. After the introduction of Java, Netscape and Sun Microsystems got together and renamed LiveScript as JavaScript.

JavaScript is interpreted on the client side. It utilizes elements that already exist in a web page, like links, images, and forms. The user interacts with these elements and JavaScript provides a reaction to the user’s input or action, resulting in meaningful interaction between a web page and a user. JavaScript definitions are embedded within the <head></head> tags in an HTML document. It is comparatively easy to script, even easier to borrow from other web pages, and simple to invoke in a web editor.

Alternative Tool

A competing product with essentially the same functionality that is designed for the Microsoft environment is VBScript. We’ll discuss JavaScript here, but keep in mind that people who use FrontPage and design for Internet Explorer use VBScript. VBScript browser support is designed for IE 4.0 and higher.

Browser Support

Limited support in Navigator 3.0 and IE 3.0, better support in Navigator 4.0 and IE 4.0 and higher.

What can JavaScript do?

JavaScript offers a way to add interactivity to Web pages.

Use forms for dynamic navigation

Example: jump to page on dropdown selection
http://www.healthsystem.virginia.edu/home.html

Example: changing the target of a link based on a dropdown selection
http://www.itc.virginia.edu/atg/software/javascript/change-link.html

Example--multi-dropdown navigation - select art - visual art then click Jump!
http://xroads.virginia.edu/~CAP/newnav/jindx3.html
Add interactivity to graphics

Example: rollovers (also known as “mouseovers”):
http://www.virginia.edu/
Provide client-side form validation

Example: Strict form validation
http://www.quirksmode.org/js/formex.html

Pitfalls

Issues with browser compatibility such as case sensitive variable names in IE 4x (meaning all tags and functions need to be either lower case or upper case), or different object models in Navigator and IE mean a script could work in Netscape, but not in IE 4x. However, there is a core set of functionality that will work across browsers.
Some users choose to disable the JavaScript function on their browsers, which allows them to keep control of browser actions such as keeping extra windows from opening, but means your JavaScript enhancements will not appear to these users.

Effect on Users’ System Performance

Negligible effect—load time of pages should not be impacted noticeably.

JavaScript Resources

Learn to create Rollovers and other simple to complex JavaScript actions in Dreamweaver and Fireworks, no knowledge of scripting required. Search the Offered Courses at the Division of Training site for ITC’s Dreamweaver Advanced Course and ITC’s Fireworks Advanced Course.
Get an introduction to JavaScript with EchoEcho.com's tutorial and complete reference:
http://www.echoecho.com/javascript.htm

Go on to Tool #2: DHTML