Practical & Cultural Issues in Designing International Web Sites

slide 48

Don't forget your scripting

Separating content & presentation

function makeList () {

var headings = document.getElementsByTagName( 'h2' );

var div = document.createElement( 'div' );

div.style.cssFloat = 'right' ;

div.style.styleFloat = 'right' ;

div.style.width = '20%' ;

div.style.padding = '1em' ;

div.style.border = '1px solid teal' ;

div.style.backgroundColor = '#FFCC99' ;

div.style.fontSize = '90%' ;

div.style.margin = '1em' ;

div.style.color = '#996633;' ;

var title = div.appendChild(document.createElement( 'div' ));

title.style.fontWeight = 'bold' ;

title.appendChild(document.createTextNode( 'Tests on this page:' ));

for (i=0;i<headings.length;i++) {

var test = div.appendChild(document.createElement( 'p' ));

test.appendChild(document.createTextNode(headings[i].childNodes[0].data));

}

body = document.getElementsByTagName( 'body' )[0];

body.insertBefore( div, body.firstChild );

}

Slide 48 of 76

Note how we are adding style information directly to the DOM while running this script. This is really obvious in this example, since there is such a lot of it. It is particularly tempting to do this sort of thing if you just want to add a single style effect, such as bolding, to text.