JavaScript Examples
Displaying Date
The code to do this is
d = new
Date(); // Get today's date and time
document.write("Today's date is " + d.toLocaleString());
//Display it in the document
Image Rollovers
An example is as follows:
The code to do this is as follows:
<a href="../index.html" onMouseOver="document.home.src='../Images/next.gif';"
onMouseOut="document.home.src='../Images/prev.gif';">
<IMG border=0 src="../Images/prev.gif" name="home" width="20"
height="19"></a>
where the is prev.gif and
is next.gif.
In this example, the Images object of the Document object is accessed via the name "home" and the src property of the image object is read/write, thereby allowing the replacement of one image by another when the mouse is over the image and another replacement when the mouse is removed. Typically, one would also preload the images so that the rollover is immediate, and this can be done through JavaScript or displaying the image earlier in the page in an inconspicuous place with a height of 1 and a width of 1.
Notes:
(1) Although in Internet Explorer 5.5 and perhaps earlier, the above JavaScript
will also function in an <img> tag, this is not true in Netscape 4.6,
therefore the JavaScript should be put in the <a> tag so that it works in both
browsers.. If one wants the mouseover effect without a link that would take you
to another page, then one can include an additional statement onClick="return
false;" within the <a> tag, which disables the default action, which would be to follow the
link.
A mouseover on the image on the left causes both images to change.
In the previous example, the mouseover changed the image underneath the
mouse. JavaScript can be used to change an image elsewhere on the page
during a mouseover as well. The code to do this is as follows:
<a href="../index onMouseOver="document.left.src='../Images/next.gif';
document.right.src ='../Images/painter.gif';"
onMouseOut="document.left.src='../Images/prev.gif';"
document.right.src='../Images/tablet.gif';" onClick="return
false;">
<IMG BORDER=0 NAME="left" SRC="../Images/prev.gif">
<IMG BORDER=0 NAME="right" SRC="../Images/tablet.gif">
A
mouseover on the image on the left
causes both images to change
where the
is tablet.gif and 
is painter.gif
Using Input in Drop-down List to Determine New Page to be Loaded
The code to do this is:
<form method="POST" name="getinput">Select topic:
<p><select size="1" name="topic">
<option value="forms">Forms</option>
<option value="frames">Frames</option>
<option value="tables">Tables</option>
</select>
</form>
<a href="javascript1.html"
onClick="v=document.getinput.topic.selectedIndex;
if (v==0) window.location='http://www.erols.com/wpegram/WWWDesign/forms.html';
if (v==1) window.location='http://www.erols.com/wpegram/WWWDesign/frames.html';
if (v==2) window.location='http://www.erols.com/wpegram/WWWDesign/tables.html';
return false;"><img src="../Images/gobutton.gif" border=0></a>
None of the methods of the location object seemed to be appropriate for relative addressing so absolute addressing was used. Although JavaScript code functions in IE either as part of the <a> or <img> tag, it only worked in Netscape as part of the <a> tag.
Using a Form to Allow the User Dynamic Control over Appearance of a Page
Enter the desired background color of the page in words or hexadecimal format:
The code to do this is:
<form method="POST" name="colorpage">
<input type="text" name="T1" size="20">
<input type="button" value="Change Page Background Color"
onClick="document.bgColor=document.colorpage.T1.value;
if (navigator.appName=='Microsoft Internet Explorer')
body.style.backgroundColor=document.colorpage.T1.value;"">
</form>
One names the form and the textbox within the form so one can refer to these by name, rather than using subscripts of forms[] and elements[]. The form type button has no functionality by itself, but can be used to execute JavaScript. As with other buttons, the event is onClick.
For Netscape, it is sufficient to set the bgColor of the document. However, in IE, this is not sufficient due to the fact that the color has been set in an external stylesheet. For IE, modifying the style of the BODY element from JavaScript does the trick (note that in CSS, the attribute is background-color, whereas when accessed from JavaScript it becomes backgroundColor). Whereas Flanagan discusses use of JavaScript to access stylesheet properties where JavaScript is used between <style></style> tags, instead of between <script></script> tags, the above example demonstrates accessing stylesheet properties through JavaScript in an event-handler context. Because of the differing implementation of Netscape and IE of accessing styles from JavaScript, it is necessary to test for IE to avoid getting an error in Netscape.
Pop-up Windows
The code to do this is as follows:
<a href="javascript1.html"
onClick="window.open('jtest.html','smallwin','width=400,height=350,status=yes,resizable=yes');
return false;"><img src="../Images/gobutton.gif" border=0></a>
Image Rotation
The code to do this is as follows:
<p><img border="0"
src="../Images/panda0.gif" width="68"
height="78" name="rotateseveral"></p>
<script>
<!--
function rotate()
{
document.rotateseveral.src="../Images/panda" + frame +
".gif";
frame = (frame+1)%3;
setTimeout("rotate()", 5000); //rotates every 5 seconds
}
var frame=1;
rotate();
//-->
</script>
Last Modified: November 17, 2000. Comments to wpegram@nvcc.edu