<%response.buffer=true%> <% Response.Expires = 0 %> JavaScript Intro

Example Files

Below are links to example files that we have built in class.  If You click on the file name, you can see an example of the file in action.  Click on the word SOURCE to open a word document showing the source code for the file.

File Name Function Notes/Source
Shows current year as part of page copyright.

Include this in a JS include file and keep all your pages up to date. SOURCE

Shows date in mm/dd/yyy format. Example of if/then syntax. SOURCE
Image/color/messages change based on hour of day. (Harnesses system clock) Demos if/else statement, document.bgColor, document.write.
Change the body color (of entire HTML document) Demos onload() event handler.
Switches page content based on date (1-31, etc). Rotates content based on modulus. Demos switch statement, modulus operator.
Uses window.open to popup a page into a new window. Demos custom functions to vary window size, document location via anchor tags.
Demonstrates properties of the navigator object, and for/in looping example. Knowing the browser of the user can allow custom styles, etc.
randomQuotes.htm Generates random quotes from an array built in JS. Uses an array as a data source. SOURCE
huey.htm A simple array example. A basis for next example (SplitNephews). SOURCE
SplitNephews.htm Splits a comma separated form element value in an array, and prints to the screen. Shows use of split function, and innerHTML. SOURCE
Demonstrates various ways to create a "rollover" image effect. As long as your images are pre-loaded, how you roll the images is up to you!
Determines current page to create dynamic link navigation example.

Uses href property of location object, string handling and parallel arrays to tailor page navigation. SOURCE

gallery1.htm A one page picture gallery using the DOM An example from DOM Scripting book. SOURCE
OOP JS examples. Demonstrates object oriented JavaScript.
Uses JS API to create "curved" corners on a <div>

Eliminates the need to use images for curved corner effect. SOURCE ZIP file of API: ZIP

Duplicates YouTube type functionality in presenting Flash FLV files. Uses JS DOM to load Flash videos into a single "viewer" object. SOURCE
Integrates CSS tabs and external page content

AJAX loads external pages into an IFrame ZIP

Scriptaculous extended to scroll images 

Uses Scriptaculous & custom JS ZIP

Scriptaculous sortable list examples

Various Scriptaculous sortable list demos ZIP

RICO AJAX drag-n-drop demo

Uses Rico & Prototype APIs with AJAX. ZIP

Demo of Google Gmail style AJAX updates of new emails.

Uses EmailID to identify which emails to add, uses JS DOM to add to table. SOURCE

Updateable "grid" of data from a table.

Uses AJAX & paging of records. ZIP

Editable textareas triggered by mouse-overs

Uses Prototype API with AJAX. ZIP

AJAX "chat" that features 2 different xmlHTTP objects.

2 versions, one that uses XML, one that uses JSON. ZIP

An advanced AJAX example: Dynamic Lists

A simple AJAX example: AJAX Headlines

Here's a CSS sniffer file for you: loadStyle()

Error handling techniques: JavaScript Error Handling

Creating a new window on the fly: Window Popup Demo


Print this Page Back To Top

2000- <%=year(date)%> newMANIC INC, All rights reserved