Download
eca 225 n.
Skip this Video
Loading SlideShow in 5 Seconds..
ECA 225 PowerPoint Presentation

ECA 225

183 Vues Download Presentation
Télécharger la présentation

ECA 225

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. ECA 225 AppliedOnline Programming DHTML Example ECA 225 Applied Interactive Programming

  2. DHTML Example: Avalon • hypothetical web page – Avalon Books • the word “Avalon” appears at the top of the page • “Avalon” descends to a certain point then stops • the word “Books” slides out from behind “Avalon”, moves a certain distance, then stops • 3 images appear at certain points on the page, one after another ECA 225 Applied Interactive Programming

  3. DHTML Example: Avalon cont … • page will contain 5 objects, each inside a <div> tag, each with a unique id • the word “Avalon” • the word “Books” • first image • second image • third image <div id="avalon" style="background-color:black; font-size:24pt; position:absolute; z-index:2; "> AVALON </div> ECA 225 Applied Interactive Programming

  4. DHTML Example: Avalon cont … • using DHTML we will: • place each object at specific coordinates on the page • set the stacking order of some of the objects • control visibility • move the objects a designated distance • page should be Cross Browser Compatible for NS4, NS6, NS7, IE4, IE5, IE6, Firefox ECA 225 Applied Interactive Programming

  5. CSS Review • absolute positioning • positioned in relation to the parent element • stacking order with z-index • the higher the number, the higher on the stack #elem1{ position:absolute; left:200px; top: 25px; } #elem1{ z-index: 3; } ECA 225 Applied Interactive Programming

  6. CSS Review cont … • visibility • an object can be hidden, but still take up space on a page • display • an object can be hidden and take up no space on the page #elem1{ visibility: hidden } #elem1{ display: none; } ECA 225 Applied Interactive Programming

  7. DOM Review • 3 major DOM’s are often incompatible • NS4 • uses a property called layersdocument.layers.avalon • IE • uses a property called alldocument.all.avalon • W3C • uses a method named getElementById( )document.getElementById( ‘avalon’ ) ECA 225 Applied Interactive Programming

  8. Cross Browser Compatibility • DHTML code must • determine which DOM the browser supports • run the correct code supported by that browser, without generating errors • 2 approaches • browser detection • object detection ECA 225 Applied Interactive Programming

  9. Browser detection • navigator.appName • returns the name of the browser • navigator.appVersion • returns additional information about the browser alert( navigator.appName) // returns “Microsoft Internet Explorer” alert( navigator.appVersion) // returns “4.0(compatible; MSIE 6.0; Windows XP)” ECA 225 Applied Interactive Programming

  10. Object detection • code to determine which DOM is supported • test which reference name is recognized • variables will contain true or false, which will be used in subsequent functions var NS4DOM = document.layers ? true : false; var IEDOM = document.all ? true : false; var W3CDOM = document.getElementById ? true : false; ECA 225 Applied Interactive Programming

  11. Object detection strategies • page branching • create separate pages for each browser • location.href loads a new URL into the browser if( NS4DOM ) location.href = “ns4_index.htm”; else if( IEDOM ) location.href = “ie_index.htm”; else if( W3CDOM ) location.href = “w3_index.htm”; ECA 225 Applied Interactive Programming

  12. Object detection strategies cont … • internal branching • each piece of DHTML code is enclosed in if statements if( NS4DOM ) var elem1 = document.layers.element1.left; if( IEM ) var elem1 = document.all.element1.style.left; if( W3CDOM ) var elem1 = document.getElementById(‘element1’).style.left; ECA 225 Applied Interactive Programming

  13. Object detection strategies cont … • API • Application Programming Interface • external file ( *.js ) that contains functions to resolve compatibility issues • link from web page to external file • do not place directly in root directory <script type="text/javascript" src="avalon.js"></script> ECA 225 Applied Interactive Programming

  14. API for Avalon • API will contain the following: • commands to determine which DOM is supported by the browser • a function to resolve the differences among each DOM and it’s way of referencing objects • a function to place objects at specific locations • a function to move an object • a function that returns the left value of an object • a function that returns the top value of an object • a function to hide an object • a function to make an object visible ECA 225 Applied Interactive Programming

  15. API for Avalon cont … • function to resolve references to objects var NS4DOM = document.layers ? true : false; var IEDOM = document.all ? true : false; var W3CDOM = document.getElementById ? true : false; function getObject(id){ if(NS4DOM) ref = "document.layers." + id; else if(IEDOM) ref = "document.all." + id; else if(W3CDOM) ref = "document.getElementById('" + id + "')"; var object = eval(ref); return object; } ECA 225 Applied Interactive Programming

  16. API for Avalon cont … • getObject( ) takes one parameter, the id of the object we want to reference • eval( ) method takes a string as an argument and creates a reference to the actual object • getObject( ) returns the reference to the object • eg, if we pass getObject the ‘avalon’ id W3CDOM returns document.layers.avalon IEDOM returns document.all.avalon W3CDOM returns document.getElementById(‘avalon’) ECA 225 Applied Interactive Programming

  17. Accessing CSS properties • different DOM’s reference properties in different ways NS4DOM object.left // returns 300 IEDOM object.style.left // returns 300px object.style.pixelleft // returns 300 W3CDOM object.style.left // returns 300px ECA 225 Applied Interactive Programming

  18. Accessing CSS properties cont … • to drop the ‘px’ use parseInt( ) NS4DOM object.left // returns 300 IEDOM parseInt(object.style.left) // returns 300 object.style.pixelLeft // returns 300 W3CDOM parseInt(object.style.left) // returns 300 ECA 225 Applied Interactive Programming

  19. Accessing CSS properties cont … • layering using z-index NS4DOM object.zIndex IEDOM and W3CDOM object.style.zIndex ECA 225 Applied Interactive Programming

  20. Accessing CSS properties cont … NS4DOM object.visibility = ‘show’ IEDOM and W3CDOM object.style.visibility = “visible” • visibility • display NS4DOM object.display = ‘hide’ IEDOM and W3CDOM object.style.display = “hidden” ECA 225 Applied Interactive Programming

  21. API functions • Placing objects • function to position each object on the page using left and top properties function placeIt(id, x, y){ var object = getObject(id); if(NS4DOM) object.moveTo(x, y); else if( IEDOM || W3CDOM ){ object.style.left = x; object.style.top = y; } } ECA 225 Applied Interactive Programming

  22. Web page functions • function named placeObjects( ) called from an onLoad event handler function placeObjects(){ placeIt("avalon",175,10); placeIt("books",175,10); placeIt("AB",230,40); placeIt("Fiction",5,5); placeIt("NFiction",475,5); moveAvalon( ); } ECA 225 Applied Interactive Programming

  23. API functions • Animating objects – uses 3 functions • function to move an object from its current position a specified distance function shiftIt(id, dx, dy){ var object = getObject(id); if(NS4DOM){ object.moveBy(dx, dy); } else if( IEDOM ){ object.style.pixelLeft = object.style.pixelLeft + dx; object.style.pixelTop = object.style.pixelTop + dy; } else if( W3CDOM ){ object.style.left = parseInt(object.style.left) + dx; object.style.top = parseInt(object.style.top) + dy; } } ECA 225 Applied Interactive Programming

  24. API functions • Animating objects – uses 3 functions • a function to find the value of the object’s left property function xCoord(id){ var object = getObject(id); if( NS4DOM ) xc = object.left; else if( IEDOM ) xc = object.style.pixelLeft; else if( W3CDOM ) xc = parseInt(object.style.left); return xc; } ECA 225 Applied Interactive Programming

  25. API functions • Animating objects – uses 3 functions • a function to find the value of the object’s top property function yCoord(id){ var object = getObject(id); if( NS4DOM ) yc = object.top; else if( IEDOM ) yc = object.style.pixelTop; else if( W3CDOM ) yc = parseInt(object.style.top); return yc; } ECA 225 Applied Interactive Programming

  26. Web page functions • function named moveAvalon( ) to move the object down the page a specified distance function moveAvalon(){ var y = yCoord("avalon"); if( y <= 275 ){ shiftIt("avalon",0,4); shiftIt("books",0,4); setTimeout("moveAvalon( )", 20); } else{ moveBooks( ); } } ECA 225 Applied Interactive Programming

  27. Web page functions • function named moveBooks( ) to move the object to the right a specified distance function moveBooks(){ var x = xCoord("books"); if( x <= 320 ){ shiftIt("books",4,0); setTimeout("moveBooks( )", 20); } else{ showObjects( ); } } ECA 225 Applied Interactive Programming

  28. API functions • Showing objects • 2 functions to change the visibility of an object function hideIt(id){ var object = getObject(id); if( NS4DOM ) object.visibility="hide"; else if( IEDOM || W3CDOM ) object.style.visibility="hidden"; } function showIt(id){ var object = getObject(id); if( NS4DOM ) object.visibility="show"; else if( IEDOM || W3CDOM ) object.style.visibility="visible"; } ECA 225 Applied Interactive Programming

  29. Web page functions • function named showObjects( ) to change the visibility property function showObjects(){ setTimeout("showIt('AB')",500); setTimeout("showIt('Fiction')",1000); setTimeout("showIt('NFiction')",1500); } ECA 225 Applied Interactive Programming