Revised: April 29, 2000

Java and JavaScript

Java and JavaScript are two programming languages that are used with web pages.  Both have similar syntax and both are typically used as client-side, as opposed to server-side, applications, which means in this case that they run in the browser.   Java was originally developed by Sun Microsystems.  To use a Java program in a web page, the web page uses an <APPLET> tag which "calls" the Java program and can pass parameters to the Java program.  The statements in the Java program are not visible to the user. 

Java seems to be pretty rare in web pages, whereas JavaScript, originally developed by Netscape, seems to be pretty common -- my guess is that is may be used in a third to half of professional web sites.  The popularity of JavaScript vis a vis Java in web pages probably arises from several factors:

• The JavaScript statements are visible to the user in the same way that the HTML source code is; if one sees an effect one likes in a web page, it is thus not hard to emulate it, and there are a variety of web sites where one can find pre-written JavaScripts to accomplish various tasks

• The capabilities of the languages differ; JavaScript can control browser behavior and content, whereas Java can do graphics, networking, and multithreading (concurrent programming)

• Browsers run JavaScript without the "loading Java message" and the incumbent wait

• JavaScript is generally inserted right into the web page and thus there is no separate Java program to worry about

Because of the greater popularity of JavaScript for use in web pages, I will here focus only on JavaScript.  I will only talk about client-side applications.  This section draws from David Flanagan's book on JavaScript described in the references.

Capabilities of JavaScript

• Control Document Appearance and Content - e.g., include current date and time, colors for document background, text, and links, display of different content on different platforms
• Control the Browser - e.g., popup windows, display of messages in status line, new browser windows, etc.
• Interact with HTML forms - calculate tax, shipping charge, etc.; verification of user input (doing this on the client avoids a round trip to the server)
• Interact with the User - Event handlers, i.e. pieces of code to be executed when a particular event occurs, for example the user moves the mouse over a image link, entering a value into a form, making a selection in a drop down list on a form, clicking on the submit button, etc.  The most common application today of this is the image rollover when the user moves over an image link that is part of a navigation bar.   
• Read and Write Client State with Cookies - (I don't know how to do this yet)
• Detect the Browser (maker and version) or Monitor (size, number of colors) being Used by User

JavaScript Syntax

• Case sensitive - lots of my JavaScript errors are due to this
• Statements end with semicolon (optional if each statement placed on new line)
• Comments - Any text between // and the end of a line, is treated as a comment
  -also, any text between /* and */ treated as comment
  -also, any text between <!-- and //--> with <!-- and //--> on their own lines
• If statement: if (expression) statement -- the parentheses around expression are required
• Switch: switch (n)
    case 1: code block #1 break;
    case 2: code block #2 break;
   default: code block #3 break;
• Functions: function funcname(arguments separated by commas) {statements}

Primary Places that JavaScript Code will Appear:

• Between a pair of <SCRIPT> and </SCRIPT> tags
• The <SCRIPT> tag has an optional LANGUAGE attribute.  Browsers that do not understand the language that is referenced will ignore the JavaScript between the tags.  Examples: LANGUAGE="JavaScript".  Other possible values are "JavaScript1.1", "JavaScript1.2", and "VBScript".  The default value is "JavaScript"
• From an external file specified by the SRC attribute of a <SCRIPT> tag - The SRC attrribute references a pure JavaScript file, with extension .js.  The reasons to use an external file are the same as to use an external style sheet: more compact code and easier maintainability.
• In an event handler, specified as the value of an HTML attribute such as onClick or onMouseOver (note the mixed case).  For example, within an HTML tag, you would write onClick="string value" where string value is one or more JavaScript statements, separated by semicolons.

JavaScript is executed in the order it appears in the HTML.  The JavaScript to define functions typically appears between <SCRIPT> and </SCRIPT> tags which are located between the <HEAD> and </HEAD> tags.  Such placement of functions has several advantages.  First, all statements in the <HEAD> are executed before statements in the body -- placing the function in the head means that if the function is called from the body that the function will be defined.  Second, placing the function definition in the head protects against inadvertent erasure of the JavaScript when using an HTML editor.

Code Samples

1) Browser detection:

 if ((navigator.appName == 'Netscape') 
    && (parseInt(navigator.appVersion) >=4)) netscape4=true;

Browser detection is used because of Netscape and Internet Explorer incompatibilities and the more limited capabilities of earlier versions of browsers.  An alternative way handle this problem in some cases is to use the language attribute of the <SCRIPT> tag.

2) Status line message: <a href="mozart.html" onMouseOver="window.status='A study of Mozart's operas';
return true;">Mozart</a>

The principal problem with changing the status line is that one loses the information that normally appears there, such as the address of a link.

3) Image Mouseover effect: <A HREF="#" onMouseOver="document.home.src='../Images/next.gif';"
onMouseOut="document.home.src='../Images/prev.gif';">
<IMG BORDER=0 NAME="home" SRC="../Images/prev.gif"></a>

In this example, the Images object of the Document object is accessed via the name "home" and the src property of the image object is read/write, thereby allowing the replacement of one image by another when the mouse is over the link and another replacement when the mouse is removed.

Examples of image mouseovers: Navigation bar at top of NOVA Home Page at www.nv.cc.va.us.   One typically wants the alternative image to be preloaded, so that there is no delay in the effect.  One way to do this is to display the alternative image somewhere else in the same page or in a splash page with HEIGHT and WIDTH attributes of 1 pixel each, so that it is essentially invisible.

Comments to William Pegram, wpegram@nvcc.edu