KAL

Client-Oriented Browser Server Interaction

JavaScript is a scripting language, like Perl, but scripts written in JavaScript can be embedded right into your HTML pages.

Your JavaScript program is able to respond to user-initiated events (for example a form input). This happens without any network transmission.

JavaScripts are interpreted (not compiled) by the client.

Thus, when a user writes something into a form, it is not necessary that it be transmitted to the Server, verified and sent back, as with Perl. The input is verified by the client application and can be transmitted after that, if necessary.

Functions are called by user-initiated events, which are loaded first before a user can do anything that might call a function.

EXAMPLE: 

<html>
<head>
  <script language="LiveScript">
     function pushbutton() 
  {
       alert("Hello Karen!");
  }
 </script>
</head>
<body>
<form>
 <input type="button" name="Button1" value="Push me" onclick="pushbutton()">
  </form>
</body>
</html>

This script will create a button and when the user presses it, a window will pop up saying 'Hello Karen!'. Try it!

So, what is going on in this script?

  1. The function pushbutton is loaded and kept in memory.

  2. Then a button is created with the normal <form> tag.

  3. In the <input> tag, the built-in method (function) 'onclick' tells the browser which function to call when this button is pressed.

  4. When the button is pressed this function pushbutton is executed.

  5. The 'alert' method is also built-in to JavaScript.

Forms

With server-based programs :

To accomplish this, tags (<form> etc.) were added to HTML to direct a WWW client to display a form to be filled out by a user and then forward the collected data to the HTTP server specified in the form.

Servers were modified so that they could then start the CGI program specified in the form and pass the collected data to that program, which could, in turn, prepare a response (possibly by consulting a pre-existing database) and return a WWW document to the user.

The following diagram shows the various components of the process.

Taken from: http://kuhttp.cc.ukans.edu/info/forms/forms-intro.html



In this diagram, the Web client running on Computer A acquires a form from some Web server running on Computer B. It displays the form, the user enters data, and the client sends the entered information to the HTTP server running on Computer C.

There, the data is handed off to a CGI program which prepares a document and sends it to the client on Computer A. The client then displays that document.





The process is easier with Client-oriented software, like JavaScript.

With JavaScript you can check the data provided by the user before it is sent to the CGI program, saving valuable server resources.

For example, you can write a JavaScript function to verify that users enter valid information into a form requesting a telephone number or zip code. Without any network transmission, an HTML page with embedded JavaScript can interpret the entered text and alert the user with a message dialog if the input is invalid.

Assuming valid data is entered, when a Submit button is clicked, (or whatever the JavaScript looks for) JavaScript executes the specified method as in the alert method to Karen above.

At this time the data from the form is transmitted to the CGI program running on the server.

Verifying Form Input by Gordon McComb

JavaScript by Stefan Koch

ACKNOWLEDGEMENT: Much of the material on the page was written by Paul Leemans.

Send questions and comments to: Karen Lemone

What do these buttons mean?