About scripts
Scripts for a Web site include event handlers for HTML objects, client-side
scripts associated with the document, and server-side scripts run
before the document is downloaded to a browser. Scripts can be written
in several languages. Which languages you use depends on the browsers
you want to support or the application server your site uses.
Code snippets can be saved in the Clip window and dropped
into client- or server-side scripts as needed. Scripts
can be saved as part of an HTML or JSP document, or in a separate
file (one script per file).
Editing scripts
The HTML editor and the Script editor provide a flexible approach
to writing scripts. You can work in the Script editor that is integrated
with the HTML editor or in the standalone Web Script editor.
Working in the HTML editor
The integrated Script editor
is a pane in Page view of the HTML editor. It provides an organized
view of your scripts, supports color-coding based on the selected
scripting language, and provides facilities for saving and testing scripts.
When you add a script in Page view, the editor automatically inserts appropriate
HTML elements and attributes for the script into your document.
An HTML page can contain many scripts. The integrated Script
editor lets you focus on one script at a time. Using the Script
toolbar, use the three drop-down lists to select an object, an event,
and a scripting language. If an object, such as a server script,
does not have events, the event drop-down is blank.
The integrated Script editor is also the interface for debugging.
While you edit scripts, you can set breakpoints and get ready for
your next debugging session.
In Source view, you can edit the HTML script elements and
the script itself in a single window. The scripts are intermixed
with the rest of the document content.
Working in the standalone Web Script editor
The standalone Web Script editor
is a separate window, independent of the HTML editor. Scripts can
be created here and saved to a file, becoming independent code you
can reuse in many documents and projects.
You can open the Web Script editor by selecting the Script
wizard in the New dialog box or by dragging and dropping a script
file to the PowerBuilder editor area. The Web Script editor supports
the following extensions: JS, SSC, STS, PSS, SSS,
or VBS. However, the editor allows you to save
a script file with any extension you want.
Using the Clip window
The PowerBuilder Clip
Window button opens a window in which you can store bits of code
you use frequently. You can copy text to the Clip window to be saved
and then drag or copy this text to the Script editor when you want
to use it. The Clip window displays a list of named clips and a
preview of the information contained in each. It provides buttons
to move Clip window contents to the clipboard, copy clipboard contents
to the Clip window, rename a clip, and delete a clip. Clips you
save in one workspace are available in all your workspaces. You
can hide or display the Clip window using the Clip Window button
on the PowerBar or by selecting Window>Clip.
Where and when to save scripts
By default, the scripts
you write in the integrated Script editor are stored in the HTML
document. They are saved when you save the document. If you use
the standalone Web Script editor to write a script, you can incorporate
it into a document by pointing to the file or copying the script
into the document.
When you save a script in an external file from the integrated
Script editor, the editor inserts an SRC attribute to point to the
file. When you edit the script, the editor gets the script from
the file and saves it again when you save the document.
Scripting languages
Web Targets
support several client scripting languages, including JavaScript, DynaScript
(based on the ECMAScript standard) and VBScript. For server scripting,
Web Targets also support several application server scripting languages
and object models.
For more information about working with application servers,
see Chapter 7, “Working with Application
Servers and Transaction Servers”.
Choosing a scripting language When you
write a script, you specify which scripting language you are using.
The editor uses this information to:
- Add a
LANGUAGE attribute to the SCRIPT element - Recognize the language syntax for color coding
Language requirements for debugging Web Target functionality includes debugging support for scripts
written in JavaScript only. Debugging also requires that you deploy
to PowerDynamo.
For more information about debugging, see Chapter 12, “Troubleshooting Web Targets”.
Types of scripts
There are several ways to write scripts in an HTML page or
JSP. The following examples show the HTML elements for each type
of script as you would see it in Source view. In Page view, you
do not see this syntax.
Inline event handlers
The code
for an inline script is included in the start tag of an HTML element. It
is assigned to a property associated with an event.
|
1 |
<BODY LANGUAGE=JavaScript |
|
1 |
onload='alert("Confidential!");'> |
Script for objects that are not HTML elements If an object, such as document, has events but is not an HTML
element, the script is contained in a SCRIPT element and uses the
FOR property to associate it with the object and the EVENT property
to associate it with an event:
|
1 |
<SCRIPT LANGUAGE=JavaScript FOR="document" EVENT="afterupdate"> |
|
1 |
alert("Confidential!"); |
|
1 |
</SCRIPT> |
In the integrated Script editor, use the Script toolbar to
select an object and an event. The script is stored in the property
associated with the event.
Client scripts
Client scripts are
not necessarily associated with an event. In HTML or JSP documents
surround these scripts with SCRIPT tags (the integrated Script editor
can do this for you). The scripts are evaluated as they are loaded
with the Web page. They can include functions that can be called
by other scripts.
|
1 |
<SCRIPT Language="JavaScript"><br /> function navigate(myform){<br /> durl=(myform.mylist.options<br /> [myform.mylist.selectedIndex].value);<br /> location.href=durl;<br /> }<br /> </SCRIPT> |
In the integrated Script editor, use the pop-up menu to create
a new client script. Client scripts are part of an array of Script
objects.
Server scripts
You can write scripts
that are run on the server before the document is sent to a Web
browser.
To create a server script, use the pop-up menu to create a
new server script. The HTML that marks the script varies depending
on the server you choose.
For information on how to insert a server script in your page,
see “Creating a new script”.
For more information about working with application servers, see Chapter 7, “Working with Application
Servers and Transaction Servers”.
Scripts in external files
You can store
any script in a separate file. The SCRIPT element has an SRC attribute
to refer to the file. For JavaScript, the file usually has a JS extension.
|
1 |
<SCRIPT Language="JavaScript" SRC="script1.js"> |
|
1 |
</SCRIPT> |
There are two ways to create an external script file:
- In the integrated Script editor, the Save As External
File pop-up menu item stores the current client script in a file
and points to that file with the SRC attribute. - The standalone Web Script editor creates a script
with no specific association to an HTML document. To use the script
in an HTML document, switch to Source view to edit the SRC attribute
to point to the standalone script file.
Other scripts
Read-only scripts Scripts that have
been automatically generated are marked as read-only. These scripts
are usually associated with design-time controls (DTCs) and are part
of the METADATA information for the control. You can view them but
not change them in the Script editor.
If you change the script in Source view and later cause the
DTC to regenerate its output, the script is rewritten and your changes
are lost.
Static output for design-time controls In some cases, you may want to insert generated scripts for
a DTC without the control itself. If you choose Insert>Component>ActiveX
from the menu bar and select the Generate Static Output check box
(on the Design-time tab), you will get the scripts produced by the
DTC but not the METADATA comments or <OBJECT> element.
You can then modify this static output without accidentally re-executing
the DTC and overwriting your modifications.
Objects in an HTML document
An HTML document is made up of objects organized in an hierarchy.
Initial releases of JavaScript used a small set of objects. With
the latest updates to HTML, any component of the page–a
paragraph, a link, a table cell–is an object.
IDs for HTML objects
To help you identify
objects when scripting, you can give them names or IDs. For example,
instead of referring to each member of the array of link objects (anchor
elements) on a page by using the default document object identifier (document.A
with a numeric index), you could name the links to identify them at
a glance:
|
1 |
<A ID=beginnerguidelink |
|
1 |
HREF="http://www.finance.com/info/index.html"> |
|
1 |
Beginner's Guide to Finance</A> |
Specifying IDs for objects Although you can write a script for an object that does not
have a name or ID, you will not be able to set breakpoints in that
script. For debugging, make sure you give a name or ID to each object
that has a script.
Assigning an ID You can assign an ID in the HTML editor using the HTML element’s
properties dialog box. You can also type the ID attribute into the document
directly in Source view.
HTML objects in the Script toolbar
All
commonly scripted objects are included in the integrated Script
editor’s Object drop-down list. To identify each object
in the Object list box, a Web target uses the following rules of
precedence:
- If the object has a name
,
the name is used as the identifier. - If the object has an ID but no name
,
the ID is used as the identifier. - If the object does not have a name or
an ID
, it is identified by its array index (for example,
the first image on a page would have the identifier IMG[0]).
Radio buttons Radio buttons in a form are
handled differently. Because radio buttons are linked together by
assigning them the same name, the identifier for a radio button
is its ID. If no ID is given, the ID is the radio button array index.
Client and server scripts Client scripts and server scripts are identified by their
array indexes. For example, the first client script on a page would
have the identifier SCRIPT[0] and the first server
script would have the identifier ServerScript[0].
IDs for scripts are not displayed in the drop-down list.
About array indexes Array indexes
for items without an ID, including scripts, correspond to the items’ positions
in the document. If you insert an item earlier in the document or
if you move items around, the index value associated with the item
will change and any scripts for the item will now be associated with
the new index value.
For example, if you create three client scripts and then move
the third script, SCRIPT[2], to the Head section,
that script becomes SCRIPT[0], SCRIPT[0] becomes
SCRIPT[1], and SCRIPT[1] becomes
SCRIPT[2]. If you change the order in Page view,
you may need to open the Source view to force the editor to update
the array index numbers.