Components of JavaScript applications

Next: 30.10.2001: Lexikon: Makro-Meso-, Up: 25.10.2001: Gruppenrecherche & Berichte Previous: 25.10.2001: Gruppenrecherche & Berichte

Components of JavaScript applications

GUI - Graphical User Interface

This is a simplified account of Graphical User Interfaces in terms of Objects and Events. The input to and output from a JavaScript program is via a Graphical User Interface or GUI. The function of JavaScript is to enhance the standard GUI provided by HTML browsers by incorporating event-driven interaction, i.e. GUI manipulation and animation, as well as calculation controlled by the user.

A GUI has two main types of property:

Declarative:

Event: a pair <movement,interval>, i.e. input (finger movement, speech, ...) or output (visual, sound, mechanical movement) over a period of time, arranged in sequence with or parallel to other events (generally, input events are meant);
Object: a data structure (text, image, page, sound, button, ...) affected by an event.

Procedural:

Event handler / production rule: IF event THEN action
Event loop: Real time repeated checking/polling/sampling of all possible input devices in order to select appropriate production rules
Processor function: algorithm for performing some calculation on a data structure such as a string, a number, an array (table), ...

Typical objects

document

window

window

frame

navigator

form

...

Objects are provided with either methods or properties. Properties are formulated as attribute-value pairs.

Typical input event handlers

onLoad if object (e.g. page) finishes loading

onAbort if object (e.g. page) loading stops

onUnload if object (e.g. window) is left

onError if input, output or programming error

onSubmit if form is submitted

onClick if mouse clicks on object

onSelect if mouse selects item in object

onFocus if mouse activates object

onChange if mouse changes object

onBlur if mouse quits object

onMouseOver if mouse moves over object

onMouseOut if mouse moves off object

Typical output events

alert("Hello World!") document.write("This is a message!")

Embedding JavaScript in HTML

Simple input (button click) and output (write and alert) events: this demo program uses the following code:

<HTML>
<HEAD>
<TITLE>Hello World!</TITLE>

<SCRIPT LANGUAGE=JAVASCRIPT>
function writeThis(message){
        document.write(message)
}

function helloThere(message){
        alert('Welcome to ' + message)
}

function getGoogle(message){
	helloThere(message)
	window.location="http://www.google.com/"
}
</SCRIPT>

</HEAD>


<BODY BGCOLOR=PINK>

<SCRIPT LANGUAGE=JAVASCRIPT>
writeThis("Hi there, welcome to the test ...")
</SCRIPT>

<FORM> 

<INPUT
        TYPE="button"
        VALUE="Earth"
        onClick="helloThere('the Earth')"
>

<INPUT
        TYPE="button"
        VALUE="Venus"
        onClick="helloThere('Venus')"
>

<INPUT
        TYPE="button"
        VALUE="Mars"
        onClick="helloThere('Mars')"
>

<INPUT
        TYPE="button"
        VALUE="Google"
	onClick="getGoogle('Google')"
>

</FORM>

</BODY>
</HTML>

Group tasks

You will need to form groups for these tasks:

Write a short Word document explaining the following aspects of this demo:
Function:
...
Overall design:
...
Objects and attribute-value pairs:
...
Event handlers:
...
Search the web for a technique for switching images with the mouse.
Specify and design a real application using input and output events of these types - and perhaps others you can find described on the web.
Describe the process of telephoning someone, using pseudo-JavaScript with respect to a (mobile) phone instead of the mouse ...

Next: 30.10.2001: Lexikon: Makro-Meso-, Up: 25.10.2001: Gruppenrecherche & Berichte Previous: 25.10.2001: Gruppenrecherche & Berichte

Dafydd Gibbon, Wed Feb 12 10:50:41 MET 2003 Automatically generated, links may change - update every session.

onLoad	if object (e.g. page) finishes loading
onAbort	if object (e.g. page) loading stops
onUnload	if object (e.g. window) is left
onError	if input, output or programming error

onSubmit	if form is submitted

onClick	if mouse clicks on object
onSelect	if mouse selects item in object
onFocus	if mouse activates object

onChange	if mouse changes object
onBlur	if mouse quits object

onMouseOver	if mouse moves over object
onMouseOut	if mouse moves off object