Most of the examples in this book use the VBScript language, but not all browsers support VBScript. In fact, only Microsoft Internet Explorer fully supports VBScript, Dynamic HTML, and ActiveX. If you are interested in creating an application that can run on both Netscape Navigator and Internet Explorer, your solution might be Active Server Pages with a little client-side script. This is an excellent approach for Internet applications that must run on the largest number of browsers. This appendix gives an overview of the JScript language, Microsoft's implementation of JavaScript, which runs on both Netscape Navigator and IE 4.0.
The <SCRIPT> tag, discussed in detail in Appendix A, designates script code in JScript as well as in VBScript. However, mapping events to script code is done a little differently in JScript than in VBScript. In VBScript, you can choose from several techniques, but in JScript, you always use the event attribute method. The following code would be used to handle the Window OnLoad event:
<SCRIPT LANGUAGE="JavaScript"> <!-- function pageStart { alert("Page Loaded!"); return true; } --> </SCRIPT> <BODY LANGUAGE="JavaScript" OnLoad="var rtn =pageStart();">
Notice that JScript has a much different syntax than VBScript. JScript looks more like C than like Basic. Every routine in JScript is a function, and the beginning and end of a function is defined by using curly braces ({}). And JScript is case sensitive! That's right, case matters. In most instances, JScript uses lowercase for all object names. So be careful when you use the Window and Document objectsthey are window and document to JScript.
Like VBScript, JScript does not have any specific data types. Instead, it has only a single typeless data, which can be thought of as a Variant and which functions much like the Variant in VBScript. Also, like VBScript, JScript supports subtypes in variables. In other words, although the variable is typeless, the data inside the variable is identified by JScript as one of three types: String, Numeric, or Boolean.
The String data subtype in JScript is unique in scripting languages because it behaves as an object. Simply declaring a variable and assigning text to it creates a String object. Methods associated with the String object can be used to perform functions such as parsing or capitalization. The following code creates a String object and capitalizes all the characters in the text:
<SCRIPT LANGUAGE="JavaScript"> <!-- function caps(stringData) { alert(stringData.toUpperCase()); } --> </SCRIPT>
In addition to the String object, JScript supports several other intrinsic objects that can be used directly in the scripting language. The available objects are the Array, Date, Math, Number, and Function objects. For documentation on the properties and methods of the objects, refer to the CD-ROM that accompanies this book.
The Numeric data subtype is used to hold any numbers, and the Boolean subtype is used for true and false values. JScript recognizes the keywords true and false, but beware of case sensitivity. Declaring variables in JScript requires the var keywordthe only keyword for declaring variables.
Variables in JScript have two levels of scope: global and local. A variable declared inside the SCRIPT section but outside of functions is global and can be used by all functions. A variable declared inside a function is available only to the function in which it resides.
In addition to its intrinsic objects, JScript supports custom objects in code. Creating custom objects gives your script a more object-oriented look and feel. A custom object is created by using special functions that declare properties and methods for the object. As an example, let's create an object named alien to describe a mythical extraterrestrial. To define the object, establish a function with variables for properties:
function alien(skincolor, numheads, antenna) { //Properties this.skincolor = skincolor; this.numheads = numheads; this.antenna = antenna; }
Notice the use of the keyword this, which refers to the object instance being created with the function. The function accepts arguments for all the properties and assigns them in turn when the alien object is created. You can also create methods for the alien object in the same way. First, declare the methods as functions in your script:
function eat(food) { window.alert("MMMMM " + food + " was good!"); } function changeskincolor(color) { if (color == "Green" | color == "Red") { this.skincolor = color; } if (color == "Red") { this.numheads = 5; } }
Once the functions are created for the methods, assign them to the object using the keyword this. Here is the complete function for the alien object:
function alien(skincolor, numheads, antenna) { // Properties this.skincolor = skincolor; this.numheads = numheads; this.antenna = antenna; // Methods this.eat = eat; this.changeskincolor = changeskincolor; }
Once the alien object is declared, you can create instances of it by using the keyword new. This allows you to call the associated properties and methods by using a variable. The following code shows a complete alien example:
<HTML> <HEAD> <TITLE>Aliens!!</TITLE> <SCRIPT LANGUAGE="JavaScript"> var MyAlien // This is the variable for the instance function createalien() { // Create an instance of a // new alien MyAlien = new alien("Green", 12, "Yes"); window.alert("Alien Created!"); } // Define the class function alien(skincolor, numheads, antenna) { // Properties this.skincolor = skincolor; this.numheads = numheads; this.antenna = antenna; // Methods this.eat = eat; this.changeskincolor = changeskincolor; } function eat(food) { window.alert("MMMMM " + food + " was good!"); } function changeskincolor(color) { if (color == "Green" | color == "Red") { this.skincolor = color; } if (color == "Red") { this.numheads = 5; } } </SCRIPT> <BODY BGCOLOR="WHITE"> <CENTER> <FORM NAME="frmAlien"> <!-- This button creates the alien --> <INPUT TYPE="BUTTON" VALUE="Create Alien" OnClick="createalien();"><P> <!-- This text box is for the alien's food --> <INPUT NAME="txtFood"><P> <!-- This button feeds the alien whatever is in the text box --> <INPUT TYPE="BUTTON" VALUE="Feed the Alien" OnClick="MyAlien.eat(document.frmAlien.txtFood.value);"> <P> <!-- This button reads the skin color and displays it --> <INPUT TYPE="BUTTON" VALUE="Get Skin Color" OnClick="window.alert(MyAlien.skincolor);"> <P> <!-- This text box allows you to set a new color --> <INPUT NAME="txtColor"> <!-- This button sets the new color --> <INPUT TYPE="BUTTON" VALUE="Set Skin Color" OnClick="MyAlien.changeskincolor(document.frmAlien.txtColor.value);"> <P> <!-- This button displays the number of heads --> <INPUT TYPE="BUTTON" VALUE="Number of Heads" OnClick="window.alert(MyAlien.numheads);"> </FORM> </CENTER> </BODY> </HTML>
JScript supports a number of decision and looping structures, many of which mimic the structures available in VBScript. The primary decision structure in JScript is the if statement, which is similar to the VBScript If Then statement. The if statement uses the following syntax:
if (condition) statement1 [else statement2]
Unlike VBScript, JScript does not support a statement similar to the Select Case statement. Instead, you use multiple lines of if statements to create complex branches. The only alternative to this is an implicit branch using a somewhat unreadable question mark structure. For information about this oddity, see the CD-ROM that accompanies this book.
JScript supports several different types of loops. The first is a statement that mimics the VBScript For Next loop, the for statement. Here is the syntax for the for statement:
for (initialization; test; increment) statement
The while loop is the equivalent of the VBScript Do loop. This structure loops as long as a condition is true, giving you control over when the loop ends. The following code shows the syntax for the while loop:
while (expression) statement
Like VBScript, JScript also supports a loop that allows you to perform a function on each member of a collection or an array. In JScript, this structure is called the for in statement. Here is the syntax for the for in statement:
for (variable in [object | array]) statement
Many developers use Java applets in Web pages to enhance the graphical user interface. Like ActiveX components, Java applets are separately compiled, downloadable units of software that can run in a Web page. And like ActiveX components, Java applets can support events, properties, and methods. These members can be accessed by both JScript and VBScript.
Applets are placed in a Web page by using the <APPLET> tag, which has the following syntax:
<APPLET | |
ALIGN | The alignment for the applet |
ALT | The text to show if the browser can't execute the applet |
CLASS | The style class of the applet |
CODE | The name of the applet file to download and run |
CODEBASE | The base address of the applet |
DATAFLD | The field to bind with an applet parameter |
DATASRC | The identifier of the Advanced Data Control to bind with |
HEIGHT | The height of the applet |
HSPACE | The horizontal margin for the applet |
ID | The identifier for the applet in script |
NAME | The name of the applet |
SRC | The Internet address of a data file |
STYLE | The style attributes of the applet |
TITLE | Additional information |
VSPACE | The vertical margin for the applet |
WIDTH | The width of the applet |
> | |
</APPLET> |
Although the <APPLET> tag has many attributes, only one is really required: the CODE attribute identifies the applet to download and run. Unlike ActiveX components, Java applets do not rely on the registry to download; the file is downloaded and run each time. As in ActiveX components, however, properties can be stored in <PARAM> tags for the application to read. A <PARAM> tag has the following syntax:
<PARAM | |
DATAFLD | The database field to bind to the component |
DATAFORMATAS | Indicates whether the bound data is HTML or plain text |
DATASRC | The ID of the Advanced Data Control to bind with |
NAME | The property name |
VALUE | The default value |
> |