Exercise: Add to the last exercise. 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 type="text/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>
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 type="text/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>
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. (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. 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.
| Javascript Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
| Javascript Authoring Guide JavaScript FAQ |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
