Simple JavaScript Examples for use with the Coyote Web Server

This document describes several simple JavaScript mechanisms that can be used to enhance the appearance of HTML pages served by the Coyote web server. These methods are not really unique to Coyote, but are often used in the day to day data entry applications that Coyote is ideal for.

Getting Additional JavaScript Documentation

If you would like more official JavaScript documentation, you should refer to a number of excellent web sites that post this information. The site that Modular Software uses is:

http://developer.netscape.com/docs/index.html

JavaScript Overview

First, to get rid of one misconception. Java and JavaScript, although they seem to share some syntax styles, are completely seperate and independent programming languages. Java is a compiled full-function language that can be used for applications that range from video games to cruise missles. JavaScript is a language that is designed to extend the functionality of HTML in a web browser environment.

The Basic of JavaScript and HTML

JavaScript is "embedded" within an HTML page as text source code. In general, JavaScript is entered within <script> </script> HTML tags as in:

<script language="JavaScript">
    .... some JavaScript code
</script>

Not all browsers support JavaScript, so in order to allow for reasonable display functions on non-JavaScript compatible browsers, most HTML pages will include JavaScript code inside of an HTML comment as in:

<script language="JavaScript">
    <!--
    ... some JavaScript code
    // -->
</script>

The  characters delimit HTML comments. It is thus legal for JavaScript source code to be "inside" of HTML comments and still recognized as JavaScript source code.

It is perfectly legal to include more than one <script language="JavaScript"> section within a program.

When you write JavaScript code, there are two general classes of JavaScript elements. You can define functions that will be called by other JavaScript code, and you can define in-line code that is executed when the page is loaded. You define a function in a manner similar to:

<script language="JavaScript">
    function Function1(Parameter1,Parameter2)
    {
        ...
    }
    function Function2(Parameter1,Parameter2)
    {
        ...
    }
</script>

You can define in-line JavaScript in the same manner by just defining elements outside of functions:

<script language="JavaScript">
    Function1("p1","p2")
    Function2("p3","p4")
</script>

The last place that you can include JavaScript code is as event handlers for other HTML elements. This allows you to do things like submit a form when a user clicks on a hypertext link, change the graphics that are displayed when the mouse is over a picture, or reload the page after a certain amount of time has expired. The specifics of these actions are beyond the scope of this introduction, but the general format of a JavaScript event handler is:

<a href="..." onclick="JavaScript code"> ... </a>

The JavaScript code in this type of example is usually a simple call to a JavaScript function that you have previously defined.

Some Simple Functions

Using Hypertext Links to Submit Forms

When you write applications with the mv/Web generator, you must insure that your application always keeps control of the processing that is occuring. The easiest way to accomplish this is to use a small amount of JavaScript to cause the browser to submit the page whenever a hypetext link is followed. This is the HTML source code that is required for this operation:

<html>
<head>
   ...
</head>
<body>

<script language="JavaScript"><!--
function SubmitFn(x)

{
  document.forms[0].SELID.value = x
  document.forms[0].submit()
  return false
}
// --></script></p>

<form method="POST">
    <input type="hidden" name="SELID">
    ...
    <p><a href="1234" onclick="return SubmitFn('1234')">link 1234</a></p>
    <p><a href="5678" onclick="return SubmitFn('5678')">link 5678</a></p>
</form>

</body>
</html>

There are several parts to this example:

Setting up a JavaScript Function to field the click event.

The top of the code contains a JavaScript function called SubmitFn in our example. This function will be called whenever a user clicks on a hypertext link that has an onclick event that refers to this functions. It is the responsibility of this function to set a variable to the selection ID value and to submit the form. The function also returns false so that the onclick reference will fail and the hypertext link will also fail allowing the form to be submitted.

This function can actually exist anywhere in the HTML source code. The customary place is to include JavaScript functions as the first statements after the <body> tag.

Setting up the page <form>

The page must contain a standard HTML form construct with a <form ...> and </form> tag. It is usually best to surround the entire body of your page with these structures so that all elements are inside of the single form.

Setting up a hidden input field

Next, you need to create a hidden input field (called SELID in this example) that will be used to contain the "value" of the link that is selected. When the page is submitted back to the Coyote web server, you can use:

PL_GETVAR variable from 'SELID' else variable = ''

to retrieve the value of this variable so that your program can sense which link was followed.

Setting up hyperlinks that will submit the form

The final step is to attach an "onclick" action to a standard hyperlink. This onclick function will cause the JavaScript function "SubmitFn(...)" to execute whenever the user clicks the hyperlink. This will then cause the page to submit and return "false" which will cause the standard hypertext link to not be followed. The contents of the href="..." tag is actually not processed in this case, but you should probably include the link value so that the user will see a reasonable link at the bottom of the page when the mouse is over the link.

Summary of Using HyperLinks as Submit Elements

This example is a very small example of how to use hyperlinks to cause a page to be submitted. By including a single helper JavaScript function at the top of the page, you can then include as many submit hyperlinks as you wish within the page body.