CodeCharge Studio

Using JavaScript/Jscript

Ordinarily, a page is mostly composed of HTML code that defines the static content within the page. This is the content that is shown when a page is opened in HTML mode. In certain situations, it is desirable to make a page more interactive, which can be accomplished by adding client-side scripts.

The execution of client-side scripts is largely dependent on events triggered when the user performs certain actions. The script consists of a set of instructions for the action to be performed in response to the event.

The most popular language for writing client side scripts is JavaScript. JScript is a Microsoft flavor of JavaScript that is specifically geared for execution on the Windows platform. Scripts can also be written in VBScript, but most non-Microsoft browsers don't support VBScript.

Scripts are sometimes complicated by the fact that not all browsers support the same object model when it comes to script execution. Basic script operations such as showing a popup window will usually execute seamlessly on most browsers. As the scripts become more complex, you are bound to encounter instances where some portions of a script are supported in one browser and not another. You can provide multiple implementations of the same script for each browser type or inform the user of the preferred browser to use for optimal performance.

CodeCharge Studio provides a number of client-side scripts in the form of actions that can be added to component events. This is accomplished using the Forms tab of the Toolbox. The client-side events are listed under the Events tab of the properties window. To add an action, right-click on the event and select the Add Action... option. Once selected, the dialog appears with the list of available actions from which you can choose one to be added.
Apart from using the actions provided by CodeCharge Studio, you can manually add JavaScript code to an HTML page. It is necessary that you have some basic understanding of JavaScript and JavaScript reference documentation to guide you in the process. You should be aware of the extent to which the code you write is supported in the browsers that you anticipate your viewers will use.
Within CodeCharge Studio, the Format tab of the Properties window displays a list of events to which you could attach JavaScript code. This list of events contains most of the available events, but it is not guaranteed to be comprehensive for all browsers and neither does it indicate browser compatibility.

Generally, there are two common ways of adding JavaScript code to an event. If the amount of code involved is small, you can add all the code directly within the HTML tag. To demonstrate this approach, the following listing contains JavaScript code attached to the onClick event of the submit button. The syntax of the code includes the javascript keyword that identifies the type of script. A semicolon separates the javascript keyword from the actual JavaScript code that is executed:

<input name="Cancel" type="submit" value="Cancel" onClick="javascript:confirm('Are you sure you want to cancel?');">

The confirm() function is a JavaScript function that displays a popup window in which the user can click on an Ok or a Cancel button. The function takes a string argument that is displayed in the body of the popup window.

In most cases, you will want to execute more that one line of code. This is where the use of functions becomes useful. Just like in other languages, a JavaScript function is a group of one or more statements that can be invoked as a single entity. A function has a name that is used to identify it and optionally, a function can receive arguments.

To define a function, you have to use the <script></script> tags. In most cases, JavaScript functions are defined within the <head></head> section of a page. Once a function has been defined, it can be called from any section of the page. In the example a function called myFunction(), which takes no arguments, is defined within <script></script> tags.

<script language="JavaScript">
function myFunction() {
var test;
test = Confirm("Are you sure you want to Cancel?");
if (test) {
  window.location.href = "newpage.asp";
  }
}
</script>

The function can be invoked from an HTML event. For example, the function is executed with the onClick event. By using functions in this way, you can execute complex operations through standard browser events.

<input name="Cancel" type="submit" value="Cancel" onClick="myFunction();">

A common use of client-side scripts, such as JavaScript, is to control the properties of various components within a page. To do this, it is necessary to identify the components so that the code can reference them. In this regard, the Properties window can be used to set, change or find out the names of various components by clicking on them in Design or HTML mode. It is to your advantage to name the components in a manner that would be conducive to using the names within script code.

Using JavaScript/Jscript

See also