High-end Scripting in FrontPage 2002
Published: March 2002
The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be
interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.
This article is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, AS TO THE INFORMATION IN THIS DOCUMENT.
Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part
of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as
expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.
© 2002 Microsoft Corporation. All rights reserved.
Microsoft, FrontPage, Jscript, the Office logo, Visual Basic and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
For the latest information, please see http://www.microsoft.com/frontpage
Table of Contents
Overview
A Few Tips on Getting Started with the Microsoft Script Editor
Launching Script Editor from within FrontPage 2002
Turn on Line Numbering
Using the Document Outline Window
Features of the Microsoft Script Editor
HTML Authoring Power User Features
Scripting Features
Complete DHTML, HTML and CSS Coding References
VBScript and JScript Tutorials and Language References
Summary
More Information
Microsoft Resources
When evaluating Web authoring and development tools, many Web developers may not realize that a very powerful code editor, the Microsoft® Script Editor version 10.0, is included with Microsoft FrontPage® version 2002, and can be launched from FrontPage. Web site developers can use the
Microsoft Script Editor to add, edit, or debug any Microsoft Visual Basic® Scripting Edition (VBScript) or JScript® Web solution as well as add text or edit HTML tags on FrontPage-based Web pages. The Script Editor also provides statement
completion to help users adding code finish their work even more quickly. The Script Editor helps you to further develop your Web development skills as well.
The Microsoft Script Editor includes a full set of script debug tools and a number of other features for scripting in either VBScript or JScript. Experienced Web developers are impressed by the powerful coding features of the
Script Editor, and use it in conjunction with FrontPage to rapidly build sophisticated site solutions. The Script Editor offers coding help in the form of online DHTML, HTML, and CSS references as well as handy properties dialogs and popup menus for HTML coding. Combined with features such as code
line numbers and color coding, sophisticated HTML and script is easier to create and manage. The JScript and VBScript tutorials are a great source of information for both beginner and advanced coders as well.
This article assumes that the reader has at least Intermediate to Advanced skills developing Web sites.
You can quickly launch the Microsoft Script Editor from within FrontPage 2002.
To start using the Microsoft Script Editor, open a Web page in FrontPage 2002, and do the following:
1. On the Tools menu, point to Macro, and then click Microsoft Script Editor.
Note: You must have at least one file open in Page view for the Microsoft Script Editor option to be available.
2. If you are prompted to install Microsoft Script Editor, click Yes.
3. In HTML view, edit your file and save changes in the Script Editor.
4. To view your HTML file as it will be displayed in the browser, click the View in Browser command on the File menu.
The first time you access the Microsoft Script Editor in FrontPage you may be prompted to install it, click “Yes”, and it automatically installs (the default installation of FrontPage only installs the Script Editor upon
first use). The Script Editor always opens with the Web page that you are currently working on in FrontPage 2002. You can work on multiple pages in FrontPage and the Script editor at the same time.
Tip: When you make changes to your FrontPage 2002-based web page in the Script Editor, you are actually changing a separate copy of the HTML document. These changes can end up out of sync with
the FrontPage copy. To sync the changes you made to the other copy of the page open in FrontPage, click Refresh in the View menu.
Line numbering is a must for debugging your scripts and is helpful when working with HTML in general. Although it isn’t there by default, you can turn on line numbering in the Script Editor. To display line numbers in your code, do the following:
1. Click Options on the Tools menu, and from the Text Editor tab, navigate to the General page of the All Languages folder.
2. Under Display, click Line numbers.
Note: Turning on line numbering does not mean that the document will print with line numbers. For line numbers to print, you must click Line numbers in the Page
Setup dialog box (File menu).
The Document Outline window can help you quickly navigate code in a complicated Web page and allows you to switch between viewing HTML or just script in the page as follows:
To open the Document Outline window-
1. Select Other Windows from the View menu and choose Document Outline.
2. Click the plus (+) sign next to a node to list all the items
within the node.
Note: A minus (-) indicates that a node is already fully expanded. Click the minus (-) sign to collapse the node.
To switch between HTML and Script Outline views in the Document Outline window-
1. Click the
icon on the top left for the HTML Outline view.
2. Click the
icon on the top left for the Script Outline view.
Note: In Script view, the available script outlines displayed include Client Objects and Events and Client Scripts. In HTML view, click the <BODY> outline to display all the elements on your HTML page.
The Microsoft Script Editor is packed with features to cut HTML coding time and help produce better code. Three features that are particularly useful are the Toolbox window, Properties window and popup menus, and the Document Outline
window.
Smart ToolsThe Toolbox window displays items such as HTML fragments, objects, and text files that change depending upon what kind of page you are working on. By default, the Toolbox displays two tabs, a General tab and a Clipboard Ring tab. The HTML tab is displayed in the Toolbox when you create or open an HTML document.The General and Clipboard Ring tabs appear by default whenever the Toolbox window opens. Use the General tab to store default and custom controls. The Clipboard Ring tab displays all system Copy and Cut operations the Script Editor captures
and can recall the last 15 text items that were cut or copied. This powerful feature can be used for quickly copying several pieces of text to a new location or for recalling text that you inadvertently cut several edits ago. |
|
The Properties window displays Document Properties and Tag Properties as you navigate through your HTML code. Also, when editing a tag, the Tag Properties popup menu displays all the
available properties you can assign to it. Choosing a property from the popup menu pastes the correct syntax into your tag. And, as you complete the value part of the property, additional help is instantly available. For example, when applying values for a tag attribute like “bgcolor”- a Color
Picker menu pops up saving you the time it takes to find out and type in a hex value for the background color you want to assign to the tag.
These properties panes and popup menus both speed up and improve the quality of your HTML coding.
The Document Outline window displays a nested, hierarchical view of the HTML elements (in HTML Outline view) or scripts, and script elements (in Script Outline view) on your page. You can scroll through the outline, collapse and expand entries, and double-click items to navigate quickly to their location in your document.
In the illustration above, double-clicking <BODY> from the HTML Outline window jumps to the beginning of the tag, “<body ”, in the code.
Microsoft Script Editor was designed to create scripting solutions for HTML pages. With its powerful features, you can quickly build a function by selecting an object, assigning an event to it, and then complete the appropriate script arguments. Two especially useful features of the Script Editor are the Object Browser and a full set of debugging tools.
| The Object Browser lets you examine and discover objects (namespaces, classes, structures, interfaces, types, enums, etc.) and their members (properties, methods, events, variables, constants, enum items) from available components. |
|
The Microsoft Script Editor provides a full set of debugging tools for testing and troubleshooting HTML pages and scripts. The Script Editor debugger works the way many debuggers do, by letting you:
· View the source code of the script you are debugging.
· Control the pace of script execution.
· View and change variable and property values.
· View and control script flow.
One of the Script Editor’s debug tools is the Breakpoints window. It lists all breakpoints currently set in your program and displays their properties. Breakpoints tell the debugger that an application should break (pause execution) at a certain point or when a certain condition occurs. In the Breakpoints window, you can set (create) new breakpoints, delete breakpoints, enable or disable breakpoints, edit a breakpoint's properties, or go to the source code corresponding to a breakpoint.
|
|
A breakpoint that is set and enabled appears as a solid red disk. A breakpoint that is disabled appears as an empty red circle. The source windows show the location of a breakpoint by coloring the text where the breakpoint is
located and displaying a symbol in the left margin. |
The Script Editor also provides online technical information on using DHTML, HTML, and CSS, including information on tags, elements, setting font sizes, links to articles on how to use DHTML, CSS positioning, font embedding and much more.
These references provide a complete list of all HTML elements and members for the element defined by HTML and listing of character sets, which determine how the bytes that represent the text of your HTML document are translated
to readable characters.
This reference covers a number of object model extensions, HTML Applications (HTA), which enable developers to customize a Web application's user interface in Microsoft® Internet Explorer 5 browser environment.
Behaviors Library provides a topics list of behaviors and behavior definitions including sets of properties, methods, and events exposed by these behaviors as well as source code available for download in the respective reference page.
Visual Filters and Transitions Reference provides information on how to use standard HTML controls, such as text containers, images, and any other windowless object, and filters and transitions along with basic scripting to create visually engaging and interactive documents.
This reference contains a list of HTML Components elements and the members they support that provide a mechanism for implementing components in script as DHTML behaviors.
The CSS reference includes two sections defining supported Cascading Style Sheets (CSS) attributes and Length Units.
Both VBScript and Jscript Language References contain information on Features, a Keyword list, Errors, Functions, Methods, Objects, Operators, Properties, and Statements. There are also
Scripting Run-Time References and FileSystemObject Tutorials for both script languages as well as scripting tutorials.
Although you can learn about VBScript in this tutorial, it requires a basic understanding of programming. The tutorial covers adding VBScript code to an HTML page and-
VBScript Data Types
VBScript Variables
VBScript Constants
VBScript Operators
Using Conditional Statements
Looping Through Code
VBScript Procedures
VBScript Coding Conventions
Using VBScript in Internet Explorer
A Simple VBScript Page
VBScript and Forms
Using VBScript with Objects
JScript is the Microsoft implementation of the ECMA 262 language specification. It is a full implementation, plus some enhancements. The tutorial covers what Jscript is and-
Writing JScript Code
JScript Variables
JScript Data Types
JScript Operators
Controlling Program Flow
JScript Functions
JScript Objects
JScript Reserved Keywords
Recursion
Variable Scope
Copying, Passing, and Comparing Data
Using Arrays
Advanced Object Creation
Special Characters
Troubleshooting Your Scripts
Using JScript In Internet Explorer
Displaying Information in the Browser
Using Message Boxes
This paper has covered key issues of relevance and importance to any Web developer or designer evaluating why FrontPage 2002 is an excellent choice for developing sophisticated Web sites.
The following list of resources will lead you to more information:
http://www.microsoft.com/Frontpage/ for information and resources on Microsoft FrontPage version 2002.
http://msdn.microsoft.com/library/default.asp?url=/nhp/Default.asp?contentid=28001169 for information and resources on scripting.
http://www.microsoft.com/frontpage/downloads/addin/default.asp
for information and downloads of add-ins for FrontPage at the new FrontPage Add-in Center.
http://msdn.microsoft.com/downloads/default.asp?URL=/code/sample.asp?url=/MSDN-FILES/027/001/710/msdncompositedoc.xml for
the new Software Development Kit (SDK) for Microsoft FrontPage 2002. This SDK contains not only basic help to get you started developing solutions to use with FrontPage, but also many articles and samples you can use to create your own custom solutions.
