How Time Is Stored

Time is stored on your computer as a number. That number represents the number of milliseconds that have past from midnight (00:00:00) 1 January 1970. Why that date? I don't know, but it's the standard.

When you make a Date() object and display it, you see a day, date, month, etc.; but, this is not what's actually in the memory of your machine. To see this number display "the_date_object.getTime()". This is the real content of your Date() object. The browser makes an interpretation to present the formatted data you see when you display the Date() object.

This method of storing time as a number relative to a standard is very important because it allows us to compare one date against another using simple math. A Date() object set in the future would be a greater number (of milliseconds) than one in the past. We can use simple subtraction to find the difference in milliseconds.

Here's an example. It counts down the days until Christmas 2007. (I hope I remember to update this. email me if I haven't.)

Making Two Date() Objects

The example compares the current date to 25 December 2007 and displays the difference. Begin making this page by coding the HTML elements leaving out the dynamic JavaScript display ("document.write()") for now.

We'll begin coding the JavaScript by making two Date() objects:

<script language="JavaScript">

Christmas = new Date("December 25, 2007");

today = new Date();

</script>

The two Date() objects I made are called "Christmas" and "today". The "today" Date() object should already be familiar to you. It gets the current date and time from the viewer's machine. This object contains the number of milliseconds that have passed from midnight 1 January 1970 to the time the page is loaded.

The "Christmas" object is a little different. Notice that we put a specific date inside the parentheses. This date is in US format and inside double quotes. This object will contain the number of milliseconds from midnight 1 January 1970 until the specified date.

Comparing The Dates

Now that we have the two Date() objects we want to compare, we can find the difference by simple subtraction:

<script language="JavaScript">

var difference = 0;

Christmas = new Date("December 25, 2007");

today = new Date();

difference = Christmas - today;

</script>

We made a variable "difference" to hold the value of the difference between the "Christmas" and "today" Date() objects. Two lines are needed. First, we declare the variable with a "var" statement. This tells JavaScript that "difference" is a variable. We've also initialized the variable with a starting value of zero.

The second thing we did was to simply subtract the value of the "today" Date() object from the "Christmas" one. This leaves us with the number of milliseconds between the current date and Christmas, 2007.

This simple subtraction is possible due to the fact that the Date() objects are stored as a value relative to a standard.

Cleaning Up For Display

With "difference", we now have the number of milliseconds between the current date and Christmas, 2007. This would make a really confusing display because most people would expect days, and not milliseconds. To convert "difference" from milliseconds to days, we simply divide "difference" by the number of milliseconds in a day.

You could just whip out a calculator and start multiplying to figure out how many milliseconds are in a day, but there's an easier way. Remember that JavaScript does math.

Lets start out by making a variable to hold our "cleaned up" number of days before Christmas. I'm calling this variable "days":

<script language="JavaScript">

var days = 0;
var difference = 0;

Christmas = new Date("December 25, 2007");

today = new Date();

difference = Christmas - today;

days = difference/(1000*60*60*24);

</script>

Let me start out explaining the above by going to the second line in red with all of the numbers multiplied together. Those numbers are the number of milliseconds in a day. I'm letting JavaScript figure it out with multiplication, instead of calculating this my lazy self and using one large result.

Remember that that "difference" is a value representing milliseconds.

The first number multiplied is 1000 which is the number of milliseconds in a second. If we divided "difference" by 1000 alone, we'd have the number of seconds until Christmas. The first 60 represents the number of seconds in a minute. If we divide "difference" by 1000*60 (or 60,000) we'd come up with the number of minutes until Christmas.

Continuing the above logic, we include another 60 for the number of minutes in an hour and 24 for the number of hours in a day. We've just let JavaScript figure out how many milliseconds there are in a day instead of doing this manually ourselves.

Now notice that we put all of the numbers multiplied inside parentheses. If you're a math whiz, you already know why. We need to separate this multiplication process from the overall division process. If we left out the parentheses, "difference" would be divided by 1000 and that result would subsequently be multiplied by the other numbers. The parentheses cause JavaScript to multiply the numbers separately from the division so we have the proper number to divide "difference" by.

Math.round()

The "days" variable will now contain a number that will almost always contain numbers to the right of the decimal point. We don't want these displayed for the sake of clarity. To remove the numbers from the right of the decimal point, we can use "Math.round()".

The "Math" object is native to JavaScript and can solve a lot of problems. One thing "Math" can do is round numbers in a variety of ways. One rounding method is to use "Math.round()". This rounds a number just like you learned to do in school.

If the numbers to the right of the deciamal point are greater than or equal to .5 (1/2), then the number to the left of the decimal point is rounded upward. If the decimal portion is less than .5, the number on the left remains the same. In short, the number to the left of the decimal point is "rounded up" if the decimal portion of the number equals 1/2 (.5) or more. Otherwise, it's left alone.

We can remove the decimal part of "days" by using this:

days = Math.round(difference/(1000*60*60*24));

Notice that the "M" in "Math" is capitalized. Also note the extra parentheses containing the previous division. Don't forget any of this or the rounding won't work.

The variable "days" now contains the number of days between the current date and Christmas. We can display this with a "document.write(days)" or "alert(days)" method.

Summary & Exercises

Date() objects are stored as a number in a computer. This number represents the number of milliseconds from 1 January 1970 00:00:00 to the Date() object involved.

Because Date() objects are stored as numbers based on a standard, we can compare dates and times with simple math, like subtraction.

Most manipulations of Date() objects result in a number of milliseconds. We need to divide this appropriately to come up with minutes, days, etc.

We can round a number by stripping off the numbers to the right of a decimal point by using the "Math.round()" method.

See if you can compare three and four dates. Make all of these dates some time after 1 January 1970 00:00:00. Just make the Date() objects you want to work with and then use simple math to make comparisons.

Try comparing dates before midnight 1 January 1970.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index