|
The Day I Learnt JavaScript A hint of JavaScript on your Web page can create amazing results. And it's simple to use
Ok, let's say that one fine morning, you wake up and decide you want to have your own Web page. So you pick up some concerned book and read up all you can about HTML and stuff. But merely knowing HTML isn't going to get your site any rave reviews. One of the first problems that we have with traditional HTML is that it is a bit drab. Things on a typical Web page include normal text, hypertext, a few images and maybe a form for filling out. But everything is static and unchanging. To spruce up things, the animated GIF began to be supported by browsers. But the Big Kahuna for adding those bells-and-whistles to your page came with the advent of JavaScript.
Putting the D in DHTML
Know those sites where the image that links from the page lights up like a firefly when you take your cursor over it? Or stuff that moves around the page without your intervention? Or the magic menu that appears automatically when you bring you mouse pointer over the link? The invisible hand behind all these cool effects and more is JavaScript. These days, you might have heard a lot of hoopla about 'Dynamic' HTML. Basically, DHTML combines the Cascading Style Sheets technology with the power of JavaScript to create stunning effects (see www.dhtmlguru.com for a demo). JavaScript essentially allows you to execute small codes that can change the HTML code itself, and that is what makes the HTML dynamic and creates all those effects mentioned above.
JavaScript? Java, right?
Well, no. There is a world of difference between Java and JavaScript. Java is a programming language, like C or Pascal that you can use to write your programs. You can also use it to write small programs called Applets that are downloaded and run by your browser using its Virtual Machine for Java. JavaScript, on the other hand is a scripting language that you can use to insert scripts in your HTML code itself. This script is visible to anyone who views the HTML code of your page, and is run by your browser if it supports JavaScript. JavaScript also follows syntax, like a programming language, but is considerably less complicated. More importantly, JavaScript is what gives the real zing to a Web page if used judiciously.
Brass Tacks
You don't need to be a CSS or Java pro to learn how to use JavaScript. Just some basic knowledge of HTML will suffice. As mentioned earlier, the script itself is included in the HTML code. Here's how.
As you can see, the code comes inside the . Here script.js is the file (in the current directory) that has your JavaScript code. This way, the HTML code itself is less cluttered.
Let's get down to business. JavaScript consists of everything that a normal programming language has, like variables, functions, statements, operators, etc. A basic knowledge of these is assumed here. Essentially, what you will be doing while using JavaScript is writing functions that will be called at appropriate times to perform the magic that you see on your Web page. These functions get called whenever certain 'events' take place. Events, simply put, are when certain things happen, like your mouse cursor moving over a link, or clicking on a link etc. Don't worry, all these things will become clear once we look at an example. Before going on to that, there's one more thing. JavaScript is supported by the latest versions of both IE and Netscape. Unfortunately, the present state of affairs is that the code you write for one will not run on the other. That's because both companies have made completely different implementations of the standard proposed by the World Wide Web Consortium. The code in this article is guaranteed to run on IE4.0 and above, but has not been tested on Netscape.
Something for Everyone
Probably the most often used and the most versatile JavaScript effect is called the image rollover. This is when an image that is also a link, changes to another when you take your mouse cursor over it. This can be used to great effect as you can see in the Carnegie Mellon University site. The first step in this effect is to make the two images, one that will be displayed in the normal case when the cursor is not over the link, and the other that you want displayed when the cursor is hovering over the link. You can make these two images in any standard image editor like Paint Shop Pro. Save them as GIF images, since these are optimum for Web pages. Say that you call them normal.gif and hover.gif. (The three dots between the commands indicate that you can insert other commands there).
Remember the events? As mentioned, events happen in JavaScript when certain actions like clicking a link, loading a page occur. The next part of the rollover effect is to tell the browser when to swap the images. This has to be done when the event called Mouseover takes place-when you place the mouse cursor over the image link.
But that's not all; you also have to swap back to the earlier image when you take away the cursor (when the Mouseout occurs). Placing the code in the tag that is used for hyperlinks does these two things. As you can see, the image (which is placed using the IMG tag) is initially normal.gif, as indicated by its SRC attribute. But when the Mouseover event occurs (i.e. you bring your mouse over it), the JavaScript code placed after onMouseover= changes that SRC attribute to hover.gif, thus swapping the image for hover.gif and creating the rollover. A similar swap is done using onMouseout.
Well, that's about it for now. We have barely touched on the immense possibilities of JavaScript, from zooming in text, to automatically scrolling pages, to real time clocks and animations on your page. Combined with CSS, JavaScript can create its real impact. Look out for more JavaScript in future issues
|
