You may remember the old days before CSS when we were forced to mix stylistic markup with the document structure markup in our HTML pages. Developers were so sad to do such a thing.
The addition of CSS to our web development toolkits allows us to separate stylistic information from the document structure. It allows easing our document management as well as giving us the versatility to completely change the stylistic rendering of a page by swapping out different stylesheets.
Unfortunately, markup such as the following is still
all too common:
“But how would you instrument the button without the onclick attribute?”
Good question, consider the following change to the button element:
<button
type="button"
onclick="document.getElementById('X').style.color='red';">
Click Here
</button>
This declaration doesn’t mix style markup with structure but it does mix behavior with structure by including the JavaScript to be executed when the button is clicked as part of the markup of the button element.
For all the same reasons that it’s desirable to segregate style from structure within an HTML document, it’s as beneficial to separate the behavior from the structure.
This movement is known as Unobtrusive JavaScript (For example jQuery inventor has focused on achieving this separation). Unobtrusive JavaScript considers any JavaScript expressions or statements embedded in the <body> of HTML pages, either as attributes of HTML elements (such as onclick) or in script blocks placed within the body of the page, to be incorrect.
This movement is known as Unobtrusive JavaScript (For example jQuery inventor has focused on achieving this separation). Unobtrusive JavaScript considers any JavaScript expressions or statements embedded in the <body> of HTML pages, either as attributes of HTML elements (such as onclick) or in script blocks placed within the body of the page, to be incorrect.
“But how would you instrument the button without the onclick attribute?”
Good question, consider the following change to the button element:
<button type="button" id="testButton">Click Here</button>Here it is simpler but the button doesn’t do anything!
Rather than embedding the button’s behavior in its markup, we’ll move it to a script block in the <head> section of the page, outside the scope of the document body, as follows:
<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('X').style.color = 'red';
}
</script>
We place the script in the onload handler for the page to assign make-ItRed() function to the onclick attribute of the button element. We add this script in the onload handler because we need to make sure that the button element exists before we attempt to manipulate it.
Unobtrusive JavaScript doesn’t come without its price, though a powerful technique to further add to the clear separation of responsibilities within a web application. It took a few more lines of script to accomplish our goal than when we placed it into the button markup. Unobtrusive JavaScript not only may increase the amount of script that needs to be written, but also requires some discipline and the application of good coding patterns to the client-side script. Otherwise, Unobtrusive JavaScript remains the best way to follow when dealing with JavaScript scripting.
How to encourage this blog if you like it:
- Promote our sponsors;
- Add any kind of comment or critic;
- Ask me directly by email if you prefer.
I am 
