lecture 8: objects

I said a few slides back that the basic "grammar" of a JavaScript event was, "when X happens, do Y". X is covered by the event handlers (onmouseover, onsubmit etc.) covered on the last two slides. So far all we've looked at as a possible value of Y is the image rollover. Rollovers are an example of an object - the terminology is confusing I know, but that's what they're called. This slide demonstrates some other possible objects, but there are many more than these: the further reading which I suggest towards the end of this lecture will provide suggestions.

There's another kind of object provoked by the onclick event handler in this link: Ever wanted to know more about navel fluff?

Coding alerts is very simple:

<a href="http://www.feargod.net/fluff.html" target="sample" onclick="alert('WARNING: you are about to enter the most random site on the WWW')>Ever wanted to know more about navel fluff?</a>

You might also include them in onsubmit, onload or onunload events.

Another simple one can be seen at the bottom of most of the "demonstration" pages on this site which open in the second browser window. This causes a link to close the existing window, rather than opening a new page within that window like normal links. Open this link for an example as along with showing you this simple object (if you use it, don't forget the brackets), it also elaborates on the multipart image demo we used in the previous lecture and shows you how you can combine multiparts and rollovers to good effect.

The code is simply:

<a href="#" onclick="window.close()">Close this window</a>

Compare the object here, which begins with "window", to the rollovers, which begin with "document". When you see an event with "window" you know it is going to make something happen to the window itself. "document" makes something happen inside the document you're viewing, but leaves the window unaffected. You can see another example on the changing background colours page which you might like to have a quick look at in the second browser window.

This seems gimmicky - and is, really - but it might be useful if you wanted to allow people to choose a style that was, say, higher-contrast than your preferred option. Take it a bit further and you can actually allow people to select their own style sheet which is a big step towards personalising a site for your individual visitors. Note that this doesn't use JavaScript, but it's a neat site so I thought I would mention it anyway.