Today you will learn to exploit the programming power that lives inside Microsoft Internet Explorer. Internet Explorer presents a rich set of internal objects, properties, and methods, along with scripting and ActiveX components, that you can use to
build smarter, more interactive Web sites. By the end of the day you, will know how to use:
There are several Web browsers available for the Internet today. The two primary browsers are Netscape Navigator (http://www.netscape.com/) and Microsoft Internet Explorer (http://www.microsoft.com/). Currently, Internet Explorer is the only browser that supports VBScript and ActiveX controls, so you will be running your scripts and ActiveX controls on it.
The internal object model for Netscape Navigator is similar to the one for Internet Explorer, so what you learn today will at least give you a good start if you ever wind up putting ActiveX components in Netscape Navigator Web pages.
This section has two objectives. First, detail the objects available to the programmer. Second, show how these objects are manipulated through scripting. I will use both VBScript and JavaScript in the examples. Don't worry about the syntax, that's what
days 6 and 7 are for.
For those of you who are new to programming, an object is a collection of properties and methods. A window on your computer screen is an object. The window has properties, such as background color, size, and border type. The window also has
methods. Methods are ways of doing things. A window usually has a method for expanding itself to fill the whole screen, and another method to reduce itself to an icon. Events are the object's methods that are triggered by the operating
system. A good example of an event is clicking your mouse button when the cursor is over a button. By clicking the mouse, you cause the operating system to call the OnClick method of the button. The programmer can place code in this method. You placed code
in this event in yesterday's ActiveX Control Pad example, and will be putting code inside events in almost every example you do today.
The object at the top of the chart is the window object . This object contains 11 properties, 8 methods and 2 events. Lets start with window's properties.
The 11 window properties are
Lets go through some examples to see how these properties work.
Launch the ActiveX Control Pad. Before I do anything, go to the Tools menu, choose Options, then choose Scripting. Change the Scripting option to VBScript. The following example is built using VBScript . This is the only place you can change this
option. Your screen should look like Figure 5.1.
Figure 5.1. Changing the Scripting option.
Next, build two HTML inserts . Both have a label, a text box, and a button. Make the inserts look like Figure 5.2.
Figure 5.2. Sample window object.
Save the insert with the Name label as names.alx, and save the other insert as chngstat.alx. In names.alx, add the following code to the click method of CommandButton1 (use the Script Wizard to find it). CommandButton1 is the default name the ActiveX
Control Pad gives to the first button you put on your form.
TextBox1.Text = window.name
Then, in the click method of the CommandButton1 in names.alx, add this line of code:
Window.DefaultStatus = Textbox1.Text
Also, put some text in the Text property of TextBox1. Otherwise, you will get an error if you push the button without putting any text in the text box. However, its not a fatal error, so you might want to try it when you run these forms.
Create two new HTML documents. Insert names.alx into one, and save it as names.htm. Insert chngstat.alx into the other, and save it as chngstat.htm.
names.htm and chngstat.htm should look like Listing 5.1 and Listing 5.2
Listing 5.1. names.htm
<HTML> <HEAD> <TITLE>Names</TITLE> </HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="names_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="file: \source\chap05\name.alx"> </OBJECT> </BODY> </HTML>
Listing 5.2. chngstat.htm
<HTML> <HEAD> <TITLE>New Page</TITLE> </HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="chngstat_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="file: \source\chap05\chngstat.alx"> </OBJECT> </BODY> </HTML>
The alx files should look like Listing 5.3 and Listing 5.4.
Listing 5.3. name.alx
<SCRIPT LANGUAGE="VBScript"> <!-- Sub CommandButton1_Click() TextBox1.Text = window.name end sub --> </SCRIPT> <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:215pt;HEIGHT:124pt;"> <OBJECT ID="CommandButton1" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:78pt;LEFT:70pt;WIDTH:70pt;HEIGHT:23pt;TABINDEX:0;ZINDEX:0;"> <PARAM NAME="Caption" VALUE="Push Me"> <PARAM NAME="Size" VALUE="2469;811"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="TextBox1" CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:39pt;LEFT:0pt;WIDTH:211pt;HEIGHT:14pt;TABINDEX:1;ZINDEX:1;"> <PARAM NAME="VariousPropertyBits" VALUE="746604571"> <PARAM NAME="Size" VALUE="7444;494"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="Label1" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:16pt;LEFT:70pt;WIDTH:70pt;HEIGHT:16pt;ZINDEX:2;"> <PARAM NAME="Caption" VALUE="Name"> <PARAM NAME="Size" VALUE="2469;564"> <PARAM NAME="FontName" VALUE="Times New Roman"> <PARAM NAME="FontHeight" VALUE="240"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> </DIV>
Listing 5.4. chngstat.alx
<SCRIPT LANGUAGE="VBScript"> <!-- Sub CommandButton1_Click() Window.DefaultStatus = Textbox1.Text end sub --> </SCRIPT> <DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:217pt;HEIGHT:121pt;"> <OBJECT ID="CommandButton1" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:78pt;LEFT:70pt;WIDTH:70pt;HEIGHT:23pt;TABINDEX:0;ZINDEX:0;"> <PARAM NAME="Caption" VALUE="Push Me"> <PARAM NAME="Size" VALUE="2469;811"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="TextBox1" CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:39pt;LEFT:0pt;WIDTH:211pt;HEIGHT:14pt;TABINDEX:1;ZINDEX:1;"> <PARAM NAME="VariousPropertyBits" VALUE="746604571"> <PARAM NAME="Size" VALUE="7444;494"> <PARAM NAME="Value" VALUE="Some Default Text"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="Label1" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:16pt;LEFT:62pt;WIDTH:86pt;HEIGHT:16pt;ZINDEX:2;"> <PARAM NAME="Caption" VALUE="Status Message"> <PARAM NAME="Size" VALUE="3034;564"> <PARAM NAME="FontName" VALUE="Times New Roman"> <PARAM NAME="FontHeight" VALUE="240"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> </DIV>
At this point, if you run names.htm and push the button, the text box remains blank. Remember that there were only three ways to name a window (window.open, <FRAMESET>, and TARGET). Lets try one of them. To get a better look at what the name
property does, create a new form using <FRAMESET> and add two lines of code to your existing forms.
Use a text editor and create the following as frame.htm:
Listing 5.5. Source for frame.htm
<HTML> <FRAMESET ROWS="50%, *"> <FRAME NAME="firstframe" SRC="name.htm"> <FRAME NAME="secondframe" SRC ="name.htm" > </FRAMESET> </HTML>
This splits the screen into two frames, named "firstframe" and "secondframe", and loads name.htm into both frames. Now add the line
<A HREF="chngstat.htm" TARGET="secondframe">Change Status </A>
to the name.htm file on the line following the </OBJECT> tag. This line will load chngstat.htm into "secondframe". Save the file. Now add the line
<A HREF="Name.htm" TARGET="secondframe">Launch Name Frame </A>
to the chngstat.htm file on the line following the </OBJECT> tag. This calls names.htm back into "secondframe". Save the file and bring up frame.htm in your browser. After clicking both Push Me buttons, your screen should look like
Figure 5.3.
The truth comes out! windows.name is the name of the <FRAME> where the window is loaded. Clicking the Change Status link, adding some text to the text box, and pushing the button results in Figure 5.4.
Notice the status change . Notice how the window object and the text box are manipulated the same way by VBScript. When you set the text box text, you used TextBox1.Text. You used the same syntax for window.name.
Using the Object Name
The preceding example works just as well if you use name instead of window.name. However, this is a bad habit to get into. For example, if you misspell name as nane, VBScript uses the new variable nane . Mistakes like this can take some time to find. However, if you use window.nane, you get an error telling you window doesn't support a nane when you run the form in the browser.
Lets look at some of the other interesting properties. The following example looks simple, but it does some cool stuff.
Put three labels, a button, and a text box on a form using ActiveX. The physical layout should look like Figure 5.5.
Using the Script Wizard , add the following code to the Onload Event for the layout control:
Label1.Caption = window.location.href
Then, quick like a bunny, add the following code to your friend, the CommandButton1's click event:
parent.frames(1).location.href = TextBox2.Text label1.caption = parent.frames(1).location.href
Then save the insert as minibrs.alx. Your source code should look like Listing 5.6.
Listing 5.6. minibrs.alx
<SCRIPT LANGUAGE="VBScript"> <!-- Sub Layout2_OnLoad() Label1.Caption = window.location.href end sub --> </SCRIPT> <SCRIPT LANGUAGE="VBScript"> <!-- Sub CommandButton1_Click() parent.frames(1).location.href = TextBox2.Text label1.caption = parent.frames(1).location.href end sub --> </SCRIPT> <DIV ID="Layout2" STYLE="LAYOUT:FIXED;WIDTH:262pt;HEIGHT:122pt;"> <OBJECT ID="Label2" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:0pt;LEFT:23pt;WIDTH:203pt;HEIGHT:15pt;ZINDEX:0;"> <PARAM NAME="VariousPropertyBits" VALUE="276824091"> <PARAM NAME="Caption" VALUE="Location of Web Page in Lower Frame"> <PARAM NAME="Size" VALUE="7161;529"> <PARAM NAME="FontHeight" VALUE="240"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="Label3" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:47pt;LEFT:70pt;WIDTH:109pt;HEIGHT:16pt;ZINDEX:1;"> <PARAM NAME="Caption" VALUE="I Want to Go To"> <PARAM NAME="Size" VALUE="3845;564"> <PARAM NAME="FontHeight" VALUE="280"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="CommandButton1" CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:70pt;LEFT:195pt;WIDTH:23pt;HEIGHT:24pt;TABINDEX:2;ZINDEX:2;"> <PARAM NAME="Caption" VALUE="GO!"> <PARAM NAME="Size" VALUE="811;847"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> </OBJECT> <OBJECT ID="TextBox2" CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:70pt;LEFT:31pt;WIDTH:156pt;HEIGHT:24pt;TABINDEX:3;ZINDEX:3;"> <PARAM NAME="VariousPropertyBits" VALUE="746604571"> <PARAM NAME="Size" VALUE="5503;847"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> <OBJECT ID="Label1" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:23pt;LEFT:23pt;WIDTH:203pt;HEIGHT:14pt;ZINDEX:4;"> <PARAM NAME="VariousPropertyBits" VALUE="276824091"> <PARAM NAME="Caption" VALUE="URL"> <PARAM NAME="Size" VALUE="7161;494"> <PARAM NAME="FontName" VALUE="Times New Roman"> <PARAM NAME="FontEffects" VALUE="1073741825"> <PARAM NAME="FontHeight" VALUE="240"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> <PARAM NAME="ParagraphAlign" VALUE="3"> <PARAM NAME="FontWeight" VALUE="700"> </OBJECT> </DIV>
Place minibrs.alx inside a new HTML page, and save them as minibrs.htm. Create a frame page to hold minibrs.htm . Use the source code in Listing 5.7, and save it as brsfram.htm.
Listing 5.7. brsfram.htm
<HTML> <FRAMESET ROWS="50%, *"> <FRAME NAME="firstframe" SRC="minibrws.htm"> <FRAME NAME="secondframe" SRC ="name.htm" > </FRAMESET> </HTML>
This is just a simple modification of the frame page you used a few pages ago. Load brsfram.htm into the browser, then type http://www.mcp.com into the text box and press the Go button. You now have a browser within a browser, as shown in Figure 5.6.
Figure 5.6. A browser in a browser.
The secret to this program is in the object's parent, frames, and location. The parent object in this case is the window created by brsfram.htm. The parent object contains an zero-based (frame(0) is the first frame, frame(1) is the second, and so on)
array of frames that can be addressed like the windows object in the first example. The third object you use is location. Location has the property href, which you read (label1.caption = parent.frames(1).location.href) and wrote to
(parent.frames(1).location.href = TextBox2.Text) in the example. Another object, history, gives you access to a listing of all the pages you have browsed; you can traverse this URL list by using the Forward, Back, and Go buttons. At the time of this
writing, the history object was not yet supported by the browser.
You have seen what objects are available to the developer through the browser and how to access them using VBScript. Most of the objects not covered in the last two examples will be covered during the rest of the discussion of VBScipt.
The window object offers nine methods.
Figure 5.8. To confirm or not to confirm.
Figure 5.9. The Prompt dialog.
There are two window object events :
OnloadThis is fired when the window is loaded, and is a good place for initialization code.
UnloadThis is fired when the window is closed, and is a good place for cleanup or thank you messages.
Get out your text editor and create the following:
Listing 5.8. A collection of Dialogs, boxes.htm
<HTML> <HEAD> <TITLE>Boxes</TITLE> <SCRIPT LANGUAGE="VBScript" > <!-- Sub LoadMe() Alert "This Space for Rent" Answer = Confirm("Launch the Shuttle?") String1 = Prompt("Enter Here","Defaulted Text") Alert string1 end sub Sub OutofHere() Alert "Thats All Folks" end sub --> </SCRIPT> </HEAD> <BODY Language="VBS" onLoad="LoadMe" onUnload = "OutofHere"> </BODY> </HTML>
Save this source code as boxes.htm and run it in the browser. Notice how the onLoad and onUnload events are assigned to the subroutines Loadme and OutofHere in the line
<BODY Language="VBS" onLoad="LoadMe" onUnload = "OutofHere">
Also, notice how the default text for the text box(where the user can enter a value) in the prompt is entered
String1 = Prompt("Enter Here","Defaulted Text")
Lets do another example. Launch the ActiveX Control Pad and change the scripting language to JavaScript (Tools|Options|Script). Create one HTML insert, and attach an image control called Image1. Save the HTML insert as chngpix.alx. Open a New HTML
file. Using the Script Wizard, add the variables MyTimer and PicState. Then add the procedure ChangePic(). In the window.onload, window.onunload and ChangePic event put the code shown in Listing 5.9.
Listing 5.9. chngpix.htm
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var MyTimer var PicState function ChangePic() { if (PicState=1) { chngpix_alx.Image1.PicturePath = "pow.gif"; Picstate = 2; } else { chngpix_alx.Image1.PicturePate = "caution.gif"; Picstate = 1; } MyTimer = window.setTimeout('ChangePic()', 50000)} --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onLoad()"> <!-- MyTimer = window.setTimeout('ChangePic()', 500); PicState = 1; --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onUnload()"> <!-- window.clearTimeout(MyTimer) --> </SCRIPT> <TITLE>New Page</TITLE> </HEAD> <BODY> <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="chngpix_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE= "file: \source\chap05\chngpix.alx"> </OBJECT> </BODY> </HTML>
Save this as chngpix.htm. Listing 5.10 shows chngpix.alx.
Listing 5.10. chngpix.alx
<DIV ID="Layout4" STYLE="LAYOUT:FIXED;WIDTH:453pt;HEIGHT:275pt;"> <OBJECT ID="Image1" CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF" STYLE="TOP:16pt;LEFT:8pt;WIDTH:110pt;HEIGHT:94pt;ZINDEX:0;"> <PARAM NAME="BorderStyle" VALUE="0"> <PARAM NAME="SizeMode" VALUE="3"> <PARAM NAME="Size" VALUE="3900;3302"> <PARAM NAME="PictureAlignment" VALUE="0"> <PARAM NAME="VariousPropertyBits" VALUE="19"> </OBJECT> </DIV>
When you run this in your browser, the picture, Pow.gif, will flash about one time per second and will look like Figure 5.10. Only yours will be flashing, the one here on the page will not. You can get the same effect by opening and closing the book
quickly.
One thing to note about this code is the reference to the image control from outside the layout control. The image control is referenced as chngpix_alx.Image1. It is not accessible as Image1 from outside the layout control. This allows you to reference
any piece inside the layout control. You can create clusters of controls, such as a toolbar, and access the same alx component from many different forms.
You have seen what objects are available to the developer through the browser and how to access them using VBScript and JavaScript. During the course of the rest of the week, you will use window and its properties, methods, and events over and over
again.
Today you looked inside the Internet Explorer and found the mother of all objects, window. You can use window's built-in functions to make your Web pages more expressive. Tomorrow you will add VBScript to your tool chest.
Rewrite the example in Listing 5.6 (brsfram.htm, minibrs.alx, and minbrs.htm) to use the Window object's Onload event instead of Layout.onload. Also, use the window.navigate method instead of the frame(1).location.href to load the
user-selected window. Use the window.unload event to display a farewell message.
NOTE
Refer to the Appendix, "Answers to Quiz Questions," for the answers to these questions.
5.