Javascript 3

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

•

example write( ) is an example of document object o

7-3

written as, window.alert( )

written as, document.write( )

Introduction to JavaScript Object Model

3.0

CS114

Window Object Properties

Property defaultStatus

Description 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 : • • • • • • • • •

7-5

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

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

Model

Text (single-line)

Checkbox

7-7

Introduction

to JavaScript Object

Introduction to JavaScript Object Model

CS114

Radio Buttons

Select Objects

7-8

CS114

Introduction

Model

8.0

Bibliography •

7-9

JavaScript (Introductory) By Dan Gosselin

to JavaScript Object