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
