JavaScript Demonstration Programs

• onclick1.html: inline JavaScript onclick event handler
• onclick2.html: embedded JavaScript onclick event handler, getElementById
• onclick3.html: embedded JavaScript onclick event handler, getElementById, random numbers, changing CSS property values, getElementsByTagName, repetition
• onclick4.html: embedded JavaScript onclick event handler, getElementById, changing element contents (innerHTML), Date object
• onclick5.html: embedded JavaScript timer event handler, Date object, setInterval, changing element contents (innerHTML)
• event01.html: setting up multiple window.onload handlers
• event03.html: disable context menu, display alternate message
• event04.html: detect mouse movement
• event05.html: handle form events
• event06.html: detect key events
• oncopy.html: prevent copying

• sel1.html: if statements, onclick, this keyword, getElementById, one handler for multiple buttons
• sel2.html: if/else statements, onclick, this keyword, getElementById, one handler for multiple buttons
• sel3.html: switch statement, onclick, this keyword, getElementById, one handler for multiple buttons
• sel4.html: compressed if/else statement, onclick, this keyword, getElementById, one handler for multiple buttons

• write1.html: document.writeln used to create a table
• write2.html: for loop, document.writeln
• write3.html: for loop, document.write, document.writeln
• write4.html: while loop, document.write, document.writeln
• write5.html: do/while loop, document.write, document.writeln
• write6.html: for/in loop. document.writeln used to create a table
• demo03.html#arrays: for loop, process array
• demo03.html#forin: for-in loop, process array
• demo03.html#break1: for loop, break, continue
• demo03.html#break2: for loop, labeled break, labeled continue

• array1.html: array, for loop, for-in loop, document.writeln
• array2.html: array, for loop, sorting, random numbers, onclick, getElementsByTagName
• array3.html: array, for loop, sorting, onclick, getElementsByTagName, Array.sort
• array4.html: array, for loop, sorting, onclick, getElementsByTagName, Array.sort
• array5.html: arrays using splice, slice, split, and join
• demo03.html#arrays: for loop, process array
• demo03.html#forin: for-in loop, process array
• arrayDisplay.html: creates array and displays as list items using document.writeln
• arrayDisplay2.html: same as arrayDisplay.html, but using window.onload rather than embedding JS in body
• arrayDisplay3.html: same as arrayDisplay.html, but using DOM techniques
• arrayParas.html: creates array and displays elements as paragraphs using DOM techniques

• sendGet.html: escapes and sends form data as a get request
• receiveGet.html: receives a get request and un-escapes its data
• form10.html: automated form validation using regular expressions

• roll1.html: simple rollover, inline event handler
• roll1a.html: simple rollover, inline event handler, uses images array
• roll1b.html: simple rollover, non-inline event handler
• roll2.html: a rollover with preloading of images
• roll3.html: multiple rollovers with preloading
• roll4.html: multiple text links changing multiple images
• roll5.html: multiple text links controlling one image
• roll6.html: one image link rollover controlling two images
• math1.html: uses Math functions to a draw sine wave on a canvas

• domSelect.html: selects and modifies DOM elements based on class, id, tag name, and CSS selector
• domCreate.html: creates DOM elements and adds them to a page
• arrayDisplay3.html: same as arrayDisplay.html, but using DOM techniques
• arrayParas.html: creates array and displays elements as paragraphs using DOM techniques
• DOMExplorer.html: displays the hierarchical document object model of the current document

• date1.html: creating Date objects, setting the year
• date2.html: calculating day of week, month, creating new Date objects with a given date, using Date functions
• date3.html: looking in to the future
• date4.html: converting military and normal time
• date5.html: getting ready for Christmas
• date6.html: creating this month's calendar dynamically
• date7.html: creating any month's calendar
• date8.html: updating clock with pause button and two time formats
• dateFormatter.html: adding a format string method to the Date class
• datexmpl.html: Date and dateformat.js examples

• date4.html: converting military and normal time
• date8.html: updating clock with pause button and two time formats

• window1.html: opens windows and replaces contents
• window2.html: opens a window using a timer
• window3.html: moves and resizes windows [does not work in modern browsers]
• window4.html: opens a couple of windows with different properties

• storageDemo.html: stores, displays, and clears values from local and session storage
• storage2.html: stores, displays, and clears multiple key/value pairs from local and session storage

• reg01.html: simple regular expression text matching
• RegexTester.html: online regular expression tester
• form10.html: automated form validation using regular expressions
• RegEx1.html: text manipulation using regular expressions
• RegEx2.html: text manipulation using regular expressions

• demo03.html#void: void operator, open window
• demo03.html#empty: empty statement (as for loop body)
• math1.html: uses Math functions to a draw sine wave on a canvas