Bluebar This is a simple example of a table where alternating rows are striped with a blue background. The JavaScript applies a className of 'odd' to alternating rows in the table. And a cascading style sheet command causes all table data elements within rows with a className of odd to have a background color of lightblue. Bluebar source
More Bluebar A more complex example of striping. Here the rows use different colors for fonts, alternating every third row. This is done by applying a css color to every third row. Here the blue background highlights the row the mouse is over. This is accomplished by adding and removing a class called 'highlight' to a row when the mouse moves over and out of a row. Notice that the css commands to set the background color to lightblue for alternating rows is still here, but nowhere is the class of odd assigned to any row. More Bluebar source
String manipulation A very limited example of string manipulation. Enter a string into the box. Then the JavaScript can tell you how many characters there are in the string, how many vowels are in the string and can reverse the string. Maybe I should call this fun with palindromes. String source
DOM example An example of manipulating the data. Watch the header and second paragraph change. The first paragraph is just a standard paragraph and has its style set by its tag name. The second paragraph has an id of 'content' assigned to it, so its style is different from the standard paragraph. The third paragraph is not part of the HTML. The third paragraph is built by the JavaScript. The timeout functions change the header and the second paragraph (document.getElementsByTagName("p")[0] is the first paragraph). Finally, you can hide and display the last paragraph. Dom example source
DOM example 2

DOM manipulation showing a few more features. The primary table has no elements within its body. All of the user data is added to the table by the JavaScript. This means that the html and the JavaScript never have to be touched and the file holding the data is rebuilt as needed. This also shows JavaScript manipulating array elements. Coloring the fonts red or blue to indicate problems is handled by the css.css file. Roll your mouse over the Systs column and you will see the systems on which that user has accounts.

Dom example 2 source

View the data file
AJAX example

This is the same page as the DOM example 2, but this page uses AJAX to load the data from an XML file. In the previous example a Perl program had extracted the data from a database and created a javascript file of the variables to be used and their values. This program uses AJAX to retrieve an XML file, again a static file residing on the server, and then build the table using the XML data.

You must click on the "Get User Info" button to load the data.

AJAX example source

View the data file
Minesweeper example

I just wrote this to provide an example of some of the power of Javascript. The static HTML for this page contains very little. In the HTML is declared the variable exposedCells, many functions in the JavaScript code need access to this variable. The three style sheet entries are in the HTML page. Also in the HTML is a body with two div sections, boardDiv and queryDiv. Right button functionality is handled by the left button. Left button functionality is handled by holding down the control button (option button on Mac) while left clicking. So if you just click on a cell the cell will rotate among yellow (possible mine), black (definite mine) and blue (unknown). Finally, there is no timer.

NOTE: This page does not function under IE. It works with both Firefox and Safari.

Minesweeper example source
datePicker example

This code incorporates javaScript, CSS and jQuery. This is the front end to a search tool I developed to speed searching of logs spread across multiple servers. This tool is NOT the same tool I wrote previously. But this example has been updated to include limits on the dates searched, the end date of the search cannot be after today's date and the start date for the search cannot be before January 1, 2012.

By breaking the date into it's month, day and year components I allow greater searching capability. After selecting a date if you clear the day field then the search program would pick that up and extend the search to the entire month. By using jQuery to control the date picking I format the date so that I can parse it without worrying how the user intended to input dates. (When you have worked with Americans and Europeans you learn to be particular about dates.)

NOTE: Sometimes I experience problems loading http://jqueryui.com/themes/base/jquery.ui.all.css.

datePicker example source