Creating and Editing Web Scripts

The Microsoft Script Editor is a powerful tool for editing HTML and Web scripts that provides a high level of functionality and ease of use for both the experienced and novice developer. This chapter doesn't teach you VBScript or JScript, and assumes that you already know something about scripting and HTML.

To learn more about VBScript or JScript, see "Expanding Your Knowledge of Web Scripts" later in this chapter, p. 375 .

The Microsoft Script Editor lets you view and edit the HTML files you generate when saving your presentation as a Web page. From here you can add scripts, whether they are VBScript or JScript.

Thanks to the comprehensive Document Object Model (DOM) that Microsoft products support, Microsoft Script Editor lets you create event handlers for virtually any element in a PowerPoint presentation. Event handlers are scripts that run in response to user actions, such as mouse clicks, or browser actions, such as loading the document.

Editing features aren't limited to event handlers. You can also use the Microsoft Script Editor to create independent blocks of script to contain any script you choose.

CAUTION

Use the Microsoft Script Editor to edit only .htm and .asp files. If you edit other files (such as .doc files) when you save or refresh the file, ID parameters, <SPAN> and <DIV> tags, and some VALUE parameters might be changed.

From within PowerPoint, you can open a presentation in the Microsoft Script Editor by following these steps:

1. Save your presentation as a Web page ( .htm format) by choosing File, Save as Web Page.

2. Name your file and select a folder in which to save it.

3. Click Save.

4. With your presentation onscreen, choose Tools, Macro, Microsoft Script Editor. This opens the Microsoft Script Editor, as shown in Figure 17.1. (This tool might not be installed the first time you try to use it. The system will ask whether you want to install it.)

   Figure 17.1. You can also open the Microsoft Script Editor by pressing Alt+Shift+F11.

   

The Web page you view in the Microsoft Script Editor is actually a copy of your presentation. If you change this copy of the Web page in the Microsoft Script Editor, the copy in PowerPoint doesn't contain the changes. Conversely, if you change the presentation in PowerPoint, the copy in the Microsoft Script Editor doesn't contain the changes. When you change the Web page in one of the applications, a Refresh toolbar appears in the other. To incorporate the changes, click the Refresh button on that toolbar.

NOTE

If you change the Web page in the Microsoft Script Editor and save the changes, PowerPoint refreshes for you.

Scripting in the Microsoft Script Editor

The Microsoft Script Editor consists of four primary panes for working with Web scripts: the Document Outline, HTML, Project Explorer, and Properties panes.

To represent a document's scripts, the Document Outline pane uses a hierarchy tree similar to that seen in Windows Explorer. The HTML pane shows the presentation's hard code. The Project Explorer pane uses a hierarchy tree to show the files in a presentation. You set certain HTML and scripting attributes in the Properties pane.

Looking at the Document Outline Pane

The Document Outline pane shows your presentation's object model (see Figure 17.2).

Figure 17.2. The Document Outline pane is divided into folders, or nodes, representing the file's object model.

From here, you can

• Display a tree view of all elements in your presentation that have already had their ID or NAME attributes set

• Display the events for each element

• Quickly navigate to any script in the page

• Generate new event handlers for any element in the presentation

Table 17.1 describes each node in the Document Outline pane. Depending on what you're doing in the Microsoft Script Editor, some of these nodes might not appear.

Table 17.1. The Document Outline Pane's Nodes

Document Outline Pane's Nodes	Function/Use
Client Objects & Events	A hierarchy of the elements that support client scripts or have client scripts attached. Under the node for each element is a list of the events for which you can write handlers.
Client Scripts	A set of nodes for each client script on the page. There is a node for each script block on the page and a separate node for each function or subroutine defined within a script block. There is also a node for inline scripts defined as part of a control definition, as in this example: <INPUT TYPE="button" NAME="button1" ONCLICK="alert('Clicked!')"> .
Server Objects & Events	A list of nodes for each element that supports server scripts or that has server scripts attached. Under each node is a list of the events for which you can write handlers. The Server Objects & Events node also displays the Microsoft Internet Information Server object model, including the Session object, Application object, and so on. In the Document Outline pane, these objects do not display events.
Server Scripts	A set of nodes for each server script on the page. Functions and subroutines are identified by name. Inline server scripts appear in a tree, but are not identified by name.

NOTE

The Document Outline pane doesn't include elements that are added to a page using an INCLUDE file.

Looking at the HTML Pane

The HTML pane (see Figure 17.3) lets you view and edit scripts and HTML.

Figure 17.3. Edit and view code in the HTML pane.

This window was designed for working with the raw code of a Web document's code, giving you more precise control over a page's attributes. It lets you switch between visual and text representation of all controls on the page using the Design and HTML tabs.

CAUTION

Design view is not available for pages created in PowerPoint or any other Office application. You can use Source view to modify the script, but you have to make design changes in PowerPoint. Design view is available only for pages that are opened from within the Microsoft Script Editor.

If you accessed Microsoft Script Editor through PowerPoint and want to take advantage of Design view's capabilities, close the HTML pane and select File, Open, File. From here you can navigate to the folder containing the associated files for your presentation in the Open File dialog box. By enabling Design view in this manner, you are able to extend the WYSIWYG attributes of the editing environment.

NOTE

To preview your presentation in a browser, choose File, View in Browser.

Looking at the Project Explorer Pane

The Project Explorer pane displays the file in the folder created when you saved your presentation. From here, double-click a file's icon to open its source code in the HTML pane. You can add the individual .htm files of the presentation you generated by saving each file as a Web page and simply repeating the steps outlined previously to enable Design view for your presentation.

Looking at the Properties Pane

The Properties pane (see Figure 17.4) displays the various HTML and scripting properties within the Web page.

Figure 17.4. Use the sort buttons to view your attributes.

From this window, you can change default settings such as client and server script types. This window provides three buttons for viewing and editing page attributes: Sort Properties Alphabetically, Sort Properties by Category, and Property Pages.

The Property Pages button opens the Property Pages dialog box shown in Figure 17.5, in which you can define specific document properties.

Figure 17.5. Select HTML and scripting attributes in the Property Pages dialog box.

You can also click in the far-right column of the Properties pane, which displays individual properties, and make your selection there.

Navigating to Scripts

You can use the Document Outline pane to move between scripts by first clicking the appropriate node to expand the Document Outline tree until you see the script you want to view, and then clicking the script's name. The insertion point in the HTML pane moves to the script's location in the file. If you are working on a script in the HTML pane, you can match up your location in the Document Outline pane to see where you are in the context of the overall page.

To synchronize your position with the Document Outline pane, right-click and choose Synchronize Document Outline.

Adding Web Script Commands to Your Tools Menu

To facilitate scripting in PowerPoint, Microsoft gives you three commands you can add to your Tools menu:

• Insert Script

• Remove All Scripts

• Show All Scripts

To insert these items, follow these steps:

1. In PowerPoint, choose Tools, Customize. This opens the Customize dialog box, as shown in Figure 17.6.

   Figure 17.6. From the Customize dialog box, you can drag new tools to your menus .

   

2. In the Categories box, click Tools.

3. Scroll down in the Commands box until the scripting commands become visible.

4. Drag Insert Script from the Commands box to the Tools menu on the main PowerPoint menu bar. From here, drag down to the Macro submenu. When the Macro submenu opens, drag to where you want the Insert Script command to appear and then release the mouse button.

5. Repeat steps 3 and 4 for the Show All Scripts and Remove All Scripts commands.

6. Click Close.

The Insert Script command invokes the Microsoft Script Editor, which brings up the page that was open in PowerPoint when you executed the command. The Show All Scripts command places a glyph, or a tiny icon, at every spot where a script appears in the presentation. As the name suggests, Remove All Scripts removes the scripts from a presentation.

If at any time you want to remove a command from the Tools menu, simply select Customize and reverse the process by dragging the undesired command off the Macro submenu.

Creating Event Handlers

The Document Outline pane shows you all scriptable elements in your page, and for each element, the events for which you can write handlers. This window divides the elements and scripts into those that will run on the client and those that will run on the server.

When you expand an object node in the Document Outline pane (as shown in Figure 17.7), a list of potential event handlers for that object appears. If the event name is bold, a handler already exists for that event.

Figure 17.7. Click the plus sign next to the node to see the available event handlers.

To create a new event handler, expand the appropriate object node until you see the event name for which you want to create a script. Then double-click the name of the event. The editor performs the following actions:

• Creates or moves to one of the following script blocks at the top of the document, depending on where the script will run and what language it will be in:

  • clientEventHandlersJS

  • clientEventHandlersVBS

  • serverEventHandlersJS

  • serverEventHandlersVBS

• If the script will be in JScript, adds an event attribute (for example, onclick= ) to the element.

Finally, the editor inserts a new script block for the event you selected with a bare handler function that you then must flesh out to suit your needs.

The handler is created in the default language for the current context. For example, if you are creating a server script, the handler is in the default language for the server, as set in the Property Pages dialog box for the current document.

For VBScript functions, the format is

 Sub elementID_event  {insert code here}  End Sub 

For JScript functions, the format is

 function elementID_event(){  {insert code here}  } 

When creating JScript event handlers, the editor also adds the following attributes to the HTML element itself:

 event="return elementID_event()" 

Setting the Default Script Language

In the Properties pane, scroll down until the defaultClientScript or defaultServerScript category is visible in the bottom-left column, as shown in Figure 17.8. To change the default settings, select the category in the left column and then click on the facing cells of the far-right column to display a drop arrow. Clicking this arrow displays the options JavaScript (or JScript) and VBScript.

Figure 17.8. VBScript has been chosen instead of the default language, JavaScript.

Creating Standalone Scripts

In addition to creating event handlers, you can create standalone script blocks. This is useful if you want to create procedures (subroutines or functions) called by other scripts, or if you want to create a global script that runs as soon as the browser loads the page.

To create a new standalone script block, follow these steps:

1. Select the HTML pane.

2. Position the cursor where you want the new script to appear.

3. Right-click and choose Insert Script Block, Client, or Server.

The Script Editor then generates a new <SCRIPT> block. If you choose Server, the script tag contains the attribute RUNAT=SERVER . The script block's LANGUAGE attribute is set to the default language for the client or server.

Can't get your scripts to work? Not sure where to place them ? See the " Troubleshooting " section at the end of this chapter.