slide 48
Copyright © 2005 W3C (MIT, ERCIM, Keio)
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 );
}
Go to previous slide Go to next slide Go to the first slide Go to the slide index Go to the PDF version
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.
"