JavaScript II

FIT3084: JavaScript, Part 2

In the previous lecture:

Javascript syntax and applications summary

In this lecture:

Working with JavaScript: objects, and events

Reference:

Sebasta, R. W. Programming the World Wide Web.
2009/ 5th edn, Pearson, chapt. 4

It is essential that one or more texts, or some other reference (eg. the WWW) be consulted on this topic.
This page is a summary only of a few important JavaScript language features. It is not intended to be comprehensive.

Using JavaScript

Insert JavaScript code between <SCRIPT> and </SCRIPT> tags to be run as the document is loaded.
- NB: Functions embedded between these tags are only executed when called.
- Use the LANGUAGE attribute to explicitly set the scripting language to be used.
  
  <SCRIPT LANGUAGE="JavaScript">
  // ...JavaScript Src...
  </SCRIPT>
  
  or
  
  <SCRIPT LANGUAGE="JavaScript1.1">
  // ...JavaScript Source for Nav3.0+...
  </SCRIPT>
Use the <SCRIPT> and </SCRIPT> tags to reference a JavaScript .js file
- <SCRIPT LANGUAGE="JavaScript1.1" SRC="blah/blah/myJavaScriptFile.js">
  </SCRIPT>
- The JavaScript file is just JavaScript source. (No <SCRIPT> or </SCRIPT> tags inside it)
- To make this work, the web server must be configured to export the JavaScript file with the correct MIME-type: "application/x-javascript".

Define event handlers

Event handlers are routines that are executed when the user (usually) performs some action, for example clicking on a button or selecting a text entry box.
The routine daisy discussed in a previous lecture was an example of an event handler. (It was called when the Panic Button was clicked).

Event handlers may be attached to objects defined by XHTML, through the addition of new tag attributes introduced for this purpose*.

Object	A few supported event handlers	Description
many elements...	onkeydown	a key is pressed
	onkeypress	a key is pressed and released
	onkeyup	a key is released
	onload	the document has finished loading
	onunload	the document has been unloaded
	onmousedown	left mouse button is clicked
	onmousemove	the cursor is moved within an element
	onmouseout	the cursor is moved out of an element
	onmouseover	the cursor is moved over an element
	onmouseup	the left mouse button is released
<a>	onclick	the link is clicked
	onfocus	the link aquires focus
<form>	onsubmit	the Submit button is pressed

Define Timer Events
- Events maybe triggered at timeouts.
- Call setTimeout() to specify that a timer event will occur after a specified number of milliseconds have elapsed.
- setTimeout("closePodBayDoorsHAL();", 10000) // Call routine in 10 sec.
- To make a timeout event recur (as you'd do to create an animation)...
  
  function animate() { changeImage(); setTimeout("animate();", 500); }
- Timeouts can be cancelled: clearTimeout()

var X = setTimeout("doSomething();", 100);
var Y = setTimeout("doSomethingElse();", 105);

clearTimeout(X); // clear a specific timer

* The event handler registration method discussed here is associated with what is known as the DOM 0 event model. This is widely used and supported, despite the fact that there is a newer DOM 2 event model (which is more complex and not covered in these notes).

JavaScript Windows

JavaScript is intended largely for manipulating the contents of the browser.
The currently active browser window is represented in JavaScript by a window object. This is the object which is implicitly accessed when a window event handler is used. (Such as the alert handler)

alert("Danger Will Robinson!");
You can explicitly access the window object through a reference to it called window or self. These are actually properties of the real window object (which has no name).

window.alert("Danger Will Robinson!");

Some window objects' accessible properties...

Property	Description
history	The array of visited URL's
location	The window's URL
frames	The array of frames in the current window
name	The window's name
document	The document contained within the window

JavaScript Object Hierarchy

Beneath the JavaScript window object is a hierarchy of other objects, each with their own properties and methods.
Each object is a property of its container.
If an object has a name (eg. a form may have a name) this object may be referred to by its name.

JavaScript Examples

These simple examples illustrate some of the ways JavaScript can be used. From simple building blocks, medium programs can be built for all kinds of purposes.

Dynamically controlling navigation

Dynamic Page Construction

The current window location can be found using JavaScript and written into the document source as it loads! (As can a lot of other stuff actually.)

The current location is:
The current document protocol is:
The current host is:
The current document path is:

Animation

See the source code and note the use of...

prompt() to fetch a URL,	window.open( ),	onLoad(),	the Date object,	setTimeout( ),
use of new Array(),	document image source access,	animation,	setting text entry box value,	window.close()

Form processing or computation

This lecture's key point(s):

JavaScript can be used to handle and generate events
JavaScript can write to and read from the document in which it is embedded
JavaScript is a programming language so you can use it to make pages do as well as be.

Courseware | Lecture notes