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
copyright.htm	Shows current year as part of page copyright.	Include this in a JS include file and keep all your pages up to date. SOURCE
showdate.htm	Shows date in mm/dd/yyy format.	Example of if/then syntax. SOURCE
sungoddess1.htm sungoddess2.htm sungoddess3.htm	Image/color/messages change based on hour of day. (Harnesses system clock)	Demos if/else statement, document.bgColor, document.write. Sun Goddess 1 SOURCE Sun Goddess 2 SOURCE Sun Goddess 3 SOURCE
bodycolor1.htm bodycolor2.htm bodycolor3.htm	Change the body color (of entire HTML document)	Demos onload() event handler. BodyColor 1-3 SOURCE
modTest.htm modRotate.htm	Switches page content based on date (1-31, etc). Rotates content based on modulus.	Demos switch statement, modulus operator. modTest.htm SOURCE modRotate.htm SOURCE
popup1.htm popup2.htm popup3.htm popup4.htm	Uses window.open to popup a page into a new window.	Demos custom functions to vary window size, document location via anchor tags. popup1.htm SOURCE popup2.htm SOURCE popup3.htm SOURCE popup4.htm SOURCE
browsersniff1.htm browsersniff2.htm	Demonstrates properties of the navigator object, and for/in looping example.	Knowing the browser of the user can allow custom styles, etc. browsersniff1.htm SOURCE browsersniff2.htm SOURCE
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
straightRollover.htm hardWiredRoll.htm ezroll.htm multiRoll.htm	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! straightRollover.htm SOURCE hardWiredRollover.htm SOURCE ezroll.htm SOURCE multiRoll.htm SOURCE
linkArray1.htm	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
DOM Version innerHTML Version	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. changeNodeValueDOM.htm SOURCE changeNodeValueInnerHTML.htm SOURCE
DOMTableEdit1.htm DOMTableEdit2.htm DOMTableEdit3.htm	Dynamic editing of a table and it's contents via the DOM.	Crawls the DOM tree, and demonstrates various DOM commands. DOMTableEdit1.htm SOURCE DOMTableEdit2.htm SOURCE DOMTableEdit3.htm SOURCE
gallery1.htm	A one page picture gallery using the DOM	An example from DOM Scripting book. SOURCE
carObj1.htm carObj2.htm carObj3.htm carObj4.htm stringBufferObj.htm	OOP JS examples.	Demonstrates object oriented JavaScript. carObj1.htm SOURCE carObj2.htm SOURCE carObj3.htm SOURCE carObj4.htm SOURCE stringBuffer SOURCE
Curvy Corners	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
MeTooB	Duplicates YouTube type functionality in presenting Flash FLV files.	Uses JS DOM to load Flash videos into a single "viewer" object. SOURCE
AJAX Tabs Content	Integrates CSS tabs and external page content	AJAX loads external pages into an IFrame ZIP
FrogJS Image Gallery	Scriptaculous extended to scroll images	Uses Scriptaculous & custom JS ZIP
Sortable Lists	Scriptaculous sortable list examples	Various Scriptaculous sortable list demos ZIP
Rico Drag 1 Rico Drag 2 Rico Drag 4 Rico Drag 5	RICO AJAX drag-n-drop demo	Uses Rico & Prototype APIs with AJAX. ZIP
gJAX	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
AJAX Grid	Updateable "grid" of data from a table.	Uses AJAX & paging of records. ZIP
Edit In Place 1 Edit In Place 2	Editable textareas triggered by mouse-overs	Uses Prototype API with AJAX. ZIP
AJAX Grid	Updateable "grid" of data from a table.	Uses AJAX & paging of records. ZIP
Flickr Mashup	Integrate Flickr images into your website.	Uses Flickr, phpFlickr & Prototype APIs. ZIP
Flickr/GMaps Mashup	Add geocached data to integrate Flickr & Google Maps	Adds Google Maps API to Flickr mashup demo. ZIP
XML Chat JSON Chat	AJAX "chat" that features 2 different xmlHTTP objects.	2 versions, one that uses XML, one that uses JSON. ZIP

Print this Page