xp tutorial 4 new perspectives on javascript, comprehensive1 working with objects creating an...
TRANSCRIPT
Tutorial 4 New Perspectives on JavaScript, Comprehensive 1
XP
Tutorial 4
Working with Objects
Creating an Animated Web Page
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 3
XPObjectives
• Modify an object’s properties• Apply a method to an object• Create a cross-browser Web site using
object detection
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 5
XPObjectives
• 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• Create customized objects, properties, and
methods
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 13
XPExploring the Document Object Model
• Development of a Common DOM
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 15
XPExploring the Document Object Model
• The document tree
Tutorial 4 New Perspectives on JavaScript, Comprehensive 16
XPReferencing Objects
• A DOM can be used by any scripting language including JavaScript and Java
Tutorial 4 New Perspectives on JavaScript, Comprehensive 17
XPReferencing Objects
• Object Names– Each object is identified by an object name
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 19
XPReferencing Objects
• Working with Object Collections– Objects are organized into arrays called object
collectionsdocument.collection
Tutorial 4 New Perspectives on JavaScript, Comprehensive 20
XPReferencing Objects
• Working with Object Collections
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 23
XPWorking with Object Properties
• The syntax for setting the value of an object property isobject.property = expression
• Exampledocument.title = “Avalon Books”
Tutorial 4 New Perspectives on JavaScript, Comprehensive 24
XPWorking with Object Properties
Tutorial 4 New Perspectives on JavaScript, Comprehensive 25
XPWorking with Object Properties
• Some properties are read-only
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 27
XPWorking with Object Methods
object.method(parameters)
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 32
XPCreating a Cross-Browser Web Site
• Employing Cross-Browser Strategies
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 34
XPCreating a Cross-Browser Web Site
• Employing Cross-Browser Strategies
Tutorial 4 New Perspectives on JavaScript, Comprehensive 35
XPWorking with the style Object
• The syntax for applying a style isobject.style.attribute = value
Tutorial 4 New Perspectives on JavaScript, Comprehensive 36
XPWorking with the style Object
• Setting an Element’s Position
Tutorial 4 New Perspectives on JavaScript, Comprehensive 37
XPWorking with the style Object
• Positioning Properties in the IE DOM
Tutorial 4 New Perspectives on JavaScript, 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 4 New Perspectives on JavaScript, Comprehensive 39
XPAnimating an Object
• Working with Time-Delayed CommandssetTimeout(“command”, delay);
timeID = setTimeout(“command”, delay);
clearTimeout(timeID);
clearTimeout();
Tutorial 4 New Perspectives on JavaScript, Comprehensive 40
XPAnimating an Object
• Running Commands at Specified IntervalstimeID=setInterval(“command”,interval);
setInterval(“command”, interval);
clearInterval(timeID);
clearInterval();
Tutorial 4 New Perspectives on JavaScript, Comprehensive 41
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 4 New Perspectives on JavaScript, Comprehensive 42
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 4 New Perspectives on JavaScript, Comprehensive 43
XPControlling Layout for Different Monitor Resolutions
• Calculating the Size of the Display Windowdocument.documentElement.offsetWidth
document.documentElement.offsetHeight
Tutorial 4 New Perspectives on JavaScript, Comprehensive 44
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 4 New Perspectives on JavaScript, Comprehensive 45
XPUsing Path Animation
Tutorial 4 New Perspectives on JavaScript, Comprehensive 46
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