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:

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/jsref/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 1) count the number of key strokes so that dashes can be automatically inserted in a phone number or social security number, 2) to move the focus to the next text element if the maximum number of characters for this textbox is exceeded, or 3) to prevent the return key from causing a form to submit its contents to the server (more about this below)

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, you have access to two variables:
1. this: a pointer to the object on which the event occurred
2. event: a pointer to an object 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.

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 1) count the number of key strokes so that dashes can be automatically inserted in a phone number or social security number, 2) to move the focus to the next text element if the maximum number of characters for this textbox is exceeded, or 3) to prevent the return key from causing a form to submit its contents to the server (more about this below)
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

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.
  5. onkeypress: If the user hits the return key while in a text box, the browser generates an onsubmit event that causes the form's contents to be submitted to the server. This is generally not what users intend when they hit the return key. Normally they just want to terminate input to the text box, and perhaps move to the next form element, similar to what a tab would do. To stop the browser from generating the onsubmit event, you can use an event's preventDefault() method to stop the normal behavior for that event. For example, the following function will cause the focus to change to the next form element when I hit the return key in a text box, rather than causing the browser to fire an onsubmit event:
```
// 1) newFocusObject is the form element that should get the focus
// 2) the ascii code for the return key is 13
function changeReturnKey(event, newFocusObject) {
    if (event.keyCode == 13) { 
        event.preventDefault(); 
        newFocusObject.focus();
    }
}
...
html code for a text box
<form name="addr">
<input type="textbox" name="phoneNumber" size="12" maxlength="12" 
       onkeypress="changeReturnKey(event, document.addr.email)" />
<input type="textbox" name="email" size="20" maxlength="25" 
       onkeypress="changeReturnKey(event, document.addr.submitButton)" />
<input type="submit" name="submitButton"/>
</form>
	  
```
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: specified using the <button> tag
1. Types that can be specified using "type" attribute
  1. submit
  2. reset
  3. button
2. Making an image behave like a button: You can use the <img> to display an image and you can make the image behave like a button by associating an onclick event with it. This can be useful when you want your "buttons" to be icons, such as pictures of different tools.
3. Properties
  1. value: the label for the button. Can be dynamically changed.
4. Events
  1. onclick
Check Boxes
1. properties
  1. name: the name of the check box--remember to put [] after the name (e.g., proglang[]) if you are using the same name for multiple checkboxes. This will ensure that server side scripts like php can access the multiple selected values in the group
  2. value: the value transmitted to the server if this check box is checked when the form is submitted.
  3. defaultChecked: default checkbox for this group
  4. checked: true if the checkbox is selected and false otherwise. Javascript uses this property to control whether or not the checkbox is checked.
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 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 can check the group's value attribute. For example:
```
<head>
  <script>
    function printColor() { alert("color = " + document.Order.color.value); return false; }
  </script>
</head>
<body>
  <form name="Order" method="get" onsubmit='return printColor();'>
    Blue: <input type='radio' name='color' value='blue' checked="true"/> <br/>
    Red: <input type='radio' name='color' value='red' /> <br/>
    Yellow: <input type='radio' name='color' value='yellow'/> <br/>
    <input type="submit"/>
  </form>
</body>
```
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.