xp tutorial 11 new perspectives on html, xhtml, and dhtml, comprehensive 1 working with objects...

Tutorial 11 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

Tutorial 11

Working with Objects

Creating an Animated Web Page

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

XPObjectives

• Modify an object’s properties• Apply a method to an object• Create a cross-browser Web site using

object detection

XPObjectives

• Work with the style object to change the styles associated with an object

• Write functions to apply positioning styles to an object

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

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

• 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

• 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

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

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

• 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

• 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

• Development of a Common DOM

• 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

• The document tree

XPReferencing Objects

• A DOM can be used by any scripting language including JavaScript and Java

• Object Names– Each object is identified by an object name

• 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

• Working with Object Collections– Objects are organized into arrays called object

collectionsdocument.collection

• Working with Object Collections

• 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 Tags– Internet Explorer DOM

document.all.tags(tag)

– W3C DOMsdocument.getElementsbyTagName(“tag”)

document.getElementsbyTagName(“p”)[0]

XPWorking with Object Properties

• The syntax for setting the value of an object property isobject.property = expression

• Exampledocument.title = “Avalon Books”

• Some properties are read-only

• Storing a Property in a Variablevariable = object.property

• Using Properties in a Conditional Expressionsif(document.bgColor==“black”) {

document.fgColor=“white”

} else {

document.fgColor=“black”

XPWorking with Object Methods

object.method(parameters)

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

• 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

• 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;

• 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

• Employing Cross-Browser Strategies

• 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

• Employing Cross-Browser Strategies

XPWorking with the style Object

• The syntax for applying a style isobject.style.attribute = value

XPWorking with the Style Object

• Setting an Element’s Position

XPWorking with the style Object

• Positioning Properties in the IE DOM

XPCreating the Positioning Functions for Avalon Books

• Example

function xCoord(id) {

object=document.getElementByID(id);

xc=parseInt(object.style.left);

return xc;

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

• Running JavaScript Commands as Links <a href=“javascript.script”>content</a>

• Using the onLoad Event Handler

XPAnimating an Object

• Working with Time-Delayed CommandssetTimeout(“command”, delay);

timeID = setTimeout(“command”, delay);

clearTimeout(timeID);

clearTimeout();

• Running Commands at Specified IntervalstimeID=setInterval(“command”,interval);

setInterval(“command”, interval);

clearInterval(timeID);

clearInterval();

• 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; }}

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

XPControlling Layout for Different Monitor Resolutions

• Calculating the Size of the Display Windowdocument.documentElement.offsetWidth

document.documentElement.offsetHeight

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

XPUsing Path Animation

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

xp tutorial 11 new perspectives on html, xhtml, and dhtml, comprehensive 1 working with objects...

Documents

learning html & dhtml

introduction to dhtml

xp tutorial 14 new perspectives on html, xhtml, and dhtml,...

dhtml notes.docx

dhtml - introduction introduction to dhtml, the dom, js...

seg3210 dhtml tutorial. dhtml dhtml is a combination of...

dhtml. what is dhtml? dhtml is the combination of several...

xp tutorial 5new perspectives on html, xhtml, and dhtml,...

netobjects fusion dhtml actions reference

dhtml & alphabet soup

taller xhtml y css3 - xhtml

dhtml and dom

accessible dhtml implementation

dhtml chapter2

praktikum dhtml

· xls file · web viewname the statement that helps the...

introducing xhtml: module b: html to xhtml

dhtml utopia - uenf

more basic xhtml module 2: xhtml basics lesson 2

how to dhtml (tutorial)