Unobtrusive JavaScript | Targetprocess - Visual management software

One of the latest trends in client-side development is the unobtrusive JavaScript. This trend is very good, since it extends separation of concerns. Several years ago the same happened with CSS. Web designers used FONT tag, BGCOLOR attribute and other visual style representation HTML elements extensively. Pages were bloated with style elements and style change was a real pain.

CSS changed that completely. It separated document structure from presentation and modern web designers likely do not know what FONT tag was designed for. While CSS separates presentation from document structure, unobtrusive JavaScript separates behavior from the structure.

There are quite many frameworks and techniques that enable unobtrusive JavaScript, but jQuery on my opinion is one of the best. It supports Unobtrusive JavaScript nicely and very elegant by itself.

Inline JavaScriptUnobtrusive JavaScript
Have you rjavascript:void(0)
Publish Postead our
<a href="javascript:window.open(
'terms.html', 'popup',
'height=500,width=400,toolbar=no'
);">terms and conditions</a>?
Have you read our
<a href="terms.html"
  class="sidenote" >terms and conditions</a>?

jQuery(function($) {
  $('a.sidenote').click(function() {
    var href = $(this).attr('href');
    window.open(href, 'popup',
    'height=500,width=400,toolbar=no');
    return false;
  });
});

You may decide that the second way is more verbose, but it does not matter in general. You will have all handlers in a single place, they will be quite similar and document structure will not suffer from tons of inline javascript.

You can subscribe to our monthly newsletter here:

Thank you!

Сheck out latest blog posts:

Get Started for free

Manage complex work, projects and products with Targetprocess

Enter your email
By clicking "Continue", you acknowledge and agree that we will process your personal data in accordance with our Service Privacy Policy and Terms of Service.

We’ve sent you a confirmation e-mail — please, go check it.

Live product demo

With our product specialist Ksenia