onLoad & onUnload
The load event handlers are great to work with. There are many different ways you can use them, and all are very useful and easy to implement. The two JavaScript function used in the example are fairly basic, although the first function, starttimer(), uses four DOM statements and two JavaScript object activations.
<html>
<head>
<script type="text/javascript">
var i=1
function starttimer() {
document.getElementById('h_one').style.position="relative";
document.getElementById('h_one').style.left=+i;
document.getElementById('h_two').style.position="relative";
document.getElementById('h_two').style.top=+i;
i++;
timer=setTimeout("starttimer()",10);
}
function stoptimer() {
clearTimeout(timer);
}
</script>
</head>
<body onLoad="starttimer()" onUnload="stoptimer()">
<h1 id="h_one">Header one</h1>
<h1 id="h_two">Header two</h1>
</body>
</html>
The JavaScript functions we’ve stated are relatively positioned. The value of this relatively positioned porton of the document is given in the I variable. Note that the increment operand (+) is used with the variable name. This increments the numeric value within the variable by one, changing the position of said page element.
It is extremely handy to be able to carry data from one page to the next without first sending that data to the web server to be stored, processed, and re-served for the next page. Using the onUnload event handler, you are able to attach a series of nested commands that allow you to store data such as user preferences in a cookie on the user machine and load from that cookie to format the next page on the fly through the use of the onLoad event handler.
|
