This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes What is Unobtrusive JavaScript? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "What is Unobtrusive JavaScript?" Watch "What is Unobtrusive JavaScript?" New topic
Author

What is Unobtrusive JavaScript?

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60804
    
  65

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Sergio Ramírez
Greenhorn

Joined: Nov 08, 2007
Posts: 12
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60804
    
  65

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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60804
    
  65

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.
Yehuda Katz
Author
Greenhorn

Joined: Jan 14, 2008
Posts: 21
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).
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: What is Unobtrusive JavaScript?
 
Similar Threads
How to hide a cell w/ background image until a function call
cache could speed-up IE rendering?
the enter key forces a submit
What is Obtrusive Javascript
Passing JSTL or EL as parameter in javaScript