<%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

illChars.htm Disallows certain characters from a text box on a form. The string of illegal chars is hard wired into a function. SOURCE
regExSoc.htm Uses a regular expression to determine a valid Soc. Sec Number. The regEx function is the same, with a different matching string! SOURCE
regExEmail.htm Uses a regular expression to determine a valid email address. The regEx function is the same, with a different matching string! SOURCE
checkFruit.htm Provides feedback to user about checkbox selections Advanced string handling and a checkbox element. SOURCE
checkOne.htm Validates a checkbox Radio buttons are validated in the same way. SOURCE
checkTwo.htm Validates a checkbox for at least 2 items chosen Advanced string handling and a checkbox element. SOURCE
select.htm Validates a select option Select options need only keep user from selecting "zero" option. SOURCE
selectMultiple.htm Multiple selections shown via JS Shows how to apprehend multiple selections. SOURCE
simpleform.htm Validates a textbox and a select option How to validate more than one item from a form. SOURCE
checkType.htm Loops through each for element, determines the "type" property and validates Works for "text" and "select-one" only. Leads to understanding of "checkReq". SOURCE
checkReq.htm Allows the developer to establish required and optional elements Place a letter "x" before the name of a required element. SOURCE
setFonts.htm Sets and resets the colors of all fonts on a page using the DOM Best place to start for DOM Play assignment SOURCE
2 versions of a form for writing to divs, (changeNodeValue). Compares DOM vs innerHTML method for writing to divs. innerHTML easily inserts HTML on the fly, the DOM must walk the tree to the data.
Dynamic editing of a table and it's contents via the DOM. Crawls the DOM tree, and demonstrates various DOM commands.
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

Updateable "grid" of data from a table.

Uses AJAX & paging of records. ZIP

Integrate Flickr images into your website. Uses Flickr, phpFlickr & Prototype APIs. ZIP
Add geocached data to integrate Flickr & Google Maps Adds Google Maps API to Flickr mashup demo. ZIP
AJAX "chat" that features 2 different xmlHTTP objects.

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


Print this Page Back To Top

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