be pure be pure

be vigilant progressive
enhancement
behave separation

behaviour JavaScript
presentation CSS
CSS
p { }

structure HTML document.

content
getElementsByTagName("p")

DOM

english
get all the p elements
CSS
#foo { }

document.
i can has p elementz? getElementById("foo")

lolcat DOM
 CSS
#foo p { }
example
document.
getElementById("foo").
getElementsByTagName("p")
adactio.com
DOM

<div id="extra">
<div class="box">
<h3>About this site</h3>
<address class="vcard">
...
</address>
</div>
<div class="box">
<h3>Customise</h3>
<form method="get" action="/journal/">
...
</form>
<p>This is the plain vanilla look.</p>
</div>
</div>
function toggleExtras() { function toggleHeader(header) {
var sidebar = document.getElementById('extra'); var box = header.parentNode;
var headers = sidebar.getElementsByTagName('h3'); for (var i=0;i<box.childNodes.length;i++) {
for (var i=0;i<headers.length;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';
}
}

<p style="...">
example
be vigilant ratemyarea.com
<a href="javascript:...">

<a href="#" onclick="...">

<label for="review-rating">
Your rating
</label>
<select id="review-rating"
name="review-rating">
<option></option>
<option value="1" class="worst">*
</option>
<option value="2" class="bad">**
</option>
<option value="3" class="fair">***
</option>
<option value="4" class="good">****
</option>
<option value="5" class="best">*****
</option>
</select>

function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
var opts = obj.getElementsByTagName('option');
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var link = document.createElement('a');
li.appendChild(link);
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
ajax ajax
behave communicating with the
server without refreshing
the whole page.

ajax hijax
progressive
enhancement
xmlhttprequest xmlhttprequest

example
rapha.cc
 document.getElementById('product-form').onsubmit =
function() {
var data = '';
for (var i=0; i<this.elements.length; i++) {
data+=this.elements[i].name;
data+='=';
data+=this.elements[i].value;
data+='&';
}

var request = new XMLHttpRequest(); request.onreadystatechange = function() {

request.open('POST', 'basket-update.php', true); if (this.readystate == 4) {
request.setRequestHeader( if (this.status == 200) {
'Content-Type', document.getElementById('basket').innerHTML =
'application/x-www-form-urlencoded' this.responseText;
); }
request.send(data); }
}
beyond the browser
what’s happening?
what happened?
the back button
bookmarking