Main Points
- Unobtrusive Javascript Example 1 Demonstrates an unobtrusive script in action.
- Skip to Main Points links return to the Main Points menu.
Unobtrusive Javascript Example 1
This page calls a Javascript file. The onmouseover events which the div in red responds to is in the Javascript file, not this html document.
//Call the Breakout function when user mouses over div1
document.getElementById("div1").onmouseover=Breakout;
document.getElementById("div1").onmouseover=Breakout;
Therefore the script tags must come at the end of the document. The script file is inserted at that point and won't work if the elements which they manipulate, like the div, have not been built yet.
This example causes a test alert box to fire when mousing over the div.
function Breakout() {
//throw a dialog box to show the function was triggered
alert("Me")
}
//throw a dialog box to show the function was triggered
alert("Me")
}
Me
Skip to Main Points
<-- Back to Javascript Play
Continue to 2. Change the Display on a Div-->