JavaScript Tutorial - Pace Calculator

Look at the Pace Calculator first to get an idea of how it works. This tutorial will discuss some of the programming logic behind the Pace Calculator. Many of the sections will include links to supplemental information, such as the source link below.

source View the Pace Calculator source

Begin by viewing the source. The JavaScript is indicated by blue font, and the HTML is in black font. About half way down, the body of the document begins. It is indicated by the <body onLoad="defaultStuff()"> tag.

Layout

reference <TABLE> reference

Let's look at the HTML layout first. To organize the layout, HTML tables are used. In fact, one table is embedded inside another to make a border around the pace calculator. Learn more at the <TABLE> reference.

Form Elements

reference <FORM> reference

Refer to the source again. The <form> tag is located after the <body> tag. The first form element in the pace calculator is an option list. The other type of form element used here is the input element. The pace calulator uses the text, radio, and button inputs. Learn more at the <FORM> reference.

HTML meets JavaScript

reference Events reference

Refer to the source again. To get the form elements to react to user actions, they need to have events. In the pace calculator, the first event to occur is the onLoad event. This calls a function defaultStuff(), which sets up some default values.

The other events occur as a result of some user interaction. One such event is onChange. Refer to the line <select name=CalcWhat onChange="changePics(document.Calc.CalcWhat.selectedIndex)"> Looking at the JavaScript, you'll see the function changePics(calculateFor). This function takes one argument between the parenthesis. The passed argument is document.Calc.CalcWhat.selectedIndex, where document refers to the web page document. Calc is the name of the form, CalcWhat is the name of the option list, and selectedIndex is the value of the option that is selected.

Note. The argument document.Calc.CalcWhat.selectedIndex can be replaced with this.selectedIndex. The keyword this references the CalcWhat object, because it is located within that object.

The other event that occurs in the pace calculator is the onClick event. This is one of the events a button can react to. Both the buttons each call a JavaScript function.

Learn more about Events

JavaScript in the Pace Calculator

reference Introduction to JavaScript

reference Functions

defaultStuff()

Since defaultStuff() is the first function to be called, it is appropriate to start there. This function is located at the end of all the JavaScript and between its own script tags. The reason for this is nothing more than to make the function in close proximity to the "onLoad" event. I think it makes the script easier to follow, and the same goes for being between its own script tags. This function is pretty much alone from a logic standpoint. It does not mix with any other method. It just sets a few of the properties to their defaults. 

<script language="JavaScript">
<!--
/*
 * defaultStuff sets the defaults. It is called by the onLoad event.
 */
function defaultStuff()
{
	// set list box default to PACE
	document.Calc.CalcWhat.selectedIndex=2;
	
	// set option buttons to defaults
	document.Calc.optDist[0].checked=true;
	document.Calc.optPace[0].checked=true;
}
// -->
</script>

Pre-loading the images

Refer to the source again. After the constants is some logic to preload the images for the pace calculator. Preloading the images helps to avoid a lag later, when the images are switched. The "Distance", "Pace", and "Time" images are preloaded by creating a new Image, and setting the source for that image to the name of an actual image file. The reference may seem a little complicated. It is located in a folder called "images" in the root directory of the web site. In this example, ../images/runPaceOff.gif, the ../ points the reference up one directory to the root. Then, images/runPaceOff.gif points to the picture in a subdirectory of the root.

The next few sections will include a variety of JavaScript principles. These references may help to clarify some things.
reference Conditional Statements

reference Ternary Operator

changePics(calculateFor)

Refer to the source again. Look at the function changePics(calculateFor). It switches all the images to be their "On" image, then checks which option is picked. (The selected option is passed as the variable calculateFor). Then, the image for this selected option is set to its "Off" image.

calcIt()

Refer to the source again. The next section of code is separated into it's own script tags. And once again this is only for organizational purposes. The function calcIt() begins this section, and it is this function that is the main part of the whole program.

First, we retrieve the text inputs for time, distance, and pace. These can be referenced using the value property, like this document.Calc.timeM.value. The time and pace variables have to combine minutes and seconds. I decided to convert seconds into a percentage of minutes, but it could be done the other way. (In fact, I do this in other versions of the pace calculator, and I now prefer to have time measurements in seconds.) The point is to have a common unit of measure when doing calculations.

The next section of calcIt() uses if statements to calculate for either time, distance, or pace. The appropriate result is determined by the selectedIndex of the option list. Let's start with an overview for calculating TIME, DISTANCE, and PACE. For TIME, the distance and pace are converted to meters (it's the common measurement I chose). TIME is calculated as distance multiplied by pace. The result is rounded and split up into minutes and seconds. An adjustment is made and the results are displayed to the appropriate input text fields. DISTANCE and PACE are similar, but have some logic differences.

distConversion(d, toMeters)

Refer to the source again. The first argument accepted by this function is d. This is the distance. The second argument is toMeters. This is a boolean variable (a variable that can be either true or false). Note. Variables in JavaScript are not really of any specific type. So, toMeters can be of any type really, but I make sure to only pass in boolean values. The variable toMeters signifies whether or not the conversion is to meters.

The function distConversion(d, toMeters) is fairly simple, but some of the code looks a little tricky. The if statements are straightforward; they check which of the DISTANCE radio buttons is chosen.

calcIt(), continued

Refer to the source again. Look at the if (resultValue==TIME) section of the calcIt() function. After the DISTANCE is converted, there is a call to the paceConversion(p, toMeters) function. This is pretty much the same as distConversion(d, toMeters), but the logic is reversed because PACE is TIME/DISTANCE. The next step is to calculate the TIME based on the DISTANCE and PACE. To get the result into minutes and seconds, I first round the TIME down to a whole number. Since TIME is in minutes, rounding it down results in the number of minutes. The seconds can be calculated with the formula 60*(t-min), where t is the full time in minutes, and min is just the minutes. A couple built in JavaScript functions are used to do the rounding. To round down a number use Math.floor(number); and to round a number normally use Math.round(number);

The next part to calculating the TIME is a little adjustment. Seconds can be from 59.5 to nearly 60. This will cause problems because I round seconds to the nearest whole number. If seconds are rounded to 60, then it looks funny saying the TIME is 4 minutes, 60 seconds. The adjustment simply changes the 60 to 0 and increments the minutes by one if seconds equals 60.

The last step to calculating the TIME is to display the results. Minutes and seconds are set to the timeM and timeS text inputs, using the value property.

About this page: