Michael Yu's Civic Car viewing program provides you with a good example of how to combine frames with JavaScript. It's located at
http://www-leland.stanford.edu/~guanyuan/public/car/car.html
The premise behind the program is simple: In one frame, a view of a Honda Civic is displayed. In the other frame, the user has four directional controls to rotate the view in steps in any direction: up, down, left, or right.
In achieving this, Yu has made use of a simple file-naming scheme, the windows.location property, and the frames array.
The program in Listing W3.1 produces results similar to those in Figures W3.1 and W3.2.
Figure W3.1 : Michael's Civic Car Viewer provides interactivity between frames.
Figure W3.2 : The user selects a rotation control on the right, and the image on the left updates.
| Note |
Although this code uses the LiveScript option for language-which is not compatible with Internet Explorer-it is wiser to use LANGUAGE="JavaScript". |
Listing W3.1. Source code for Michael's Civic Car Viewer page.
Parent frameset:
<HTML>
<head>
<title> Car View 3D</title>
</head>
<FRAMESET ROWS="18%, 72%, 10%">
<FRAME SRC="head.html" NAME="head" TARGET="head" SCROLLING="no">
<FRAMESET COLS="68%, 32%">
<FRAME NAME="left" SRC="left.html" NORESIZE>
<FRAME NAME="right" SRC="right.html" NORESIZE>
</FRAMESET>
<FRAME SRC="tail.html" NAME="tail" SCROLLING="no">
</FRAMESET>
<noframes>
<h2 align="center">Sorry, Netscape 2.0b3 (Beta 3) required.</h2>
</noframes>
</BODY></HTML>
The file right.html:
<html>
<title>control pad</title>
<BODY BGCOLOR="ffffff" LINK="#0000FF" ALINK="#D9D919" VLINK="#871f78">
<form method="post">
<center>
<br>
<h3> Rotation<br>Control Panel</h3>
<br>
You can use the following control panel to rotate the civic car.
<br>
<div align="center">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td></td>
<td><input type="button" name="upmiddle" value="U" onclick="up()"></td>
<td></td>
</tr>
<tr>
<td><input type="button" name="middleleft" value="L" onclick="left()"></td>
<td></td>
<td><input type="button" name="middleright" value="R" onclick="right()"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="downmiddle" value="D" onclick="down()">
<td></td>
</tr>
</table>
</div>
<br>
<a href="http://www-leland.stanford.edu/~guanyuan/michael.html" target="_top">
<img src="cycleimages.gif">
</a>
</center>
</form>
<script language="LiveScript">
var ud=0;
var lr=0;
var chars="012345678";
function up(){
getcar(1,0);
return 0;
}
function down(){
getcar(-1,0);
return 0;
}
function left(){
getcar(0,1);
return 0;
}
function right(){
getcar(0,-1);
return 0;
}
function getcar( myud, mylr){
ud=ud+myud;
lr=lr+mylr;
if (lr == 8) { lr=0;};
if (lr == -1) { lr=7;};
if (ud == 3) { ud=1; lr=4+lr;};
if (ud == -1) { ud=1; lr=lr+4;};
if (lr > 7) { lr=lr-8;};
parent.frames[1].location="http://www-leland.stanford.edu/~guanyuan/public/
car/car"+chars.substring(ud,ud+1)+ "_"+chars.substring(lr,lr+1)+".html";
return 0;
}
</script>
</body>
</html>
 |
The Civic Car Viewer uses two main working frames across the center of the window: The car is displayed on the left, and the rotation controls are in the right frame. |
Although the Civic Car Viewer may seem simple at first glance, it provides a good example of how to build easy-to-use programs using multiple frames. It is interesting to note that the program does not follow Netscape's recommendation of placing function definitions in the header of the HTML file. This means it is possible that a user could press one of the four buttons before a function has been evaluated.
All the image files are named carA_B.html where A and B are integers. A represents the up-down axis and can have values from 1 to 3, and B represents the left-right axis and can have values from 0 to 7.
The script uses three global variables:
var ud=0;
var lr=0;
var chars="012345678";
ud and lr are used to keep track of the current viewing angle of the car. The variable chars is used to build the URL for a new view, as you will see later.
The primary function is getcar(). This function accepts two arguments, myud and mylr, which represent changes to the values of ud and lr:
ud=ud+myud;
lr=lr+mylr;
Once the changes to the values are made, a series of if statements check whether the new value is outside the acceptable range for each variable; if it is, the command block of the if statement wraps the value around to the other end of the range. For instance, if lr is 8, it becomes 0:
if (lr == 8) { lr=0;};
if (lr == -1) { lr=7;};
if (ud == 3) { ud=1; lr=4+lr;};
if (ud == -1) { ud=1; lr=lr+4;};
if (lr > 7) { lr=lr-8;};
Once this has been done, the function is ready to open the new view in the left frame using
parent.frames[1].location=
"http://www-leland.stanford.edu/~guanyuan/public/car/car"
+chars.substring(ud,ud+1)+"_"+chars.substring(lr,lr+1)+".html";
The command uses parent to
look at the parent frameset and the frames
array to explicitly choose the desired frame. It then sets the
location property to the
new URL.
| Tip |
An easy way to load a new page in a window or frame is to set the location property. This automatically causes the new URL to load into the window or frame. |
| Note |
Because the left frame is named, the script could just as easily have used the form parent.left.location. |
The actual filename is built with the portion of the URL expression which reads:
car"+chars.substring(ud,ud+1)+"_"+chars.substring(lr,lr+1)+".html"
The substring() method is used to select single digits from the chars variable based on the values of ud and lr, respectively.
Each of the four buttons in the form calls one of four functions: up(), down(), left(), or right(). These functions all work in the same way. They call getcar() with appropriate arguments based on the direction, and then they return a value 0. The value returned by the function is incidental because the value is never used anywhere in the script.
Michael Yu's Civic Car Viewer is a concrete example of how combining frames and JavaScript makes it possible to create interactive applications. By taking advantage of frames to build sophisticated interfaces and combining that with JavaScript's ability to generate dynamic URLs, it is possible to extend the simple Web metaphor into something more diverse and powerful.
