ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming DOM

ECA 225 Applied Interactive Programming2 DHTML  HTML  CSS  JavaScript  DOM  dynamically alter the style properties of a web page element by using JavaScript

ECA 225 Applied Interactive Programming3 Browser incompatibility  NN v. 4  “layers” to control positioning, stacking order, visibility  MSIE  Active X  visual filters

ECA 225 Applied Interactive Programming4 DHTML  advantages  supported in all major browsers since NN4 and IE4  standards are becoming consistent and open  can change content on the fly without having to return to the server  small file sizes  no plug-ins are required  easy to learn  since it’s client side, it’ relatively fast  disadvantages  incompatibilities among browsers and OS  picky syntax

ECA 225 Applied Interactive Programming5 Macromedia Flash  advantages  consistent across browsers and OS  ubiquitous – according to Macromedia, 95% of visitors have some form of plug-in installed  cool  small file sizes if created properly  disadvantages  hard to learn and create  expensive  fear of plug-ins  if created haphazardly, file sizes can be large

ECA 225 Applied Interactive Programming6 DOM  Document Object Model  structure and syntax to access any element / object  define an object by giving it a name or id  XHTML standards are phasing out “name” in favor of “id”  some older browsers do not recognize “id” for images  developers can use both “name” and “id”

ECA 225 Applied Interactive Programming7 DOM cont …  to access elements / objects, use dot notation  “node” – the address, using dot notation, of the element document.myForm.first_name.value;

ECA 225 Applied Interactive Programming8 DOM cont …  many HTML elements / objects are stored in a JavaScript array  3 images named image1, image2, image3 or document.images[ “image1” ]; document.images[ “image2” ]; document.images[ “image3” ]; document.images[ 0 ]; document.images[ 1 ]; document.images[ 2 ];

ECA 225 Applied Interactive Programming9 DOM cont …  the same is true for elements in a form or document.myForm.elements[ 0 ] //refers to first_name document.myForm.elements[ 1 ] //refers to last_name document.myForm.elements[ “first_name” ] //refers to first_name document.myForm.elements[ “last_name” ] //refers to last_name

ECA 225 Applied Interactive Programming10 DOM cont …  browser support for a consistent DOM was lacking  the W3C created a standardized DOM  NN6 & NN7  IE5 & IE6  Safari  Opera

ECA 225 Applied Interactive Programming11 DOM – older browsers  NN4  first browser to support DHTML  created “layers” property  NN4 DOM not supported by subsequent releases of Netscape Navigator  IE4  closer to the recommended DOM  created “all” property  no longer supported by latest IE browsers

ECA 225 Applied Interactive Programming12 DOM – older browsers cont … NN4 IE This is myLayer1. document.layers.myLayer1 ~~~ or ~~~ document.layers[ “myLayer1” ] document.all.myLayer1 ~~~ or ~~~ document.all[ “myLayer1” ]

ECA 225 Applied Interactive Programming13 DOM – W3C standard  access any HTML element in the browser  getElementById( ) method  pass the id of the element to be accessed  can be exact id, or variable document.getElementById( “myExample1” ) ; var theArg = “myExample1” ; document.getElementById( theArg ) ;

ECA 225 Applied Interactive Programming14 DOM – browser detection  check for browser support of the DOM if( document.getElementById ) { // code for later browsers } else if( document.all ) { //code for IE4 } else if( document.layers ){ // code for NN4 }

ECA 225 Applied Interactive Programming15 DOM & CSS  accessing style properties  access element, then style property  CSS properties are normally hyphenated  JavaScript does not allow use of hyphens  drop the hyphen, capitalize the next letter var theArg = “myExample1” ; var obj = document.getElementById( theArg ) ; alert( obj.style.zIndex ); zIndex

ECA 225 Applied Interactive Programming16 DOM & CSS cont …  browsers return values with “px” appended for properties such as “top” or “left”  use parseInt( ) to drop “px” var theArg = “myExample1” ; var obj = document.getElementById( theArg ) ; var myTop = parseInt(obj.style.top ) ; alert( myTop ); 200px

ECA 225 Applied Interactive Programming17 DOM & CSS cont …  XHTML standards require that all style values be assigned as strings, not numbers  to change numeric value to string  concatenate  quotes document.getElementById("myLayer1").style.top = 50 + “px”; document.getElementById("myLayer1").style.top = "50";