• The Old Way
• Plug-in Power
• Internet Programming for the Rest of Us
  • Figure 20.1.
  • Figure 20.2.
• Strong Java
  • Figure 20.3.
  • Figure 20.4.
• ActiveX Controls
  • Figure 20.5.
  • Figure 20.6.
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 20

Scripting, Applets, and ActiveX

Congratulations. You've got HTML under your belt, and you're ready to graduate from the school of Web publishing and enter the real world of Web development. The World Wide Web of the past was simply a way to present information, and browsing wasn't too different from sitting in a lecture hall, watching a blackboard, or staring at an overhead projector screen. But today's Web surfer is looking for interactive, animated sites that change with each viewer and each viewing.

To achieve that level of interactivity, this chapter introduces a number of ways you can go beyond passive text and graphics into the dynamic world of modern Web site development.

It would take a guide many times the length of this one to teach you all the scripting and programming languages that can be used to create interactive programs for the Web. However, you can easily learn the HTML to incorporate prewritten programs into your Web pages. To Do: Reading this chapter will give you enough information to decide what types of programs or scripts might be best for your Web site.

The Old Way

Until very recently, there were only two ways to enhance the functionality of a Web browser. You could write and place programs on the Web server computer to manipulate documents as they were sent out, or you could write and install programs on the user's computer to manipulate or display documents as they were received.

You can still do both of these things, and they may still be the most powerful and flexible means of enhancing Web pages. Unfortunately, both involve a high level of expertise in traditional programming languages (such as C++) and knowledge of Internet transfer protocols and operating system architecture. If you're not fortunate enough to already be an experienced UNIX or Windows programmer, as well as something of a Net guru, you're not going to start cranking out cool Web applications tomorrow (or the next day, or the next...).

On the server side, simplified scripting languages like Perl can flatten the learning curve quite a bit. Many people who don't consider themselves real programmers can hack out a Common Gateway Interface (CGI) script to process Web forms or feed animations to a Web page without too many false starts. With visual programming tools such as Visual Basic, you can learn to produce a respectable client-side helper application fairly quickly as well.

But there is an easier way, and because this chapter is intended to take you on the fast track to Web development, I have to recommend that you avoid the old ways until you run into something that you just can't accomplish any other way.

Plug-in Power

Before dashing into the inside lane, though, I do need to tell you about one very new way to enhance the Web that is not any easier than the old ways. It is, however, even more powerful when used well. I'm referring to Netscape Navigator plug-ins, which are custom applications designed especially to extend Netscape's capabilities. The Live3D, LiveAudio, and LiveVideo capabilities that are built in to Netscape Navigator 3.0 are actually accomplished through plug-ins, for example.

You're probably familiar with some of the more popular plug-ins, such as Shockwave and Acrobat. Because these programs (which are usually written in C++) have direct access to both the client computer's operating system and Netscape's data stream, they are usually faster, more user-friendly, and more efficient than any other program you can create. They can draw directly to the Netscape window, making their output seem as though it were embedded into a Web page, or they can process invisibly in the background.

All this power comes at a price, however. The user must manually download and install your plug-in, and you must write a completely separate plug-in for every operating system you want to support. And woe betide you if your plug-in is distributed with a bug in it. Because plug-ins run at the machine level, they can easily crash Netscape and/or the user's computer if they malfunction.

Therefore, developing plug-ins is not for the faint of heart. Yet the lure of power has seduced many a programmer before, and if you can call yourself a "programmer" without blushing, you too may find it well worth the effort. All in all, writing and debugging a plug-in is still considerably less daunting than developing a full-blown business application.

Internet Programming for the Rest of Us

Suppose you just want your Web order form to add up totals automatically when customers check off which products they want. This is not rocket science. Implementing it shouldn't be either. You don't want to learn UNIX or C++ or the Windows 95 Applications Program-ming Interface. You don't want to compile and install half a dozen extra files on your Web server, or ask the user to download your handy-dandy calculator application. You just want to add up some numbers. Or maybe you just want to change a graphic depending on the user's preferences, or the day of the week, or whatever. Or maybe you want to tell a random joke every time somebody logs on to your home page. Until now, there really was no simple way to do these simple things.

JavaScript gives you a way. OK, so it's still programming. But it's the kind of programming you can learn in an afternoon, or in an hour if you've fooled around with BASIC or Excel macros before. It's programming for the rest of us. JavaScripts go right into the HTML of your Web pages, wherever you want something intelligent to happen. For example, the code to add up an order form might look like Figure 20.1.

Figure 20.1. JavaScript allows you to include simple programming directly in an HTML document.

Though the code in Figure 20.1 is unrealistically simple for any real company's order form (most companies would like at least the address and phone number of the person placing the order), it is a completely functional JavaScript-enhanced Web page. Figure 20.2 demonstrates what the form would look like after a user entered the number 3 in the left box. The number 75 in the right box is computed automatically.

Figure 20.2. The JavaScript in Figure 20.1 produces this form, which adds up the total based on the number of widgets you enter.

Even if you don't immediately understand the exact syntax of each JavaScript statement, it should be obvious that it is much easier to learn than any other way to accomplish the same thing. Most programmers could probably customize and expand the page in Figure 20.1 quite a bit without knowing anything whatsoever about JavaScript. What's more, this page works on any server and any JavaScript-enabled browser on any operating system.

Even if you don't do programming at all, you may find a JavaScript that can be incorporated into a Web page of your own with little or no modification. Use Figure 20.1 as a guide for placing the JavaScript elements where they should go; generally, functions go in the <HEAD> area, preceded by <SCRIPT LANGUAGE="JavaScript">, and followed by </SCRIPT>. The parts of the script that actually carry out the actions when the page is loaded go in the <BODY> part of the page, but still need to be set aside with the <SCRIPT> tag. Sections of script that respond to specific form entries go in the <INPUT> tag, with special attributes such as ONCURSOR.

---

Time Saver: For maximum compatibility with older Web browsers, you can put the old comment tag <!- just after the <SCRIPT> tag, and put -> just before </SCRIPT>. This will hide the script from any browser too old to recognize the <SCRIPT> tag.

---

You can also put JavaScript into a separate file by putting the name of that file in a SRC attribute within the <SCRIPT> tag, like this:

This is especially handy when you are using a script that someone else wrote and you don't want it cluttering up your HTML. Some parts of the script, such as JavaScript attributes of form <INPUT> tags, may still have to go in your HTML document, however.

Strong Java

JavaScript does have its drawbacks and limitations. For any high-volume data or image-processing work, it would be too slow. Complex applications of any kind are poorly suited for inclusion in HTML pages. There are only so many lines of code you want to wade through to see the Web page itself.

When you outgrow JavaScript, does that mean you'll need to return to server-side scripting or applications programming? No. JavaScript is just the baby sister of a more robust and powerful language called Java. Like JavaScript, Java is especially designed for the Web. And like JavaScript scripts, Java programs install and run automatically whenever a Web page is loaded. However, unlike JavaScript, Java programs are compiled into a more compact and efficient form (called bytecodes) and stored in a separate file from the Web pages that may call them.

Java also includes a complete graphics drawing library, security features, strong type check-ing, and other professional-level programming amenities that serious developers need. The biggest limiting factor with Java mini-applications (called applets) is that they must be small enough so that downloading them won't delay the display of a Web page by an intolerable amount. Fortunately, Java applets are extremely compact in their compiled form and are often considerably smaller than the images on a typical Web page.

Best of all, the syntax of Java is nearly identical to JavaScript, so you can cut your teeth on JavaScript and easily move to Java when you need or want to.

You'll find many ready-to-use Java applets on the Web, and Figure 20.3 shows how to include one in a Web page. The following HTML inserts a Java applet named RnbText.class (which must be placed in the same directory as the Web page) with the <APPLET> tag. This applet makes some text wiggle like a wave while rainbow colors flow through it, as shown in Figure 20.4.

The WIDTH and HEIGHT attributes do just what you'd expect them to--specify the dimensions of the region on the Web page that will contain the applet's output. The <PARAM> tag is used to supply any information that the specific applet needs to do its thing. The NAME identifies what information you're supplying to the applet, and VALUE is the actual information itself. In this example, the applet is designed to display some text, so you have to tell it what text to display.

Every applet will require different settings for the NAME and VALUE attributes, and most applets require more than one <PARAM> tag to set all their options. Whoever created the applet will tell you (usually in some kind of readme.txt or other documentation file) what NAME attributes you need to include, and what sort of information to put in the VALUE attributes for each NAME.

Note that in Figure 20.3, the same applet is used twice on the page. This is quite efficient, because it will only need to be downloaded once, and the Web browser will then create two copies of it automatically. Figure 20.4 shows a still snapshot of the resulting animated Web page.

Figure 20.3. Java applets are pre-written programs that you place on your Web page with the <APPLET> tag.

---

Just A Minute: In the near future, the standard tag for inserting a Java applet on a Web page will change from <APPLET> to <OBJECT>. You'll read more about that change in Chapter 24, "Preparing for the Future of HTML."

---

Figure 20.4. The <APPLET> tags in Figure 20.3 insert a pro-gram to draw wiggly, colorful animated text on the page.

ActiveX Controls

For quite some time, Microsoft Windows has included a feature called object linking and embedding (OLE), which allows all or part of one program to be embedded in a document that you are working on with another program. For example, you can use OLE to put a spreadsheet in a word processing document.

When the Internet explosion rocked the world in the mid-90's, Microsoft adapted their OLE technology to work with HTML pages online and renamed it ActiveX. Everybody likes to invent their own jargon, so ActiveX programs are called controls rather than applets.

Though ActiveX is touted as the main competitor of Java, it actually isn't a specific programming language. It's a standard for making programs written in any language conform to the same protocols, so that neither you, the Web page author, nor the people who view your pages need to be aware of what language the control was written in. It just works, whether the programmer used VisualBasic, VBScript (a simplified version of VisualBasic), C++, or even Java.

It's not surprising that support for the Microsoft ActiveX protocol is built into Microsoft Internet Explorer 3.0. For users of Netscape Navigator 2.0 and 3.0 to be able to see ActiveX controls, they need to download and install a plug-in from Ncompass Labs (http://www.ncompasslabs.com).

---

Just A Minute: Version 4.0 of Netscape Navigator hasn't been released as of this date, but Netscape is promising that it will have some limited support for ActiveX built-in. Note, however, that ActiveX controls will still only work on Windows and Macintosh computers. Also, ActiveX controls must be separately compiled for each different operating system.

---

Because ActiveX is the newest of the technologies discussed in this chapter, you must use the new <OBJECT> tag to insert it into a page.

As Figure 20.5 shows, an ActiveX <OBJECT> tag looks rather bizarre. Here's the relevant HTML from that page:

The bizarre part is the CLASSID attribute, which must include a unique identifier for the specific ActiveX control you are including. If you use an automated program such as Microsoft's ActiveX Control Pad to create your ActiveX pages, it will figure out this magic number for you. Otherwise, you'll need to consult the documentation that came with the ActiveX control to find the correct CLASSID.

As if the long string of gibberish in CLASSID wasn't enough, the ID attribute must include another unique identifier, but this time you get to make it up. You can use any label you want for ID, as long as you don't use the same label for another ActiveX control in the same document. (ID is used for identifying the control in any scripts you might add to the page.)

---

Time Saver: If you are something of a whiz with Windows, you can look in the Windows class registry for the CLSID in HKEY_CLASSES_ROOT. If the previous sentence makes no sense to you, you'll need to rely on the person who wrote the ActiveX control (or an automated Web page authoring tool) to tell you the correct CLASSID.

---

The <PARAM> tags work the same with <OBJECT> as discussed earlier in this chapter with the <APPLET> tag. It provides settings and options specific to the particular ActiveX control you are placing on the Web page, with NAME identifying the type of information, and VALUE giving the information itself. In the example from Figure 20.5, the REF attribute indicates that the <PARAM> tag is specifying the location of the ActiveX control itself. No other <PARAM> parameters are needed by this particular control.

Notice that nothing in the HTML itself gives any clue as to what the ActiveX control on that page actually looks like or does. Only when you view the page, as in Figure 20.6, do you see that it is a nifty little program to mix custom colors by combining red, green, and blue brightness settings.

Figure 20.5. The <OBJECT> tag on this page embeds an ActiveX control.

Figure 20.6. The ActiveX control on this page is a program for mixing custom colors, though you wouldn't know it by looking at the HTML in Figure 20.5.

Neither Figure 20.5 nor Figure 20.6 reveal what language the person who created the ActiveX control used to write it. If you opened the cntrl.alx file itself, you'd see that Ken Cox used a version of VisualBasic specifically designed for Web page use, called VBScript. I'll spare you the rather lengthy source code listing here, but you can find this and other controls by Ken Cox at

http://www.rose.com/~kencox/index.asp

Summary

This chapter has given you a brief outline of the three types of interactive programming that are easiest to add to your Web site: JavaScript, Java applets, and ActiveX controls. It also discussed the difference between these technologies and more traditional server-side scripting and Netscape plug-ins.

You didn't get enough technical stuff in this short chapter to write your own programs and scripts, but you did learn the basic HTML to insert prewritten ones into your Web pages.

Table 20.1 summarizes the tags covered in this chapter.

Table 20.1. HTML tags and attributes covered in Chapter 20.

Just a Minute: In addition to the standard <APPLET> attributes in Table 20.1, you can specify applet-specific attributes to be interpreted by the Java applet itself.

Q&A

Q So just what exactly is the difference between "scripting" and "programming," anyway?

A Usually, the word "scripting" is used for programming in relatively simple computer languages that are integrated directly into an application (or into HTML pages). However, the line between scripting and "real programming" is pretty fuzzy.

Q I've used Visual Basic before, and I heard I could use it in Web pages. Is that true?

A Yes, but only if you want to limit the audience for your pages to users of Microsoft Internet Explorer version 3.0 or higher. Microsoft has implemented LANGUAGE= "VBScript" as one of the language options in the <SCRIPT> tag, but so far the rest of the world is sticking to JavaScript. Visit the Microsoft Web site (http://www. microsoft.com) for details about the differences between VBScript and Visual Basic.

Q I've heard about ActiveX scripting and ActiveX documents. How are these different from ActiveX controls?

A In Microsoft-speak, "ActiveX Scripting" means VBScript or JavaScript linking into a page as an ActiveX control. ActiveX documents are HTML pages that use an ActiveX control to view a word processing document or spreadsheet within a Web page. (Career tip: If you want a job at Microsoft, consider listing your first name as "ActiveX" on the application form. They like that.)

Q Most of the Java applets I find on the Internet have two files, one ending with .java and one ending with .class. Which one do I put on my Web page, and what do I do with the other one?

A Put the file ending with .class on your Web page with the <APPLET> tag. The .java file is the actual Java source code, provided in case you are a Java programmer and you want to change it. You don't need the .java file to use the applet.

Quiz Questions

1. What tag is used to distinguish JavaScript or VBScript from the rest of a Web page?

2. Suppose you found a cool Java game on the Internet and the documentation with it says it's free for anyone to use. It says you need to give the applet two parameters: the "speed" should be between 1 and 100, and the "skill" should be between 1 and 5. The applet itself is named roadkill.class. Write the HTML to display it in a 400x200-pixel area in the middle of a Web page.

3. From the Microsoft Internet Explorer Web site (http://www.microsoft.com/ie/), you can download the IELABEL.OCX control, which displays some text in any orientation you choose. Write the HTML to insert the ActiveX control in a Web page, given the following information:

1. The class ID is:

• clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}

Confine the display area to 300x300 pixels.

• Specify the following parameter values:

Caption: "New and Exciting!"

• Angle: 45

FontName: Arial Black
FontSize: 18

Answers