Lean CSS
Welcome to CSS
Introduction to CSS
CSS Syntax
Insert style sheet
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List
CSS Dimensions
CSS Classification
CSS Positioning
CSS classes
CSS elements
CSS2 Media Types
CSS Units
CSS Colors
 

Free Tutorials
HTML
Learn HTML
Learn CSS
Learn XML
Learn WML
Database
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Programming
Learn C++
Learn JavaScript
Learn Vbscript
Learn VisualBasic

Chapter 19

Real-Life Examples IV


CONTENTS

This chapter presents three example applications that apply the techniques you learned in Part V, "JavaScript Alternatives and the Future," of this guide. These include the following:

  • Example 1: Manipulating a Java Applet. You looked at a simple example of accessing Java from JavaScript in Chapter 16, "Integrating JavaScript with Java." This is a more complicated example.
  • Example 2: Creating JavaScript Dynamically. This uses SSI, which you looked at in Chapter 17, "Combining JavaScript, CGI, and SSI," to modify a JavaScript program before the page is sent to the browser.
  • Example 3: Using an ActiveX Control. You looked at ActiveX in Chapter 18, "Using ActiveX and Microsoft Internet Explorer 3.0." This example uses an ActiveX control to include a chart in a Web page.

Example 1: Manipulating a Java Applet

You learned a simple example of accessing the methods of a Java applet from within JavaScript in Chapter 16. For this example, let's create a more complicated example with extra features. This example demonstrates the following concepts:

  • Preparing a Java program to be used from JavaScript
  • Creating and compiling a Java applet
  • Controlling Java from JavaScript with event handlers

For this example, I have expanded the ControlJava applet created in Chapter 16. It now includes a new method, SetFont(), which enables the font name and size to be changed. This is a public method, so it can be accessed through JavaScript. The Java source code for the applet is shown in Listing 19.1.


Listing 19.1. (ControlJava2.java) The Java source code for the Java applet to be controlled from JavaScript.
import java.applet.Applet; import java.awt.Graphics; import java.awt.Font; public class ControlJava2 extends Applet { Font f = new Font("TimesRoman", Font.BOLD, 60); String Message; public void init() { Message = new String("Java Test"); } public void SetMessage(String MsgText) { Message = MsgText; repaint(); } public void SetFont(String NewFont, int NewSize) { f = new Font(NewFont,Font.BOLD,NewSize); repaint(); } public void paint(Graphics g) { g.setFont(f); g.drawString(Message, 15, 50); } }

This source code should be placed in a file called ControlJava2.java. Once you've done that, you can compile it into a Java class with this command:

bin\javac ControlJava2.java

Note
Be sure you have included the Netscape packages when you compile this applet. See Chapter 16 for details.

You now have a working applet that should work within any HTML file-but to access the new options you will need JavaScript. Listing 19.2 shows the HTML document with JavaScript functions to change the text, font, and size for the applet.


Listing 19.2. (JAVA2.asp) An HTML form and JavaScript functions to update the Java applet.
<HTML> <HEAD> <TITLE>Control a Java Applet</TITLE> <SCRIPT LANGUAGE="JavaScript"> function setfont() { x = document.form1.font.selectedIndex; font = document.form1.font.options[x].value; x = document.form1.fontsize.selectedIndex; size = document.form1.fontsize.options[x].value; document.applet1.SetFont(font,parseInt(size)); } </SCRIPT> </HEAD> <BODY> <H1>Control a Java Applet</H1> <HR> The Java applet below displays text in a large font. You can enter new text to display in the form below, and JavaScript will call the Java applet to change the text. You can also change the font and size. <HR> <FORM NAME="form1"> <INPUT TYPE="TEXT" NAME="text1"> <INPUT TYPE="BUTTON" VALUE="Change Text" onClick="document.applet1.SetMessage(document.form1.text1.value);"> <BR> <b>Font:</b> <SELECT NAME="font"> <OPTION VALUE="TimesRoman">Times New Roman <OPTION VALUE="Arial">Arial <OPTION VALUE="Wingdings">WingDings <OPTION VALUE="Courier">Courier New <OPTION VALUE="Terminal">Terminal font </SELECT> <b>Size:</b> <SELECT NAME="fontsize"> <OPTION VALUE="10">10 <OPTION VALUE="15">15 <OPTION VALUE="20">20 <OPTION VALUE="25">25 <OPTION VALUE="30">30 <OPTION VALUE="48">48 <OPTION VALUE="60">60 </SELECT> <INPUT TYPE="BUTTON" VALUE="Change Font" onClick="setfont();"> </FORM> <HR> <APPLET NAME="applet1" CODE="ControlJava2.class" WIDTH=450 HEIGHT=125> </APPLET> <HR> End of page. </BODY> </HTML>

Figure 19.1 shows this JavaScript application in action. Here is a breakdown of how it works:

Figure 19.1 : The Java manipulating program in action.

  • A new button and two select lists have been added. These enable the user to select a new font and font size.
  • The Change Text button calls the Java applet's SetMessage method directly to change the text.
  • The Change Font button calls a JavaScript function called setfont().
  • The setfont() function calculates the selected value for the font and size and passes them to the Java applet's SetFont method for processing. Like the text change, this change should take effect immediately.

You should now have a good idea of how to manipulate a Java applet from within JavaScript. Finally, here are a few observations about this application:

  • Notice that you had to use parseInt to convert the font size to an integer. Java is expecting an integer and doesn't convert as readily as JavaScript.
  • Because the JavaScript select object has no direct method or property for returning the currently selected value, you had to calculate it using selectedIndex.
  • Because the Java applet is restricted to a certain height and width, some combinations of fonts and sizes might be cut off.
  • There's no way for JavaScript to know which fonts are installed on your computer. The fonts I included in Listing 19.2 should be available on most Windows systems; for Macintosh and others, you need to substitute an accurate list of your fonts.

Example 2: Creating JavaScript Dynamically

This is an example of using SSI to generate JavaScript. It uses the following techniques:

  • Using SSI in a Web page
  • Combining SSI with JavaScript
  • Writing a simple Perl program

One of the most common items on the Web these days is a hit counter-a simple counter that displays the amount of visitors a page has received. They're a bit of a cliché right now, but many users can't live without them.

One thing is certain about counters, though-you can't make one using JavaScript alone, because JavaScript can't store any information on the server. You could count how many visits a particular user has made with cookies, but there's not much use for that.

As a solution, let's combine JavaScript with SSI. A simple SSI program will be used to insert the counter into the page; it will be inserted in the form of a JavaScript assignment statement, so the counter can be used in any JavaScript function.

To begin, Listing 19.3 shows the SSI program, written in Perl, for the counter.


Listing 19.3. (COUNT.PL) The Perl SSI program for the counter example.
#!/usr/local/bin/perl MAIN: { print "Content-type:text/html\n\n"; $count = 'cat count.dat'; $count += 1; open(LAST,">count.dat"); print LAST $count; close LAST; print "count = ",$count, "\n"; }

Here is a brief explanation of this program:

  • The MAIN function is the primary function for this Perl program (and the only function).
  • The first print statement provides the required MIME type for the output of the SSI program.
  • The counter variable, $count, is read from a file on the server called count.dat. It is then incremented and output back to the same file.
  • Finally, the counter is printed, with count = before it. This will serve as the JavaScript statement to initialize the counter.

Next, you will need a JavaScript program to use the counter. The HTML document, complete with JavaScript and the SSI directive, is shown in Listing 19.4.


Listing 19.4. The HTML document with JavaScript functions for the counter example.
<HTML> <HEAD> <TITLE>Counter Test in JavaScript and SSI</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--#exec cgi="count.cgi"--> </SCRIPT> </HEAD> <BODY> <H1>A counter using SSI and JavaScript</H1> <HR> This page includes a counter using SSI, and made available to JavaScript. <HR> The count is: <SCRIPT LANGUAGE="JavaScript"> document.write(count); </SCRIPT> <HR> Press button for an alert with the count. <FORM NAME="form1"> <INPUT TYPE="BUTTON" VALUE="Click for Count" onClick="window.alert('The count is' + count);"> </FORM> <HR> </BODY> </HTML>

This example is shown in Netscape in Figure 19.2. Here are a few notes about how this program works:

Figure 19.2 : The counter example, as displayed by Netscape.

  • The SSI-inserted line of JavaScript assigns the current value to the JavaScript count variable in the header of the program.
  • The document.write method is used to work with the counter in the body of the document.
  • As a demonstration of using an event handler, the button provides another method of displaying the count-this time with a dialog box.

This example should give you some food for thought. By combining SSI with JavaScript, you can combine the advantage of SSI-being connected with the server-with the friendliness and versatility of JavaScript.

Example 3: Using an ActiveX Control

This is an example of using an ActiveX control within a Web page, and it will work only with Microsoft Internet Explorer 3.0. You looked at MSIE 3.0 and ActiveX in Chapter 18. This example uses the following techniques:

  • Using the <OBJECT> tag
  • Using ActiveX controls
  • Modifying a control's properties

This example uses the Chart control, provided free from Microsoft. You may need to download this control if you don't have it already; MSIE will prompt you if you need to. Listing 19.3 shows the example.


Listing 19.3. An example of an ActiveX control and properties in HTML.
<HTML> <HEAD> <TITLE>Graph Example</TITLE> </HEAD> <BODY> The following graph was created using the ActiveX Graph control. <HR> <OBJECT ID="iechart1" WIDTH=599 HEIGHT=203 CLASSID="CLSID:FC25B780-75BE-11CF-8B01-444553540000"> <PARAM NAME="_ExtentX" VALUE="15849"> <PARAM NAME="_ExtentY" VALUE="5371"> <PARAM NAME="Rows" VALUE="4"> <PARAM NAME="Columns" VALUE="2"> <PARAM NAME="ChartType" VALUE="14"> <PARAM NAME="Data[0][0]" VALUE="9"> <PARAM NAME="Data[0][1]" VALUE="10"> <PARAM NAME="Data[1][0]" VALUE="7"> <PARAM NAME="Data[1][1]" VALUE="11"> <PARAM NAME="Data[2][0]" VALUE="6"> <PARAM NAME="Data[2][1]" VALUE="12"> <PARAM NAME="Data[3][0]" VALUE="11"> <PARAM NAME="Data[3][1]" VALUE="13"> <PARAM NAME="HorizontalAxis" VALUE="0"> <PARAM NAME="VerticalAxis" VALUE="0"> <PARAM NAME="hgridStyle" VALUE="0"> <PARAM NAME="vgridStyle" VALUE="0"> <PARAM NAME="ColorScheme" VALUE="0"> <PARAM NAME="BackStyle" VALUE="1"> <PARAM NAME="Scale" VALUE="100"> <PARAM NAME="DisplayLegend" VALUE="0"> <PARAM NAME="BackColor" VALUE="16777215"> <PARAM NAME="ForeColor" VALUE="32768"> </OBJECT> <HR> Now, back to the Web page. </BODY> </HTML>

The <OBJECT> tag includes quite a list of <PARAM> tags. These specify that the chart is a bar chart with two data items and four rows. Figure 19.3 shows this example in action in MSIE 3.0.

Figure 19.3 : The ActiveX control example.

You can modify the <PARAM> tags to produce exactly the type of graph you wish. You could also use the ActiveX Control Pad, described in Chapter 18, to modify these values easily.







|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |



2013 Softlookup Corp. Privacy Statement