Be Pure. Be Vigilant. Behave.

be pure be vigilant

behave behaviour

JavaScript

presentation CSS

structure HTML

content

be pure

progressive enhancement

separation

CSS p { }

document. getElementsByTagName("p")

DOM

english

CSS

i can has p elementz?

document. getElementById("foo")

get all the p elements

lolcat

#foo { }

DOM

CSS #foo p { }

document. getElementById("foo"). getElementsByTagName("p")

DOM



example adactio.com

function toggleExtras() {

function toggleHeader(header) {

var sidebar = document.getElementById('extra');

var box = header.parentNode;

var headers = sidebar.getElementsByTagName('h3');

for (var i=0;i
for (var i=0;i
if (box.childNodes[i].nodeName != 'H3') {

headers[i].onclick = function() {

toggleDisplay(box.childNodes[i]);

toggleHeader(this); };

} }

}

}

}

function toggleDisplay(element) { if (element.style.display != 'none') { element.style.display = 'none'; } else { element.style.display = 'block'; } }

be vigilant

example ratemyarea.com

Your rating <select id="review-rating" name="review-rating"> * ** *** **** *****

function selectReplacement(obj) { obj.className += ' replaced'; var ul = document.createElement('ul'); ul.className = 'selectReplacement'; var opts = obj.getElementsByTagName('option'); for (var i=0; i
ajax ajax

behave

ajax xmlhttprequest

example rapha.cc

communicating with the server without refreshing the whole page.

hijax

progressive enhancement xmlhttprequest

document.getElementById('product-form').onsubmit = function() { var data = ''; for (var i=0; i
var request = new XMLHttpRequest(); request.open('POST', 'basket-update.php', true);

request.onreadystatechange = function() { if (this.readystate == 4) {

request.setRequestHeader(

if (this.status == 200) {

'Content-Type', 'application/x-www-form-urlencoded'

document.getElementById('basket').innerHTML = this.responseText;

); request.send(data);

} } }

beyond the browser

what’s happening? what happened? the back button bookmarking