Applies to
Microsoft Office FrontPage® 2003

Have you ever wanted to add a pop-up window to your Web site? Maybe you've wanted to add a hyperlink that closes the page or to display the current date and time. You can add all of these features and more by using JavaScript (JavaScript: A scripting language that can be used to add functionality to a Web page or a Web site, or to enhance the look of one. JavaScript scripts can run on any type of client or server computer.) in FrontPage 2003.

What is JavaScript?

JavaScript is a scripting language (scripting language: A simple programming language designed to perform special or limited tasks, sometimes associated with a particular application or function.) that is used to add interactivity to Web pages. Because JavaScript is an event (event: An action recognized by an object, such as a mouse click or key press, for which you can define a response. An event can be caused by a user action or a Visual Basic statement, or it can be triggered by the system.)-driven language, its functionality is triggered by an action (the event) that is initiated by the user, such as opening a browser window, clicking a hyperlink, or resting a pointer over an image.

JavaScript is also a client-side scripting language, which means that when the user performs an action, the script runs on the user's computer (the client) and not on the server.

If the user has turned off the computer's ability to run scripts, or if the user has an older browser that doesn't support more recent versions of JavaScript, some scripts will not work as you might expect on that user's computer. It is always a good idea to test your scripts in multiple browsers and to provide alternate links or features for visitors who can't run JavaScript on their computers.

By using FrontPage 2003, you can add JavaScript features to your Web site with little or no knowledge of JavaScript. Of course, it helps to learn JavaScript if you want to create and troubleshoot your own scripts or to troubleshoot free scripts that you may have downloaded from JavaScript Web sites.

Create a pop-up window with FrontPage 2003 Behaviors

Sometimes it is useful to have a pop-up window on your Web site. You might have a special offer that you want to promote or a link to a survey for users to fill out. A pop-up window is a quick and easy way to call attention to information that a user might not otherwise notice.

To add a pop-up window that opens automatically when the user opens the page

1. In Page view, at the bottom of the document window, click Design .
2. On the Format menu, click Behaviors. The Behaviors task pane opens.
3. In the Behaviors task pane, click Insert, and then click Open Browser Window.
4. In the Open Browser Window dialog box, do the following:
   1. In the Go to URL box, type the URL of the page that you want to open, or browse to it.
   2. In the Window name box, type a name for the page.

       Note   The name cannot include any spaces.

   3. In the Window width box, type the width in pixels of the new window.
   4. In the Window height box, type the height in pixels of the new window.
   5. Under Attributes, select or clear the attributes of the new window.

       Note   Selecting or clearing the attribute check boxes determines whether or not the new window will include several typical Microsoft Windows features, such as toolbars, scroll bars, or resize handles.

5. Click OK.

To add a pop-up window that opens when the user clicks a hyperlink

1. In Page view, at the bottom of the document window, click Design .
2. On the Format menu, click Behaviors. The Behaviors task pane opens.
3. On the page, select the page element  — for example, text or a graphic  — that you want to work with.
4. On the Insert menu, click Hyperlink.
5. In the Insert Hyperlink dialog box, in the Address box, type the URL of the page that you want to open, replacing the http:// with javascript://.
6. Click OK.
7. In the Behaviors task pane, click Insert, and then click Open Browser Window.
8. In the Open Browser Window dialog box, do the following:
   • In the Go to URL box, type the URL of the page that you want to open.
   • In the Window name box, type a name for the page.

      Note   The name cannot include any spaces.

   • In the Window width box, type the width in pixels of the new window.
   • In the Window height box, type the height in pixels of the new window.
   • Under Attributes, select or clear the attributes of the new window.

      Note   Selecting or clearing the attribute check boxes determines whether the new window will include several typical Microsoft Windows features, such as toolbars, scroll bars, or resize handles.

9. Click OK.
10. In the Behaviors task pane, under Events, point to the default event, click the arrow, and then click onclick.

To change how a pop-up window looks

1. In Page view, at the bottom of the document window, click Design .
2. On the Format menu, click Behaviors. The Behaviors task pane opens.
3. Under Actions, double-click the row that has Open Browser Window.
4. Make the changes you want, and then click OK.

Add a custom Close Window script to the code snippets library

Often a browser window includes a hyperlink that allows the user to close the window quickly and easily. This is achieved through including a line of JavaScript in a hyperlink that closes the window when the user clicks it.

If you use a script over and over again, you might want to save the script in your code snippets library. That way, instead of typing the script every time, you can insert it by pressing CTRL+ENTER and selecting the script from a list.

The following shows you how to create a code snippet that closes a browser window and how to insert that snippet into a page from the code snippets library.

To create a Close Window code snippet

1. Copy the following line of code beginning with

   <a

   and ending with

   /a>

   by selecting it and then pressing CTRL+C.

   <a href="javascript:window.close();">Close Window</a>

2. On the Tools menu, click Page Options, and then click the Code Snippets tab.
3. Click Add.
4. In the Keyword box, type closeWindow.
5. In the Description box, type Close Window script.
6. In the Text box, paste the text that you copied in step 1 by pressing CTRL+V.
7. Click OK.

To insert a Close Window code snippet into a page

1. In Page view, at the bottom of the document window, click Code .
2. Place the insertion point where you want to insert the code snippet.
3. Press CTRL+ENTER.
4. Select Close Window script from the list and press ENTER.

Add the current date and time with copy and paste JavaScript

If you know JavaScript, you can develop custom functions that enhance your Web site. Even if you don't know JavaScript, you can take advantage of other people's expertise and simply copy and paste the code into your Web page.

Many JavaScript developers make their scripts available for free on the Web. To explore the variety of scripts that are available for use, just open your favorite search engine and type free javascript or cut and paste javascript into the search box. You'll find hundreds of free scripts that you can use to add interactivity to your Web page.

Most scripts come in two parts: the function and the call to the function. The function is usually placed between the

<head>

and

</head>

tags, and the call to the script is usually placed somewhere between the

<body>

and

</body>

tags. The instructions that accompany most free scripts will tell you where to place the sections of code in order for them to work properly on your page.

The following example shows you how to display the current date and time on a Web page by copying the sections of code and pasting them into the appropriate section of your Web page.

To display the current date and time on a Web page

1. In Page view, at the bottom of the document window, click Code .
2. Copy the following lines of code by selecting them and then pressing CTRL+C.

   <script language="javascript">
    function datetime(){
     var datetime = new Date()
     var hr = datetime.getHours()
       var min = datetime.getMinutes()
     var mon = datetime.getMonth()
     var monNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
     var day = datetime.getDate()
     var year = datetime.getFullYear()
     if(hr < 10){
       hr = " " + hr
       }
     if(min < 10){
       min = "0" + min
       }
     if (hr > 12)
       {
       hr = hr - 12;
       }
   document.datetime.digits.value = hr + ":" + min + "   " + monNames[mon] + " " + day + "," + " " + year 
     setTimeout("datetime()", 1000)
     }
   </script>
   
   
   

3. In FrontPage, place your insertion point in the head of the HTML document, between the

   <head>

   and

   </head>

   tags, and paste the code that you just copied by pressing CTRL+V.
4. Copy the following text.

   
   <body onload="datetime()">
   

5. In FrontPage, select the

   <body>

   tag and replace it with what you just copied by pressing CTRL+V.
6. Copy the following text.

   <FORM name="datetime">
    <INPUT type="text"  name="digits"
       size=25 maxlength=25 value="Loading">
    </FORM>
   

7. Place the insertion point where you want the current date and time to appear, and paste the code that you just copied by pressing CTRL+V.
8. On the File menu, click Save.
9. To test your page, on the File menu, click Preview in Browser.

    Note   If scripts are disabled on your computer, the date or time will not be displayed properly.

    Note   If you have installed recent Microsoft Internet Explorer security updates, you may get a warning. To allow the date and time to be displayed, click the yellow Internet Explorer Information Bar, and then click Allow Blocked Content. In the Security Warning dialog box, click Yes.

For more information

You can find a wide variety of JavaScript resources on the Web that offer free scripts, examples, and tutorials. The See Also box has a few links that will help you find additional resources, learn JavaScript, and add interactive elements to your Web site.