home
overview syllabus
week1
{ Core JavaScript }   
{ Windows & Frames }   
{ Documents }   
{ Images }   
{ eval() function }   

week2
{ Forms[] Array }   
{ Form Elements }   
{ Select Object }   
{ Form Examples }   
{ Date object }   
{ Cookies }   
{ String Methods }   

week3
{ Browser Detection }   
{ Object Detection }   
{ DHTML DOMs }   
{ Error Handling }   


{ Objects }   
{ Arrays }   
{ Math object }   

 

JavaScript creates a Form object for each form contained within an HTML document. These Form objects are stored in the document.forms[] array, and can be accessed via the array index number or the form's name.

Each Form object contains an elements[] array that stores a reference to each input element (radio button, checkbox, textarea, etc.) within a form. Like any array, the elements[] array includes a length property that references the number of elements in a form. You can refer to input elements using this array, or you can refer to specific elements by name:

document.formName.elementName

If multiple elements share the same name, as is the case with radio buttons and checkboxes, each element is stored as part of a named array. For instance, in a form named formOne containing a set of radio buttons named "age", you can refer to each individual radio button through its index number:

document.formOne.age[0] // first radio button
document.formOne.age[1] // second radio button


Every input element, with the exception of the Select object, has a value property that corresponds to the HTML value attribute. You can both read and write an input value by referencing this property:

document.formOne.text1.value = "new text input value";
var textVal = document.formOne.textarea1.value;

For radio buttons and checkboxes, the value property only stores the value to be transmitted to the server, and does not indicate whether or not an element is selected. To verify this, use the checked property, which has a value of true (if selected) or false (if not selected).


The Select object does not contain a value property; rather, each individual option in an HTML <select> element has its own value property. The Select object does contain a selectedIndex property that references the index number of the selected option. If no option is selected, the value of this property is -1.

// returns an array index number for the selected option
document.formOne.select1.selectedIndex;
// the value of option number i
document.formOne.select1.options[i].value;

The following validation examples will launch in a separate browser window. To view the source, select "View" then "View Source" or equivalent.


The built-in Date object allows you to manipulate date and time values. Use the new Date() constructor to create Date objects. Without any arguments, the new Date() constructor creates a Date object set to the current time and date. However, you can set a custom date by passing arguments to the constructor:

// in milliseconds
new Date(ms)

// as a string
new Date("Wed, 6 June 2001 20:00:00")

//as a set of individual arguments
new Date(year, month, day, hours, minutes, seconds, ms)

Note that when passing arguments to the Date constructor, you must specify the month using its index, where January = 0, February =1 and so on. The year and month arguments are required, but the others are optional and may be omitted.

Date methods

  • getDate() - returns the date (0-31) of a Date object.
  • getDay() - returns the day (0-6) of a Date object.
  • getFullYear() - returns the 4 digit year.
  • getHours() - returns the hour (0-23).
  • getMilliseconds() - returns milliseconds of a Date object.
  • getMinutes() - returns the minutes (0-59).
  • getMonth() - returns the month (0-11).
  • getSeconds() - returns the seconds (0-59).
  • getTime() - converts a date and time to a millisecond representation. see Date.parse()
  • getTimezoneOffset() - returns the difference between local time and GMT in minutes.
  • setDate() - sets the date (0-31) of a Date object.
  • setFullYear() - sets the 4 digit year.
  • setHours() - sets the hour (0-23).
  • setMilliseconds() - sets the milliseconds field.
  • setMinutes() - sets the minutes (0-59).
  • setMonth() - set the month field (0-11).
  • setSeconds() - sets the seconds(0-59).
  • toString() - converts a date to a string.
  • toUTCString() - converts a date to a string, expressed in universal time.
  • Date.parse() - converts a date and time to a millisecond representation. Always used with the global Date object rather than a custom Date object.

A cookie is a small piece of data that is stored by the Web browser and linked to a specific Web site or Web page. Cookies allow browsers to maintain state; that is, they allow browsers to "remember" certain pieces of data for a specified amount of time.

You can write new cookie data and retrieve data that you have set using JavaScript's document.cookie property. This property contains a string of name=value pairs separated by semi-colons. For instance, if you have set multiple cookies, each with one name=value pair, reading the document.cookie property produces a string of all of these cookies values:

login=Carrie; zip=94122

Note that when reading cookies, you only have access to cookies set from your own server or domain name.

Setting Cookies

To set a cookie with a name=value property, use the document.cookie property:

document.cookie="login=Scully";

// set the value to a user input variable
document.cookie="login=" + username;

In addition to name=value pairs, cookies can contain 4 optional attributes: expires, path, domain, and secure. If you do not set the expires attribute to a specific date, the cookie expires when the user ends the browsing session. When setting an expiration date, the date should be formatted using the Date.toGMTString() method.

// grab the current date
var myExpire = new Date();

// set the month to 6 months in the future
myExpire.setMonth(myExpire.getMonth() + 6);

//set the date to a GMT string format
myExpire.toGMTString();

//add the expires attribute to the cookie
document.cookie="login=" + username + "; expires=" + myExpire;

By default, cookies are accessible to the directory in which they were set and any subdirectories. To make a cookie accessible to other directories on the same server, use the path attribute. Setting the path attribute to "/" makes the cookie accessible to all directories on the server.

document.cookie="login=" + username + "; expires=" + myExpire + "; path=/";

Similarly, if you want to have a cookie be accessible to multiple subdomains, use the domain attribute.

Reading Cookies

As noted above, reading the value for the document.cookie property returns a string of all the name=value pairs associated with a particular page or site. In order to retrieve a specific piece of data from this string, you must search for the name=value pair, then extract the value using methods associated with the String object.


  • String.indexOf(substring) This method searches a string for an occurrence of a substring that you specify. The value returned is a number that indicates the position of the first character of the substring. If the substring is not located, the return value is -1.

  • String.indexOf(substring, start) Searches a string for a substring, but rather than searching from the beginning of the string, it searches from the start position you indicate. The value of this argument must be a number between 0 and the total number of characters in the string.

  • String.substring(start, end) Returns a portion of a larger string, defined by the position of the first character (start) and the position of the last character (end). The substring includes the start character but not the end character.
Example:

// search for the name of the cookie, 'login'
var initialPosition = document.cookie.indexOf("login=");

/* only continue if it finds the cookie name. If there is no cookie by that name, the value of the variable is -1 */
if (initialPosition != -1) {

//define the char position of the value
start = initialPosition + 6;

//define the char position of the end of the value
end = document.cookie.indexOf(";",start)

/* if it can't find a terminal semi-colon, set the end value to the end of the entire cookie */
if (end == -1) end = document.cookie.length;

//extract the value using the start and end positions
var userLogin = document.cookie.substring(start,end);
}