Creating and Editing Web Scripts

The Microsoft Script Editor is a powerful tool for HTML and Web script editing that provides a high level of functionality and ease of use for the experienced developer as well as the novice. Please note that this chapter is not intended to teach you the VBScript or JScript languages, and assumes that you already possess some prior knowledge of both scripting and HTML.

→ To learn more about VBScript or JScript, see “Expanding Your Knowledge of Web Scripts” later in this chapter.

The Microsoft Script Editor gives you the ability to 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) supported by Microsoft products, with Microsoft Script Editor you can create event handlers for virtually any element in a PowerPoint presentation. Event handlers are scripts that run in response to actions by the user, such as mouse clicks or the browser's loading of 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.

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

The Web page you view in the Microsoft Script Editor is actually a separate copy of your actual presentation. If you make changes to this copy of the Web page while in the Microsoft Script Editor, the changes are out of sync with the copy of your Web page in PowerPoint. Any changes made to the presentation in PowerPoint while the Microsoft Script Editor is open are out of sync, as well. To update the unchanged copy of your Web page with the changes you made, be sure to click Refresh on the Refresh toolbar when you return to the unchanged copy in PowerPoint. The Refresh toolbar is a floating toolbar that appears in PowerPoint after you make changes in the Microsoft Script Editor.

Scripting in the Microsoft Script Editor

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

The Document Outline window uses a hierarchy tree similar to that seen in Windows Explorer to represent the scripts within a document. The HTML window is the repository of the hard code for the presentation you're working with. As in the Document Outline window, the Project Explorer window uses the tree metaphor to display the associated files in a presentation. The Properties window is where certain HTML and scripting attributes are set.

Looking at the Document Outline Window

The Document Outline window provides a graphical display of the object model for your presentation (see Figure 17.2).

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 the use of each node in the Document Outline window. Depending on what you're doing in the Microsoft Script Editor, not all these nodes might appear.

Looking at the HTML Window

The HTML window (see Figure 17.3) enables you to view and edit scripts.

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

If you accessed Microsoft Script Editor through PowerPoint and want to take advantage of Design view's capabilities, close the HTML window 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.

Looking at the Project Explorer Window

The Project Explorer window displays the associated file in the folder created when you saved your PowerPoint presentation. From here, double-click a file's icon to open its source code in the HTML window. 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 above to enable Design view for your presentation.

Looking at the Properties Window

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

From this window, you can change default settings such as client and server script types. This window provides three tool buttons with which to view and edit 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.

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

Navigating to Scripts

You can use the Document Outline window 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 window moves to the script's location in the file. If you are working on a script in the HTML window, you can match up your location in the Document Outline window to see where you are in the context of the overall page.

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

Adding Web Script Commands to Your Tools Menu

To facilitate scripting in PowerPoint, Microsoft has provided you with three specialized commands you can add to your Tools menu:

• Insert Script

• Remove All Scripts

• Show All Scripts

To insert these items, follow these steps:

The Insert Script command invokes the Microsoft Script Editor, placing the cursor at the insertion point you've selected. The Show All Scripts command provides a toggle that displays what Microsoft refers to as a glyph to mark the location of a script while still in PowerPoint. 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 window 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 window (as shown in Figure 17.7), a list of potential event handlers for that object displays. If the event name is bold, a handler already exists for that event.

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. When you double-click the event name, 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 window, 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.

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:

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.