MeadInKent
| iFrames and web pagesPlain version of this page | An Excel table as a Javascript |

Using javascript to display variables from an external file on a web page

This website does not contain a Javascript tutorial. The following details however may provide some clues as to how some simple script instructions can be used.

The aim of this project is to find a means of displaying a few variables from an external file on a web page. The external file could easily be generated by a visual basic program in Excel or Access. The web page might be a status report showing the progress of several different processes, or it may contain some summary variables for a user without access to the original office files.

Some variables to be saved in a javascript file

  B C D
12 Agency recharges c:\magic_file.csv 28 Mar

A first script reads an external (text) file called 'jbank1.js'. The file only contains four variables 'proc_b', 'result_b', 'date_b' and 'datenarr_b' and makes them available for use within the web page.

  Contents of External js file   Script within this page to call the file
  var proc_b="Agency recharges";
var result_b="c:\magic file.csv";
var date_b=new Date("03/28/2013");
var datenarr_b="28 Mar";
  <script src="jbank1.js"></script>

The second script reads the first two variables from the external file and passes them directly to a paragraph which contains an ID label (bank_cm)...

  Paragraphs displayed in a page   Script within the current page
 

The most recent file to be processed was:

A paragraph to be substituted

For further information please contact the system administrator.

  <script>
// in the paragraph left (ID: bank_cm), the original text will be replaced by the following statement
document.getElementById("bank_cm").innerHTML="Description: " + proc_b + ", Filename: " + result_b;

</script>

The third script calculates the difference between todays date and the (external) 'date_b' variable. The result of the calculation determines the red or green background colouring of the paragraph (ID = 'bank_p') ...

  Paragraphs displayed in a page   Script within the current page
 

The data was last refreshed on:

A paragraph to be substituted

Ensure that this data is updated regularly in order to ...

  <script>
var today= new Date();
today.setHours(0, 0, 0, 0);

var procdate=date_b;
var daysdiff=Math.floor((today.getTime()/86400000)-(procdate.getTime()/86400000)+1);

if (daysdiff<24)
{
document.getElementById("bank_p").innerHTML="Date: <span style='background-color: #7BFF7B'>" + datenarr_b + " (" + daysdiff + " days)</span>";
}
else
{
document.getElementById("bank_p").innerHTML="Date: <span style='background-color: #F98C84'>" + datenarr_b + " (" + daysdiff + " days)</span>";
}
</script>

Note that the javascript Date functions are case sensitive and must be typed correctly. Also, a date variable should be entered in the format MM/DD/YYYY.

A simpler version of this page and it's javascripts can be opened here. Use the browser option to View Source code of that page.

A page containing useful information about javascripts and dates is http://msdn.microsoft.com/en-us/library/ie/ee532932(v=vs.94).aspx



file: Java_Vars_MiK.htm Page last updated: Feb14 Open MeadInKent Facebook page MeadInKent.co.uk 2014 CMIDX S5 P12 N