TRYING OUT JAVASCRIPT 


YOU CAN JAVASCRIPT EVEN IF YOU CAN'T PROGRAM!

1.  Let's put an image on a web page.  Your choice of image.

2.  Give the image a name.  Inside your IMG tag, say ID=foo.  You may
	now refer to your image as foo.

3.  Add a body tag to your page.  Add an OnLoad=resize() attribute
	to your body tag.  Try it.  It should say you have
	a javascript error because you are trying to call a
	function called resize when the page loads, but you didn't
	define any function called resize.

	If you click on the little yellow icon at the bottom left,
	it should give you some details (whether you can understand
	them or not) about your error.

	Not a problem.  You could say OnLoad="window.open('http://www.yahoo.com')"

	Here is what I have:

	<body onLoad="window.open('http://www.yahoo.com')">

	and now you know how to make dreaded pop-ups. 

4.  Just what you wanted to know how to do, right?  How about we go
	back to OnLoad=resize() and we actually write the resize function?

	Let's put a SCRIPT tag before the BODY tag.  You want a matching
	/SCRIPT tag.  Here's what it looks like:

	<SCRIPT>
	</SCRIPT>
	≶BODY ...>

	and in between the SCRIPT and /SCRIPT tags, let's say:

	function resize() {
	  foo.height = 1000
	}

	Try this out.

	Yowsaa.  1000 pixels is a lot, ey?

5.  You should be able to change the height and width of foo by changing
	your "program".  In fact, you should add a couple of images to your
	page so that there are three named images.  Each one should acquire
	its height and width through the resize function.

6.  Well, the resize function doesn't actually resize anything, does it.
	Let's take a couple of steps to get to actual wiggling.  There is
	a function called Math.random which returns a value between 0 and 1.
	If you say

		foo.height = Math.random()*1000

	this will give you a random height for the image foo.

	Try it for all three of your images.

7.  There is this thing called setTimeout(f,t) that you 
	can use which will wait for t milliseconds, then call
	the function f.

	If you put this at the end of your script, where f is
	"resize()", it will call resize every few milliseconds
	and you will find it very entertaining.

	Here is what I have as the last line of my script:

  	setTimeout("resize()",1000)

8.  Your page would be more interesting if your images overlapped.
	Well, I think so, anyway.

	If you add the following CSS to your IMG tag,

	style=position:absolute;top:0;left:0

	and in fact add it to each of your IMG's, then your images
	will overlap and resize.  Much more fun.  Do it and show
	the TA.  A lot of times when I say "show the TA," people
	are not showing the TA.  Shame.

9.  Sorry about all the syntax here.  You know, it's a lot to swallow
	in one session.  Let's try to understand this a bit better.

	The assignment of the value to foo.height changes the
	height attribute of the foo object ... and voila, somehow
	the image changes its height.  

	Let's suppose that your images are called foo and goo.

	Instead of saying goo.height = Math.random()*1000,
	we could say goo.height = 2* foo.height.

	This will make one image always twice the size of the other.

	If you can't see both images, then remove the style tag that I
	told you to put in each of the images so they are no longer
	stacked on top of each other.  Or if you want to figure
	out which one is on the bottom (the first image is the
	one on the bottom), make that one twice the height of
	the second image.

10.  OK, let's finish with something easy.  I want the top image
	to have a random height and random width.  Then the
	second image to be twice the height of the bottom, and
	the third image to be twice the width of the bottom.

	Show the TA and you're done.