<%response.buffer=true%> <% Response.Expires = 0 %> JS Examples
<examples>
  spacerspacer

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.  View the HTML SOURCE to see how the JS code operates.

File Name Function Notes
Demonstrates use of the Date() object. Shows current year as part of page copyright.

Place in a JS include file and keep all your pages up to date.

Uses Date() object in a different way. Shows date in mm/dd/yyyy format. Example of conditional if/then syntax.
Image/color/messages change based on hour of day. (Harnesses system clock) Swap out multiple variables in if/else statement and customize page HTML with document.write.

Changes the body color (of entire HTML document). Document is not available to change until entire page has been loaded, hence the use of onload().

Later versions demonstrate ways to attach code to the HTML documents with no visible attachment, which is called unobtrusive JavaScript

Demos onload() event handler. bodycolor3.htm uses a custom function, called after the page is loaded.

bodycolor4.htm uses window.onload to attach functions unobtrusively.

bodycolor5.htm uses window.onload also, but demonstrates an anonymous function.

Demonstrates string to number conversion in JS. Uses prompt() function for user input. Attempts to convert strings to numbers for calculation. Shows use of the typeOf(), isNaN() and parseFloat() & parseInt() functions. More detail on the following getDecimal Handout
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.
Demonstrates the use of the window.onerror event We can view & handle our own errors in a cross browser fashion. View the Error Handling Handout
Generates random quotes from an array built in JS. Uses an array as a data source.
A simple array example. A basis for next example (SplitNephews).
Splits a comma separated form element value in an array, and prints to the screen. Shows use of split function, and DOM manipulation via innerHTML.

Demonstrates various ways to create a "rollover" image effect.

(unobtrusive roll is from 'JavaScript & AJAX', 7th ed. by Tom Negrino & Dori Smith)

Rollover effects usually use the onmouseover and onmouseout event handlers.

As long as your images are pre-loaded, how you roll the images is up to you!

Use the JS template to begin projects to handle errors via alerts. Implements a utility include file util.js to provide addOnLoad() to prevent collision of scripts initializing on the load event.

JS Template Version 1: I recommend using this as the starting point for JS projects.

There are several files at play in the template. To get them all download the following zip file: JS template files

A one page picture gallery using the DOM An example from DOM Scripting by Jeremy Keith.
Sets and resets the colors of all fonts on a page using the DOM Best place to start for the DOM Play assignment
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.
Demonstrates how to 'stack' (add or remove) CSS classes Uses viewRendered() function to see what is happening in the page after load
Gets all elements with a particular class name, and sets the style.backgroundColor property of each getElementsByClassName() is missing from the DOM spec - here's a workaround
Dynamic editing of a table and it's contents via the DOM. Crawls the DOM tree, and demonstrates various DOM commands.

Use an include file to load custom CSS stylesheets for specific browsers.

The code can be adapted to just about any combination of browsers.

This code may need to be adapted to suit changing browsers. After successfully completing our browser sniff assignment, I'll leave it up to you to keep the code up to date!

 

Try the link with different browsers. Each of the identified browsers calls a separate stylesheet, which changes the color of the page text.

The code relies on a 'default' CSS file being selected, which is the fallback if there is not a match for a specific browser: loadStyle zip file

Use the JS template to begin projects to handle errors via alerts. Implements a utility include file util.js to provide addOnLoad() to prevent collision of scripts initializing on the load event. Version 2 includes View Rendered Source.

JS Template Version 2: This version is more suited to starting DOM projects.

There are several files at play in the template. To get them all download the following zip file: JS template2 files

Disallows certain characters from a text box on a form. The string of illegal chars is hard wired into a function.
Uses a regular expression to determine a valid Soc. Sec Number. The regEx function is the same, with a different matching string!
Uses a regular expression to determine a valid email address. The regEx function is the same, with a different matching string!
Provides feedback to user about checkbox selections Advanced string handling and a checkbox element.
Validates a checkbox Radio buttons are validated in the same way.
Validates a checkbox for at least 2 items chosen Advanced string handling and a checkbox element.
Validates a select option Select options need only keep user from selecting "zero" option.
Multiple selections shown via JS Shows how to apprehend multiple selections.
Validates a textbox and a select option How to validate more than one item from a form.
Loops through each for element, determines the "type" property and validates Works for "text" and "select-one" only. Leads to understanding of "checkReq".
Integrates CSS tabs and external page content

AJAX loads external pages into an IFrame 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

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