COSC 2206: Internet Tools
JavaScript

Online references

Netscape client guide and reference documentation

Netscape's JavaScript client guide and client reference at developer.netscape.com

Microsoft's JScript

Microsoft's version of JavaScript is called JScript. Complete documentation is here in the Microsoft Development Network (MSDN) library.

The ECMA standard

This is the official standard for JavaSCript which is called ECMAScript

W3 Schools Online Tutorials

This is an excellent site that contains tutorials on many topics such as JavaScript. The tutorials are interactive.

www.javascript.com
www.webreference.com/js

These sites contain JavaScript resources such as tutorials, articles, useful scripts.

Local references

Client Guide 1.3 (pdf)
Client reference 1.3 (pdf)

Reference books

JavaScript: The Definitive Guide, 4th Edition

There are many books on JavaScript and this is the best (Author: David Flanagan, Publisher: O'Reilly, ISBN: 0-596-00048-0). It is four books in one: (1) Core JavaScript, (2) Client-Side JavaScript, (3) Core JavaScript Reference, (4) Client-Side JavaScript Reference.

Simple JavaScript examples

Several ways to do the hello world program

examples/simple/HelloWorld1.html
Using JavaScript in the document head with document.writeln
examples/simple/HelloWorld2.html
Using JavaScript in the document body with document.writeln
examples/simple/HelloWorld3.html
Using a JavaScript function in the document head and a script to call it in the document body
[ examples/simple/HelloWorld4.html | examples/simple/hello.js ]
Using a JavaScript function in an external file and a script to call it in the document body
examples/simple/HelloWorld5.html
Using an alert dialog box
examples/simple/HelloWorld6.html
Using the onLoad event handler to execute a function. Don't ever do it this way because the back button won't work

Array, loop, and function examples

examples/simple/insertDate.html
Shows how to use a Date objec to insert the date and time into a document.
examples/simple/array1.html
Shows that arrays are dynamic: their size can be changed after construction.
examples/simple/array2.html
Shows that arrays are inhomogeneous: elements are references.
examples/simple/array3.html
Associative arrays.
examples/simple/for-in.html
Example of the for in loop which is an iterator over the properties of an object. Here the document object is used.
examples/simple/factorial.html
A table of factorials using an n! function.
examples/simple/reverse.html
Recursive and non-reursive functions that reverse a string.
examples/simple/max.html
Two versions of the max function. One shows how to use an array argument and the other shows how functions with a variable number of arguments can be defined in JavaScript.
examples/simple/format.html
A format function that rounds numbers to two digits after the decimal point.
examples/simple/arrayMethods.html
A document that illustrates several array methods.
examples/simple/date.html
Manipulating dates using the Date object.

Defining our own objects

examples/simple/objects.html
A simple example using Point and Circle objects.

Client-side JavaScript examples

examples/dom/dom0.html
This example shows how to examine the properties of an object such as window or document.
examples/simple/dialog.html
A simple example using the alert, prompt and confirm dialog boxes.

Using JavaScript to write applications

examples/apps/circleCalculations.html
A simple application that uses a form and input boxes to do circle calculations.
examples/apps/dieSimulation1.html
An application that does a frequency test of the random number generator.
examples/apps/dieSimulation2.html
As above but the results are written to a separate window.
examples/apps/randomIntegers.html
Generating a table of random integers.
examples/apps/loanRepaymentTable.html
Generating a loan repayment table.
examples/apps/crapsGame.html
The game of craps in JavaScript.
examples/apps/barGraph.html
Using the dom to draw a bar graph with a 1 by 1 gif file for the bar and manipulation of the width and height properties of an image.

Manipulating windows and images

examples/windows/windows.html
Illustrating windows.open for pop up windows.
examples/windows/backButton.html
A simple back button using history
examples/links/linkImages1.html
Changing an image dynamically using a link.
examples/links/linkImages2.html
As above but simpler.
examples/links/linkEvents.html
Confirming a link destination and Using empty links as event triggers.
examples/links/popUpLinksMain.html
Using a pop up window of links that are loaded in another window.

A slide show example

examples/slideShow/slideShow.html
A slide show example using WebLab pictures.

Some rollover examples

examples/rollover/simpleRollover1.html
A simple rollover example using onMouseOver in a link to change the color of an image by replacing it.
examples/rollover/simpleRollover2.html
This version uses onMouseOver as an <img> tag atrtribute.
[ examples/rollover/rollover1.html | examples/rollover/rollover1b.html | examples/rollover/rollover2.html | examples/rollover/rollover3.html | examples/rollover/rollover4.html ]
More examples of roll overs.

Simple form validation examples

examples/forms/formValidate.html
Simple example to verify that a name has been entered before a form is submitted.
examples/forms/emailValidate.html
Validating an email address before a form is submitted.

Regular expressions

examples/forms/testRegExp.html
An application that can be used to test strings for matches specified by regular expressions.
examples/forms/replaceRegExp.html
A more general application that can be used to test strings for matches specified by regular expressions and also to replace matches by a replacement string.
examples/forms/emailValidateRegExp.html
Previous email validation example but using a regular expression.
examples/forms/validatePhoneNumber.html
Using a regular expression to validate a phone number.
examples/forms/validatePhoneNumber2.html
A better version.
examples/forms/normalize.html
Normalize a first and last name.
examples/forms/nameValidateRegExp.html
Validate a name.

Simple DOM examples

examples/dom/colorChange.html
Dynamic example using getElementById to change the colors of an element.
examples/dom/toggleText.html
Dynamic example using getElementById and the CSS display property to toggle text visibility (adapted from JavaScript Visual QuickStart Guide).
examples/dom/dropDownMenus.html
Dynamic example using getElementById and the CSS visibility property to create simple drop down menus.
examples/dom/layers.html
Dynamic example using getElementById, div and z-index
examples/dom/position.html
Dynamic example using getElementById and positioning properties.
examples/dom/rollover.html
Dynamic example using getElementById and CSS to do simple link roll overs.