What is Unobtrusive Javascript?

Asked

Viewed 641 times

6

What is Unobtrusive Javascript and what its differential when writing Javascript functions in the HTML document?

javascript html dom
  • 2

    Although it seems a technical term (2 words between obtrusive and unobtrusive javascript), in fact do not consider, it is only lack of translation, would be: intrusive (or obstructive) and discrete (or unobtrusive). Similar to a situation I passed on the site where the author wrote "a new Feature", but Feature could be said as functionality, I commented then, but the author "countered" saying that Feature was a technical term, finally convinced him that not "necessarily".

3 answers

5


It is an evolution and expansion of When to use Graceful Degradation and when to use Progressive Enhancement? (I will not give details because there is well answered and in the background is what matters most). It is to make a code that does not interfere with the content and normal and basic use of the page if the JS or some feature of it is not available or works correctly in the environment that is running (probably the specific browser).

Then your JS code will be considered unobtrusive if it was done with care not to disable the use of the page in its essential condition partially or totally.

The differential is precisely to make the page accessible universally (not in the sense of meeting those who have any specific difficulty to see it). Today it is very common if you do not have the right browser in the right version among other features can not access relevant part of the site. This is because the code created an obstruction. You want people to be unable to use your site because you were not careful?

One of the techniques used is to separate well what is JS and what is HTML. But that alone doesn’t mean anything, because if it’s present, separate and running and still doesn’t work it’s obstructing.

3

It is the separation of HTML from Javascript code, or in other words, its page and its content should work without Javascript, hence the emergence of Unobtrusive Javascript.

Perks

  • Easier maintenance and refactoring
  • If your user can’t load Javascript for some reason, it won’t affect the experience so much
  • If any browser does not have any new Javascript functionality, it will not affect either
  • And accessibility, since some screen readers can disable Javascript

I recommend reading the article below, where I got the references.

Ref: What is Unobtrusive Javascript and Why it’s Important?

1

Still, to complement the knowledge base on the subject:

Non-intrusive javascript (unobtrusive javascript) suggests that HTML code be separated from javascript code, bringing organization, modularity, and greater ease in creating plugins. Instead of adding javascript code to events directly in the HTML elements, we build a simpler HTML, and add a javascript code that will observe when the event is triggered.

Example:

Instead of doing this:

<script>
   function exibeResultado(){
       // faz alguma coisa ...
   }
</script>

<button onclick="exibeResultado()">Exibir</button>

We can do this:

<script>
    // Quando a página for carregada
    $(function(){
         $("#btnExibir").click(function(){
               // faz alguma coisa ...
         }
     }
</script>

<button id="btnExibir">Exibir</button>

The example makes use of the jQuery library to define the behavior of clicking the button when the page is fully loaded.

Ref: http://blog.werneckpaiva.com.br/2011/03/ajax-com-java-script-nao-intrusivo-unobtrusive-ajax/

Browser other questions tagged javascript html dom

You are not signed in. Login or sign up in order to post.