Export (0) Print
Expand All

Microsoft Office FrontPage 2003 Inside Out

Office 2003
 

This article is an excerpt from Microsoft Office FrontPage 2003 Inside Out from Microsoft Press (ISBN 0-7356-1510-1, copyright Microsoft Press 2003; all rights reserved). The author, Jim Buyens, is a FrontPage MVP and a noted expert on Web programming and networking. He develops Web-based business systems for the telecommunications industry and has written several books, including Microsoft FrontPage 2002 Inside Out, Faster Smarter Beginning Programming, and Web Database Development Step by Step .NET Edition, all from Microsoft Press.

No part of these chapters may be reproduced, stored in a retrieval system or transmitted in any form or by any meanselectronic, electrostatic, mechanical, photocopying, recording or otherwisewithout the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

Chapter 41: Working with Script Code

Contents

Introducing Script Languages
Scripting Web Pages on the Browser
Using Microsoft Script Editor

The use of "under construction" phrases and icons on the World Wide Web has become an almost comical cliche; in reality, everything on the Web changes constantly or quickly becomes obsolete. Inevitably, making all these changes becomes tiresome. As a result, savvy designers, wearing their construction hard hats, search for ways to automate the work. Script languages meet this need.

In the most general sense, a script is a set of instructions that describes how certain entities are to interact. The script for a stage play, for example, describes in some detail what the actors should say, their interplay, and when they should enter and exit the scenes. In a computer sense, scripts are lines of high-level programming code that control the interaction of software components. Scripts in Web pages can coordinate useful activities such as these:

  • Provide a customized display for each visitor.
  • Display and update databases.
  • Create self-modifying HTML based on a variety of environmental factors.
  • Provide a measure of interactivity for the visitor without the delay of sending data back to the server and waiting for a response.

Code that runs during Web page transmission can insert HTML at the location that triggers the script. This makes any aspect of the page programmable; indeed, you could create a Web page that consisted of a script only. Such a script would need to write all the HTML required to display what you wanted the Web visitor to see. More common, however, is to author the static (unchanging) parts of the page in an HTML editor such as Microsoft Office FrontPage 2003 and to code only the variable portions as scripts.

Special HTML tags mark parts of ordinary Web pages as script code, specify the script language, and control whether the script runs on the server or within the browser. In either case, the server or browser examines, compiles, and runs the code immediately.

  • Scripts that run on the server access server-based resources and modify the HTML sent to the browser.
  • Scripts that run on the browser access resources internal to the browser and modify HTML received from the server. They can also respond to events on the browser and — if the browser permits — modify a Web page already on display.

As interesting as this introduction might (or might not) be, this book is about creating Web pages with FrontPage and not about the details and nuances of writing scripts. To gain true proficiency in writing scripts, you should obtain one or more books dedicated to that subject alone. FrontPage does have the capability to create certain kinds of scripts without programming, however, and to enter script code from within FrontPage. The remainder of this chapter will discuss how to use these scripting facilities at the browser. The next chapter will address scripting on the Web server.

Introducing Script Languages

Various computer languages have come into use for scripting: awk, sed, Perl, REXX, VBScript, and JavaScript are a few examples. These languages are more general than macro languages tied to a specific program, yet less formal than large-scale development languages such as C and Pascal. Because most scripts are short bits of code connecting other objects and methods, programmers generally view great rigor in a scripting language as excess baggage. Instead, quick and dirty are the watchwords.

A full explanation of script language programming is beyond the scope of this book. Still, the increasing use of such languages makes FrontPage's support of them a critical feature. Web pages commonly use either of these script languages:

  • JavaScript was developed by Netscape Communications and first appeared in Netscape Navigator. Originally called LiveScript, this language has little in common with the Java programming language except that both bear a general resemblance to C++. JavaScript runs under both Netscape Navigator and Microsoft Internet Explorer, subject to slight implementation differences.
Note   Other names for JavaScript include ECMAScript and JScript. The European Computer Manufacturers Association (ECMA) is the standards body that holds the official language specification. JScript is Microsoft's official name for its implementation of JavaScript
  • VBScript was developed by Microsoft and first appeared in Internet Explorer. VBScript is a subset of Microsoft Visual Basic for Applications, which is a subset of Microsoft Visual Basic. Curiously, VBScript has no visual aspect of its own; instead, it runs within the visual interface of the application that invokes it.VBScript runs under the Internet Explorer browser and, on the server side, under Microsoft IIS. Because of differences in their environments, the resources available to VBScript on the server differ from those available on the browser.

Note   For more information about the JavaScript and VBScript programming languages browse msdn.microsoft.com/scripting.

Introducing JavaScript

Figure 41-1 shows FrontPage editing some JavaScript in a Web page. The script appears between the <script> and </script> tags. The document.write method writes data into the Web page as if it had come from the server. The expression document.lastModified supplies the Web page's date and time stamp — the date recorded in the Web server's file system.

Click here for larger image

Figure 41-1.FrontPage can insert JavaScript or VBScript into Web pages. This script displays the date the page was last updated.

FrontPage does nothing with any such code you insert; if you switch back to Design view, FrontPage merely displays a J icon where the code resides. FrontPage doesn't verify the code for correctness or try to execute it. To see the code run, switch to preview mode, or open the page with a browser.

Early versions of the JavaScript language were definitely works in progress; various bugs and limitations appeared and disappeared with every browser version. Newer versions are more uniform and reliable, but still not identical. Be sure to test your scripts under all recent versions of each browser you care about. As long as JavaScript remains the only script language available on both Netscape Navigator and Internet Explorer, it will probably remain the preferred language for populations of mixed browsers.

Introducing VBScript

The VBScript language serves all the same purposes and objectives as JavaScript, but it uses a subset of Microsoft Visual Basic. VBScript lacks many familiar Visual Basic features such as a GUI development environment, GUI run-time displays, file input and output, and the ability to call system services. However, its syntax is very familiar to countless Visual Basic developers, and it interfaces very well with Microsoft ActiveX controls.

On a browser, VBScript provides roughly the same capabilities as JavaScript. All versions of Internet Explorer 4 and later support VBScript, but as of version 7, Netscape Navigator provides no support at all. This severely limits the usefulness of browser-side VBScript in environments where Netscape Navigator is common.

On IIS, however, ASP provides server-side support for VBScript. Although scripts running on the server can't interact directly with the visitor, they can produce "plain vanilla" HTML as output and thus operate the same with any browser. They can also interact with server-side components and with such services as database systems.

Scripting Web Pages on the Browser

All modern browsers have features for running program code that arrives nestled inside Web pages. Such code might customize the page based on the date, based on the type of browser, or on other factors. In addition, it can respond to events — like button clicks — that occur after the page is loaded. These features can significantly enhance your Web pages.

Scripts have access to a variety of built-in objects belonging to the browser: the current window, the current URL, and HTML objects such as form elements, hyperlinks, and pictures. Each of these objects has an assortment of properties, some of which the script can modify.

Developers place script statements within <script> and </script> tags in the HTML. The browser executes script statements as it loads the page, and those statements can write data into the browser's input stream. If the browser finds a function or subroutine defined within <script> and </script> tags, the browser stores it for future use. Code found later in the page can then execute the routine.

Events on the page can also trigger script code. There's an onClick event, for example, that occurs when the Web visitor clicks a button. If the Web page creator supplied code for that event, the code executes whenever the visitor clicks that button.

Support for browser scripts varies widely. Some browsers support no scripting at all, some support only JavaScript, and some support both JavaScript and VBScript. In addition, the level of support varies with the browser version. Even among browsers that do support scripting, most provide a way for Web visitors to turn scripting off.

If you decide to use scripting on a Web page, be sure to:

  • Test the script with all common browsers.
  • Note (perhaps at the bottom of the page) the minimum browser version the visitor should have.
  • Provide a way for visitors to navigate your site even if they lack script support.

Because JavaScript is the only scripting language Internet Explorer and Netscape Navigator have in common, it's the predominant language for browser-side scripting. JavaScript is the default scripting language for both browsers (that is, <script> defaults to <script language="JavaScript">).

Note   All recent versions of Internet Explorer and Netscape Navigator support some level of scripting. Browsers with no scripting support at all are generally very old or experimental.

Browsers that don't support scripting easily ignore <script> and </script> tags, but what of the code between them? An older browser can easily ignore unknown tags, but it has no reason to ignore content between unknown start and end tags. In the case of <script> tags, the old browser will generally try to interpret the script code as HTML, and this can get ugly fast. To prevent this, experienced coders often enclose script code in HTML comments, as shown here:

<script language="JavaScript">
<!--
alert("Your message could appear here."); 
//-->
</script>

The <!-- and --> tags mark the beginning and end of an HTML comment. Script languages successfully ignore the start <!-- tag, but the end --> tag presents a problem: a double minus sign is a valid JavaScript operator. Prefixing the closing tag with a double slash (//) marks it as a JavaScript comment as well as an HTML comment.

Generating Browser Scripts

The section "Validating Form Input," in Chapter 34, has already described one method of generating browser scripts. Establishing validation rules for form elements generates script routines that the browser runs when the Web visitor clicks the form's Submit button. If the script detects no form element fields having values outside the prescribed range, it submits the form normally. If the script detects an incorrect value, it displays an error message to the visitor and submits nothing.

The features on the DHTML Effects toolbar and those in the Behaviors task pane also generate JavaScript code that runs on the browser. Both of these features modify the browser display in response to visitor actions.

If any of these facilities meet you needs, you should by all means use them. However, don't expect FrontPage to generate code you can customize. The JavaScript code that FrontPage creates is strictly for machine consumption.

Displaying Current Information (Coding Example 1)

Figure 41-1 showed a script that obtains and displays real-time information each time a Web visitor loads a page. Figure 41-2 shows the same page in preview mode.

Note   Preview mode displays the current Web page using whatever version of Internet Explorer is installed on your system.

Click here for larger image

Figure 41-2. Here, in preview mode, FrontPage runs the script shown in Figure 41-1.

Of course, the information available to a script isn't limited to Date Last Modified. Figure 41-3 shows a Web page displaying a selection of more useful information.

Each property value displayed in Figure 41-3 comes from a one-line script such as the following:

<script>document.write(document.title)</script>

Click here for larger image

Figure 41-3. Scripts written in JavaScript obtain and display all the information in the center column of this HTML table.

As you can see in the background of Figure 41-4, a J icon represents each <script>...</script> tag pair.

Click here for larger image

Figure 41-4. Each property value displayed in Figure 41-3 comes from its own script, and each script shows up in Design view as a J icon in the Value column.

Double-clicking one of these J icons displays the HTML Tag dialog box, shown in the foreground in Figure 41-4. You can do simple script editing in the Internal Text box. If you click the Edit button, FrontPage will start another program, called Microsoft Script Editor, and load your Web page into it.

The section "Using Microsoft Script Editor," later in this chapter, discusses Microsoft Script Editor in some detail. This is basically a stripped-down version of the editor professional programmers use in Visual Studio 6. In the meantime, this section assumes that you'll edit script code by switching to Code view or by using the HTML Tag dialog box.

Scripts aren't limited to just writing static values into the HTML stream. They can define variables, make comparisons, branch, manipulate text, perform arithmetic, run subroutines, and all the other things that programming languages do. They aren't limited to writing simple values into table cells, either; you can write any sort of HTML you want, and the browser will interpret it just as if the HTML had arrived from the server. You could even check the date, the browser version, or any other value and create different HTML accordingly. The possibilities boggle the mind.

If a script can create customized HTML as the Web page loads, you might wonder whether a script can change a Web page already on display — for example, add, modify, or remove things like text, pictures, hyperlinks, and table cells. The answer is yes, and this is what DHTML is all about. The catch is that DHTML first showed up in Netscape Navigator 4 and Internet Explorer 4, and the two implementations were quite different. DHTML conventions have since converged, but differences among browsers still exist (as do those old browsers!). This, plus the inherent complexity of the task, can make DHTML programming a daunting task. The section "Responding to Events (Coding Example 3)," later in this chapter, explains a simple DHTML script.

Changing Content (Coding Example 2)

This example performs some simple comparisons and produces different HTML as a result. It flags items as follows:

  • With a New! or Upd! (updated) icon if they're less than 14 days old
  • With a picture bullet if they're more than 14 days old

Figure 41-5 shows how a browser displays this Web page; Figure 41-6 shows the FrontPage Code view.

Click here for larger image

Figure 41-5. JavaScript programming in this page's HTML displays a New! or Upd! (updated) icon for items less than 14 days old but displays a picture bullet for items that are older.

Click here for larger image

Figure 41-6. Here's the Web page shown in Figure 41-5 as it appears in FrontPage's Code view.

The <script> block at the top of Figure 41-6 defines a function named newicon. This function accepts two arguments, effDate and act. The effDate argument accepts the effective date of the listed item. The act argument accepts an action code — a for added items and u for updated ones. The function then creates two date objects and computes their difference. The date object named today contains the current date, and the one named added contains the date received in effDate.

JavaScript dates are actually very large integers that count time in milliseconds. Subtracting two dates therefore produces a difference in milliseconds. To convert milliseconds to days, the script divides the number by 24 X 60 X 60 X 1000 (24 hours times 60 minutes per hour times 60 seconds per minute times 1,000 milliseconds per second). The script saves the result in days to the variable named days.

  • If the variable days is less than 14 and act is u, the script writes the characters <img src=images/upd.gif height=11 width=28 border=0> into the HTML stream as if they had come from the server. This is the function of the document.write statement. The characters shown constitute an HTML <img> tag, which is the tag that displays pictures.
  • If the variable days is less than 14 and act is not u, the script writes an <img> tag that displays the new.gif icon.
  • If the variable days isn't less than 14, the script writes an <img> tag that displays cyanball.gif.

The table cell preceding each menu choice contains another script component, the first of which appears at the bottom of Figure 41-6. These scripts are one line each, as in

newicon("Nov 28, 2002", "a")

This statement runs the newicon routine with a value of Nov 28, 2002 for effDate and a for act. The appropriate icon will appear in place of each such JavaScript statement when the browser displays the Web page.

The last script component on the page displays the current date. It consists of the following two statements, which use concepts explained earlier in this section:

today = new Date();
document.write (today);

Responding to Events (Coding Example 3)

Figure 41-7 shows a simple Web page that responds to events. When the mouse passes over the area titled Please Click The Hyperlink Above, the browser replaces the picture with the one of three, chosen at random. One choice is shown in Figure 41-8. When the mouse passes out of that area, the browser restores the original picture.

Click here for larger image

Figure 41-7. This Web page initially displays a nearly empty picture above the prompt.

Click here for larger image

Figure 41-8. Moving the mouse over the picture area activates a script that displays a different picture. Another script displays the first picture when the mouse leaves the picture area.

FrontPage can achieve similar results — using essentially the same method — with no script programming on your part at all. Basically, you insert and select the first picture, display the DHTML Effects toolbar, choose On Mouse Over, choose Apply Swap Picture, and then click <Choose Settings> to select the second picture. However, this doesn't display one of three pictures chosen at random, and it doesn't illustrate how to write scripts that respond to browser events.

Here's how to write the script:

  1. Prepare the four pictures you want to swap. Make sure that they're all the same size.
  2. Add the first picture to the Web page where you want the swapping to occur.
  3. Assign a hyperlink to the picture you inserted in step 2. If you don't want the hyperlink to display a different Web page, specify javascript:void(0); as the hyperlink address. (This calls a JavaScript function that does nothing.)
  4. Select the picture you added in step 2, and then switch to Code view. The <img> tag for your picture should be on-screen and selected.
  5. Add the following attribute to the <img> tag for the picture. This assigns an internal name to the picture so that scripts can refer to it.
    name="dance"
    
    
  6. Enter a block of code such as the following anywhere before the picture you added in step 2. Just after the <head> tag, just before the </head> tag, and just after the <body> tag are three good choices.
    <script LANGUAGE="JavaScript">
    <!--
    var dancer1 = new Image(); dancer1.src = "../images/dancer1.gif";
    var dancer2 = new Image(); dancer2.src = "../images/dancer2.gif";
    var dancer3 = new Image(); dancer3.src = "../images/dancer3.gif";
    var dancer4 = new Image(); dancer4.src = "../images/dancer4.gif";
    //-->
    </script>
    
    

    The first two lines mark the beginning of a script block, and the last two mark the end. The third line contains two statements: one that creates an Image object named dancer1 and another that loads the picture ../images/dancer1.gif into it. The fourth line creates an Image object named dancer2 and loads the picture ../images/dancer2.gif into it, and so forth.

    The reason for loading these pictures into memory is to make them available for instantaneous display.

  7. Enter the following function just after the last var statement from step 6, and before the closing comment and </script> tag:
    function swapRandom(){
      curDate = new Date();
      curSec = curDate.getSeconds() % 3; 
      if (curSec == 0){ 
        document.dance.src = eval('dancer2.src'); 
      }else{
        if (curSec == 2){ 
          document.dance.src = eval('dancer3.src'); 
        }else{
          document.dance.src = eval('dancer4.src'); 
        }
      }
    }
    
    

    The first statement marks the beginning of the function and gives it a name. The second creates a Date object containing the current date and time. The third statement uses the getSeconds method to get the current second, divides this by 3, and saves the remainder in a variable named curSec.

    The first if statement tests the remainder in curSec. If it's zero, the script replaces the picture on the Web page with the second picture from step 6. Otherwise, the second if statement again tests the remainder in curSec. If it's 2, the script displays the third picture from step 6; otherwise, it displays the last picture from step 6.

  8. Locate the anchor tag (that is, the <a> tag) for the hyperlink you added in step 3, and then add the following attributes:
    onmouseover="swapRandom();"
    onmouseout="document.dance.src = eval('dancer1.src');" 
    
    

    The first attribute specifies a JavaScript statement that runs whenever the visitor moves the mouse pointer over the picture. That statement runs the swapRandom function from step 7.

    The second attribute specifies a JavaScript statement that runs whenever the visitor moves the mouse pointer off the picture. That statement copies the picture in the Image object named dancer1 into the visible picture.

  9. Save the Web page, and then try browsing it in both Internet Explorer and Netscape Navigator. To view a working example, browse the file ch41/dance.htm in the sample Web site installed from the companion CD.

All the machinations with hidden picture objects, by the way, aren't the real point of this example. The real point is the availability of attributes like onMouseOver and onMouseOut that trigger script code when events occur on the browser.

Internet Explorer versions 4 and later recognize a wide variety of events, and you can code them on any HTML tag. Netscape Navigator 4 recognizes fewer events, and only for hyperlinks and form elements. That's why the example in this section had to use a hyperlink; Netscape 4 supports the onMouseOver and onMouseOut events for hyperlinks but not for pictures.

Hopefully, complications caused by browser differences will decrease over time. Meanwhile, exercise care and be sure to test with every browser you're concerned about.

Using Microsoft Script Editor

The quickest and often easiest way of adding script code to a Web page is to simply click the Code tab at the bottom of the editing window. This provides direct editing of all HTML and script code in the current page

For more stringent requirements, FrontPage includes a state-of-the-art code editor called Microsoft Script Editor. You can display this editor (shown in Figure 41-9) in four ways:

  • Double-click any script icon to open the HTML Tag dialog box. Then, when the HTML Tag dialog box shown previously in Figure 41-4 appears, click Edit.
  • Click the Microsoft Script Editor button on the Code View toolbar.
  • Choose Macro from the Tools menu, and then choose Microsoft Script Editor.
  • Press Shift+Alt+F11.

Click here for larger image

Figure 41-9. This is Microsoft Script Editor, an advanced development environment for Web coding.

Script Editor is a power tool for working with Web pages as lines of code. Working with code might have been something you hoped to avoid when you bought FrontPage, so this section will provide just an overview. If you're a coder at heart, a coder in hiding, or in fact any sort of coder at all, this will probably be enough to get you started.

Strictly speaking, Script Editor isn't part of FrontPage; it's a tool developed separately for use in various Microsoft products. Don't be surprised when Script Editor and FrontPage have different ways of doing things.

Examining the Main Document Window

The large center area in Figure 41-9 is the main document window. This is where the code for your Web page appears. You can modify the code by typing, by using the Edit menu, by using shortcut keys, and so forth.

Source code in the document window is color-coded: tag names are dark red, attribute names are bright red, attribute values are blue, and so forth. You can change the source code color scheme, font, and size by choosing Options from the Tools menu, choosing Environment, and then choosing Font And Colors.

Notice the two tabs at the bottom of the window. One of these works, and one doesn't.

  • The HTML tab displays your HTML code. This is the default view and the one that works.
  • The Design tab displays a graphical design view of the current document; this is the tab that doesn't work. When Script Editor is bundled with Microsoft Office applications such as FrontPage, it depends on the host application for graphical design view. In other words, use FrontPage, not Script Editor, for WYSIWYG editing.
Note   If Script Editor appeals to you and you want the Design tab to work, consider purchasing its successor, Microsoft Visual Studio .NET.

Examining the Toolbox Window

The Script Editor toolbox is a source of generic elements you can add to your Web page by dragging. It appears by default on the left in the main window, as shown in Figure 41-9. If the toolbox isn't visible, choose Toolbox from the View menu.

To add any element in the toolbox to your Web page, drag the element from the toolbox to wherever in your HTML it should appear. Script Editor will insert a basic set of tags and attributes. You'll need to fill in attribute values by hand or by using the Properties window, as described shortly.

Examining the Project Explorer Window

The Project Explorer window shows the files that make up the current Web page. As you might expect, there's usually only one file listed here — your HTML, ASP, or ASP.NET file. This window appears in the upper right corner in Figure 41-9.

Examining the Properties Window

The Properties window, located just below the Project Explorer window, is more interesting. This window displays a property sheet for most Web page elements you select in the main document window. If no properties are available for a given element, the Properties window applies to the document as a whole.

Figure 41-10 zooms in on the Properties window. There are three views, corresponding to the three toolbar icons: Alphabetic, Categorized, and Property Pages. The box above the toolbar indicates that an <img> tag is selected in the main window. The property list below the toolbar includes only those properties appropriate to the type of tag.

Click here for larger image

Figure 41-10. The Properties window displays settings appropriate to the item selected in the main Script Editor window. This figure shows the three views corresponding to the three toolbar icons.

  • Alphabetic view lists the element's properties in alphabetical order.
  • Categorized view lists the same properties, but grouped by category. In practice, all Web page properties fall into the same category — Misc — so sorting them by category accomplishes nothing.
  • Property Pages dialog box provides another view of the same properties. In general, these aren't the same dialog boxes that FrontPage uses.

To set property values in Alphabetic or Categorized view, first select the property name, and then enter the value. You can enter most values by hand, and many by drop-down list or dialog box. If a drop-down list is available, a drop-down arrow will appear when you select the property name. If a dialog box is available, an ellipsis button will appear.

Figure 41-11 and Figure 41-12 show the four tabs in Script Editor's Color Picker dialog box.

Click here for larger image

Figure 41-11. The Web Palette tab selects colors that browsers can display without dithering or substitution on 256-color display systems. The Named Colors tab selects colors that browsers recognize by name.

Click here for larger image

Figure 41-12. The System Colors tab assigns system colors to Web page elements. The Custom Color tab specifies colors in terms of Red, Green, and Blue components.

Here's how to use each tab in the Color Picker dialog box.

  • The Web Palette tab, shown on the left in Figure 41-11, displays the 216 safe colors first discussed in Chapter 18. Color arrangement is roughly by hue: blues and violets to the left, greens and yellow in the center, and reds to the right.
  • The Named Colors tab, shown on the right in Figure 41-11, displays the colors most browsers recognize by name. Most browsers recognize bgcolor="PapayaWhip" as equivalent to bgcolor="#ffefd5", for example. The Named Colors tab shows all colors for which such an equivalence exists.

    The origin of this list of colors seems lost in antiquity. You might think that the named colors are better supported in some ways than in others, but if so, you'd be wrong. The Web Palette colors (also called the safe colors) are really the best supported, and very few of those have browser-recognized names.

  • The System Colors tab, shown on the left in Figure 41-12, displays color choices based on the system colors in effect on the visitor's computer. However, colors specified this way work properly only on Internet Explorer.
  • The Custom Color tab, shown on the right in Figure 41-12, is nothing more than another RGB color picker, with sliders for the three colors and a preview box.

Examining the Document Outline Window

The Document Outline window, as shown in Figure 41-13, displays a condensed, structured diagram of the elements in your Web page. When you click an element in the outline, Script Editor highlights and positions its code in the main editing window. This window doesn't appear by default; to display it, choose Other Windows from the View menu, and then choose Document Outline.

Click here for larger image

Figure 41-13. The Document Outline window shows the structure of your Web page in terms of HTML elements. Selecting an item in the Document Outline window positions and selects the corresponding code in the main document window.

Editing Script Code

As interesting as all these HTML editing features might be, Script Editor's major strength lies in entering and debugging script code. Figure 41-14 shows an example of Microsoft IntelliSense, a major advance in code editing.

Click here for larger image

Figure 41-14. Whenever you type a period after the name of a known object, Script Editor presents a list of valid properties and methods. Here, the developer is choosing the document object's write method.

As in FrontPage Code view, IntelliSense kicks in whenever you type the name of an object known to Script Editor followed by the lead-in character for another element. Instantly, IntelliSense displays a drop-down list of that object's valid properties and methods. If you type additional characters, IntelliSense positions the drop-down list accordingly. Pressing the Tab key enters the complete property or method name.

Debugging Browser Scripts with Script Editor

The most impressive feature Script Editor has to offer is its ability to debug browser scripts and ASP pages interactively. This means that you can start a script, let it run one line at a time, inspect variables and objects as the script progresses, set breakpoints, and generally poke around while the script is running.

To enable browser-side script debugging:

  1. Start Internet Explorer and choose Internet Options from the Tools menu.
  2. On the Advanced Tab of the Internet Options dialog box, locate the Disable Script Debugging check box, and make sure that it isn't selected. Figure 41-15 shows the correct setting.

    Click here for larger image

    Figure 41-15. You can enable or disable browser-side scripting by configuring this dialog box in Internet Explorer. To enable or disable server-side debugging, use the Internet Information Services management console on the Web server.

Figure 41-16 shows Script Editor debugging a simple script. The arrow in the left margin shows the current statement, and the Locals window shows the values of all current local variables (local to the script in the current browser window, that is).

Here's what's happened so far:

  1. The Web designer opened the file parggen.htm in Design view.
  2. The designer chose Macro from the Tools menu and then chose Microsoft Script Editor.
  3. In Script Editor, the designer chose Step Into from the Debug menu to load the Web page into the browser, execute the first line of script code, and highlight it in the main document window. That first line of code was:
    cnt = 1;
    
    
    Note   If the only option on the Debug menu is Install Web Debugging, choose that option, and then close and reopen Script Editor.
  4. Each time the designer pressed F11, Script Editor executed the next sequential line of code.

Click here for larger image

Figure 41-16. Here Script Editor is single-stepping through a browser script written in JavaScript. The highlighted statement is the next to be executed, and the value of cnt — in the Locals window — shows that this is the fourth iteration through the while loop.

The Locals window shows the values of all current, local variables (that is, of all variables available to the current script procedure). In this case, there's only one, cnt, and its value is 4. You can change the current value of any variable by typing over it in the Locals window.

Features like this are great for figuring out why your script is doing what it's doing, or not doing what you think it should. Repeatedly pressing the F11 key quickly becomes boring and mundane, however, especially for long and complex scripts. In such cases, it's usually preferable to set a breakpoint where a suspected problem exists, and then press the F5 key to runs the script until it reaches the breakpoint

A breakpoint flags a script statement so that whenever it's about to be executed, execution of the entire script stops. To set a breakpoint, select the statement in Script Editor, and then choose Insert Breakpoint from the Debug menu. Script Editor will flag the statement by placing a red dot in the left margin of the document window, and it will halt execution whenever that statement is about to execute. You can flag as many statements as you want as breakpoints.

Note   You can also set and remove breakpoints by double-clicking the left margin of the main document window.

To cancel a breakpoint, select the statement, and then choose Remove Breakpoint from the Debug menu. To leave the breakpoint defined but ignore it, choose Disable Breakpoint. To cancel all breakpoints, choose Clear All Breakpoints.

Script Editor is a remarkably full-featured and complex application with advanced features beyond those described here. Describing it completely would require a book this size, with no space left for FrontPage. Hopefully, however, this introduction will be enough to get you started.

In Summary...

This chapter explained how to add simple groups of programming statements called scripts to a Web page and then have those scripts execute on the browser as it receives the Web page or responds to events.

Scripts can also execute on the Web server as it transmits the page. The next chapter will explain how to create and debug Web page scripts that run on the Web server.

Show:
© 2014 Microsoft