Transcript Working with Objects

Tutorial 11
Working with Objects
Creating an Animated Web
Page
Objectives




Define DHTML and describe its uses
Understand objects, properties,
methods, and the document object
model
Distinguish between different object
models
Work with object references and object
collections
Objectives





Modify an object’s properties
Apply a method to an object
Create a cross-browser Web site using
object detection
Work with the style object to change the
styles associated with an object
Write functions to apply positioning
styles to an object
Objectives





Insert event handlers to run a script in
response to an event
Place a JavaScript command in a link
Run timed-delay and timed-interval
commands
Work with the properties of the display
window
Describe the techniques of linear and
path animation
Introduction to DHTML



Developers began to look for ways to
create dynamic pages
New approach, in which the HTML code
itself supported dynamic elements
Known collectively as dynamic HTML,
or DHTML
Introduction to DHTML

Interaction of three aspects
• A page’s HTML/XHTML code
• A style sheet that defines the styles used in
•
the page
A script to control the behavior of elements on
the page
Introduction to DHTML

Some uses
• Animated text
• Pop-up menus
• Rollovers
• Web pages that retrieve their content from
•
external data sources
Elements that can be dragged and dropped
Understanding JavaScript
Objects



JavaScript is an object-based language
An object is any item associated with a
Web page or Web browser
Each object has
• Properties
• Methods
Exploring the Document Object
Model



The organized structure of objects and
events is called the document object
model, or DOM
Every object related to documents or to
browsers should be part of the document
object model
In practice, browsers differ in the objects
that their document object models
support
Exploring the Document Object
Model

Development of a Common DOM
• Basic model, or DOM Level 0
• Supported browser window, Web document,
•
•
and the browser itself
Development followed two paths: one
adopted by Netscape and the other adopted
by Internet Explorer
Internet Explorer DOM also provided for
capturing events
Exploring the Document Object
Model

Development of a Common DOM
• World Wide Web Consortium (W3C) stepped
in to develop specifications for a common
document object model
• DOM Level 1
• DOM Level 2
• DOM Level 3

A DOM can be used by any scripting
language including JavaScript and Java
Exploring the Document Object
Model

Development of a Common DOM
Exploring the Document Object
Model

Development of a Common DOM
• Within each DOM, particular features may not
•
be supported by every browser
Code should be compatible with
• Netscape 4
• Internet Explorer 5
• W3C DOM Level 1 and 2
Exploring the Document Object
Model

The document tree
Referencing Objects

Object Names
• Each object is identified by an object name
Referencing Objects

Object Names
• General form is object1.object2.object3…
• To reference the history you would use the
form
window.history
• For the body, you would use
document.body
Referencing Objects

Working with Object Collections
• Objects are organized into arrays called
object collections
document.collection
Referencing Objects

Working with Object Collections
Referencing Objects

Using document.all and
document.getElementById
• Not all elements are associated with an object
•
collection
Can reference these objects using their id
values
document.all[“id”]
document.all.id
document.getElementById(“id”)
Referencing Objects

Referencing Tags
• Internet Explorer DOM
document.all.tags(tag)
document.all.tags(tag)
• W3C DOMs
document.getElementsbyTagName(“tag”)
document.getElementsbyTagName(“p”)[0]
Working with Object Properties

The syntax for setting the value of an
object property is
object.property = expression

Example
document.title = “Avalon Books”
Working with Object Properties
Working with Object Properties

Some properties are read-only
Working with Object Properties

Storing a Property in a Variable
variable = object.property

Using Properties in a Conditional
Expressions
if(document.bgColor==“black”) {
document.fgColor=“white”
} else {
document.fgColor=“black”
}
Working with Object Methods
object.method(parameters)
Creating a Cross-Browser Web
Site

You can create this kind of code, known
as cross-browser code, using two
different approaches: browser detection
or object detection
Creating a Cross-Browser Web
Site

Using Browser Detection
• Using browser detection, your code
determines which browser (and browser
version) a user is running
navigator.appName
• Most browser detection scripts – commonly
known as browser sniffers – use this
property to extract information about the
version number
navigator.uerAgent
Creating a Cross-Browser Web
Site

Using Object Detection
• With object detection, you determine which
document object model a browser supports
var NS4DOM = document.layers ?
true:false;
var IEDOM = document.all ?
true:false;
var W3CDOM =
document.getElementByID ?
true:false;
Creating a Cross-Browser Web
Site

Employing Cross-Browser Strategies
• One strategy, called page branching, creates
•
separate pages for each browser along with
an initial page
A script determines the capabilities of the
user’s browser and automatically loads the
appropriate page
Creating a Cross-Browser Web
Site

Employing Cross-Browser Strategies
Creating a Cross-Browser Web
Site

Employing Cross-Browser Strategies
• To automatically load a page into a browser
based on the type of the browser detected,
use the command
location.href = url;
• A second cross-browser strategy is to use
•
internal branching
Most web developers apply a third crossbrowser strategy
• Application programming interface or API
Creating a Cross-Browser Web
Site

Employing Cross-Browser Strategies
Working with the style Object

The syntax for applying a style is
object.style.attribute = value
Working with the Style Object

Setting an Element’s Position
Working with the style Object

Positioning Properties in the IE DOM
Creating the Positioning
Functions for Avalon Books

Example
function xCoord(id) {
object=document.getElementByID(id)
;
xc=parseInt(object.style.left);
return xc;
}
Working with Event Handlers

An event handler is an attribute added
to an element that specifies a program to
be run in response to an event
Working with Event Handlers
Working with Event Handlers
Working with Event Handlers

Running JavaScript Commands as Links
<a href=“javascript.script”>content</a>

Using the onLoad Event Handler
Animating an Object

Working with Time-Delayed Commands
setTimeout(“command”, delay);
timeID = setTimeout(“command”,
delay);
clearTimeout(timeID);
clearTimeout();
Animating an Object

Running Commands at Specified
Intervals
timeID=setInterval(“command”,interv
al);
setInterval(“command”, interval);
clearInterval(timeID);
clearInterval();
Animating an Object

Animating the Avalon Books Web page
•
Example
Function moveAvalon() {
var y=yCoord(“avalon”);
if (y <= 260) {
shiftIt(“avalon”, 0, 10);
shiftIt(“books”, 0, 10);
setTimeout(“moveAvalon()”, 30);
} else {
// run moveBooks function;
}
}
Controlling Layout for Different
Monitor Resolutions

Calculating the Size of the Display
Window
window.outerWidth
window.outerHeight
window.innerWidth
window.innerHeight
document.body.clientWidth
document.body.clientHeight
Controlling Layout for Different
Monitor Resolutions

Calculating the Size of the Display
Window
document.documentElement.offsetWidth
document.documentElement.offsetHeight
Using Path Animation


Linear animation means that the
animation takes place over a straight line
Path animation means each set of
coordinates in the path is entered into an
array, and the animation moves point to
point
Using Path Animation
Tips for working with JavaScript
Objects and DHTML





If your code reuses the same object
reference, store the object in a variable
Place your customized functions in
external files
Use object detection
Use path animation and create
interesting visual effects
Break up your animated effects into
separate functions
The End