Upload
dan-previte
View
216
Download
0
Embed Size (px)
Citation preview
8/14/2019 Be Pure. Be Vigilant. Behave.
1/7
be pure
be vigilantbehave
be pure
separation
progressiveenhancement
structurepresentationbehaviour
content
HTMLCSS
JavaScript CSS
DOM
p { }
document.getElementsByTagName("p")
english
lolcat
get all the p elements
i can has p elementz?
CSS
DOM
#foo { }
document.getElementById("foo")
8/14/2019 Be Pure. Be Vigilant. Behave.
2/7
CSS
DOM
#foo p { }
document.getElementById("foo").getElementsByTagName("p")
example
adactio.com
About this site
...
Customise...
This is the plain vanilla look.
8/14/2019 Be Pure. Be Vigilant. Behave.
3/7
functiontoggleExtras() {
varsidebar = document.getElementById('extra');
varheaders = sidebar.getElementsByTagName('h3');
for (vari=0;i
8/14/2019 Be Pure. Be Vigilant. Behave.
4/7
Your rating
**********
*****
function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
varopts = obj.getElementsByTagName('option');
for (vari=0; i
8/14/2019 Be Pure. Be Vigilant. Behave.
5/7
behaveajax ajaxcommunicating with theserver without refreshingthe whole page.
ajaxxmlhttprequest
hijax
xmlhttprequest
progressiveenhancement
examplerapha.cc
8/14/2019 Be Pure. Be Vigilant. Behave.
6/7
document.getElementById('product-form').onsubmit =
function() {
vardata = '';
for (vari=0; i
8/14/2019 Be Pure. Be Vigilant. Behave.
7/7
whats happening?
what happened?the back button
bookmarking
beyond the browser