Building Simulations with Javascript

Co-authored by Lawrence Fulton and David
Bengert

As an organization required to publish analytical reports, we inherit the responsibility of using data to create simulations or models. In this article I will discuss examples of applying real data and using Javascript to create a simulation.

Why Javascript? To answer this question, you must first eliminate any inhibitions you may have regarding Javascript, especially used in this capacity. Logically, the customer base will dictate the environment for which we must develop in. In our IT organizational environment, we could only be sure of a few things:

• There isn’t a guarantee of any runtime environment; Java or Dot Net.
  
• Nearly all of the users do NOT have administrative privileges.
  
• If the users have a working computer (Linux or Windows), they have a web browser.
  
• There is an emphasis on rapid application development.
  
• And finally, some users do not have network access.

The Application Model

Because the simulation is viewed in a web browser, there are inherited skills required; HTML and CSS. But in our case, we are going to discuss the role of Javascript. The simulation consists of four primary components:

• A – Global Variables
  
• B – Calculation Variables
  
• C – Calculations
  
• D – Results

(A

&

B)

–

>

C = D

We will now examine each component below.

Global Variables

Because the simulation is written in Javascript, it is important to remember that the variables used will be held in memory during the user

’

s interaction. Refreshing the browser will equate to flushing the variables from memory. To publish the simulation results in various manners (data stream, summary, charts, etc.), the values of the global variables cannot change during the current simulation.

The example below initializes three global variables; gblA, gblB, gblC. When the form button is clicked the values of the variables will be populated from the user’s input.

Example 1:

<script language=”Javascript”>
var gblA = null;
var gblB = null;
var gblC = null;
function startSimulation()
{
 resetValues();
 gblA = document.frm.itemA.value;
 gblB = document.frm.itemB.value;
 gblC = document.frm.itemC.value;
}
function resetValues()
{
gblA = null;
gblB = null;
gblC = null;
}
</script>
<form name=”frm”>
<p><input type=”text” name=”itemA”></p>
<p><input type=”text” name=”itemB”></p>
<p><input type=”text” name=”itemC”></p>
<p><input type=”button” value=”Start Simulation” onclick=”javascript:startSimulation();”>
</form>

Though very elementary, this is the scope of our global variables. The calculation variables are somewhat more complicated.

Calculation Variables

The entire simulation project would become static, in a fixed condition, if we didn

’

t employ user input. Furthermore, the results have unrealistic meaning if we didn

’

t apply meaningful data. This is the purpose of the calculation variables.

To apply these variables, an understanding of statistics would be of critical importance. But for the sake of demonstration, view the example below.

Example 2:

<script language=”Javascript”>
# Calculation variables
var low = 10000;
var high = 20000;
var QL = 12500;
var QU = 17500;
var median = 15000;
// Global variables
var population = null;
var popQ1 = null;
var popQ2 = null;
var popQ3 = null;
var popQ4 = null;
function startSimulation()
{
 # get user input
population = document.frm.population.value;
performCalculation();
 document.write(“First Quarter: “+popQ1+”<br>”);
 document.write(“Second Quarter: “+popQ2+”<br>”);
 document.write(“Third Quarter: “+popQ3+”<br>”);
 document.write(“Fourth Quarter: “+popQ4+”<br>”);
 document.write(“Total: “+population);
}
function performCalculation()
{
 var tmpTtl = high-low;
 var tmpNum = QL-low;
 popQ1 = Math.round(tmpTtl * (tmpNum/tmpTtl));
 tmpNum = median-QL;
 popQ2 = Math.round(tmpTtl * (tmpNum/tmpTtl));
 tmpNum = QU-median;
 popQ3 = Math.round(tmpTtl * (tmpNum/tmpTtl));
 tmpNum = high-QU;
 popQ4 = Math.round(tmpTtl * (tmpNum/tmpTtl));
}
</script>