GEHC JavaScript
Class 5
Dates, Windows, etc

The Date object
---------------

As we started to see with cookies, date manipulation with JS is very easy.
This sets JS apart from many other languages, and is one of the advantages
of objects.

When constructing a new date, there are several ways to create the date. By
default, the date set is equal to exactly the moment the object is created.

var now = new Date;

To set a different date, you can set the values to the year, month, and
day of the date desired:

var birth = new Date(1968,8,27);

Note that in this constructor, the month is 0-based, so use 8 for September.

To build a new date that is equal to the epoch, or the starting point for
date calculations, put just a zero in the parentheses:

var epoch = new Date(0);

Can also create new dates based on another date:

var now = new Date;
var nextyear = new Date(now.getTime() + 31536000000);

** JS 5-1 - shows all of the above, printing each date using toGMTString, as
            well as the millisecond value.

Note that to get dates prior to the epoch, you can set a negative value.

You can use the date methods to extract individual pieces of data from the
date:

var month  = now.getMonth();       // 0 - 11
var day    = now.getDate();        // 1 - 31
var year   = now.getYear();        // 0 - 99, 2000+
var hour   = now.getHour();        // 0 - 23
var minute = now.getMinute();      // 0 - 59
var second = now.getSecond();      // 0 - 59

var year   = now.getFullYear();    // 4-digit, 1999, 2002, etc

** JS 5-2 - Shows extraction of selected date pieces, with one problem showing
            up with the month

** JS 5-3 - Shows the same thing, with a fix for the month

The year can be a bit tricky, as it varies a bit from one browser to the next.

** JS 5-4 - shows how the year shows up in various ways, depending on the
            browser and version of browser

We can try to fix getYear by looking at what it is equal to, and adjusting it
if it looks too small.

year = now.getYear();
if (year < 1000) year += 1900;

If you are working with more modern browsers only, you can use getFullYear()
which resolves this issue. I'll mostly use getYear() in class to be fully
backward compatible.

** JS 5-5 - shows the following output strings:

toLocaleString()
toString()
toGMTString()
toUTCString()

These all display the date in a variety of ways. The ways may change from one
browser and version to the next, and with toLocaleString(), could change from
one language to another. To present the user with a consistent date or time
string, you want to build your own string:

var now = new Date;

month = now.getMonth() + 1;
day = now.getDate();
year = now.getFullYear();

datestring = month + "/" + day + "/" + year;

Want to zero-fill?

if (month < 10) month = "0" + month;  // "0" is a string
if (day < 10) day = "0" + day;

** JS 5-6 - illustration of above

You can do the same with time, adjusting the hour as desired, for 12 or 24
hour times:

var hour = now.getHour();
var ampm = "am";
if (hour >= 12) ampm = "pm";
if (hour == 0) hour = 12;
else if (hour > 13) hour-=12;

** JS 5-6a - illustration of above

To add one single day to a date object:

dayms = 60 * 60 * 24 * 1000;

seconds per minute * minutes per hour * hours per day * 1000 (milliseconds)

now.setTime(now.getTime() + dayms);

** JS 5-7 - shows several such adjustments.

switch (now.getDay()) {
  case 0: dayname = "Sunday"; break;
  case 1: dayname = "Monday"; break;
  case 2: dayname = "Tuesday"; break;
  case 3: dayname = "Wednesday"; break;
  case 4: dayname = "Thursday"; break;
  case 5: dayname = "Friday"; break;
  case 6: dayname = "Satday"; break;
}

Same works with month. This is the first time we've used switch. Switch
allows you to work with functions or variables that will only be equal to a
certain value. The variable of function to check is placed on the same line
with the switch. The possible values are placed in the case statements.

** JS 5-8 - shows the day and month switch/case statements in action

We can also use arrays, especially of the data will be used multiple times.

** JS 5-9 - uses arrays, which may look cleaner in the code

Checking other properties
-------------------------

You can check and display the referrer, or the page that the user came from.

** JS 5-10 - simply shows that you can see the referrer value.

If the referrer is not correct, then you can give an error rather than
displaying the page:

** JS 5-11 - when this page is accessed from saltyrain.com, it says access
             is permitted. When accessed from steve-mount.williston.vt.us,
             it says it is not permitted.

You can also display and even change the page's title:

** JS 5-12 - sets the title of the page to something new - won't work in all
             versions of Netscape

The utility of some of these features might seem small, but when you do need
to have the value, it is nice to know that you can get access to it.

New windows
-----------

We don't need to use JavaScript to open new windows, as HTML gives us the
tools we need, using the target attribute of the a href tag.

** JS 5-13 - click on the first link to open a new window with a graphic in it,
             then click on the second link to put a new graphic in the window.
             No JavaScript used.

With JS, though, we gain a lot more control over the window that we open.

** JS 5-14 - here we open a new window with the dimensions needed to hold the
             image.

If you name the window, then you can reuse the same window.

** JS 5-15 - in this code, we use the same exact openWindow function for each
             link - the window is only created if it does not already exist

We can also control the parts of a window that will display, allowing us to
specify if scrollbars, toolbars, and other parts, appear or not.

** JS 5-16 - lists links to open windows with various widgets turned on and off

The code in this page is interesting in that it can also close a window if it
is already open. We can use this to provide users with a "close window"
option. The code can be on the page you're closing, or on the page that opened
the window.

** JS 5-17 - click on the first link to open a new window, on the second to
             close the new window

The window object, once it has been created, sticks around even after the
window itself is gone, so there is a closed property that we can examine to
see if the window is still active. Checking this property prevents errors
and is just good form.

** JS 5-18 - expands on the "closed" idea, putting up an error message if the
             user tries to close a window that is already closed. Try clicking
             on the "close window" button before opening the window, after
             opening it, and after closing it.

External JavaScript files
-------------------------

It will become more and more convenient to place perfected JavaScript functions
in a single file, that you can call when needed. The benefits include a
single edit point for files and any caching benefits that the browser provides
to the user.

<script language="JavaScript" type="text/javascript" src="filename.js"></script>

The ending tag is required.

** JS 5-99 - note in this code, we use the isblank function, and the isNum
             function, even though the definitions of neither appear in the
             code - we use them from the external js file included in the
             code at the beginning.

Info about isblank, inNum, to_dollar, and isZip

isNum(value,0,0); <-- no decimals, no negatives  Quantity
isNum(value,0,1); <-- decimals OK, no negatives  Price
isNum(value,1,1); <-- decimals OK, negatives OK  Temperature

returns false if the value is not numeric, true if it is

to_dollar - returns a string which formats a decimal value into a dollar value

tax = total * .05;
document.theform.taxamt.value = to_dollar(tax);