• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

What is Unobtrusive JavaScript?

 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Since the hot topic this week is jQuery, the subject of Unobtrusive JavaScript is bound to come up.

Long ago we all figured out how superior it was to move stylistic information out of the markup and into CSS styles. Abominations like the <font> tag were deprecated in HTML 4, and HTML 5 goes further to eliminate all such stylistic markup from HTML.

But even though we separate style from markup, it's still very common to see behavior mixed with the markup.

Unobtrusive JavaScript does for behavior, what CSS does for style -- removes it from the markup.

This has the same advantages. The markup defines the document structure, the CSS defines the styles, and the JavaScript defines the behavior.

Typically, the script is all sequestered into <script> blocks in the <head> and document ready handlers (described here) are used to initialize the page.

This keeps everything neat and tidy, and it's easy to know where to look for the behavioral aspects of the page.
 
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This sounds pretty cool indeed, it is obviusly taking in count JavaScript is becoming more serious than before(someone say it is a toy language).

Also i guess this is derivated from doing separation of concerns, for instance this sounds like the controller(the behavior of the view) to me, but i may be wrong, maybe it could be like the model(depending on the purpose of the behavior of course...)... not sure exactly... what do you think...?


Sergio
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A good example is in the establishment of click handlers. Rather than burying the behavior in the markup using the onclick attribute of a button, in the ready handler, you'd assign the handler using:


Typically, you could also see the handler defined inline using a function literal:



And, you are not limited to a single handler the way that you are with onclick. You can establish as many click handlers (or handlers for any other event type) as you like!
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't think this technique directly maps to the C or M of MVC, but it is an off-shoot of the principle of sequestering things logically and reaps many of the same benefits.
 
Author
Posts: 21
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Bear Bibeault:
I don't think this technique directly maps to the C or M of MVC, but it is an off-shoot of the principle of sequestering things logically and reaps many of the same benefits.



It's more similar to the separation of concerns that we see in HTML/CSS (which is accepted gospel at this point). Separating behavior from markup is the next, cleaner step after moving style out of markup.

And it has the same benefits of making your behaviors more maintainable (you can have a set of behaviors that are defined by selectors which work across your site, just like CSS).
 
reply
    Bookmark Topic Watch Topic
  • New Topic