JavaScript Examples

Displaying Last Modified Date, Current Date, and Number of Days Since/Until

To display the date a document was last modified, one uses the lastModified property of the Document object.  To display the current date, one creates an instance of the Date object and converts this to a string using the toLocaleString() method of the the Date object.  The new two lines are displayed by JavaScript:

The code to do this is as follows:

document.write ("This document was last modified on " +
  document.lastModified + "<BR>");
today = new Date();
document.write ("Today is " + today.toLocaleString() + "<p>");

"Today" here is just a name for the Date object; I could have used any name here.  As you can see, both of these display the data and time in a particular format. If one wants to alter this format, there are a number of methods of the Date object which are useful.  Among the more commonly used, are the following.  Note that most of the "get" methods has a corresponding "set" method.
 

getDate()	returns day of the month of a Date object (beginning with 1)
getDay()	returns day of the week of a Date object (0-Sunday, 6-Saturday)
getFullYear()	returns year in 4 digit form of a Date object
getHours()	returns hour of the day of a Date object (0 to 23)
getMonth()	returns month of year of a Date object (0 to 11)
getTime()	returns the number of milliseconds since January 1, 1970 of a Date object
setDate()	sets day of the month of a Date object (beginning with 1)
setFullYear()	sets the year of a Date object in 4 digit form
setHours()	sets the hour of the day of a Date object (0 to 23)
setMonth()	sets the month of year of a Date object (0 to 11)
setTime()	sets the date of a Date object in millisecond format (number of milliseconds since January 1, 1970)

To work with a day other than the current date, one can first create an instance of the Date object and then use the "set" methods listed above to change the date object to the correct day.  For example, you could write:

christmas = new Date();
christmas.setMonth(11);
christmas.setDate(25);

To compute the difference between two dates, one can subtract the internal representation (milliseconds since January 1, 1970) of one date from another, and then divide to convert it into the desired unit (e.g. days).  To obtain an integer, one would use the floor() method of the Math object, i.e. Math.floor(x) returns the value of x rounded down to the nearest integer.

Exercises:

1. Use JavaScript to display the current date in the format of December 1, 2000.  Do not display the day of the week.

2. Use JavaScript to display the number of days till Christmas, or the number of days since the Presidential election (November 7, 2000).

Use Drop Down Box to Jump to Another Page  

1. A "drop-down" box is a form element and therefore must occur between <form> and </form> tags.  The drop-down box is created by using an <option> tag before each option, and surrounding the set of options with a <select></select> pair of tags. 

2. Give a name to the form and a name to the drop down box.  You will use these names to refer to the form and the drop down box in JavaScript. 

3. In the <select> tag, add an onChange eventhandler to detect when the user has made a selection.  The  selectedIndex property of the dropdown box indicates what option was chosen, where the first option has a selectedIndex value of 0, the second option has a selectedIndex value of 1, etc. 

4. In JavaScript, one can jump to another page by setting the href property of the Location object to the desired URL.

The JavaScript to do this appears after this line:

Select a topic Forms Frames Tables

The code is as follows:

<form method="post" name="getinput">
<select name="topic" onChange="v=document.getinput.topic.selectedIndex;
  if (v==0) window.alert('Select a topic');
  if (v==1) window.location.href='../WWWDesign/forms.html';
  if (v==2) window.location.href='../WWWDesign/frames.html';
  if (v==3) window.location.href='../WWWDesign/tables.html';">
<option>Select a topic
<option>Forms
<option>Frames
<option>Tables
</select>
</form>

Alternatively, one could jump to another page when a button or image was clicked.  To do this, the JavaScript for the onChange event handler would be moved to an onClick event handler for the button or image.

Use Drop Down Box to Determine What Appears in Another Drop Down Box

One can use the user selection in one drop down box to determine the choices the user sees in another drop down box.  To do this, one would use the same first three steps above, but instead of setting the window.location.href property, one would set the text property of the options in the second form box to affect what is displayed.  For a solution, go to www.nv2.cc.va.us/home/thobart/form.htm

Form Verification

A common use of JavaScript is to do preliminary error checking on a user's input on a form before the information is sent to the server.  If required data is missing, the JavaScript can notify the user without involving the server.  Various methods and properties are useful here, depending on the form element.  For example

 

Textbox, Textarea	document.formname.textboxname.value.length
Radio Button, Checkbox	document.formname.radiobutton[index].checked document.formname.checkbox[index].checked