Three sheets to the Web
- Structure: XHTML
- Presentation: CSS
- Behaviour: JavaScript
A bad reputation
- Annoying pop up ads
- Annoying error messages
- Bad for accessibility?
Remember...
JavaScript doesn't kill websites...
People with JavaScript kill websites.
Lessons learned from CSS
- Gotta keep 'em separated
- External is better than inline (unobtrusive JavaScript)
- Graceful degradation
Someone open a window
<a href="javascript:window.open('page.html')">my page</a>
Awful!
Someone open a window
<a href="#" onclick="window.open('page.html')">my page</a>
Bad!
Someone open a window
<a href="page.html" onclick="window.open(this.href)">my page</a>
Better
Someone open a window
<a href="page.html" class="popup">my page</a>
Best!
Someone open a window
function doPopups() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
}
}
window.onload = doPopups;
The DOM is the glue
English
Get all the paragraph elements
CSS
p {
...
}
Document Object Model
document.getElementsByTagName("p")
The DOM is the glue
English
Get the element called "myID"
CSS
#myID {
...
}
Document Object Model
document.getElementById("myID")
Use the DOM wisely
- The DOM can add markup
- The DOM can add CSS
- Don't go crazy: use the right tool for the job
Browser support
- Pretty darn good
- Not like the old days... DHTML
JavaScript Image Gallery
Markup
<ul>
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
JavaScript Image Gallery
Markup
<ul>
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
JavaScript Image Gallery
JavaScript
function showPic (whichpic) {
if (!document.getElementById) return true;
document.getElementById('placeholder').src = whichpic.href;
return false;
}
JavaScript Image Gallery
Talk to me!
JavaScript Image Gallery
Inline event handlers
<ul>
<li><a href="images/andy.jpg"
onclick="return showPic(this)">Andy</a></li>
<li><a href="images/ian.jpg"
onclick="return showPic(this)">Ian</a></li>
<li><a href="images/doug.jpg"
onclick="return showPic(this)">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
JavaScript Image Gallery
Class-itis
<ul>
<li><a href="images/andy.jpg"
class="someclass">Andy</a></li>
<li><a href="images/ian.jpg"
class="someclass">Ian</a></li>
<li><a href="images/doug.jpg"
class="someclass">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
JavaScript Image Gallery
Unobtrusive JavaScript
<ul id="imagegallery">
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
JavaScript Image Gallery
English
Get all the links in the "imagegallery" element
CSS
#imagegallery a {
...
}
DOM
document.getElementById("imagegallery").getElementsByTagName("a")
JavaScript Image Gallery
Unobtrusive JavaScript
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
}
}
window.onload=prepareGallery;
JavaScript Image Gallery
It's good to talk
Best practices for the behaviour layer
- Separation
- Progressive enhancement
- Graceful degradation
- Unobtrusive JavaScript