A gentle introduction to JavaScript

We are going to take the activity we created in the last session, turn it into an applet, and add a JavaScript panel to the web page that lets us change the viewing window.

We save that activity as a dynamic worksheet.

We will name the worksheet Quadratic Equations. To help our organization we will save the web page in a new folder, with the folder and web page named QuadraticFunctions.

This gives us our applet, viewed in Firefox

In SeaMonkey, we want to look at the applet 2 ways, in normal view

And also as source code.

Looking at the source code we are interested in the block of code that makes up the applet tag. It begins “<applet” and ends “</applet>”. In particular, we are interested in the line “applet name=ggbApplet”.

We now look at block of JavaScript we are going to insert.

The code breaks into two pieces. The second piece is a form, named ViewForm, that has 4 fields for the values of the viewing window and a button to set the values of the viewing window. Changing any of these components calls a function named setView.

The first piece of the form is the function setView. When called, it gathers the 4 values from the form and uses them in a command to be executed by the applet.

We put the script into the source code of the web page after the applet tag.

When we save and go back to the normal view in SeaMonkey, we can see the JavaScript panel

Saving the file and refreshing the browser window gives us a web page with a JavaScript control.

Some more examples are discussed in MoreJavascript.pdf

© 2011, Mike May, S.J., maymk@slu.edu

  Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license, Mike May, S.J. maymk@slu.edu