JavaScript Objects

Browser Object
When a JavaScript enabled browser loads a

web page, the browser automatically creates a number of JavaScript objects that map to the DOM.
It is the DOM which provide JavaScript access

to the HTML objects that are contained in the web page.

Object Hierarchy
Navigator Plugin MimeType
Window Frame
History Anchor Applet Embed Document Form Location Layer Link Area

Image

Button Checkbox

FileUpload Hidden

Password Radio

Reset Submit

Select

Text Textarea

Option

JavaScript Objects
Object Name Its use To access information about the browser that is executing current script. To access a browser or a frame within the window. To access the document currently loaded into a window. To represent a URL. It can be used to create a URL object, access parts of a URL, or modify an existing URL. To maintain a history of the URLS accessed within a window.

Navigator Window Document

Location
History

Event
4

To Event object provides constants that are used to identify events.

How a JavaScript enabled browser handles the Documents object. Any document (html page) can contain various HTML object such as

Images Image Maps Hyperlinks Frames Anchors Applets Multimedia objects such a audio files, streaming video files. A form with various form elements.

Browser creates one array in memory per HTML object in the document, thus registering each of these HTML objects.
if these HTML objects are actually contained in the HTML page then these arrays will hold indexed elements. Otherwise the array will exist, but will be empty.

Example: Form Element Array

Elements Text Textarea Radio Access to all the form elements in the form To access a text field of a form. To access a text area of a form. To access a set of radio buttons on the form or to access an individual radio button within the set.

Checkbox
Button Submit

To access a checkbox on a form.

To access a form button that is not a reset or submit button. To access a submit button on a form.

Reset
Select Option Password Hidden fileupload

To access a reset button on a form

To access a select list of a form. The option object is used to access the elements of a select list To access password field on a form To access a hidden object on the form To access a file upload elements of a form.
6

JavaScript Event Handlers

OnAbort onBlur onChange onClick onDbClick onDragDrop
The loading of an image is aborted as a result of user action. A document, window, frame set or form element loses current input focus. A text field, text area, file uploaded field or selection is modified and loses the current input focus. A link, client side image map area or document is clicked. A link, client side image map area or document is double clicked. A dragged object is dropped into widow or frame.

onError
onFocus onKeyDown onKeyPress

An error occurs during loading of an image, window or frame.

A document, window, frame set or form element receives the current input focus. The user presses a key. The user presses and releases a key.

onKeyUp
onLoad onMouseDown

The user releases a key.

An image, document or frame set is loaded. The user presses a mouse button.
7

JavaScript Event Handlers

onMouseMove onMouseOut onMouseOver onMouseUp onReset onResize onSelect onSubmit onUnload The user moves the mouse. The mouse is moved out of a link or an area of a client side image map. The mouse is moved over of a link or an area of a client side image map. The user releases a mouse button. The user resets a form by clicking on the forms reset button. The user resizes a window or frame. Text is selected in a text field or a text area. The user presses a forms submit button. The user exits a document or frame set.

PROPERTIES AND METHODS OF FORM ELEMENTS

The Text Element

Properties

Name Value

Methods

focus() blur() select()

focus() blur() select() Change()

Events

JavaScript provides the following event handler for the text objects event

onFocus() onBlur() onSelect() onChnages() Syntax:

<input type=text name=name of object value=Default-value> <input type=text name=txt_name value=18>

10

The Password Element

Properties

Name Value

Methods

focus() blur() select()

focus() blur() select() Change()

Events

JavaScript provides the following event handler for the password objects event

onFocus() onBlur() onSelect() onChnages() Syntax:

<input type=text name=name of object value=Default-value> <input type=text name=txt_userPassword value=>

11

The Button Element

Properties
Name Value

Methods
Click()

Events
Click()

JavaScript provides the following event handler for the button

objects event.
onClick()

Syntax:

<input type=button name=name of object value=buttonLabel> <input type=button name=btnCheck value=Verify>

12

The Submit Element

Properties
Name Value

Methods
Click()

Events
Click()

JavaScript provides the following event handler for the

Submit buttons event

onClick()

Syntax:

<input type=submit name=name of object value=buttonLabel> <input type=submit name=btnSubmit value=Send>

13

The Reset Element

Properties
Name Value

Methods
Click()

Events
Click()

The reset buttons JavaScript event handler is

onClick()

Syntax: <input type=reset name=name of object value=buttonLabel> <input type=reset name=btnCheck value=Verify>

14

The Checkbox Element

Properties
Name Value checked

Methods
Click()

Events
Click()

A checkboxs JavaScript event handler is:

onClick()

Syntax: <input type=checkbox name=name of object value=yes or no checked> <input type=checkbox name=employed value=Yes checked>

15

The Radio Element

Properties

Name Value Checked index Clicked()

Methods Events Clicked() A radio buttons JavaScript event handler is:

onClicked()

Syntax: <input type=radio name=RadioGroupName value=1 checked> <input type=radio name=numbers value=1 >1<br> <input type=radio name=numbers value=2 >2<br>

16

The TextArea Element

Properties

Name Value focus() blur() select() focus() blur() select() onFocus() onBlur() onSelect()

Methods

Events

The JavaScript event handlers of a text area are:

Syntax: < textarea name=MyTextArea Row=10 COLS=25 > <h3> Enter Data Here </h3> </textarea>

17

The Select and Option Element

Properties

Name Value selectedIndex Selected Text value focus() blur() Change() focus() blur() Change() onFocus() onBlur() onChange()

Methods

Events

The JavaScript event handlers of a text area are:

18

Object Referencing
A fully-qualified reference:
window.document.myForm.myButton.value

window (often suppressed) and document are predefined objects myForm and myButton are user-defined object names value is a property of the Button object (and most other form elements)

19