<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Advanced Forms

Compound Functions

Now that we have learned the basics of forms, we need to put what we know into practice! Our first challenge is to apply multiple functions, and to incorporate code that may be beyond our current understanding!

Functions as "Black Boxes": Sometimes it is best to think of a function as a "black box". This means, we are blissfully ignorant of the contents of the box. The implication is that while we know how to use an item (like a TV Remote) we may be ignorant of how it operates internally. What is important is that we know how to use it!!

We can get functions from many different places. Many are free on the web, found in books or licensed for our use. Like the "black box" we can learn how to use these functions, but may never entirely understand how they operate. Eventually we may work with entire API's (Application Programmer Interfaces) that not only are complicated, but are sometimes designed to obscure how they operate.

There is even a word to describe this "hiding of complexity" in programming, it is called "encapsulation"! Dozens of developers could have worked to build an API, and not even a single developer may understand the entire application! As long as we understand the interface (how to use the program) we are not expected to understand how it works.

We already use internal JS functions and objects as black boxes. We learn what internal functions can do for us, how to use them, and what parameters they accept. With JS objects, we learn what properties and methods they provide. The difference now is that we will begin working with custom built functions & objects as black boxes as well!

A Compound Function Example: As an example, the following "forms" related example should be studied. The example is called "capFirst" and it's goal is to "normalize" (format) inconsistently "cased" data as entered by a user. Frequently users of forms enter data in ALL CAPS or in some inconsistent manner as regards proper names, addresses, etc. Wouldn't it be nice to be able to "normalize" that data in a consistent way in JS, so the work is done on the client, thereby relieving the server of this work?

There are 3 custom functions on this page. The most critical of them is called "capFirst", which is designed to take any string of data, and capitalize the first letter of each word, set to lower case the rest of the word and rebuild the string, and return the string out of the function.

The "capFirst" function calls an internal function called "stripSpaces" which removes the extra spaces, both before and after the string, and any extra spaces between words.

Since these functions are designed to work on a string, we have built a third simple function to "encapsulate" these other functions, and call them as required.

The developer must copy the code appropriately, make sure the functions are in the proper scope (location) in the JavaScript flow and are implemented appropriately! This is frequently how it is with any "black box" or API!

Please view the following example, see how it operates, and then view the code to see how the functions are placed together on the page, and are called by a separate function to give us the result we want: capFirst

Calling Multiple Functions: To be able to implement functions and code from various sources, we need to learn the process of using multiple functions on a page. Here is an example of how two previously discussed text box checking functions are called, one after the other, inside a third function. Each function consistently MUST return a true/false value. If FALSE, that value is RETURNED to the form, therefore indicating the form has FAILED to validate!

If true is returned, the next function in line must be checked, as well. Use this example as your PRIMARY MODEL for your "Universal Validator" assignment: multiFunctionForm

Checking Multiple Element Types : On our basic forms page we checked text boxes for data entry. We later showed how checkboxes, radio buttons and select options need a different strategy. Use the following example as your primary model for checking any type of required entry on a form: checkReq

JavaScript Include Files: Once we have all our functions together, we will want to include them in a separate file, so they can be called from any page on our site! The functions on this "included" page are similar to other include files, such as a CSS stylesheet, in that the code resides in one place, and is available to any number of pages.

To build an include file, we must first TEST EXTENSIVELY to be sure all functions are working!! Many of our troubleshooting methods (such as using the JavaScript Console) are rendered useless. ALL FUNCTIONS AND SYNTAX SHOULD BE EXACT BEFORE ATTEMPTING TO MOVE CODE TO THE INCLUDE FILE!

The include file will need to be stored with a .js extension. The code inside the include file MUST HAVE THE SCRIPT TAGS REMOVED!! The file can then be included in ANY pages by calling the file in the following way:

<script type="text/javascript" src="myINCFile.js"></script>

Like an image, the path must be exact! Once we have created our include file, we reference the include file with the code above, traditionally inside the <head> tag, and BEFORE any JavaScript we will build on the individual page!

Eventually we may have several INC files, since we may be working with APIs from different sources. There is no limit to the number of INC files that you include.

Your pages potentially load FASTER with the JS as an INC file, since the INC file gets cached in the memory of the client's machine.

We want to place the references to any INC files before our JS code, to make sure all of the functions exist within the scope of the JS on the page!

Here is the same "multiFunctionForm" example used previously, only this time the 2 included functions exist in a separate INC file. We'll call this example "multiFunctionInclude.htm", and the INC file itself is named "multiFunction.js".

This page can be your first version of a "utility" file of all your fav JS functions!!

Use this page as a model while you develop your own Universal Validator:

multiFunctionInclude SOURCE CODE


Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved