i am dustin diaz

Behaviors and semantics and the classic unobtrusive popup

When learning unobtrusive JavaScript one of the core examples I nearly always come across is the classic popup demo without having to use inline JavaScript. Without a doubt, if you've looked into this semi-new wave of scripting outside the body, you may have seen something along these lines:

classic popup (bad)

<p>

  <a href='#' onclick="window.open('http://example.com',WinName,'width=300,height=300);">

    Glossary Term Lookup

  </a>

</p>

the "accessible" popup (better)

<p>

  <a href='http://www.example.com' onclick="window.open(this.href,WinName,'width=300,height=300);">

    Glossary Term Lookup

  </a>

</p>

the "unobtrusive" popup (best)

<p>

  <a href='http://www.example.com' class='popup'

    Glossary Term Lookup

  </a>

</p>

As you can see, in the first example, our information behind this glossary term will fail to be accessible if JavaScript is turned off. In the second example our glossary term will have a fall back if JavaScript is disabled and still open up an ordinary window instead of a popup. Finally in the third example we've removed the inline eventHandler and replaced it with a class name of "popup."

Semantics gone bad

The above example is all fine and dandy, but one thing JavaScript developers and early unobtrusive adopters have failed to recognize is the naming of our popup link. Albeit we've separated the behavior from the anchor element, we now have an unsemantic class name. In CSS, developers are often encouraged to veer from naming classes in the likes of bold or big or blueBox. Reason being, they convey presentation, and... that's bad (and lets refrain from arguing otherwise for the sake of this article). Likewise, for JavaScripts' sake, it's also a good idea to refrain from naming classes that convey behavior. Thus, in our popup example, the class name popup conveys behavior. So we may want to alter our unobtrusive popup example and make one final change to our html lest we decide to change the behavior of our popup class to do something else. Our final alteration should look more like this:

unobtrusive with semantics (better than best)

<p>

  <a href='http://www.example.com' class='glossaryTerm'

    Glossary Term Lookup

  </a>

</p>

Lesson Learned

This isn't a big deal. It's just something to keep in mind that as JavaScript development continues to grow, it's good to keep in mind semantics. It would be a bit silly having a class name of "popup" when later we decide to attach some toolTip effect to our links with a popup class attached to it.

All in all, it's just one more step toward learning to remove presentation and behavior from our markup layer.