Javascript Tutor
- Lesson 7
Exercise: Add to the page above. Make two text boxes.
When you click on the link, have an alert box pop up with the contents of one
text box, then a second alert box pop up with the contents of the other text
box.
Exercise: make a page with 2 small text boxes side by side. Under the
text boxes make 4 links... Add, Subtract, Multiply and Divide. When the user
clicks on the Add link it should get the two numbers in the boxes, add them
together and display the answer in an alert box as follows... "5 + 3 =
8". Do the same for each of the other operations.
Notice I say "Here
is a solution" rather than "Here is the solution". When you start
programming javascript you'll see that there is often more than one way to get
the job done. While it could be argued that one way is "better" than
another, in the end, what matters is that it works, and that it acomplishes
the task at hand. When I first started programming, I always worried about doing
things the "proper" way. One day it dawned on me... the "proper"
way is whatever works. You can streamline things later if you wish, but as long
as it gets the job done, it's good to go.
Another property we can get or manipulate is the document's background color.
Have a look at this...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function BgcolorGetter()
{
alert (window.document.bgColor);
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#BBDDCC">
Click <A HREF="javascript:BgcolorGetter()">here</A> for
this document's background color.
</BODY>
</HTML>
Try it.
bgColor is a property of the document object. Try messing around with the color
in the body tag and see that it always returns the proper background color.
Remove the BGCOLOR attribute from the body tag altogether and see what happens.
Can we set the bgColor? You betcha...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function BgcolorSetter(mycolor)
{
window.document.bgColor = mycolor;
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:BgcolorSetter('#FF9999')">Red</A>
<A HREF="javascript:BgcolorSetter('#99FF99')">Green</A>
<A HREF="javascript:BgcolorSetter('#9999FF')">Blue</A>
</BODY>
</HTML>
Try it.
Do you understand what's going on? Study it until you do.
Exercise: Add 3 more color selections to the page. ALSO, add something
whereby the original color of the page is recorded at the outset and add a seventh
choice to set the color back to this default.
Note that in the previous (and following) solution the scripting is after the
<BODY> tag. The reason for this is simple. After a little experimentation
I noticed that some browsers record the bgColor at the point where the body
tag loads. If you ask the browser to remember the bgColor before it reads the
body tag, it cannot remember it and the script will act wierd. I've only noticed
this quirk in the latest versions of Netscape. (A perfect example of why you
should always test your scripts on a couple different browsers and why de-bugging
is a large part of any programming effort.) Anyhow, the simple workaround is
to place the script after the body tag. I know it's common practice to put scripting
within the HEAD section, but that's only a suggested practice, it's not mandatory.
Exercise: Make another page and insert the following images...
The hex color codes are on the images (duh). Make it so that as the mouse passes
over each image, the document background color changes accordingly. As the mouse
moves off of each image, make the background color change back to the default.
