Definition
“Unobtrusive JavaScript” is an emerging paradigm in the JavaScript programming language. Though the term is not formally defined, its basic principles are generally understood to include:
* Separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation (externalizing JavaScript Code–just like external css)
* Graceful degradation in browsers where the advanced JavaScript functionality will not work as desired
External JavaScript
For JavaScript to be unobtrusive it is essential that all .js files be external and linked from the bottom of the HTML body element.
<!-- ...Head... --> <body> <!-- ...site HTML content... --> <script type="text/javascript" src="scripts/global.js"></script> </body> |
Why in the Bottom of the Page?
Browsers generally load site content from the top to the bottom. JavaScript code, which may bind to elements on the page for event listening, requires the HTML to be loaded before it can be run effectively. This brings up the question of “why load it before any of the HTML?” You don’t need to load it before the HTML, so don’t. If your JavaScript files are loaded in the header, the images and other content in the page will have to wait to load until the js files are loaded–causing perceived performance degradation.
Reading
Read chapters 1-5, located toward the bottom of the page.