Comments on Behavioral Separation

by Jeremy Keith

57 Reader Comments

Back to the Article
  1. Hi, it’s usefull article, i will say thanks… :)

    Copy & paste the code below to embed this comment.
  2. If you liked the article and want to read more, definitely check out Jeremy’s book, DOM Scripting. He didn’t plug the book, and most people have heard of the book, but this article is a great example of what you can find in the book.
    -Chasen

    Copy & paste the code below to embed this comment.
  3. I hate adding JS and it messing up my page and making it look horrid.

    It would be great to use this method and then link to a page saying how JavaScript is required to use a function for example.

    Have ordered the book :)

    Copy & paste the code below to embed this comment.
  4. The “Behaviour”:http://bennolan.com/behaviour/ library greatly simplifies this type of separation. Standard CSS selectors are used to apply javascript behavior. The image gallery separation example of the article condenses to this (not tested):

    var myrules =
    {
    '#imagegallery a' : function(element)
    {
    element.onclick = function(element){ return showPic(element); }
    }
    };
    Behaviour.register(myrules);

     

    Copy & paste the code below to embed this comment.
  5. Wow, this article makes a lot of sense, and gives me a new way of looking at things for web pages and web art. I am a little confused about the object module stuff, but you have sparked my curiousity enough with a more effecient way of doing things that I must learn more.

    Copy & paste the code below to embed this comment.
  6. Ted, you’re quite right about the Behaviour library. I especially like the motivation behind it. From the website:

    “It’s great to see public uptake of these technologies - but it worries me to see the influx of script tags and onclick attributes into webpages.”

    It’s also nice and lightweight.

    The usual caveats apply: make sure you understand the code, and be aware of any cross-browser issues. But yes, Behaviour is well worth checking out.

    Copy & paste the code below to embed this comment.
  7. It’s worth remembering that onLoad only fires when all elements of the page have loaded; on pages where there are many graphics, etc., there can be a substantial lag between when controls are loaded and when they become accessible.

    “Dean Edwards”:http://dean.edwards.name/weblog/2006/06/again#comment5338 has a cross-browser solution which should give this type of javascript code management an extra level of useability.

    Copy & paste the code below to embed this comment.
  8. Nice to see this technique explained in an ALA article. I have been using Behaviour for a little while and love it. It is nice to see an explanation of how to code it ” by hand”, so to speak.

    Copy & paste the code below to embed this comment.
  9. Thank you for this good article. It is well written and explains in a few words the reasons for switching to this “new javascript”.
    I enjoyed reading it as it is a topic I’m very interested in. For those interested, I wrote two Javascript “includes” (object in fact): an events manager, and a CSS styles manager; those can be found here:
    http://yves.gablin.club.fr/gablin.php?page=pc_javascript

    Yves.

    Copy & paste the code below to embed this comment.
  10. You don’t always have to do your separation at the client level if it’s more work than it’s worth. A shining example is the Ruby on Rails framework which produces seemingly nasty inline JS hooks. It’s okay, though, because the code RoR generates for your is irrelevant in a management aspect, just as long as it works. This is because the generators already provide the separation for you. Setting up the generators to write the JS to a main [removed] tag just for the asthetics would be pointless.

    Copy & paste the code below to embed this comment.
  11. I’ve read the Bible. (Twice!) Doesn’t even come close to this!

    Copy & paste the code below to embed this comment.
  12. This must be the greatest piece ever written in the history of mankind.

    Copy & paste the code below to embed this comment.
  13. I don’t know (cause I can’t read) but this could well be one of the best articles ever written.

    Copy & paste the code below to embed this comment.
  14. Greatest article ever.

    Copy & paste the code below to embed this comment.
  15. Hi. It’s a useful article. Thank you.

    Copy & paste the code below to embed this comment.
  16. Hi. Useful article. Thanks.

    Copy & paste the code below to embed this comment.
  17. Great stuff.

    Copy & paste the code below to embed this comment.
  18. Great stuff.

    Copy & paste the code below to embed this comment.
  19. I liked this one.

    Copy & paste the code below to embed this comment.
  20. Super duper macho mucho!

    Copy & paste the code below to embed this comment.
  21. Really great.

    Copy & paste the code below to embed this comment.
  22. Just great.

    Copy & paste the code below to embed this comment.
  23. I think we will win this battle called web standards with great people like you Jeffrey.

    Copy & paste the code below to embed this comment.
  24. “How the Web will Be Won” by Daniel L:

    1. Time vs. Money. Though the people who are trying to ruin the web have a lot of money. We have more time than they’ll ever have.

    2. Stamina vs. Money. After a few years of struggle people who are only in things for the money tend to give up if they meet strong and persistent resistance. Thus, we must never stop harassing these people for longer than a short time (like 10 hours).

    3. Simplicity vs. Money. Money bastards will not simplify the world because common knowledge is not desirable from a business perspective. Thus, we must make it simpler, while they will continue to complicate things.

    Copy & paste the code below to embed this comment.
  25. “How the Web will Be Won” by Daniel L:

    1. Time vs. Money. Though the people who are trying to ruin the web have a lot of money. We have more time than they’ll ever have.

    2. Stamina vs. Money. After a few years of struggle people who are only in things for the money tend to give up if they meet strong and persistent resistance. Thus, we must never stop harassing these people for longer than a short time (like 10 hours).

    3. Simplicity vs. Money. Money bastards will not simplify the world because common knowledge is not desirable from a business perspective. Thus, we must make it simpler, while they will continue to complicate things.

    Copy & paste the code below to embed this comment.
  26. Rad wrote:

    bq. You don’t always have to do your separation at the client level if it’s more work than it’s worth. A shining example is the Ruby on Rails framework which produces seemingly nasty inline JS hooks. It’s okay, though, because the code RoR generates for your is irrelevant in a management aspect, just as long as it works.

    I respectfully disagree. It makes life easier for the developer at the expense of the user. Ruby on Rails (in its current incarnation) will use inline event handlers tied to pointless internal links (href=”#”). This means that user-agents that aren’t JavaScript capable get nothing, nada, zip. Far from being a shining example, this is the one glaring problem with RoR. It may be irrelevant, as you say, in a management aspect but it sucks for the person trying to use your application.

    Fortunately, the Ruby on Rails community is vibrant and responsible enough to “plug this hole”:http://opensource.agileevolved.com/trac/wiki/UnobtrusiveJavascript .

    Copy & paste the code below to embed this comment.
  27. Good to see an unobtrusive Javascript update to the image gallery script which I’ve used on several sites.

    A quick note: for readers trying to figure out what showPic is referencing at the end of the script, check out the original article Jeremy wrote two years ago.

    Copy & paste the code below to embed this comment.
  28. Thank you for the article. I’ve already seen this way of using CSS classes to get elements and modify them (i used it to make rounded image corners for blocks on my site).

    I simply put my function before </body> tag. Isn’t it a simplier way? You don’t need any images or flash objects to change DOM.

    Copy & paste the code below to embed this comment.
  29. Along the lines of Behaviour is “event:Selectors”:http://encytemedia.com/event-selectors/, which I’ve used for a recent project.  It follows the idea of Behaviour but eliminates some of the extra syntax you need.  Definitely worth checking out.

    Great article!

    Copy & paste the code below to embed this comment.
  30. I’d like to add that Dean Edwards script to add events on DOM load also avoids memory leaks in Internet Explorer, unlike the Simon Willison version which is recommended in the article.

    Similarly, I would recommend people looking into “Dean’s article on addEvent()”:http://dean.edwards.name/weblog/2005/10/add-event2/ (though I personally prefer Tino’s version).

    Copy & paste the code below to embed this comment.
  31. What a great, simple example of semantic markup goodness. Clean markup, looking great, doing something cool. Just perfect!

    Copy & paste the code below to embed this comment.
  32. Great article, but I found an article on SitePoint regarding “opening new windows in a standards-compliant way”:http://www.sitepoint.com/article/standards-compliant-world which uses the “rel” attribute rather than the CSS class in order to specify some behaviour.
    This neatly leaves out the javascript references in the HTML, but doesn’t conflict with any visual styles you want to apply to an element, so further separating style and behaviour.

    Copy & paste the code below to embed this comment.
  33. May I recommend the awesome “jQuery”:http://www.jquery.com/ library for all of your unobtrusive javascript needs. It is even lighter than Behavior and can get more done in fewer lines of code.

    Copy & paste the code below to embed this comment.
  34. I’ve given the unobtrusive javascript approach a shot in a few of my web applications, but in one particular app,  there was a *HUGE* DOM, and I needed to be able to add behavior to any arbitrary node. There was a noticeable lag when it walked the DOM @ load time, which is especially bad because the browser appears to be frozen during this time.

    In this case, I opted for the inline approach.  And for some of the <a

    Copy & paste the code below to embed this comment.
  35. Thanks for another great article on seperation.  This method has proven to be the way to go for web development.

    In response to people who have linked to Javascript libraries that utilize CSS selectors to access DOM objects, I’d like to mention that “Prototype 1.5”:http://dev.rubyonrails.org/browser/spinoffs/prototype now has a useful CSS selector function, $$().

    Prototype is the *original* Javascript library that others are dependant on. Behaviour, Script.aculo.us, and Event:selector, and Moo.fx are examples.

    As an illustration of the code, and demonstration of the power of Prototype, I’ve created a “demo of sorting a table”:http://www.deletem3.com/2006/04/01/sorting-a-table-with-javascript/ with the Javascript Prototype library and it’s CSS selector function.  The demo uses no inline Javascript or CSS.

    Copy & paste the code below to embed this comment.
  36. I’ve been using unobtrusive JS for about 2/2.5 years now. It’s actually what I did pretty much from the beginning after having learned XHTML/CSS and its advantages as well as the doctrine that is seperation. That was probably four years ago and whenever JS was added (I try to limit it’s use as much as possible) I added it through an external JS file.
    But I do have to say that I really appreciate your article, it’s especially good for all the people who think AJAX is the best think to happen. Ever.
    I hope some will learn the wrong of their ways, because if you’re paranoid like me then you’ve only got JS enabled on sites you trust.

    Copy & paste the code below to embed this comment.
  37. Quickly looking over your updated prepareGallery() function, wouldn’t the following revision of the ‘for’ loop be (slightly) more efficient?

    for (var i = 0, link; link = links; i++) {
    link.onclick = function() {
    return showPic(this);
    };
    }

    Personally, I find this format of iteration in JavaScript to be easier to follow too.  Just a thought…

    Copy & paste the code below to embed this comment.
  38. Using CSS selectors for javascript hooks is really unnecessary. The DOM makes it possible that you could even just look for the href’s and assign the proper function based on the href.

    An _imperfect_ example is here: “http://www.vestedventures.com/consulting/services.html”:http://www.vestedventures.com/consulting/services.html

    If javascript is not supported, the content is one long column, and the right hand links will jump to the section desired by anchor name. When javascript works, the javascript is parsed, and swaps the content to the proper screen. All javascript on this entire site is unobtrusive. (_Note:_ I am not claiming it is best possible way to do the things on the site, nor is it even pretty)

    However, I do agree that the method promoted in this article is better than much of what is on the web. It can be improved upon though.

    Do you want all links that begin with a different domain to open in a new window? check the indexOf the href for the domain, if it’s not in there, open a new window.

    Of course, if you are using a class to style the link, for instance all external links are a differnet color, then you could use that aspect of the anchor as your hook.

    But overall, use CSS selectors for presentation. Use the DOM and javascript for behavior.

    At least those are my $0.02 ;)

    Copy & paste the code below to embed this comment.
  39. Whoa there, Michael. I think you might be confusing CSS selectors with plain old attributes. These are CSS selectors:

    .myclass
    #myid

    These are attributes:

    class=“myclass”
    id=“myid”

    Now, CSS does use attributes like class and ID for its selectors, but that doesn’t mean that class and ID are tied to CSS. They are HTML attributes which means that they should be used to markup content as being uniquely identified or belonging to a certain group (class). These attributes existed before CSS.

    So, I’m not using any CSS selectors. I’m making use of the document’s semantic structure. This is very similar to what CSS does but CSS does not have exclusive rights to those attributes.

    Copy & paste the code below to embed this comment.
  40. Jeremy, I wasn’t trying to argue semantics…

    Typical use of the class atribute is for further use as a css selector.

    And again, I feel your suggestion is better than much of what is on the web.

    It’s just that if you use the attribute class as a javascript hook, you are blurring the lines between behavior and presentation, instead of separating those layers.

    Look not further than “this article”:http://www.alistapart.com/articles/scripttriggers/

    And javascript can be unobtrusive using other methods which may not be confusing to the anyone who has to edit the code later.

    That was my point.

    Copy & paste the code below to embed this comment.
  41. Michael wrote:

    “Typical use of the class atribute is for further use as a css selector.”

    That’s true, but don’t confuse “typical use” with “only use” or even “correct use”. The class attribute exists to add semantic meaning. It can be repurposed by CSS. It can also be repurposed by JavaScript and the DOM. Neither use is more correct than the other. Both are valid. Both are building on top of the inherit semantic value of the attribute.

    It’s not that I “use the attribute class as a JavaScript hook”, I *repurpose* the attribute class (or ID) as a JavaScript hook… or a CSS hook, depending on whether I’m trying to enhance behaviour or presentation.

    Classes (and IDs) aren’t owned by CSS. Neither are they owned by JavaScript—they belong to the markup. But both CSS and JavaScript can legitimately use them as hooks.

    I understand your point that one shouldn’t add *unnecessary* classes or IDs just for the sake of JavaScript, but that’s equally true of CSS: one shouldn’t (theoretically) add classes or IDs just to act as hooks for presentation (for the same reasons you cite).

    Copy & paste the code below to embed this comment.
  42. ...although I agree that this is far from new hotness. I’ve been _*attempting*_ do this for a few years now. I find that it helps me not rely on JS as a crutch. How many times have you made a page that wouldn’t work at all without a little JS? I’ve made more than my fair share.

    This method lets you design an entire site that just works. Then, once you are done with that, you can go back and dynamically add any behaviors. I’ve actually started treating CSS the same way, as it helps me use semantically correct markup to see everything un-styled…

    Copy & paste the code below to embed this comment.
  43. For those who want to know what else could you do with behaviour, I’ve utilized Behaviour to do form validation. It even has a quite “nice” balloon effect as notification mechanism. Further, I’ve add this behavioral validation into GTFW web framework, which made it support both server dan client validation. No fancy AJAX thing yet, but it indeed features graceful degradation. :)

    Introduction and demo URL can be found “here”:http://blog.neofreko.com/index.php/2006/05/03/even-nastier-behaviour-balloon-notification-effect/

    Copy & paste the code below to embed this comment.
  44. Great article.  However I would say that the benefit of separating content from style is all about making managing the underlying content easier. 
    All separation should answer these questions in the affirmative:
    Does it make my job as a web designer easier, so that I can go play outside before it gets dark.
    Will it make the job of the next person who touches the code easier, so that he/she doesn’t have to call me up and complain whilst I’m outside playing.

    Copy & paste the code below to embed this comment.
  45. The Article was very interesting and nice to read. From now on I will use this technique where its usefull.
    I like this idea of writing code.

    Thanks for that article.

    Copy & paste the code below to embed this comment.
  46. Even I don’t know much of Java, but this article gives me some ideas.

    Copy & paste the code below to embed this comment.
  47. As a long-time web developer, it’s great to see JavaScript finally maturing. It’s been just a hack for far too long. The web just gets more exciting every day!

    Copy & paste the code below to embed this comment.
  48. I love to make things prettier, I just can not believe I heard a guy say pretty anything , even still a great couple of tricks on how to spice up the pages. Has been along time since I did any work in javascript and on the next site I do use it I am going to have to give them a try, since most java scripts I make are ugly.

    Copy & paste the code below to embed this comment.
  49. Jeremy wrote:

    bq. I respectfully disagree. It makes life easier for the developer at the expense of the user. Ruby on Rails (in its current incarnation) will use inline event handlers tied to pointless internal links (href=”?#”?). This means that user-agents that aren’t JavaScript capable get nothing, nada, zip. Far from being a shining example, this is the one glaring problem with RoR. It may be irrelevant, as you say, in a management aspect but it sucks for the person trying to use your application.

    Separating your JavaScript doesn’t solve this, it just makes it more natural. It’s quite easy to add a fallback URL in Rails.

    @<%= link_to_remote ‘Link’, { :url => ajax_url, :update => 'box' }, { :href => non_ajax_url } %>@

    And nothing is stopping you from using pointless internal links when your JavaScript is located in an external file or @[removed]@ tag. As for the plugin you linked to, I find it unneccessary as the JavaScript is already abstracted by the Rails. It also seems to invent a new selector language (@#my_funky_div:mouseover@) which really isn’t worth the trouble.

    Copy & paste the code below to embed this comment.
  50. I found this article extremely useful as I was not previously aware of the ability to remove inline event handlers in preference of this more elegant solution.

    I’d highly recommend Jeremy’s book on the subject for anyone who is familiar with JavaScript but new to this way of doing things:

    “DOM Scripting: Web Design with JavaScript and the Document Object Model”:http://www.friendsofed.com/book.html?isbn=1590595335

    Copy & paste the code below to embed this comment.
  51. A very nice article, I really like unobtrusive javascript,
    Thank you.

    Muhammad Hassan
    www.badrit.com

    Copy & paste the code below to embed this comment.
  52. A very nice article, I really like unobtrusive javascript,
    Thank you.

    Muhammad Hassan
    www.badrit.com

    Copy & paste the code below to embed this comment.
  53. This is such an excellent idea. After having read the original article, I bought the book, and have used this technique wherever possible since.

    Copy & paste the code below to embed this comment.
  54. Good to see an unobtrusive Javascript update to the image gallery script which I’ve used on several sites.

    Copy & paste the code below to embed this comment.
  55. I’m a relative css newbie… But I must say that this is very confusing to follow without seeing it all put together html and all. I know everyone here has tons of experience, but sample code (completed) really helps make the whole thing understandable.

    I could not find any file that shows how it would look finished. It seems a lot of these samples, beautifully annotated in pieces, but in the end… you’re left wondering, guessing, and not knowing exactly what to do.

    So while all the info is cool, the final big picture remains unclear to someone like me, with many years html experience, but not that much css. If anyone has a source html using this could you please let me know. much thanks!! and I really appreciate how everyone shares what they know. That is really wonderful.

    Copy & paste the code below to embed this comment.
  56. Nice topic Ted,
    Its open my eyes once again

    Copy & paste the code below to embed this comment.
  57. I appreciate the concept of unobtrusive JavaScript, I am constantly working on better techniques.  The question is, when it isn’t a simple example how do you handle the increased amounts of conditions and work that have to be done?

    First, the example of the store inventory and paginating through pages of items via AJAX.  In this example, an AJAX request would pull content for the container it would be loading into. Without JavaScript enabled, an HREF would request a the same template, but based on that request type would load additional files necessary for a full layout.  Does every framework identify for the user what the request type was (AJAX, XML, HTML) so that conditionals may be written in each template?  Is that the suggested solution in these situations?  It seems cumbersome, how do you go about overriding the potentially large number of hrefs you want to hijack?  Just apply a generic class to each?

    In addition to that, lately I have been writing a class to one of the main containers using JavaScript, such as ‘jsenabled’.  Children of that container that have elements or effects dependent on JavaScript have declarations styled against that class.  This works painlessly when your design is basic, but when you are working with a designer or client that likes complicated designs having to style things like a select box, then style its DHTML substitute starts to add a lot of work quickly.

    What are your thoughts and experiences on this?  I always seem to work out a solution, but I wanted to pick the brains of some of the experts on preferred practices.

    Copy & paste the code below to embed this comment.
  58. Sorry, commenting is closed on this article.