JavaScript Test Page

Warning - 2005-09-04 - The scripts on this page haven't been updated since 2000.

Below are some simple javascript examples with brief explanations. There are some simple concepts demonstrated, but there is some technical syntax. Sorry if I don't fully explain all the syntax. I try my best to explain what's going on, not every detail. For a little beginner's info on where to enter the script, go to the List Box Links. Use this as a guide for the other examples. The examples are as follows:

Identify Browser/Computer | Alert | List Box Links | Increment to Status Bar | Increment Links | OnMouseOver Buttons | Slide Show | Image Map


Identify Browser/Computer

This computer is using

This script is accomplished by using the following syntax in the <BODY> section:
<SCRIPT Language="JavaScript">
<!--
document.write(navigator.appName + navigator.appVersion);
//-->
</SCRIPT>


Alert (Message Box)

This link has a javascript alert, which pops up and requires a user response. It's often considered to be annoying.

In an HREF insert this syntax:
onclick="alert('insert comment')"

This link doesn't go anywhere. To stop a link add return false:
onclick="alert('insert comment'); return false"


List Box Links

The following List Box has links to other sites. Below this example, is an explanation on how to do it.

Here is an example of a similar List Box.
The first step is to put in the javascript. In the HTML <HEAD> section, insert all of the following lines from <SCRIPT language="javascript"> to </SCRIPT>.

Insert this script.

<script language="javascript">
<!---
function SelectLink(form) {
if (form.combo.selectedIndex == 0) return;
window.location.href=form.combo.options[form.combo.selectedIndex].value;
}
//-->
</script>
The next step is to put in the form information. This will be entered into the HTML <BODY> section.

Insert this form info:

<form>
<select name="combo" onChange="SelectLink(this.form)">
<option selected value="nowhere">This choice goes nowhere
<option value="http://www.comedycentral.com">Comedy Central
<option value="http://www.imdb.com">internet movie database
</select>
</form>
Now that the script and form code is in, everything should work. Just make sure that your browser supports javascript.

Note: The preceding code doesn't include a button, but it really doesn't need it. This List Box reacts on the change event, which means when the user selects a link, the browser automatically goes to it.


Increment to Status Bar

This button simply increments a variable and displays it below in the status bar.

Insert this script:
<script language="javascript">
<!---
inc=0;
function Increment() {
inc++;
if (inc > 10) inc = 0;
window.status=inc;
}
//-->
</script>
Insert this form info:
<form>
<input type=button value="Increment in Status Bar"
onClick="Increment()">
</form>

Increment Links

This increments a list of sites. The user can write anything in the text box, but the value of the web address in the code will be where you link to. When the user clicks 'CHOOSE SITE' the text will change, and when the user clicks 'GO' a new page will open with that link.

       
Insert this script for the 'CHOOSE SITE' button:
<script language="javascript">
<!---
SiteNum=0;
function SelectNextSite() {
SiteNum++;
if (SiteNum > 3) SiteNum = 1;
if (SiteNum == 1)
document.SiteNav.SiteText.value="www.bryant.edu";
if (SiteNum == 2)
document.SiteNav.SiteText.value="www.sony.com";
if (SiteNum == 3)
document.SiteNav.SiteText.value="www.foxworld.com";
}
//-->
</script>
Insert this script for the 'GO' button:
<script language="javascript">
<!---
function GoNextSite() {
if (SiteNum == 1)
window.open('http://www.bryant.edu','NewNext1');
if (SiteNum == 2)
window.open('http://www.sony.com','NewNext2');
if (SiteNum == 3)
window.open('http://www.foxworld.com','NewNext3');
}
//-->
</script>
Insert this for all the form info:
<form name="SiteNav">
<input type=button value="NEXT SITE"
onClick="SelectNextSite()">
&nbsp; &nbsp;
<input type=text name="SiteText" value="Click the NEXT SITE button" size=30>
&nbsp; &nbsp;
<input type=button value="GO"
onClick="NextSite()">
</form>

OnMouseOver Buttons

This next example only works with Internet Explorer 4.0. Netscape supports the onClick event, but it does not support the onMouseOver of a button. As the user moves the mouse over each button, a mouse over event is triggered.

   
Insert this script:
<script language="javascript">
<!---
function ChangeHover(HovNum) {
document.HoverOver.HoverText.value="This is the number " + HovNum;
}
function ChangeClick() {
document.HoverOver.HoverText.value="Hover Over Buttons";
}
//-->
</script>
Insert this form info:
<form name="HoverOver">
<input type=text name="HoverText" value="Hover Over Buttons" size=30>
<input type=button value="One" onMouseOver="ChangeHover(1)"
onClick="ChangeClick()">&nbsp;
<input type=button value="Two" onMouseOver="ChangeHover(2)"
onClick="ChangeClick()">&nbsp;
<input type=button value="Three" onMouseOver="ChangeHover(3)"
onClick="ChangeClick()">
</form>

Slide Show

This example uses frames. If you don't see a separate frame in the lower portion of the screen, then go to the frames version. This frame remains constant. The below frame changes as the NEXT button is pressed. This is intended for slide shows.

Put in this script:
<script language="javascript">
<!---
NextFrame=0;
function ChangeFrame() {
if (parent.frames['color']!=null) {
NextFrame++;
if (NextFrame > 4) NextFrame=1;
if (NextFrame == 1)
parent.frames['color'].location.href="secret2.htm";
if (NextFrame == 2)
parent.frames['color'].location.href="secret3.htm";
if (NextFrame == 3)
parent.frames['color'].location.href="secret4.htm";
if (NextFrame == 4)
parent.frames['color'].location.href="secret_start.htm";
}
}
//-->
</script>
In the parent.frames['color'].location.href="secret2.htm"; line, 'color' is the name of the frame (the one assigned in the <FRAME> tag of the HTML page that defines the frames), and "secret2.htm" is the page to be loaded into that frame.
Put in this form info:
<form>
<input type=button value="Next Frame" onClick="ChangeFrame()">
</form>

Image Map(no javascript)

image map

The image to the left is an inoperable server side image map. (This uses no javascript, and it doesn't link to anywhere, but it is useful if you want to find coordinates in an image.)

Use this href and img info:
<a href="../" onclick="return false"
><img src="block303.jpg" border=0
align=left alt="image map" ismap></a>

 

About this page: