The Net revolution has happened, and now just about everybody has access to, well, whatever material interests them - but there is something lacking, something missing: an unrealised yearning burning in every breast, the unconsummated desire seemingly so unattainable, the unquenchable longing barely suppressed, yes, the need for a flying kangaroo. Oh, that so elusive marsupial! But at last the waiting is over: here, for the first time, the closely guarded secrets of kangaroo-building are revealed. A kangaroo is at last within your grasp!
Still that palpitating heart for a moment, however: the ancient art of kangaroo construction is not to be learnt in a day. The kangaroo comes (metaphorically) only to the patient. Here in our first issue, we explain how to build the most basic kangaroo (equivalent to the level of a blue scarf kangaroo builder).
Step one is to acquire a good kangaroo and scan it in. Warning: can be a little messy. Note: for those without a scanner a vegetarian kangaroo is available from this site (http://altern.org/vii/kangaroo/). You'll probably want to make the edges of the scanned kangaroo transparent in an image editor like the GIMP and save in the PNG format.
Once you've got a good kangaroo, the real work begins. You should open a file in a text editor like XEmacs, Galway or Notepad (if you're stuck on MS-Windows you can download linux to solve your problem, or get a half-way decent editor from jumbo.com). Now you'll want to put in the magic HTML DTD incantation, a sacrifice to the long-desecrated god of SGML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML lang="en-UK">
<HEAD>
<TITLE> Blue scarf level JavaScript Kangaroo </TITLE>
</HEAD>
<BODY>
If you've got this far, you're well on your way to getting your blue scarf level and your first kangaroo. Don't close that editor!
1:1 Back in the beforetime, the great DOM said, "Let everything on a webpage be an object," and lo! it was so. And the great DOM saw that this was good, and was pleased, but then she suddenly realised that it wasn't a lot of good (everything being an object, that is) if you couldn't do anything with objects. So she took a day off to think about it. She fasted the whole day, and in the night the great DOM had a vision. It was revealed to her in a dream that every object should be able to fly. So she said, "Let every object fly," adding quickly, "but only when necessary." And lo! it was so.
Now, by induction on 1:1 above it is only necessary to put the kangaroo on the webpage. And the way to do that is to append the following to your work so far:
<IMG alt="picture of kangaroo" src="./kangaroo.png">
where kangaroo.png is the name of your kangaroo picture. The alt attribute is what people see while they're downloading the picture, or if they've turned pictures off for some reason.
Now we're almost ready! Save your efforts so far in the same directory as your kangaroo picture with a .html on the end of your filename, then look at it in your web browser. Hopefully, you'll see a kangaroo standing there, but try to contain your excitement for the moment, because the real fun hasn't started yet. Now on to the flying kangaroo!
To give the kangaroo a name so we can talk about it, we need to put it in a DIV element (to keep the broken Netscape Navigator 4 browser happy). So we can know where it is, it's a good idea to give it an absolute position. How? I hear you cry. Here's how:
<DIV id=kangaroo style="position: absolute; top: 100; left: 100;">
<IMG src="./kangaroo.png">
</DIV>
OK. So it's called "kangaroo", wow, like, original, man. The object attached to it is called document.kangaroo in Netscape Navigator and document.all.kangaroo (which actually makes more sense) in Microsoft Internet Explorer. This object has a property called "top" or ("style.top" in MSIE) whose value tells us where the top of the image is as a distance from the top edge of the window (screen), and a property "left" ("style.left" in MSIE) whose value tells us where the left of the image is, as a distance from the left edge of the window.
Surely now, if we could change the value "left" and "top" we could change where the image is placed? Yes! We assume the role of a (very) minor deity (Blue Scarf Level). To do this we need JavaScript.
To insert a piece of JavaScript in an HTML file, you should put it in a SCRIPT element (that is, between <SCRIPT> and </SCRIPT>). The SCRIPT element should be contained in the HEAD element, that is, between <HEAD> and </HEAD> along with the TITLE at the top of the document. Now, our JavaScript is going to make the kangaroo fly, so let's call it "fly" to remind ourselves, in case we forget. (OK, OK, it's actually so we can refer to it specially, but remember, this is a tutorial for the general public).
<SCRIPT type="text/JavaScript">
function fly()
{
speed_x = 10
speed_y = 1
delay = 10
The last three lines set various variables, like x and y in algebra, except we get to say what they are. From now on, when we write speed_x, for example, it's the same as writing its value, 10, but more clear.
document.kangaroo.left += speed_x
document.kangaroo.top += speed_y
(Remember "document.kangaroo.left" should be "document.all.kangaroo.style.left" in MSIE). These are the commands that move the kangaroo: += means "add to". So in English they translate to "add the value of speed_x (which in this case is 10) to the distance of the kangaroo from the left of the screen" and "add the value of speed_y (which in this case is 1) to the distance of the kangaroo from the top of the screen".
In Microsoft Internet Explorer 5 however, the situation is a bit more complicated. The damn' program adds a "px" suffix to document.all.style.{left,top} to indicate that the distance from the screen edge is measured in pixels. Now, because they have a "px" suffix, they aren't be numbers, are they? And you can't add a number to something that isn't a number, can you? Of course not! Oh, such beautiful logic! Well, the way to turn text (strings of characters) into numbers is with the parseInt function (if you were wondering) so in place of the above code, you should substitute
document.all.kangaroo.style.left = parseInt(document.all.kangaroo.style.left) + speed_x
document.all.kangaroo.style.top = parseInt(document.all.kangaroo.style.top) + speed_y
A bit of a mouthful maybe, but if you go through it step by step, it's simple enough: it sets the next value of the left position of the kangaroo to: the current one turned to an integer, plus speed_x. Then it goes and does the same thing again for the distance from the top of the window. The end result of course, is that the kangaroo moves along the screen. Easy as taking candy from a wallaby!
Now, if we only did that once (making the kangaroo move, I mean, not taking candy from the wallaby), we might get a little bored after the initial adrenaline rush faded away. The kangaroo would only move once, and it'd do it so fast, we wouldn't even see it. So let's make it do it lots of times (move that is):
setTimeout( "fly()", delay )
setTimeout is a function or procedure (whatever you want to call it) that will wait "delay" milliseconds (its second argument), then call (perform, carry out) "fly()", its first argument. So we keep on flying and never stop, because when setTimeout calls fly(), fly adds that stuff to the position and then calls setTimeout again, and so on.
}
</SCRIPT>
The above finishes off the function "fly()" with the closing brace, and then finishes off the SCRIPT element with the closing tag.
So how do you call fly() to start the whole kaboodle off? Well, you can only do it once the document has finished loading, so you could do it exactly then by changing <BODY> near the top to <BODY onload="fly()">. Then again, you might like to start off when the kangaroo is clicked - to do that, add the attribute "onclick" with the value "fly()" to the IMG start tag: change <IMG src="./kangaroo.png"> to <IMG onclick="fly()" src="./kangaroo.png">.
If you followed all that and actually read all the way through up to here, then you certainly do deserve to wear your Blue Scarf with pride - bet you can't wait for it to arrive from Euphoria's Blue Scarf Order Service! Next issue, we look at stopping the damn' kangaroo from flying off the screen. Till then, send plaintive cries for help or general HTML queries to vii@altern.org (put kangaroo-lover in the subject line). You can see the source in action at http://altern.org/vii/kangaroo/source/issue-1.html or http://altern.org/vii/kangaroo/source/issue-1-MSIE.html for Microsoft Internet Explorer users.