Java Applets &
JavaScript 		PAGE (5 of 7)

JavaScript

JavaScript was developed by Netscape to be HTML-dependent. It is a scripting language for developing client and server Internet applications that adds much power to the hypertext markup language.

JavaScript support is included in the Netscape Navigator 2.0, the Microsoft Internet Explorer 3.0, and all later versions from both companies.

JavaScript vs. Java

JavaScript Java
Interpreted (not compiled) by the Web browser client.
Compiled bytecodes downloaded from server, executed on the Web browser client.
Object-based. Uses built-in, extensible objects, but no classes or inheritance.
Object-oriented. Applets consist of object classes with inheritance.
Code integrated with, and embedded in, HTML.
Applets distinct from HTML (accessed from HTML pages).
Variable data types not declared (loose/implicit typing).
Variable data types must be declared (strong/explicit typing).
Cannot automatically write to hard disk.
Cannot automatically write to hard disk.

JavaScript code is placed within <SCRIPT></SCRIPT> tags between the <HEAD></HEAD> tags of the HTML document.

The basic code looks like: 

<HTML>
<HEAD>
<TITLE> document name here </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- function definitions
//  -->
</SCRIPT>

</HEAD>
<BODY> ... document body here ...
</BODY>
</HTML>

JavaScript Variables

JavaScript variables may hold numbers, character strings, or objects - they are loosely typed, meaning you don't have to explicitly declare the variable type in advance. All variables declared outside of a function are global. Variables implicitly declared inside a function by assigning a value to them are global also. Local variables are only visible inside the function that declared them, and disappear when the function terminates. You must use the var statement to declare a local variable. Values passed to functions behave as local variables.

Functions

A function is a user-defined or built-in method that performs a task. Functions do not need to be associated with an object to run. Functions are defined within the <HEAD> tags of a document. This assures that functions are loaded before the rest of the page so that they are ready before the reader can interact with the page.

JavaScript functions are initiated by event handlers that are additional elements of familiar html tags - links, form elements, loading, etc..

Function syntax looks like: 

function functionName( parameter1,... parametern)
{ 
   functionCode 
}

Event Handlers

Event handlers are important features of JavaScript embedded within the HTML tags. These capture html controls such as with links, image maps, and forms (buttons, lists, text boxes, radio controls, and check boxes).

Event Applies to Occurs when Evt handler
abort
images
User aborts the loading of an image
onAbort
blur
windows, frames, and all form elements
User removes input focus from window, frame, or form element
onBlur
click
buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
User clicks form element or link
onClick
change
text fields, textareas, select lists
User changes value of element
onChange
error
images, windows
The loading of a document or image causes an error
onError
focus
windows, frames, and all form elements
User gives input focus to window, frame, or form element
onFocus
load
document body
User loads the page in the browser
onLoad
mouseout
areas, links
User moves mouse pointer out of an area or link
onMouseout
mouseover
links
User moves mouse pointer over a link
onMouseOver
reset
forms
User clicks a Reset button of a form
onReset
select
text fields, textareas
User selects form element's input field
onSelect
submit
submit button
User submits a form
onSubmit
unload
document body
User exits the page
onUnload

Object Heirarchies

In a heirarchy, objects exist in a set relation to each other. A car is composed of a body, engine, passenger area, suspension, etc. The body is composed of doors, trunk hatch, engine hood, windshield, etc. The door is composed of a handle, latch, window, controls, etc. Thus, one of the hierarchies that exist in the relationship is car to body to door to latch. One way of showing the relationship is 

car.body.door.latch

Each object is a descendent of the previous.

Object heirarchies in JavaScript are specified much in the same way. The window object is the parent object of all other browser objects. location, history, and document are descendents below window. Below document are objects such as forms, links, and anchors.

Simple Scripts

<FORM>
	<INPUT TYPE="button" VALUE="Press me" 
		onClick="alert('good')">
</FORM>

<SCRIPT>
<!--    
	function goBack()
	{       
	    alert('To return to this page, 
		click on your browsers FORWARD button');
	    history.go(-1)
	}
// -->
</SCRIPT>

<FORM>
<INPUT TYPE="button" VALUE="Go To Previous Document" 
	onClick="goBack()">
</FORM>

<SCRIPT>
<!--    
 	function OK()
	{       confirm("Is everything OK?");
	}
// -->
</SCRIPT>

<FORM>
<INPUT TYPE="button" VALUE="OK?" onClick="OK()">
</FORM>

 

© CS Dept Va Tech, 1997-1998.

All rights reserved.