slide 42
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 42 of 81
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.
"