All Categories :
Java
Chapter 34
Sample Scripts
CONTENTS
This chapter contains some sample scripts written in JavaScript
for your viewing. They are provided to give you an idea of what
JavaScript can do, as well as allow you to view some functional
code.
The script shown in Listing 34.1 allows a user to create a simple
Web page. When the new page is generated, a separate window appears
in order to display the generated page, as shown in Figures 34.1
and 34.2. Look at the following code
and try to think of how you might be able to incorporate frames
with this script. In order to run the script, type it into a file
named custom.htm in the \jdg\ch34
directory, and then open the file with Netscape Navigator 2.0
or later.
Figure 34.1 : The Custom Web Page Demo opening screen.
Figure 34.2 : The Web page generated by the script.
Listing 34.1. Script to implement a customizable Web page.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
//generate a new page showing the animation
function gen_page(form)
{
//create a blank page
aniWindow = window.open("",
"Preview", "");
aniWindow.document.open();
aniWindow.document.write("<HTML><HEAD>");
aniWindow.document.write("<TITLE>TEST
PAGE</TITLE>");
aniWindow.document.write("</HEAD><BODY
BGCOLOR="+form.BKGCOLOR.value+
" TEXT="+
form.TXTCOLOR.value+">");
aniWindow.document.write("<CENTER><H1>");
aniWindow.document.write(form.TITLE.value+"<br></H1>");
aniWindow.document.write("<IMG
SRC = '"+form.IMAGEFILE.value+"'>");
aniWindow.document.write("<BR><HR>");
aniWindow.document.write("<A href='mailto:"+form.EMAIL.value+"'>Mail
Me</A>");
aniWindow.document.write("</CENTER>");
aniWindow.document.write("</BODY></HTML>");
aniWindow.document.close();
}
</SCRIPT>
<TITLE>JavaScript Customizable Web Page Demo</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<CENTER>
<H1>Custom Web Page Demo<br>
<br>
<br>
</H1>
</CENTER>
<H2>
<FORM NAME="Web ">
<RIGHT>
<A>Background Color
<INPUT TYPE=TEXT NAME="BKGCOLOR" SIZE=6></A><br>
<A>Text Color
<INPUT TYPE=TEXT NAME="TXTCOLOR" SIZE=6></A><br>
<A>Title Text
<INPUT TYPE=TEXT NAME="TITLE" size=50></A><br>
<A>Image name
<INPUT TYPE=TEXT NAME="IMAGEFILE" size=40></A><br>
<A>Email address
<INPUT TYPE=TEXT NAME="EMAIL" size=20></A><br>
<INPUT TYPE=BUTTON NAME="GenBtn" VALUE="&Generate"
onClick = "gen_page(this.form)">
</RIGHT>
</FORM>
</H2>
<HR>
<CENTER>
<FONT SIZE=2>
Comments to <A HREF="mailto:cjardin@xprime.com">X'
inc</A>
</FONT>
</CENTER>
</BODY>
</HTML>
The script shown in Listing 34.2 creates a ticker-tape display.
The display is then used to tell a story. (See Figure 34.3.)
Besides telling a great story, the script displays the use of
form objects, as well as the provided timer functions. When viewing
the code, think about how you might add graphics to the story.
Type the script into the file story.htm
and then open it with Netscape Navigator 2.0 or later.
Figure 34.3 : The Story Teller Demo opening page.
Listing 34.2. Story Teller demo script.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
//What to say
var output = "An elephant and a mouse were walking down a
jungle path. "+
"They talked and laughed and had the gayest of a time. Until
suddenly the"+
" elephant fell into a poacher's trap. The elephant said,
'Help me"+
" I have fallen and I can't get up.' The mouse responded,'wait
right there"+
" I will go get my HUMMER and a tow rope to pull you out.'
So the mouse "+
" fetches his HUMMER and saves the elephant from death. The
next day, '"+
" as luck would have it, the mouse falls into the same trap.
The elephant"+
" says to the mouse, 'here run up my $%^! to safety.' Which
is exactly what"+
" the mouse did, and they both lived happily ever after.
----!!!!---- Moral "+
" of the story, if you have a big enough $%^! you don't need
a HUMMER'. :->";
//MAX size of the display field, chars
var MAXSIZE = 30;
//Used to pad string
var bunchOspace =
" ";
//begining and ending string index
var bindex = 0;
var eindex = 1;
var timerID = null;
var timerRunning = false;
function stopclock()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock()
{
stopclock();
tick();
}
function tick()
{
if(eindex <= output.length)
{
//populate the value
document.forms[0].TICKER.value =
bunchOspace.substring(0,MAXSIZE-(eindex
- bindex))+
output.substring(bindex,eindex);
if((eindex - bindex) < MAXSIZE)
++eindex;
else
{
++bindex;
++eindex;
}
}
else
{
bindex = 0;
eindex = 1;
}
timerID = setTimeout("tick()",300);
timerRunning = true;
}
</SCRIPT>
<TITLE>JavaScript Story Teller Demo</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000 onLoad="startclock()">
<CENTER>
<H1>Story Teller Demo<br>
Let Me Tell You a Tale!<br>
<br>
</H1>
</CENTER>
<H2>
<FORM NAME="Web ">
<CENTER>
<INPUT TYPE=TEXT SIZE=30 NAME="TICKER">
</CENTER>
</FORM>
</H2>
<HR>
<CENTER>
<FONT SIZE=2>
Comments to <A HREF="mailto:cjardin@xprime.com">X'
inc</A>
</FONT>
</CENTER>
</BODY>
</HTML>
The script shown in Listing 34.3 creates a menu list from which
to select Web pages. (See Figure 34.4.)
The script shows how to open separate Navigator windows. As you're
looking at it, try to figure out how this script could be implemented
without using a separate window. Type the script into the file
guide.htm and view it with
Netscape Navigator 2.0 or later.
Figure 34.4 : The Web Guide menu list.
Listing 34.3. Web Guide script.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
//creates a structure to hold value
function select_item(value)
{
this.value = value;
}
//find what value is active in the selection list
function find_selection(chcked_object)
{
contents = new select_item();
for(var i=0;i<chcked_object.length;i++)
if(chcked_object[i].checked)
{
contents.value
= chcked_object[i].value;
break;
}
return contents;
}
//generate a new page showing the animation
function Do_Jump(formfield)
{
selection = find_selection(formfield.PLACESTOGO);
//create a blank page
aniWindow = window.open(selection.value,
"Preview",
"resizable=1,width=480,height=200");
}
</SCRIPT>
<TITLE>JavaScript Web Guide Demo</TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000>
<CENTER>
<H1>Web Guide Demo<br>
I'll Take you there!<br>
<br>
</H1>
</CENTER>
<H2>
<FORM NAME="Web ">
<CENTER>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://WWW.XPRIME.COM"
OnClick = "Do_Jump(this.form)" CHECKED>X prime,
Inc<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://WWW.XPRIME.COM/chocabytes"
OnClick = "Do_Jump(this.form)">ChocaBytes<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://WWW.HORIZONS.COM"
OnClick = "Do_Jump(this.form)">Horizons Technologies,
Inc<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://WWW.JakeDog.COM"
OnClick = "Do_Jump(this.form)">Jake Dog<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://yellowpages.bellsouth.COM"
OnClick = "Do_Jump(this.form)">YellowPages<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://www.DimensionX"
OnClick = "Do_Jump(this.form)">Dimension X<br>
<INPUT TYPE=RADIO NAME="PLACESTOGO"
VALUE="http://www.csusm.edu"
OnClick = "Do_Jump(this.form)">California State
University San Marcos<br>
</CENTER>
</FORM>
</H2>
<HR>
<CENTER>
<FONT SIZE=2>
Comments to <A HREF="mailto:cjardin@xprime.com">X'
inc</A>
</FONT>
</CENTER>
</BODY>
</HTML>
The scripts provided in this chapter show some of the capabilities
of JavaScript. The customizable Web page example demonstrates
how JavaScript can be used to generate Web pages on-the-fly. The
Story Teller script shows how timers can be used to create scrolling
text. The Web guide shows how a script can be used to access other
pages on the Web. Chapter 35, "JavaScript
Reference," provides a detailed description of the JavaScript
language.

Contact
reference@developer.com with questions or comments.
Copyright 1998
EarthWeb Inc., All rights reserved.
PLEASE READ THE ACCEPTABLE USAGE STATEMENT.
Copyright 1998 Macmillan Computer Publishing. All rights reserved.