Platinum Edition Using HTML 4, XML, and Java 1.2:Using JavaScript to Control Web Browser Objects

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Interfacing with ActiveX Controls with JavaScript

This is an example of using JScript, Microsoft’s implementation of the JavaScript language, to manipulate another Web browser object, ActiveX Controls—in this case the ActiveX Label Control. ActiveX Controls are a Microsoft technology, similar to plug-ins, that enables developers to dynamically increase the capabilities of the Web browser. Many major software developers that produce plug-ins for Netscape Navigator produce ActiveX Control versions as well. Therefore, controlling ActiveX Controls would be done for many of the same reasons as for plug-ins.

The Label Control enables the Web author to place text on the Web page, select the text, font, size, and an arbitrary angle of rotation. One of the exciting things about the Label Control is that it can be manipulated in real-time, producing a variety of automated or user-controlled effects.

In the following example, the Label Control is used to place text on the Web page, and form input is used to enable the user to change the text used and the angle at which it is displayed. Figure 23.8 shows the default configuration of the label and Figure 23.9 shows it after the text and the rotation angle have been changed.

FIGURE 23.8 The ActiveX Label Control enables arbitrary text to be displayed by the Web author in the size, font, position, and orientation desired.

FIGURE 23.9 JavaScript’s capability to manipulate Web browser objects enables label parameters to be changed dynamically.

Listing 23.5 shows the code used to produce this example. The following are some things to note about the example:

• The <OBJECT>…</OBJECT> container tag is where the ActiveX Label Control is included and its default parameters assigned. The classid attribute must be included exactly as shown. The id attribute is the object name used by JavaScript to reference the Label Control object. The other attributes define the size and placement of the control.

• The <PARAM> tags within the <OBJECT>…</OBJECT> container enable the Web author to define attributes of the ActiveX Label Control. The NAME, VALUE pairs are unique to each ActiveX Control and should be documented by the ActiveX Control author. For the Label Control, they define various aspects of the appearance of the label. The NAME is also used to manipulate the value with JavaScript.

• An HTML form is used to accept input and print output for information about the Label Control. The first text area is used to set the label text, and the second text area is used to output the current label text angle. The buttons call the appropriate JavaScript routine to change the label text or angle.

• One final note about the placement of the JavaScripts in this HTML document: The functions are defined in the <HEAD> section—although not necessary, this is common practice so that they will be defined before use. Note that the last <SCRIPT>…</SCRIPT> section, which initializes the value of the form text area showing the current angle, is placed at the end of the HTML document to ensure that the object is defined and value set before it is called.

Listing 23.5 Object.htm—JavaScript Can Interact with Objects

<HTML>
<HEAD>
<SCRIPT LANGUAGE=“JAVASCRIPT”>
<!-- Hide this script from incompatible Web browsers -->
function ChangeIt() {
   lblActiveLbl.caption = document.LabelControls.txtNewText.value
}
function RotateP() {
   lblActiveLbl.angle = lblActiveLbl.angle + 5
   document.LabelControls.sngAngle.value = lblActiveLbl.angle
}
function RotateM(){
   lblActiveLbl.Angle = lblActiveLbl.Angle - 5
   document.LabelControls.sngAngle.value = lblActiveLbl.angle
}
//   Hide this script from incompatible Web browsers -->
</SCRIPT>
<TITLE>JavaScript and Object Manipulation</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>JavaScript and Object Manipulation</H1>
<HR>
<OBJECT classid=“clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2”
        id=lblActiveLbl
        width=250
        height=250
        align=left
        hspace=20
        vspace=0
>
<PARAM NAME=“Angle” VALUE=“0”>
<PARAM NAME=“Alignment” VALUE=“4”>
<PARAM NAME=“BackStyle” VALUE=“0”>
<PARAM NAME=“Caption” VALUE=“A Sample Label”>
<PARAM NAME=“FontName” VALUE=“Arial”>
<PARAM NAME=“FontSize” VALUE=“20”>
<PARAM NAME=“FontBold” VALUE=“1”>
<PARAM NAME=“ForeColor” VALUE=“0”>
</OBJECT>
<FORM NAME=“LabelControls”>
<TABLE>
<TR><TD><INPUT TYPE=“TEXT” NAME=“txtNewText” SIZE=25></TD>
    <TD><INPUT TYPE=“BUTTON” NAME=“cmdChangeIt” VALUE=“Change Text”
               onClick=“ChangeIt()”>
    </TD></TR>
<TR><TD><INPUT TYPE=“TEXT” NAME=“sngAngle” SIZE=5></TD>
    <TD><INPUT TYPE=“BUTTON” NAME=“cmdRotateP” VALUE=“Rotate Label + 5”
               onClick=“RotateP()”>
    </TD></TR>
<TR><TD></TD>
    <TD><INPUT TYPE=“BUTTON” NAME=“cmdRotateM” VALUE=“Rotate Label - 5”
               onClick=“RotateM()”>
    </TD></TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE=“JAVASCRIPT”>
<!-- Hide this script from incompatible Web browsers -->
document.LabelControls.sngAngle.value = lblActiveLbl.angle
document.LabelControls.txtNewText.value = lblActiveLbl.caption
//   Hide this script from incompatible Web browsers -->
</SCRIPT>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.