xp tutorial 11 new perspectives on html, xhtml, and dhtml, comprehensive 1 working with objects...
TRANSCRIPT
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
1
XP
Tutorial 11
Working with Objects
Creating an Animated Web Page
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
2
XPObjectives
• 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
3
XPObjectives
• Modify an object’s properties• Apply a method to an object• Create a cross-browser Web site using
object detection
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
4
XPObjectives
• Work with the style object to change the styles associated with an object
• Write functions to apply positioning styles to an object
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
5
XPObjectives
• 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
6
XPIntroduction 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
7
XPIntroduction 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
8
XPIntroduction 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
9
XPUnderstanding 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
10
XPExploring 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
11
XPExploring 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
12
XPExploring 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
13
XPExploring the Document Object Model
• Development of a Common DOM
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
14
XPExploring 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
15
XPExploring the Document Object Model
• The document tree
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
16
XPReferencing Objects
• A DOM can be used by any scripting language including JavaScript and Java
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
17
XPReferencing Objects
• Object Names– Each object is identified by an object name
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
18
XPReferencing 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
19
XPReferencing Objects
• Working with Object Collections– Objects are organized into arrays called object
collectionsdocument.collection
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
20
XPReferencing Objects
• Working with Object Collections
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
21
XPReferencing 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”)
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
22
XPReferencing Objects
• Referencing Tags– Internet Explorer DOM
document.all.tags(tag)
document.all.tags(tag)
– W3C DOMsdocument.getElementsbyTagName(“tag”)
document.getElementsbyTagName(“p”)[0]
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
23
XPWorking with Object Properties
• The syntax for setting the value of an object property isobject.property = expression
• Exampledocument.title = “Avalon Books”
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
24
XPWorking with Object Properties
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
25
XPWorking with Object Properties
• Some properties are read-only
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
26
XPWorking with Object Properties
• Storing a Property in a Variablevariable = object.property
• Using Properties in a Conditional Expressionsif(document.bgColor==“black”) {
document.fgColor=“white”
} else {
document.fgColor=“black”
}
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
27
XPWorking with Object Methods
object.method(parameters)
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
28
XPCreating 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
29
XPCreating a Cross-Browser Web Site
• Using Browser Detection– Using browser detection, your code determines
which browser (and browser version) a user is runningnavigator.appName
– Most browser detection scripts – commonly known as browser sniffers – use this property to extract information about the version numbernavigator.uerAgent
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
30
XPCreating 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;
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
31
XPCreating 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
32
XPCreating a Cross-Browser Web Site
• Employing Cross-Browser Strategies
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
33
XPCreating 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 commandlocation.href = url;
– A second cross-browser strategy is to use internal branching
– Most web developers apply a third cross-browser strategy
• Application programming interface or API
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
34
XPCreating a Cross-Browser Web Site
• Employing Cross-Browser Strategies
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
35
XPWorking with the style Object
• The syntax for applying a style isobject.style.attribute = value
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
36
XPWorking with the Style Object
• Setting an Element’s Position
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
37
XPWorking with the style Object
• Positioning Properties in the IE DOM
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
38
XPCreating the Positioning Functions for Avalon Books
• Example
function xCoord(id) {
object=document.getElementByID(id);
xc=parseInt(object.style.left);
return xc;
}
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
39
XPWorking 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
40
XPWorking with Event Handlers
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
41
XPWorking with Event Handlers
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
42
XPWorking with Event Handlers
• Running JavaScript Commands as Links <a href=“javascript.script”>content</a>
• Using the onLoad Event Handler
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
43
XPAnimating an Object
• Working with Time-Delayed CommandssetTimeout(“command”, delay);
timeID = setTimeout(“command”, delay);
clearTimeout(timeID);
clearTimeout();
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
44
XPAnimating an Object
• Running Commands at Specified IntervalstimeID=setInterval(“command”,interval);
setInterval(“command”, interval);
clearInterval(timeID);
clearInterval();
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
45
XPAnimating 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; }}
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
46
XPControlling Layout for Different Monitor Resolutions
• Calculating the Size of the Display Windowwindow.outerWidth
window.outerHeight
window.innerWidth
window.innerHeight
document.body.clientWidth
document.body.clientHeight
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
47
XPControlling Layout for Different Monitor Resolutions
• Calculating the Size of the Display Windowdocument.documentElement.offsetWidth
document.documentElement.offsetHeight
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
48
XPUsing 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
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
49
XPUsing Path Animation
Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive
50
XPTips 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