|
The following examples
include Javascript code that you can cut and paste into your website
if you wish. They are not meant to be an instructional course
in how to use Javascript; therefore, they are not fully-documented
as to how they work.
EXAMPLE
1: Status Bar
Our first special effect
trick will show you how to change the Status Bar (the indicator
at the bottom of the browser screen that indicates the progress
of loading a page, such as “Contacting host” and so
on)
Suppose you wanted,
instead of something generic (“Document: Done”) appearing
in the Status Bar, something more “friendly” to appear
(like “Welcome To My Home Page!”) How would you accomplish
this?
JavaScript has the
capability to affect many different portions of the browser itself
as well as the Web page. It usually does this by using a “dotted”
notation for all features of the Web page and the browser.
To implement the change
in Status Bar, add this code:
<SCRIPT
Language=“JavaScript”>
<!--
Status=“Welcome To My Web Page!”
window.defaultStatus=Status
// -->
</SCRIPT>
Let's break that down
a little to see what each line means:
<SCRIPT Language=“JavaScript”>
= Tells the browser what language the script is written in.
<!-- = Indicate the beginning of the script code. Causes
older browsers that do not support JavaScript to ignore anything
inside them.
Status=“Welcome
To My Web Page!” = Creates a variable (Status)
and assigns its value.
window.defaultStatus=Status
= Example of “dotted” notation. Tells the browser to
set the defaultStatus(the normal “Status Bar”
display) property of the browser window to display the value assigned
to the variable Status.
// --> = Indicates the end of the script code.
</SCRIPT>
= End of the Script code.
EXAMPLE
2: Clock
We have just seen how
JavaScript can affect the browser window. Now we’ll see how
it can affect specific elements of the Web page document itself.
Our second special
effect trick will enable you to add a simple clock to your Web
page. The clock will display accurate time down to the second,
as well as “AM” or “PM.”
Add the following code
in the <BODY> section of your Web page where you want the
clock to appear:
<form
name="clock" onsubmit="0">
<div align="center">
<input type="text" name="face" size="12"
value>
</div></form>
Note that this <FORM>
has no ACTION or METHOD parameter, nor does it have a SUBMIT button.
The ‘onsubmit=“0”’ parameter indicates that
no data is to be submitted from the form; it is only there to
display a text box on the screen (which is where the clock will
appear).
Add the following code
before the <BODY> tag in the Web Page:
<script
language="JavaScript">
<!--
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
function
showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = "" + ((hours >12) ? hours -12 :hours);
timeValue += ((minutes < 10) ? ":0" : ":")
+ minutes;
timeValue += ((seconds < 10) ? ":0" : ":")
+ seconds;
timeValue += (hours >= 12) ? " P.M." : " A.M.”;
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
// -->
</script>
Looking at the line
document.clock.face.value
= timeValue;
This is the JavaScript
code line that actually displays the time. Note again the “dotted”
notation: The VALUE of the text box named FACE in the form named
CLOCK in the DOCUMENT being displayed is set to the value currently
stored in the variable “timeValue” (which was calculated
by the script to be the current time, plus “AM” or “PM”)
EXAMPLE
3: Animated Buttons
Besides form elements, JavaScript can also affect any image elements
in a Web page, and can change them when certain conditions are
met.
The code we’re
now going to see enables a browser to have a image “button”
change color when the viewer passes the mouse cursor over the
button, and change back when they move it off the image.
First, you need to
create the two different images to be displayed. Make sure they
are both the same size! Let’s assume for this example that
they’re named “BUTTON1.GIF” (the “off”
state) and “BUTTON2.GIF” (the “on” state),
and you want clicking on the button to bring you to a document
named PAGE2.HTM.
Add the following code
to the contents of the document body where you want the animated
button to appear:
<a
href=“page2.htm" onMouseover="img_act();”
onMouseout="img_inact();”>
<img src=”button1.gif" border=0 name=”button">
</a>
Breaking this down
a bit:
onMouseover ="img_act(button);” = Tells the browser:
when the mouse cursor moves over this image, call the function
“img_act”
onMouseout ="img_inact(button);”>
= Tells the browser: when the mouse cursor moves away from this
image, call the function “img_inact”
<img src=”button1.gif"
border=0 name=”button"> = Gives the name “button”
to this image, so that the browser can identify the image by name.
As in this example,
you can call JavaScript functions from outside the <SCRIPT>
</SCRIPT> tags, provided you attach them to conditions.
(like mouse position)
Assuming the button
images are 60 pixels high and 120 pixels wide, add the following
code before the <BODY> tag:
<SCRIPT
LANGUAGE = "JavaScript">
<!--
itson = new Image(60,120);
itson.src = ”button2.gif";
itsoff = new Image(60,120);
itsoff.src = ”button1.gif";
function img_act(imgName) {
document[imgName].src=itson.src;
}
function img_inact(imgName) {
document[imgName].src=itsoff.src;
}
// -->
</SCRIPT>
As you can see,
scripting languages can enable your Web pages to become far more
interactive, but unfortunately, the languages take quite some
time to learn and plenty of time to practice.
There are plenty of
good reference books on the scripting languages available at most
major bookstores. If you are interested in adding advanced interactivity
to your pages, we suggest you invest in one or more.
|
