• Working with Java Applet Parameters

• Basic variables, buttons, and  pop-ups
• Write your own simple script
• Copy It!

The sub commands (stuff after the word APPLET) break down like this:
 
NAME - gives the applet a name which helps the browser from getting "confused" when there is more than one .class file or if there are several .class files and/or javascript running on a page; it's only necessary when there is more than one applet.
 
CODEBASE - tells the applet where to get any additional files it needs to run its program; it is only needed when the extra files are in a different folder.
 
CODE - specifies which .class file will be embeded; similar to the src sub command used with image and sound files.
 
ARCHIVE - sometimes files for a .class file are zipped to take up less space and download faster; this tells the applet which .zip file to look in; it's only necessary if the .class file has an associated .zip file.
 
ALIGN, WIDTH, HEIGHT, HSPACE, and VSPACE - exactly like the image sub commands which position and align them; all the image layout sub commands work with the <applet> command; width and height are the only ones really necessary.
 
ALT - displays the message in quotes when you put the mouse over the java visual effect; this is purely optional.
 
 
Simple right? Almost like embeding an image file. There's one more thing I need to mention. Some older browsers don't support Java .class files and, as I said before, some large networks like college networks disable .class files (but not necessarily javascript) for security reasons. People viewing pages with .class files on computer terminals like these see absolutely nothing! That is, unless you stick either a text message or embed an image right before the </applet> end command. For example the "geoguide" HTML specifies a GIF to be loaded up in place of the applet if it is disabled. Take a look at the HTML (with the basic <applet> sub commands only):
 
<APPLET CODEBASE="/classes/geoguide" CODE="GeoGuide.class"
ARCHIVE="GeoGuide.zip" WIDTH=468 HEIGHT=60>

<a href="/cgi-bin/geoguidencsa.map" target="_top">
<img ismap src="/cgi-bin/homestead/GeoGuideLite_image?bgcolor=White"
alt=""></a>

</APPLET>
 
See the section in green that starts with <a href="...... and ends with alt=""</a>? That part is added to embed an image which links to a file called geoguidencsa.map (an image map). The browser only dispalys this image if the .class file fails to show up. You can change this entire section to anything you want including text. For example if you had wanted to display the message "This browser has java .class files disabled" in boldface instead of the image, you'd type this:
 
<APPLET CODEBASE="/classes/geoguide" CODE="GeoGuide.class"
ARCHIVE="GeoGuide.zip" WIDTH=468 HEIGHT=60>
 
<b>This browser has java .class files disabled</b>
 
</APPLET>
 
 
And that's the basic command for the geoguide!
 
 
 
Working with Java Applet Parameters
 
As I mentioned .class files offer easy customizabilty through the use of parameters. These parameters are specific to each applet and are stuck between the <applet> and </applet>. Let's take a look ince again at the geoguide applet (embeded with the image for non java browsers) with some parameters added in:
 
<APPLET CODEBASE="/classes/geoguide" CODE="GeoGuide.class"
ARCHIVE="GeoGuide.zip" WIDTH=468 HEIGHT=60>
 
<PARAM NAME="bgcolor" VALUE="ffffff">
<PARAM NAME="label" VALUE="My Links">
<PARAM NAME="link1" VALUE="http://www.oocities.org;Geocities">
<PARAM NAME="link2" VALUE="http://www.zdnet.com;ZDnet">
<PARAM NAME="link3" VALUE="link 3 URL;Description">
<PARAM NAME="link4" VALUE="link 4 URL;Description">
 
<a href="/cgi-bin/geoguidencsa.map" target="_top">
<img ismap src="/cgi-bin/homestead/GeoGuideLite_image?bgcolor=Beige"
alt=""></a>
 
</APPLET>
 
 
The stuff in green are several types of parameters which you can set up for GeoGuide.class. When you want to customize a parameter, you start by using the <param> command. You then specify the name of the parameter by adding "name=" to it. For example, if you wanted to specify a background color for the geoguide you'd start with: <param name="bgcolor">. Finally you'd specify the type of change with "value=". For example the entire command to make the Geoguide's background color white you'd type: <param name="bgcolor" value="ffffff">
 
The "label" parameter in the above example specifies a tab for the users own links. The other parameters set up the links themselves, in this case four of them. For example link1 is named Geocities and links to the URL http://www.oocities.org and link2 is named ZDnet which links to http://www.zdnet.com. The other two links are not filled in. For complete instructions on the possible parameters for the geoguide try going to the geoguide installation page. All .class files are customized in a similar fashion although parameters vary with the file. Only the guy who compiled the applet can tell you all the possible parameters.
 
 
 

There are also a confirm pop-up and a "prompt" pop-up. As you saw in the earlier examples the prompt asks you to input text and a confirm asks you to confirm something by either clicking OK or CANCEL. These are therefore more interactive than the alert pop-up and thus javasccript truly comes in. You see, since the action depends on what you choose (OK or CANCEL, or whatever text you might type), variables are required. A variable in programming is a symbol or a string of text (a word) which "varies" depending on what you set its value to. When you set the variables value, for example you choose to hit CANCEL rather than OK on a confirm pop-up, the program checks this value and performs the corresponding action. The variable serves as kind of a "space holder" for an anticipated input (OK or CANCEL for example).
 
So how do you set up a variable? Well it's simple, the HTML source code is just:
<script> var variablename=value </script>
The text in blue is the variable's name and can be any word (no phrases) you want, but try to keep it short. The text in red is its value.
 
In this instance the variable's name is set as "variablename" and its value is permanently set to "value". If you want the value to be "variable" as the name implies, you have to set up a way to get input from someone. One way to do this is by setting the value equal to a prompt like so:
<script> var variablename=window.prompt('Please input some text','put text here');</script>
 
When linked to a button this makes a prompt appear (when the button is clicked) which says "Please input some text" with the words "put text here" in the field where you'd type something. Whatever is typed will be the value of the variable. One way to link it to a button is by putting all the stuf in-between the <script> and </script> tags within the onclick= quotation marks like so:
 
<form><input type="button" value="click me" onclick=" var variablename=window.prompt('Please input some text','put text here'); "></form>
 
Another way to link to a button is by creating a function which the button would activate when clicked. Making a function is similar to making a variable. The HTML source code to declare a function is:
<script> function functionname(){the action goes  here}</script>
 
Like a variable, a function can be named any word, but unlike variables they must always end with a () (a pair of parenthesis). The stuff in red can be set to any action. For example we can stick in there window.alert('YOUR TEXT HERE'); or location.href= which we learned about earlier.
As an example, let's use the action with a variable that uses a prompt to set it's value. The HTML for this would look like this:
<script> function functionname(){var variablename=window.prompt('Please input some text','put text here');}</script>
[note: there's a difference between  ) and } ]
 
Since you don't actually see the function but only its result, you can stick this anywhere within the HTML as long as the tag for the button which activates it comes after it. You can even put it in the head section of an HTML page. We named this function functionname() so in order to link it to a button we would refer a button to it using onclick= like so:
<form><input type="button" value="click me" onclick="functionname()"></form>
 
Ok now we put all that together and we get this:
<script> function functionname(){var variablename=window.prompt('Please input some text','put text here');}</script>
<form><input type="button" value="click me" onclick="functionname()"></form>

This is the result try it out:   

STEP 4: Add that whole thing into your page's HTML and give yourself a good pat on the back. You've just written your first javascript. Good Job! Let's try a working example of it; test it by typing hello, geocities, or anything else. If you type geocities make sure you come back to this page. There's still more to learn! Here's the button: