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

sungoddess4.htm instead uses a custom function called via window.onload and the DOM to make an unobtrusive JS example.

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 JavaScript Error Handling

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

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!

A one page picture gallery using the DOM An example from DOM Scripting by Jeremy Keith.
Here's a browser sniffing example that uses the foundAgent() function and changes the document background color FF does not allow access to document.bgColor until after the page loads
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

   
Print this Page Back To Top

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