HP color scanner - Furman University



Basic Uses of Javascript and Java:

Modifying Existing Scripts and Applets

Overview: Perl is a very powerful language for implementing Web interactivity, but it has distinct drawbacks. It is difficult to learn, or even to interpret previously written code. Also, on many servers special permission is required to run Perl scripts. These shorcomings are addressed (and others introduced!) by two other languages used for making Web pages interactive: Javascript and Java. Though not as complex as Perl, these languages are nevertheless extensive and learning to program with them from scratch is beyond the scope of this workshop. However, a number of useful objectives can be accomplished by copying (and in some cases modifying) scripts written in Javascript or applets written in Java. It is this idea that we explore here.

1. Javascript Overview

As a scripting language for interactive Web pages, Perl has several disadvantages. It is very difficult to learn and use effectively, and Perl scripts that someone else has written can be close to indecipherable. Also, Perl scripts must be stored (on many systems) in a special location which only the system administrator can often access. Javascript is another scripting language that addresses these problems. Considerably easier to learn and interpret, Javascript allows the creation of scripts which are placed right in the HTML of your Web page.

Javascript is not without its downside, however. It lacks some of the power of Perl, and cannot (in its current version) read from or write to external files. This means that Javascript scripts cannot have any long-term memory like Perl scripts can -- storing information for future use.

Nevertheless, Javascript scripts are extremely useful for a variety of activities, some of which have clear pedagogical applications. We will discuss some of these in this activity.

2. Copying and Modifying Javascript Scripts

As noted in the overview, we don’t have enough time to learn the Javascript language in this workshop, but we will begin to gain an understanding of how it can be used effectively by writing a very simple script ourselves, and then borrowing and modifying existing scripts from elsewhere on the Web.

Case study #1: An on-line slide show

Suppose you wish to display a sequence of charts on a Web page, or a collection of artwork. In short, any series of images. One thing you could do is put each image on a separate web page and construct links between the pages, but that’s a lot of work. Alternatively, you could use the FrontPage “banner ad” feature that we explored earlier this week, but the user has no control over how fast the images go by.

Javascript provides a perfect solution. As noted above, Javascript provides the capability of manipulating the various objects on a Web page while the page is being displayed. In this case, we could use it to dynamically swap images without changing the HTML page itself. What is needed is a relatively simple program that is embedded with the HTML code.

FrontPage provides a tool for working with Javascript scripts, but it isn’t as convenient as some of the other features of FrontPage. (It actually presumes a reasonable amount of knowledge about scripting ahead of time.) So we’ll regress a little bit and return to editing HTML directly. Our project will be to make a slide show of the various Furman logos that we used the other day. (They should be stored in the images directory of your Demo Web. Move them there if they are not. Remember that FrontPage will automatically update all of the other links to these images for you.)

a. Use the FrontPage editor to open a new page within your Demo Web. Position the cursor somewhere in the page, then click the “HTML” tab to edit the HTML code.

b. What we need is a place for the first image of our sequence to be displayed, and buttons for moving to the next picture and returning to the previous picture. Enter the following code:

Slide Show

Previous

Next

Take a look at this code for a moment. Much of it you should be able to recognize. What we basically have done is inserted one of the Furman images on the page, with two hyperlinks over the words “Previous” and “Next” underneath it. One new item is the inclusion of the name “myPicture” for the image. This is called a variable in programming. It is an abstract name given (in this case) to the image in this particular position. Right now the image is furman3.gif, but later we can change this using the variable “myPicture”.

Also new are the URLs for the “Previous” and “Next” links. Rather than refer to different pages on the Web, they specify that particular Javascript functions are to be called. A function in programming is a segment of code which may be called upon to perform a specific task. In this case, we need these functions to assign new images to the variable “myPicture”. Next, we’ll implement these functions.

c. Javascript function code is typically placed in the header of the Web page. Position the cursor just before the tag. Then type the following:

Let’s take a look at this code briefly. What the SCRIPT tags do is specify to Netscape that Javascript is the language we are using. Next, we indicate the list of images that will be used in the order we want them to appear. Finally, we have the two functions which will be executed when the “Previous” and “Next” buttons are clicked.

Without going into too much gory detail, what we have here is the “processPrevious” function setting the variable “myPicture” to indicate the image before the current one in the image sequence, unless the current image is the first one in the sequence. The “processNext” function advances the value of “myPicture” to the next image in the sequence, unless it is at the end.

d. Save the page and preview it. Try out the links. Assuming no typos or other errors, the slide show should be working.

This example gives a pretty good feel for what Javascript is like as a language, but it is basically a “showy” example. Next we’ll get more practical.

Case Study #2: On-line practice quizzes

One very popular application of Javascript is to the design of on-line quizzes for students to test their knowledge of a particular subject. A number of suitable scripts have been written, and all that is required is for the user to copy the code to their own Web page and edit the questions and answers. Before we step through an example of this, you should note that quizzes such as this are notably insecure, in that students can generally find the answers simply by using Netscape to view the source of your quiz page. Thus such tools should probably be used for practice only. (In future versions of Netscape it is very likely that you will be able to protect the source code of HTML pages, and so this will not be a limitation for long.)

Let’s try implementing an on-line quiz.

a. Use Netscape to access the site . Experiment with this simple quiz to see how it works. (Note that this simple quiz has been frequently copied on the Web. For instance, see the following Web site: )

Note: Javascript, like Perl, can read the contents of HTML form fields. Unlike Perl, however, Javascript can also write new contents to form fields.

b. From the File menu, select Save As , and be sure to save the file as “HTML File” or “Source” (depending on your browser) and not “Text”. (The latter option gives you the text of the page, not the underlying HTML.) Save the file in your Web directory.

c. Use a text editor (such as “Notepad” or you could use FrontPage) to open the new file. Take a few moments to study it. Even without a thorough understanding of Javascript (or any understanding, really) you should be able to make some sense of the code. Specifically, look for where the questions are located, the answer options, and the correct answers. You may even be able to spot where the responses to the quiz-taker are defined (though this is a bit harder).

d. Edit the file to include different questions and answers. Try it out using Netscape.

Not very difficult at all! At least it’s not difficult to change the questions and answers and keep the format the same. However, if you’re willing to roll up your sleeves and learn a bit about Javascript itself, you can also make more significant changes. For example, suppose you would like to have a different response to the user for each incorrect response to a question. If you’re interested in this option, ask me how it might be done.

If this sample quiz isn’t quite what you were looking for, there are several other options. Try one of these, for instance:

•

Another simple quiz format.

•

A downloadable program which will automatically generate a Javascript quiz for you.

•

interactive/templates/jsquiztemplate.html

A template for two questions which you can copy and paste for as many questions as you want.

•

A quiz which incorporates some fancy image graphics.

Case Study #3: On-line calculators for different disciplines

A number of disciplines frequently require mathematical computations of different kinds. Aside from mathematics itself, such problems can be seen in economics, accounting, computer science, physics, chemistry and in some of the social sciences as well. Javascript calculators for many different problems already exist, and the creation of tailor-made scripts is not difficult, even without a complete mastery of Javascript.

a. Use Netscape to access the URL:



Take a few moments to experiment with this simulation model. Even if you are not an economist you might have some ideas for an analagous calculator which might be applicable in one of your classes.

b. View the source code for this page. There are two main sections of the page to study. First, scroll to the bottom of the source code to find where the various buttons are defined. The code onClick=îsomething(this.form)î defines what action will be taken whenever a particular button is clicked. For instance, ìcalculateî or ìfindmultî.

c. Scroll back to the top of the code. Here is where the details of the actions are defined. If you look at this code closely, youíll see the pattern emerging, and itís a simple pattern. Consider a line like this one:

var inv = parseFloat(form.investment.value);

All that is happening here is that the value which has been typed into a particular field ñ ìinvestmentî in this case ñ is being converted into a numerical value and is being stored in a special memory location called ìinvî. This value is then used in a calculation later on in the code. The result of that calculation is stored in an answer field of the form (for example, “equilibrium”) with a line like this:

form.equilibrium.value =

(autocons + inv + g_s + exp - autoimp - (mpc*autotax)) / diff;

The reason for stepping you through an example like this is to show you how a completely unique calculation that you require might be implemented with only a minimal understanding of Javascript.

A very good archive of different Javascript calculators can be found at:



Case Study #4: Grade estimators

A discipline-independent use of Javascript calculator is a utility to allow your students to estimate their current grade in your class, or determine what theyíll need on the final exam to get a specified grade. Consider these two examples, both implemented at ACS schools:



(Traci Giuliano)



(Kristy McNamara)

3. Javascript and Perl

Certain limitations of Javascript can be overcome by pairing Javascript scripts with Perl scripts. For example, Javascript has no e-mail capability. However, it would be a simple matter to implement ñ for instance ñ a Javascript quiz as described above which e-mails the studentís grade to you upon completion. The FormMail.pl script discussed in a previous activity could be used for this purpose.

Even more powerfully, Perl can be used to overcome Javascriptís inability to read and write files. Of course, we then are faced with the difficulty in programming with Perl, as discussed above. However, clever examples of Perl/Javascript combinations are downloadable from the Web. One example ñ an on-line survey form ñ can be found at:



Note that all of the relevant scripts can be downloaded in a convenient archive.

The site that contains this application is called ìCut and Paste Javascriptî and also contains other applications which might be of interest to you.

4. Java Overview

Java, unlike Javascript, is a full-fledged, standalone programming language. That is, it has all the power and flexibility of commonly used languages such as C++, Ada and Pascal, and thus does not need to be used in a Web environment. One of the reasons for its popularity, however, is that it does work seemlessly in a Web environment. Skilled programmers can use Java to create applications — called applets — which can access and modify files through Web pages, create dynamic pages, and display visual effects, among other things. Java is differentiated from Javascript in that it is far more powerful; it can be used apart from the Web, and programs that you write with Java are not contained within Web pages.

A program in Java is called the Java source. (It is stored in a file with the extension .java.) This is the code that is (more or less) readable by humans. Java source code must be translated by a complicated process into the binary language of 0’s and 1’s that a computer can understand. This translated code is called an applet and is stored in a file with the extension .class. If you have access to the .class file, you can use an applet yourself, simply by embedding it in your Web page using HTML. In order to modify an applet from its original functionality, you’d need to know how to edit the source code appropriately, and then translate the source into the applet (which requires another program, called a Java compiler or interpreter.)

What is so special about Java is that these applets are machine independent. That means it doesn’t matter if you’re using a Mac, a PC or a UNIX system. As long as your operating system and your browser is current enough, the applet will work.

Next, we’ll take a few moments to download and incorporate an applet on a Web page.

5. Copying Java Applets

Fortunately, you can make use of Java applets without learning Java, just as you can with Javascript scripts. In fact, copying Java applets is just as easy as copying Web pages. As is the case with copying Web pages, though, you canít modify a Java applet without knowing the Java language. For this activity, weíll focus just on copying an applet as-is.

a. Use Netscape to access the site:



b. There are many useful, interesting, or just plain entertaining applets at this site. It may not be too practical, but just for practice let's install one that displays text with an interesting effect. Click on “Text Effects”, and then on “CoolScroll”. You will then go to a page where the applet is demonstrated.

c. Scroll down the page. There you will find links to the applet source files (which you don’t really need, unless you are planning to modify the applet), the .class files, and sample HTML code for embedding the applet in a Web page.

d. Download the necessary .class file to your “Demo Web” directory. (Use the right mouse button, clink on the link, and select Save Link As .) Download the additional font and background files too.

e. Highlight the entire segment of code labeled “HTML Source” and copy it. Then use FrontPage Editor to create a new page. Click the “HTML” tag and paste the code into it. (If you saved the files in your Demo Web directory, you shouldn’t have to modify this code at all.)

f. Return to the Web site from which you copied this applet. Read over the explanation of what the various parameters (settings) of the applet mean. The most important in this case is the “scrolltext” parameter, which specifies what the applet will display.

g. Return to FrontPage. Click the “Normal” tab. Double-click the “J” icon to open the “Java Applet Properties” window. In the “Applet Parameters” box, scroll down to find the “scrolltext” parameter. Double-click it and enter MY CLASS HOME PAGE in all caps. Click OK. Click OK in the properties window.

h. Preview the new page. Do you think this would make a good banner for your course home page?

A bit of Web searching will turn up hundreds of pre-coded applets which accomplish different tasks. Many are quite a bit more useful than this example. For instance, the site



indexes into the same “Java Boutique” site that we’ve already visited, but highlights the educational links.

The general procedure for acquiring and personalizing an applet is always basically the same. (1) Download the .class file(s) and any other supporting files. (2) Copy and paste the HTML code that calls and configures the applet. (3) Edit the applet parameters so the applet does what you want.

6. A word about Microsoft

Javascript and Java have taken the Web world by storm. Neither of them are creations of Microsoft, and as you might expect, they want a piece of the action too. So they have developed competitors to each. VBScript is Microsoft’s version of Javascript. It is based on the Visual Basic programming language. And ActiveX Controls correspond to Java applets on Web pages. You may wish to experiment with these technologies as well in the future.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download