 |
|
 |
| Simple JavaScript Goodies for Your Web Pages - Part I |  |
|
|
JavaScript is a scripting language that allows you to go beyond the static limitations of HTML and provide additional functionality, interest, and interactivity to your web pages. Adding basic Javascripts to your own pages is a simple matter of copying and pasting the code I've provided here into the appropriate areas on your own pages.
Before we get started, though, I'd like to give you a brief, general explanation of adding JavaScripts to your web pages.
The SCRIPT tag:
JavaScripts can be added to your page by using the SCRIPT container tag, which would look something like this:
<SCRIPT LANGUAGE="JavaScript">
<!-- // Begin the HTML comment tag to hide the scripting code from older browsers.
// all your scripting commands go here
//--> // end of HTML comment tag
</SCRIPT>
|
Taking a look at this code line by line, here's what we've got: the first line starts the SCRIPT container tag, and also identifies the LANGUAGE that we're using for this script as "JavaScript." There are other languages and JavaScript versions that can be used for scripting, but for the purposes of this article, we'll stick with "JavaScript." The next line looks like the start of an HTML comment tag, it is the comment tag is used to surround all your scripting commands so that browsers that do not support JavaScript, or have JavaScript turned off, will ignore the scripting commands. Without the comment tag, older browsers may display the actual scripting code in the contents of your page, which can make things look pretty ugly. The next line is simply a placeholder that demonstrates where all of your scripting commands should go. The next to last line is the closing tag for the HTML comment tag, and the last line is the ending tag for the SCRIPT container tag.
One additional note, you may have noticed that I've used double slashes ("//") in a couple of places. The double slashes are used to add comments inside your scripting code. This is useful for providing additional information about what a script is supposed to do, as well as to provide comments to yourself so that when you come back later to make changes to your script, you'll have something to remind you about what it is you were trying to do.
Placement of Scripts in Your Pages:
Danny Goodman, in his book JavaScript Handbook, identifies three methods of adding scripts in a web page. The first is "immediate" scripts, which he identifies as those scripts that are executed when a page loads in the browser, and that also affect the layout of a page. Immediate scripts are placed within the BODY of your page in the precise location where you want them to affect the layout of your page.
The second method is "deferred" scripts, which are loaded when a web page loads, but don't do anything until they're called upon by a user's action (like holding the mouse over a link, or clicking a button). The recommended placement for deferred scripts is in the HEAD section of your page.
The final method Goodman identifies is "hybrid" scripts, which is simply the use of both immediate and deferred scripts.
Another way of adding JavaScript to your page is what I'll call "inline" scripts. Inline scripts can be used to add functionality to regular HTML tags (such as A HREF for links) when an "event" (like a mouse click or mouse movement) occurs.
Okay! Now let's see some scripts!
Date Last Modified:
Would you like to be able to automatically tell your visitors when you last made changes to a page? If so, then you could add the following "immediate" code to your page in the exact place where you'd like the page's last modified date to appear:
<SCRIPT LANGUAGE="JavaScript">
<!-- // Hide the scripting code from older browsers.
document.write("This page was last changed on " + document.lastModified + ".")
//--> // end of HTML comment tag
</SCRIPT>
|
When this script is added to your page, a line that looks like the following will be displayed in the browser:
Change Message in Status Bar When Mouse is Held Over a Link:
Sometimes, it might be helpful to provide additional information about a link when a visitor holds their mouse over it. The code for doing that would look something like this:
<A HREF="mypage.htm" onMouseOver="window.status='This page tells you all about me';return true" onMouseOut="window.status='Document: Done';return true">Go to another page</A>
|
Go to another page
Displaying Which Browser a Visitor is Using:
This is another example of an immediate script, and can be used to display the browser and browser version that a visitor is using. Again, since this is an immediate script, you would place the code in your page's source code in the exact position you'd like the message to appear when the page is displayed in your visitor's browser. The code to do this is:
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the scripting code from older browsers.
document.write("Howdy! I see that you're using" + navigator.appName + " " + navigator.appVersion + "!")
// --> end of HTML comment tag
</SCRIPT>
|
When you add this script to your page, your visitor would see something similar to the following:
Allow Visitor to Change Your Page's Background Color:
Here's another fun little script that will allow a visitor to change the background color of your page. It's another example of an inlined script, and looks like this:
<A HREF="#" onClick="var newColor=prompt('Enter a New Background Color:','');document.bgColor=newColor">Change Background Color</A>
|
I hope you've enjoyed these examples of some of the things that JavaScript can add to your page.
Continue to Part II of JavaScript Examples.
|
|
