Scripting Physlets®

The ability to use JavaScript to control the behavior of an applet is central to developing curricular material with Physlets.  Use this portion of the workshop to modify a simple animation script to to produce an an interactive Physlet-based exercise for your students.

The book  Teaching with Physlets by Wolfgang Christian and Mario Belloni (Prentice Hall, ISBN 0-13-029341-5) contains both a scripting tutorial and a CD with hundreds of scripted examples.  Please consult this book if you are unsure about how to use JavaScript in combination with html to control Java applets.

Note: The  view source option that is available in most browsers allows you to examine scripts that are on the CD or on our web site.  (Windows users should right-click on a page to view the source.)  Copy and paste this source code into your own html pages.  We have noticed that the "save as" or "edit" option that is available with some browsers adds spurious code, particularly to the <applet> parameters.

Scripting Synopsis

The above example shows how the a Physlet can be scripted to present a rectangle moving along a known analytic trajectory.  See the more detailed examples devoted to Animator to learn how to modify this script to solve for a trajectorySound OutSound Out using Newton's Laws.

The most efficient way to include JavaScript in an html page is to define the script in the <head> section of an html page. A typical blank html page looks like this:

<html>
<head> 
<title>Physlets Intro</title>
</head>
<body>
</body>
</html>

A head contains information that is not part of the document text, such as the title between the title tags: <title></title>. It may also contain the JavaScript that controls an applet. Here is an example of a script embedded in the head of this html document:

<head>
<title>Physlets Intro</title>

<script language="JavaScript">

xDefault="5*t*t";
yDefault="0";

function initApplet(xStr,yStr) {
	document.animator.setAutoRefresh(false);
	document.animator.setDefault();
	document.animator.shiftPixOrigin(-150,0);
	id=document.animator.addObject("rectangle", "w=50,h=15"); 
	document.animator.setTrajectory(id,xStr,yStr);
	document.animator.setRGB(id, 255,0,0);
	id=document.animator.addObject("arrow","h=5,v=0");
	document.animator.setTrajectory(id,xStr,yStr);
	document.animator.setTimeInterval(0,3);
	document.animator.setAutoRefresh(true);
	document.animator.forward();
}
</script> 
</head>

Notice that the JavaScript programming language defines variables and functions using a syntax that is very similar to the Java (or C) programming language. Standard "dot" notation is used to refer to objects.  In the above script, the document object is the html page containing the Java applet, and the animator object is the embedded applet we are trying to access.  Methods names follow the words document.animator.  It it these methods that control the Physlet.

Methods are similar to functions or subroutines is older procedure-oriented languages.  Physlets know how to perform a common set of methods, such as setDefault(), as well as  unique methods, such as setTrajector(int id, String x, String y).  Consult the documentation for each Physlets to determine its capabilities.