Building Simulations with Javascript

By Daniel Williams

In Example 2, we solicited input from the user (the population variable) to generate results based on meaningful numbers (calculation variables).

Retrieving Data From External Sources

As you noticed in Example 2, we created both global and calculation variables. The calculation variables are similar to constants in this example. But what if you wanted to adjust these variables without modification of the script? There are several approaches we'll examine here.

If all of your users are on Windows computers, you could use ADO or ODBC to connect to a corresponding database. In Example 3, we have connected to a database from a table and retrieved the values.

Example 3:

<script language="Javascript">
function getData()
{
 var conn = new ActiveXObject ("ADODB.Connection");
 conn.open ("DSN=myTest");
  
 if (conn)
 {
  rs = new ActiveXObject ("ADODB.Recordset");
    
  rs.Open ("select col1,col2 from tbl_test", conn,0,1);
    
  while (! rs.EOF)
  {
   c1 = rs.fields("col1").value;
   c2 = rs.fields("col2").value;
   
   document.write(c1+' - '+c2+'<br>');
   rs.MoveNext ();
  }
  rs.close ();   
  rs = null;
  conn.close ();
 }
}
</script>
Alternately, you can use AJAX to retrieve data. But for the sake of this simulation, we are going to retrieve data from a Javascript source file (see Example 4).

Example 4:

Main File:
<script type="text/javascript" src="src/data.js">
<script language="Javascript">
for( var i = 0; i < dataVarA.length; i++ )
{
 document.write(dataVarA[i]);
}
document.write(datavarB);
</script>
data.js File:
dataVarA = new Array(1,2,3);
dataVarB = "ABC";

Calculations

As demonstrated in Example 2, you may want to perform calculations using the preset variables and user input to create meaningful results. In more complex scenarios, you may need to generate a stochastic stream of data for analysis.

Example 5:

<script language="Javascript">
var varA = new Array(.25,.75, .87,1);
var varB = new Array(25,50,75,100);
var dataStream = new Array();
var population = 100;
function generateDataStream()
{
 for( var i = 0; i < population; i++ )
{
var n = Math.random();
for( var x = 0; x < varA.length; x++ )
{
 if( n <= varA[x] )
{
 dataStream[i] = varB[x];
}
}
}
}
</script>
From the data generated in Example 5, we could create not only a summary of the results, but also data to build visual charts.

Displaying Results

As you may recall from earlier, we established that all of the variables will reside in memory. If we wish to allow the user to toggle between different methods of displaying the results, we must be allowed to manipulate what is being seen in the browser without it being refreshed. To do this, we will incorporate CSS and HTML (see Example 6).

Example 6:

<script language="Javascript">
var varA = "Test";
function showForm()
{
 var buffer = "<p>Data to be displayed of the <b>form</b>.<br>";
buffer += "<a href="#" onclick="javascript:showResults(0);">Results</a></p>";
 document.getElementById("content").innerHTML = buffer;
}
function showResults(opt)
{
 var buffer = null;
 switch(opt)
{
 case 0:
   var buffer = "<p><b>Results "+varA+"</b> to be displayed.</p>";
  case 1:
   var buffer = "<p><b>Results "+varA+"</b> to be displayed.</p>";
}
 document.getElementById("content").innerHTML = buffer;
}
showForm();
</script>
<div id="content"></div>

Final Thoughts

We have discussed the elementary building blocks of Javascript to construct a simulation. But I'd like you to consider implementations of such a simulation. What is the scale of the implementation? Can it work on a PDA? How can it be written more efficiently for broader use and/or less memory consumption?


Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date