Javascript:

tutorial 2

Chris Hanretty has a cousin called Dom, and blatantly slags off my homepage, but opens a window and escapes unhurt.

Contents

I'm back with new and improved JavaScript that works with Aweb. We'll also be taking a look at how Javascript is object orientated, and the Document Object Model, or DOM, and doing image swaps, window openings, and all kinds of crazy stuff!

Improved Image Swaps All Round!

When I was trying out my Javascript, the image rollovers didn't work in Aweb. After a bit of Sherlock Holmes-ing, I worked it out. When you do it like this:

<img src="menu_notselected
.gif" name="menuitem" onmouseover=
"document.menuitem.src='menu_
selected.gif">

it doesn't work, because Aweb for some reason doesn't support onmouseover on images alone. But when you do it like this:

<a href="moreinfo.html" onmouse
over="document.menuitem.src=
'menu_selected.gif'">
<img src="menu_notselected
.gif">
</a>

it works! This was as far as we got last time, so a quick recap, and believe me, it's quick: we've learnt:

JavaScript is not Java, it's a web page scripting language
How to do window.status-es

But, being the raging perfectionist that I am, I'd like to improve the image swaps. The existing image swap is okay if you want an image to change, but if it's a button that you want to revert back after the user has moused-over it, you use another intrinsic event called, imaginatively Ťonmouseoutť

This is how it works


<a href="moreinfo.html" onmouse
over="document.menuitem.src=
'menu_selected.gif'"onmouseout=
'document.menuitem.src='menu_
notselected.gif'">
<img src="menu_notselected
.gif">
</a>

When you move the cursor over the link, the image, or rather the source attribute of the image, changes. And when you move the mouse off the link, the source attribute changes again. This raises an interesting point, which is something you might have been wondering about: why put 'document.imagename.src', isn't that rather long winded?

Well, it's all to do with DOM...

I have a cousin called DOM

As mentioned before, Javascript is object orientated, which originates with scary C++. Think of it as a hierarchy. When you do an image rollover, the Javascript doohickey looks for an element in the document (the parent of the image) with the name you called it, for example 'arrow', and changes the src attribute to what you have given it. When you do a window.status, the script changes what's in the status bar of the window (again the parent) to what you have given it. The window is the top level object, and everything stems from that. If you really really wanted to, you could write your image swaps using window.document.image.src and it would do the same thing.

You'll discover more Javascript whatsits as your knowledge of the language increases.

New Windows for Old, New Windows for Old!

There are a number of ways of opening up transparent pieces of glass in Javascript, all depending on what you want to do with them.

First, there's yer basic alert box. It alerts people to stuff. Erik's particulary fond of them: his homepage has more alert boxes than you could throw an emergency service at. Its syntax is quite simple

alert("Put your Message Here")

How much more simpler could it be? For alert boxes, you'll probably be putting them in the script bit at the to, like so:

<html>
<head>
<title>A Lair is _supposed_
 to be a place of refuge!
</title>
<script language="Javascript">
<!--

alert("this page uses Javascript.
 Of course, you have to be in a 
Javscript equipped browser to see
this message. D'oh!")

// comment out the ending HTML 
comment -->
</head>

Secondly, you have a prompt! This handy little thing asks the user for a detail, and is the format

prompt("Enter your question here", "Here is where you put an example for the dumb user")

Once you learn about variables, that will actually be useful, but at the moment it's just here for the sake of completeness.

Finally, the big cahoona: a new browser window. If you've been visiting many pages at Geocities, you'll have noticed their eternally annoying Banner ad window.

There are a number of options for specifying a new window, but the basic syntax goes a little bit like this:

window.open("URL","name",
"features")

Remember, you can leave out the window. part of it if you want, because window is the top level object. URL is the internet address you wish the page to start at. Name is, quite unsurprisingly, the name of the window, which can be used when you want to refer to the window when linking to it in HTML, i.e.

<a href="index.html" target=
"your_new_window">
Click to see this in another 
window!</a>

Features is a comma separated list of one or more from the following:

menubar: This would be the menubar of Windoze applications, so that's only good if you're building cross platform code.
status: A nice ickle status bar
scrollbars: allows scrollbars to appear if necessary
resizable: allows the window to be resized
width: width in pixels
height: height in pixels
toolbar: displays the toolbar
location: displays the little box where you can type in URLs
directories: allows the little fastlinks that you see in most browsers

So, if you wanted a window that is 100 pixels by a 100 pixels across, that starts on www.amiga.de and is called too_small_to_be_sensible, has no toolbar, no fastlinks, no location bar, no menubar, scrollbars and isn't resizable, you would do it like this:

window.open("http://www.amiga.de/"
,"too_small_to_be_sensible",
"height=100, width=100, 
scrollbars")

That's all for this month. I'll be back next month with some fun stuff on navigator.appnames and browser versions.

Chris