Introduction to Client Side Scripting

A Client Side Script is a program attached to a HTML page. Since Client side scripts are part of the HTML document, they run on the client computer after the HTTP request is fulfilled and the web page is loaded on the user's Internet browser. Client side scripting is often used to make sure that the user has entered valid data on a form. Innovative effects such as menus that pop up when the user's mouse hovers over a certain area on the web page, button-press emulation, and image and window pop ups are also programmed using client side scripts. Client side scripts can be useful, even indispensable, to developing a sound site. Although the scripts are usually used to perform simple tasks, client side scripting can get very complicated.

Many client side scripting languages are available and choosing the right one may pose an issue. Also, many Internet Browsers are on the market - Internet Explorer, Netscape, Opera, AOL's proprietary browser, and so on. These browsers do not interpret client side scripts uniformly; the exact same script causes a bewildering array of reactions. For this reason, many web developers are faced with the arduous task of coming up with cross-browser scripts. Cross browser scripts first determine the brand of the browser into which the page is getting loaded and then execute parts of the script that are relevant to that browser. Other developers compromise and simply write their scripts for the most prolific browser - Microsoft's Internet Explorer. Statistics show that IE leads the browser market with an 80% share. Firefox by Mozilla is second with around 13%.

In this tutorial, we will learn to write Client Side Programs in a language called Javascript. We will write our scripts to work on Internet Explorer with a couple of cross browser exercises thrown in here and there. Javascript is a powerful, flexible leading client side scripting tool. Although it contains the usual functions that manipulate numbers, strings, and so on, its real strength as a client side scripting tool is derived from its use of the HTML DOM or Document Object Model.

An object oriented model looks upon all entities as objects. An entity is contained in another object and may itself contain many 'smaller' objects, just like in real life. For example, a cupboard is an object. It is contained in a room - a larger object - and it contains shoes, umbrellas, and coats. Objects have properties. A cupboard may have a color property, a size property, and perhaps a used-for-storing-what property. Events happen to objects. A cupboard for instance, may have an 'open' event, a 'close' event, an 'item added' event, and so on. Also, objects may have a sequence of actions performed on them to some end. These sets of actions are referred to as methods.

The HTML DOM's top level object is the the entire browser window and the web page the window contains. Every HTML element becomes part of this object. Using Javascript's syntax to access the HTML DOM, developers may manipulate just about any element on the HTML page. Important things to learn include Javascript syntax, the place where each object falls in the DOM hierarchy, and the right way to refer to elements in the DOM. Using Javascript and the DOM to manipulate HTML elements is often referred to as DHTML or dynamic HTML. This is not a new markup language. The effect of using Javascript with the DOM sometimes makes HTML pages seem so responsive to user actions that they feel dynamic; hence DHTML.

Figure 5a: The Javascript DOM

Figure 5a is a representation of the HTML DOM. As you can see, the largest object is the window object. The window object may be referred to as frame, self, top, or parent, depending on the situation. For example, if Window B pops up from window A, the Javascript code 'parent.location.href' somewhere in the source of Window B would refer to the active URL of Window A, its parent. on the other hand, 'self.location.href' would refer to Window B's own URL.