The Behaviour Layer

Using JavaScript for good, not evil

By Jeremy Keith

clear:left

Three sheets to the Web

A bad reputation

Remember...

JavaScript doesn't kill websites...

People with JavaScript kill websites.

Lessons learned from CSS

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

Browser support

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!

a web page and a script, unconnected

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

a web page and 2 scripts

Best practices for the behaviour layer

http://adactio.com/atmedia2005

Resources