References Used

• JavaScript Demystified: A Self-Teaching Guide by Jim Keogh. McGraw Hill, 2005.
• Javascript in 24 Hours by Michael Moncur. Sams Publishing, 2007.

Forms

• Javascript treats html forms and form elements as objects.

• Form objects can be accessed via a document's forms property.
  1. forms is an array and forms can be accessed either by numeric position or by name

• The form elements in a form are accessable via their element names.

• A form's value can be accessed via its value property

• The with statement allows you to specify the full name of an element once and then access its properties without repeating the full name. For example:

  with (document.forms.order) { alert("email address: " + email.value + '\n' + "name: " + name.value); }

Dynamically Changing Properties

• Why one might want to change properties
  1. highlight errors in a form
  2. fill in form elements from an address book
  3. enable/disable form elements

• The style object
  1. All html elements have a style property that returns a style object. The style object has many different settable properties, most of which correspond to the properties that can be defined in a cascading style sheet.

  2. A good reference for style properties that you can change can be found at http://www.w3schools.com/htmldom/dom_obj_style.asp.

  3. Example: An effective way to highlight errors in a form is to change the color of the erroneous form elements. Here is an example that changes the background color of a text box and the color of the text.

Events

• Events occur for a variety of reasons, such as clicking the mouse, pressing a key, or submitting a form.

• Javascript defines a variety of events and allows functions or a code snippet to be associated with each event.

• There are two types of events:
  1. input events occur as a result of a user interaction with an input device, such as a mouse or keyboard. The onClick and onMouseOver events are examples of input events.

  2. action events occur as a result of a user interaction with a form element. The onSubmit and onChange events are examples of action events.

• Why one defines events
  1. Validate input
  2. Rollovers e.g., provide information about an error, about a button, or what type of input is expected in a form element
  3. Warn a user that they are leaving a web site e.g., the national parks web-site alerts you when it takes you to lodging sites run by commercial vendors

• Here is a non-exhaustive list of javascript events, when they get triggered, and my comments about them:

  Event	When Triggered	Comments
  onload	When the page is loaded	Placed with the body tag
  onunload	When the browser switches to a new html page	Placed with the body tag. Might be used to warn the user that they are leaving the web-site.
  onclick	When the mouse is clicked over an object	typically used with a button, checkbox, or radio button
  onmousedown	When a mouse button is pressed while the mouse cursor is over an object	not commonly used
  onmouseup	When a mouse button is released while the mouse cursor is over an object	not commonly used
  onmouseover	When the mouse cursor moves onto an object	can be used for rollovers, which are not discussed in this class
  onmousemove	When the mouse cursor moves while over an object	very costly because each pixel move by the mouse gets reported--you would be unlikely to use this event
  onmouseout	When the mouse cursor leaves an object	used to restore an element or link to its original state after a rollover
  onfocus	When an object gains the focus	might be used to select the text in a textbox
  onchange	when an object loses the focus and its value has changed	useful with a textbox or menu
  onblur	When an object loses the focus	rarely useful since typically you would use onchange
  onkeypress	When a key is pressed and released	could be used to count the number of key strokes so that dashes can be automatically inserted in a phone number or social security number or so that the focus can be automatically moved to the next text element if the maximum number of characters for this textbox is exceeded
  onkeydown	When a key is pressed	rarely used
  onkeyup	When a key is released	rarely used
  onsubmit	When a form is submitted but before the form's contents are sent to the server.	The function should return true if the form's contents should be sent to the server and false if the form's contents should not be sent to the server (e.g., the form fails validation and the user needs to correct one or more entries)
  onreset	when the form is reset	return false if you do not want to reset the form
  onselect	when text is selected in a text field	used with a textbox

• When an event occurs, Javascript creates an object named "event" that contains information about the event. This object can be passed to a function. The properties of an event object are not consistent across browsers but they allow you to determine which button or key was pressed. You should consult an appropriate Javascript reference to determine which properties are defined for each browser.

Form Elements--Properties and Events

• Properties useful for all elements
  1. disabled: when true the element is disabled. The following example shows how to enable an email textbox only after a first and last name have been entered.

  2. title: when set to a string a pop-up box will appear with that string embedded in it when the mouse hovers over the element. The title box can be useful for telling the user the format of the expected input or what type of error has occurred.

• Text elements
  1. Properties
     1. name: name of the field
     2. value: value of the field
     3. defaultValue: default value for the field
     4. readonly: when true then the element is uneditable, even if it is enabled

  2. Events
     1. onFocus: occurs when the text field gains focus.
     2. onBlur: occurs when the text field loses focus, typically when the user clicks on another form element. You generally will want to use onChange rather than onBlur because typically you only want to process an element when its value has changed.
     3. onChange: occurs when the user edits text and moves out of the text field
     4. onSelect: happens when the user selects some or all of a text field--you cannot discover whether the entire text string has been selected or whether only a partial portion of the string has been selected.

  3. Useful methods
     1. select(): causes the entire string of text to be selected and highlighted--cannot specify a portion of the string nor can you put the cursor at a particular position

     2. focus(): causes a text field to get the focus--you might call this function after enabling a set of text fields with a radio button. In this case you might want the first text field in the group to get the focus.

• Buttons
  1. Types that can be specified using "type" attribute
     1. submit
     2. reset
     3. button
     4. img: you can make an image behave like a button by associating an onclick event with it.

  2. Properties
     1. value: the label for the button. Can be dynamically changed.

  3. Events
     1. onClick

• Check Boxes

  1. properties
     1. name: the name of the check box
     2. value: "true" if the box is checked; false otherwise (server uses this property)
     3. defaultChecked: default checkbox for this group
     4. checked: same as the value property (Javascript uses this one)
     5. class: there is no formal way to tell a form that several checkboxes belong to the same group but you can use the class attribute to create a informal group that can be used by Javascript to determine which checkboxes belong together.

  2. Events
     1. onClick

  3. Interesting methods
     1. click(): this method simulates a click on the checkbox

• Radio Buttons: They are pretty much the same as Check Boxes with the same events and methods. The interesting differences are:
  1. the name attribute is the same for all radio buttons in the same group
     1. the group name is the value of the name property
     2. the button objects are stored in an array that can be accessed via the group name
  2. the length property specifies the number of buttons in the group
  3. the value property gives the value of the radio button
  4. if you want to determine the value of the currently selected button in the group, you must traverse the array of buttons and find out which one is checked. For example:

     <form name="Order" method="get" onSubmit='printColor()'> Blue: <input type='radio' name='color' value='blue' checked/> Red: <input type='radio' name='color' value='red'/> Yellow: <input type='radio' name='color' value='yellow'/> </form> function printColor() { with (document.forms.Order) { for (index in color) { if (color[index].checked) my_color = color[index].value; } } alert("color = " + my_color); return false; }

  5. It is not a good idea to set the "checked" property of a radio button since Javascript does not automatically uncheck the previously checked radio button. Use the click method if you want to set a radio button.

• Menus
  1. Properties of a menu
     1. name: name of the menu
     2. length: number of menu items
     3. options: array of menu items--there is one object per menu item
     4. selectedIndex: the index of the currently selected menu item. If the menu allows multiple selections then this index indicates the first selected item in the array (i.e., if items 1 and 4 are selected, then selectedIndex will be 1, irregardless of whether item 1 or item 4 was selected first by the user).

  2. Properties of a menu item (i.e, an option item)
     1. index: its position in the menu
     2. defaultSelected: whether or not it's a default selection when the menu first appears
     3. value: the value of the menu item
     4. selected: whether or not the item is currently selected

  3. Events
     1. onChange: triggered when the user makes a new selection. Unfortunately, you cannot determine which item was selected or de-selected. Use the option item's onClick event if you want to determine what just happened.
     2. onFocus: triggered when the menu gains the focus
     3. onBlur: triggered when the menu loses focus, for example, by tabbing to the next element or by clicking outside the menu with the mouse. Typically you should use "onChange" rather than "onBlur".
     4. onClick (option item): You can use the onClick event if you want to determine which item just got selected/deselected.