As promised here are some concrete example of unobtrusive JavaScript, versatile and powerful tool if used properly. On Site / Blog Ryan Johnson you can download two very good example of unobtrusive JavaScript:
Ryan Johnson, in his script, the library uses Prototype , like many of the rest. He has also written some extensions to the relatively Prototype , then introduced - in a different form - in the latest version of the library.
Use Prototype to illustrate the operation of unobtrusive JavaScript code is generally more convenient - as we shall see later, however, here is a first example crude which requires no external libraries. We begin by recalling that the concept behind the unobtrusive JavaScript is to start from any HTML page (standard and not necessarily written by us - more important strong point) and use Javascript to make some changes.
Schematimamente the concept is to perform a function that parses the HTML, then traverses the DOM and in particular points to add or change functionality. Normally utilize two methods to execute Javascript code to load a page: the first is what you do not enclose the code in any function, and then let the browser execute code immediately uploaded to the point where the call appears:
The same result is obtained by including the code:
1
| "http://miosito.com/miocodice.js" >< / script > < script src = "http://miosito.com/miocodice.js"> </ script > |
However, when it must operate on the DOM of a page that it assumes a fully loaded, that all the TAG of the page is present and available to be tracked. So the best solution becomes the one to be sure that the page is complete. This is possible by engaging the onload event of body tag, for example, which is released when the page load is complete.
1
2
3
| miafunzione ; window. onload = myfunction;
/ / Or, which is the same
function ( ) { alert ( "Hello" ) ; } window. onload = function () {alert ("Hello");} |
Be avoided, of course, the canonical solution that would be an understatement to call it intrusive:
1
| "miafunzione()" > < body onload = "myfunction ()"> |
Another technique, more coarsely and equally intrusive (as it would force the end user to place the code in a particular spot), is to insert our script at the end of the document before the closing body tag, now obsolete technique and used in rare cases (see Google Analytics!).
Even better is to use the method below:
1
2
3
4
5
6
7
| window. addEventListener ) { if (window. addEventListener) {
"load" , miafunzione , false ) ; window. addEventListener ("load", myfunction, false) ¾ Í
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; window. attachEvent ("onload", myfunction) ¾ Í
{ Else {}
createSubMenus; window. onload = createSubMenusÍ ¾
} |
Even this piece of code is enclosed in a function. It will add an event listener for the load event of the window, calling our function miafunzione() . . Modern browsers such as FireFox for example, will use the function addEventListener() defined in DOM Level 2, while Internet Explorer will use its proprietary function attachEvent() . However we are not at perfection in this way, in fact, it will replace all - if any - onload events created by other scripts, which is not really "non-intrusive."
To resolve this issue quickly, that because of the different behavior of the browser would be least complicated to explain here, you should use as libreirie Prototype providing un'elengantissimo method to overcome the problem:
1
| window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello");}); |
The syntax is very obvious and spectacular! The advantage for those who had not understood, is that you can write:
1
2
| window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello 2");}); |
On loading the page will be shown before the alert "Hello 2" and then the alert "Hello 1". Basically you load in a FILO (First Last Input Output) a stack, while ensuring the execution of all events hooked to load the document exactly what was desired. In this way a page can load - virtually - endless unobtrusive JavaScript that hook to load the document.
But what can you do with this technique? Many interesting things. An example that we can comment (see also Prototype: the use of the double dollar sign ($ $) ) comes from Tobie Langel . With few lines of code and downloading libraries Prototype and Scriptaculous you can give a nice effect to the classic anchor of our pages. First create an HTML page with the following code:
1
2
3
4
5
6
7
8
| = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < a href = "# chapter 1"> Vai in Chapter 1 </ a > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... a lot 'of < p > </ p > .... just as an example "capitolo1" > Capitolo 1 < / h1 > < h1 id = "chapter 1"> Chapter 1 </ h1 > |
Include the page:
1
2
3
4
5
6
7
8
9
10
11
12
| "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "prototype.js" type = "text / javascript" charset = "utf-8"> </ script > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "utf-8"> </ script > "text/javascript" language = "javascript1.2" > < script type = "text / javascript" language = "JavaScript1.2"> Event.observe (window, 'load', function () { $ $ ('A [href ^ = #]: not ([href = #])'). Each (function (element) { element.observe ('click', function (event) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (element)) }) }) </ script > |
Thanks to "use Event.observe() function and two-dollar ($ $) you can easily modify the behavior of the classic anchor. In this case a new function is hooked to the HTML page loads. When taking the load event is traced all the links in the DOM (Tag <A>) with href that begins with a pound (#, excluding the one with only hash!). To these elements is a function attached to the click event, similar to what was done with the load of the document. At this point comes into play Scriptaculous which produces an effect of the scroll towards the element punatato from our link - modified!
More ...
Allowing users to interact with a Web page in recent years has produced a significant increase in the use of client-side scripting: Javascript code can respond in real time and manipulate a variety of information. The Web2.0 is the ultimate expression of this capacity for interaction, in which the end user - the user-to participate actively in the construction and 'evolution of the Web site, interacting with it and helping yourself. Is referred to as User-Generated Content (or UGC - user generated content) that sees the "navigator" definitely not passive!
To achieve this interaction, thus allowing the end user to add his contribution, we developed a series of techniques that have changed the appearance and behavior of Web pages (static until now, but now similar to the traditional applications of Desktop) in recent years. Change the content of a page, send files, giving their vote to a video or a document, register or change their personal data, are just some of the adaptions operations in many services (2.0 beta) on the Web
More ...
Latest Comments
Subject : very helpful indeed! I tried it and it is just what I needed. Now I wonder how do I get ...
vik : With strategic help!
Pepper : Hi there, I do not know if you're one of the creators of the WP plugin Bannerize. I have spotted a ...
Rosanna : Can anyone tell me how do I delete the Snap Shots window that opens automatically when I ...
blessed Maresca : I can not download any skypemote me spiegaaa