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:[email protected]">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 =
" &nbs p; ";
//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:[email protected]">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:[email protected]">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.