VirtualMV/JavaScript/Case Study: Forms/Variables/Content

Adding Variables to a Page

For our example we will be looking at two different kinds of variables.

Global Variables

A global variable is set in the JavaScript and is kept for the life of the form. In this case I want to be able to change the name of the Company at the top of the form. At present it says "Welcome to Virtual DVD Rentals System?" however, it would be cool if we could just add this to a JavaScript Variable and call it when we need to display the company name.

In the JavaScript File

Create the following variable in the js file

//Global Variables ----------------------------------------------------------------
var strCompanyName = "Virtual DVD Rentals";

In the html file

So now in the html file we can call this variable as follows:

<h1>Welcome to 
<script type="text/javascript">document.write( strCompanyName )</script> 
System</h1>

Test the html file in a Web Browser to see that it is working:

Working with the date object

The Date Object allows us to display the current date (in many different formats), however in our case we'll keep it simple

Add the following to your JavaScript File:

function fnDisplayTodaysDate() {
  var currentTime = new Date();
  document.write( currentTime.toLocaleDateString() );
}

You can use Dr. Google to find out other date formats (Search for "JavaScript Date format" )

Add the following after "Today's Date" in the html file:

<p>Today's Date: <script type="text/javascript">fnDisplayTodaysDate();</script></p>

Test the html file in a Web Browser to see that it is working: