|
Web
Crossing Server-side JavaScript
WCJS
Form Processing
Introduction
Creating a Form Processing Command
Creating a Test Form
Testing the Form Processor Directly with a
URL
Troubleshooting
Resources
Next Section
Introduction
In the
previous section, we created
our first JavaScript function, a factorial function. To call the
function we used the WCTL expression
%% "factorial(4)".jsEval %%
inside
a test folder header. While this worked, and is a good way to
quickly test your JavaScript functions, it doesn't make the factorial
function we created very useful.
We would
like to be able to have users enter an integer in a form (as in
figure 1) and then have the form call a form processing
command which invokes our factorial function and return
a page with the result.
Figure
1 - a form that calls a JavaScript function to calculate factorials
The
concepts discussed here are very similar to those discussed in
the the WCTL section on form processing.
You might want to review that section as well.
Creating
a Form Processing Command
First,
let's modify the factorial.tpl file we created in the previous
section. The new contents should contain the following two
JavaScript functions:
%% command factorialProcess () { var n = form.n; + '<HTML><BODY BGCOLOR="#FFFFFF">'; + 'The factorial of ' + n + ' is ' + factorial(n)
+ '<BR>'; } %%TM@%% function factorial (n) { if (n == 0) return (1) else return n * factorial(n-1) }%%
The factorialProcess
JavaScript function processes the form and is defined with the
command keyword, rather than with the usual function
keyword. This is special syntax unique to Web Crossing. WCJS commands
may be called via URLs (such as the action of a form). This is
done to provide extra security for your JavaScript functions.
JavaScript functions defined with the function keyword
are hidden from the outside and cannot be called directly from
a browser using the URL syntax.
In the
second line of factorialProcess we see the JavaScript statement
var n = form.n;
Here
we create a local variable with the name n and store in
it the value of the form field, which we also named n.
The next
two lines:
-
+ '<HTML><BODY BGCOLOR="#FFFFFF">';
+ 'The factorial of ' + n + ' is ' + factorial(n)
+ '<BR>';
define
character strings which are appended to the response web page.
WCJS provides the special "+" syntax to make it easy to send output
to the response page without calling an awkward function such
as document.write(msg) each time, like you do in client-side
JavaScript. In the second line our factorial function is
called using the local variable n as a parameter. The value
of n is also used in the output string.
|
Note:
For
those of you familiar with WCTL, you are used to just entering
any plain text inside a WCTL macro and having that text
sent to the response web page. JavaScript is much cleaner
and easier-to-read because it is not embedded with all those
double-percent marks (%%). However, since JavaScript plain
text is considered part of the JavaScript function - expressions
to be evaluated - the actual text you want to send to a
response page must be delimited somehow. This is done by
enclosing the text in single or double quote marks.
|
The
factorial function is explained in the previous
section.
Move
the factorial.tpl file over to your webx directory,
make sure that
<!--#Include File="factorial.tpl"-->
is included
in your webx.tpl file and reset the file cache, as described
in the previous section.
Creating
a Test Form
You can
place the following HTML directly in a test folder header to display
and use the form shown in figure 1:
<FORM ACTION="http://webx.webxharbor.com/cgi-bin/webx?factorialProcess@@"
METHOD=POST>-
<P>Enter a positive integer <INPUT TYPE=text
NAME=n VALUE="" SIZE=5>
and then press <INPUT TYPE=submit NAME=calculate
VALUE="calculate factorial"></FORM>-
Be sure
to replace the webx.webxharbor.com/cgi-bin/webx
part in red with your own domain and script name.
Now you
can enter the test folder, see the form, enter a positive integer
and press the calculate factorial button. A response page
will report the result, as shown in figure 2.
Figure
2 - the result page returned by factorialProcess
Naturally
you can use the full arsenal of JavaScript methods to validate
the user data (to prevent the entering of negative numbers for
example) and make your output more aesthetically pleasing.
Testing
the Form Processor Directly with a URL
You can
also directly call the factorialProcess command with a
special URL. For example, here at Web Crossing Harbor (where all
our functions are above average), we could use the following URL
to directly call the factorialProcess command and pass
it the value n=6 to calculate:
http://webx.webxharbor.com/cgi-bin/webx?factorialProcess@@!n=6
You should
replace the part of the URL in red
with your own domain and script name.
The special
syntax ?factorialProcess@@!n=6 means "pretend you are a
form and you want to pass the field n with the value 6
to the form processor factorialProcess.
You will
find yourself using this technique over and over again to quickly
test form processors.
Next Section
The next
section introduces you to more of the special features of
Web Crossing JavaScript.
Troubleshooting
I tried
the example above, but when I look at the header all I see is the
code itself, with all the double-percent marks. What am I doing
wrong?
- Make
sure you have turned on WCTL evaluation in the Control
Panels > General Settings:
Resources
Sysop
docs:
Recommended
book:
-
JavaScript - The Definitive Guide, 3rd Edition,
David Flanagan, O'Reilly
This book really is the definitive guide. It
is thorough, readable and answers all your questions about JavaScript.
It is an indispensable resource for any serious JavaScript programmer.
In fact, I won't even recommend any other books. Just get this
one!
Web
Crossing Tech Support Forum
Developer
Center
|
