Presented at ~conf July 14, 2003 by Andrew Hedges, Design Team Manager, Interactive Multimedia Applications Group
Common Scripts: Examples!You should now understand the basics of what JavaScript can do. Learning JavaScript is like learning any foreign language. It is way easier at first to understand what another person is saying than it is to express yourself. So, this section is all about learning how to use scripts written by others. First, you’ll need to download our sample page. Click on the link, then choose “Save As…” from the “File” menu of the new browser window. Save the file to your desktop as “commonscripts.html” then open it using Notepad. Roll up your sleeves because we’re about to dive into the code! |
Copy and paste the following code into the <head> section of our sample page.
<script type="text/javascript">
function swapImage(imgName,imgSrc)
{
if (document.images)
{
document.images[imgName].src = imgSrc;
}
}
</script>
Now, edit the link around the “About / History” image to include “onmouseover” and “onmouseout” attributes that call the swapImage() function. The value you should pass for imgName corresponds to the name of the image tag. The value you should pass for imgSrc is either images/about_active.gif or images/about_inactive.gif depending on whether it is in the onmouseover or onmouseout.
Check your work by opening your saved version of the file in a Web browser. As you save your changes, reload the page and see how it changes the behavior of your page!
Simple, right? After you’ve given it the old college try, you can cheat and see the solution.
Copy and paste the following code into the <head> section of our sample page.
<script type="text/javascript">
function validateIt()
{
if ()
{
alert("Please enter your email address.");
return false;
}
else
{
return true;
}
}
</script>
Copy and paste the following attribute into the <form> tag:
onsubmit="return validateIt()"
Now the fun part! Add the proper code to the if () statement to check for whether the user left the email field blank.
I know, I know … don’t bore you with such trivial exercises! Well, on the off chance you’re stumped, you can cheat and see the solution.
Copy and paste the following two attribues into the <a> tags around the thumbnail images on our sample page.
target="_blank" onclick="window.open(this.href,'photo','width=500,height=375,scrollbars=no');return false"
You got off easy with that one, huh? Still, you can compare yours to the official solution.
Document URL: http://www.gwu.edu/~ahedges/javascript/
Copyright © 2003, The George Washington University. All rights reserved.