Welcome

You have arrived at this site, which demonstrates various JavaScript applets that I have built. There are five applets that demonstrate specific functionality. They will be described in more detail at their respective locations.

Before moving on, I would like to point out the unique JavaScript function which drives the navigation; what appears to be a complete website, with various pages linked, is actually a single page. The individual page contents are divided up into layers and the visibility is triggered dynamically through the onclick="changeVisibility('mainContent')" event handler embedded in the respective link; which triggers the following code: 

function changeVisibility(newLyr){
	if (firstRun == 1){
		var oldElement = document.getElementById(oldLyr);
		oldElement.style.visibility="hidden";
	}
	var newElement = document.getElementById(newLyr);
	newElement.style.visibility="visible";
	oldLyr = newLyr;
	firstRun = 1;
}

Comments

  • This dynamic layer visibility, that I developed for this page, went through an interesting development
  • I had seen dynamic visibility used to create dynamic HTML forms, and also for drop-down menus
  • So I decided to build my own functionality to showcase the power of JavaScript
  • The specific layer id, for example "taskLyr", is being passed as a parameter to the function
  • The element Id is called by using the document.getElementById(newLyr) structure and stored as "newElement"
  • Finally, the CSS visibility of the layer is changed from the initial attached stylesheet value of "hidden" to the new value of "visible"
  • The "if" selection statement is used to keep a runtime error from occurring on the first run through, because the "oldLyr" is not defined until the end of the function where the "newLyr" variable is assigned to the "oldLyr" variable
    • The code inside the "if" statement is then called in future event handlers, which will then make the old layers "hidden"

Calendar

Comments

  • This applet pulls the current month and date through the built-in JavaScript Date class
  • Javascript is then used to write the data into an XHTML table

Download the JavaScript source code for this applet in txt format.

Task List

New Task


Comments

  • This task managing applet exhibits the usefulness of JavaScript for performing form validation.
  • Data is dynamically extracted from the form and stored as an object of the option box.
  • When data is stored, it can be organized alphabetically or reverse alphabetically.

Download the JavaScript source code for this applet in txt format.

Tip Calculator

Bill:
Tip %:(enter as a whole number)
Tip Amount:
Total:(automatically calculated)
# of People:
Total per Person:(automatically calculated)

Comments

  • This applet demonstrates dynamic XHTML form fields.

Download the JavaScript source code for this applet in txt format.

Advanced Calculator







Comments

  • This applet was an interesting build as it takes advantage of the built in JavaScript math class.
  • This applet primarily uses event handlers to input the value of a clicked button into a string builder function until the "=" is pressed; thus calculating the entire appended string.

Download the JavaScript source code for this applet in txt format.

Contacts

Last name

First name

Telephone

Address

City, State, Zip

Comments

  • This applet demonstrates the functionality of JavaScript as an object-based programming language.
  • This applet showcases the attributes of OOD, which include:
    • Encapsulation
    • Classes
    • Constructors
    • Instantiation
    • Objects, object methods, and object properties
  • Using OOD in JavaScript, allows myself as a developer to benefit from the advantages of OOD, which include:
    • Code reusability
    • Decreased development time
    • Decreased debugging time

Download the JavaScript source code for this applet in txt format.