in4mation ... organized

Master Javascript by Typing PART III

Page 1

A Summary of what we learned in last issue
In the second part of this tutorial we had a peek at what those perky little things named functions are all about. We saw the different ways of implementing functions in javascript.

OK ! Let's continue our trek through the land of Javascript.

CLASS III - Event Handlers

Understading the usage of Event Handlers is very important for successful implementation of functions. Event Handlers are keywords that can be incorporated into the HTML source code, and they are carried out when a particular event happens. These events can be anything like the complete loading of a page to the users hovering of mouse pointer over a predefined spot in the webpage. Event handlers contribute greatly towards creation of Dynamic Web Pages. All the event handlers in Javascript starts with on keyword.

<htmltag eventhandler = "code to be executed">

The htmltag part can be any valid html tag. The eventhandler part can be any event handler like onLoad, onUnload, onClick etc. The "code to be executed" part can be any javascript function or any piece of javascript code.

To get a better understanding of event handlers lets take a look at one of the examples we coded in last edition. In part - II of this article we coded an example which showed some information about the browser used by the client. We used a userdefined function called getClientBrowserInfo() for collecting the browser information. The function was called using the below given statement

<body onLoad="getClientBrowserInfo()">

Here the keyword onLoad is an event handler. It gets called when ever a page completes its loading in a browser. So in this case the function gets executed when the webpage is loaded completely.

Ok lets put the things that we learned about event handlers in to some practical useful code. We are going to put a preloader for our webpage using onLoad event handler & a little bit of javascripting. (A Preloader is a small piece of information or animation (usually fat free :-) shown to the user while the heavy duty web page loads in the behind. Preloaders are needed only for pages with a great amount of content in it)

function shPage()
//works when page is completely loaded.
document.all.d1.style.visibility = "hidden" //make preloader hidden
document.all.d2.style.visibility = "visible" //make original visible
<body onLoad="shPage()">
<div id="d1" style="position:absolute;top:300;left:350;border:2 green ridge;visibility:visible;color:blue;font-size:30">
<!-- Your Preloader Message here -->

<div id="d2" style="position:absolute;top:0;left:0;visibility:hidden">
<!-- Put Your Entire Site Inside this DIV
Place some heavy duty content like some heavy graphics or flash animation here in order to make the page a bit slow.