CS114 Introduction to JavaScript Object

Model

1.0 Introduction to JavaScript Object Model

• To control the web browser window or the HTML document, you use the
JavaScript Object Model.

• The model is a hierarchy of JavaScript objects, each of which provides

programmatic access to a different aspect of an HTML page or the Web
browser window.

• You can use the methods and properties of objects in the JavaScript
Object Model to manipulate the window, frames, and HTML elements
displayed in the web browser.

7-1
Introduction to JavaScript Object Model CS114

• As seen from the model above, the window object is the top-level object.

• The window object represents a web browser window or an individual

frame within a window.

• The web browser automatically creates the Window object, and you can
use the its properties and methods to control the web browser window.

• Another important object is the document object that represents the HTML
document displayed in a window.

• The document object descends from the window object.

• The write( ) methods, with which you are familiar, refer to the document
object.

• The statement, document.write(‘Hello ’); adds the text ‘Hello’ to an HTML

document.

• The alert( ) and prompt( ) methods, with which you are familiar refer to
the window object.

• The statement, window.alert(‘This is a alert box’); and

window.prompt(‘This is a prompt window’); should be familiar to you by
now.

7-2
 CS114 Introduction to JavaScript Object
Model

2.0 What is an object?

• An object is a ‘thing’.

• It is usually visible on the screen.

• Examples of built-in objects include document, window, navigator.

• Examples of user-defined objects include forms.

• Objects contain 2 elements :

1) Variables or Properties

• Example appName is a property of ‘Navigator’ object

o written as , navigator.appName

• ‘href’ is an example of window.location object

o written as, window.location.href

2) Functions or Methods

• example alert( ) is an example of window object

o written as, window.alert( )

• example write( ) is an example of document object

o written as, document.write( )

7-3
 Introduction to JavaScript Object Model CS114

3.0 Window Object Properties

Property Description

defaultStatus Default text that is written to the status bar

document A reference to the Document object

frames[] An array listing the frame objects in a window

history A reference to the History object

location A reference to the Location object

parent The parent frame that contains the current frame

status A self-reference to the Window object - identical to

the window property.

top The topmost Window object that contains the current

frame

window A self-reference to the Window object - identical to

the self property.

Name The name of a window

7-4
 CS114 Introduction to JavaScript Object
Model

4.0 Window Object Methods

Method Description

alert( ) Displays a simple message dialog box

with an OK button.

blur( ) Removes focus from a window

clearTimeout( ) Cancels a timeout

close( ) Closes a window

confirm( ) Displays a confirmation dialog box with

OK and cancel buttons

focus( ) Makes a Window object the active

window open( ) Opens a new window

prompt( ) Displays a dialog box prompting a user

to enter information

setTimout( ) Executes a function after a specified

number of milliseconds have elapsed

5.0 Form Objects

Example of form related objects :

• Form
• Text
• Button
• Reset button
• Submit button
• Checkbox
• Radio button
• Select list
• Textarea

7-5
Introduction to JavaScript Object Model CS114

Form

Methods

reset( ) Clears any data entered into a form

submit( ) Submits a form to a web server

Example

document.myform.submit( )
document.myform.reset( )

7-6
CS114 Introduction to JavaScript Object
Model

Text (single-line)

Checkbox

7-7
Introduction to JavaScript Object Model CS114

Radio Buttons

Select Objects

7-8
 CS114 Introduction to JavaScript Object
Model

8.0 Bibliography

• JavaScript (Introductory) By Dan Gosselin

7-9