spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / forms 12
[previous]
Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

JavaScript and Forms

Creating applications using forms.

Forms and JavaScript can be good for creating simple user interaction or simple applications. Following is a simple calculator I created as an example. Put this is the <head> tag.

<script language="javascript"> <!-- var CurOp="+"; // current operator var CurTot=0; // current total var CurNum=""; // current contents of textbox function CalcNum(NewNum) { CurNum += NewNum; document.calcform.displaytext.value=CurNum; if (CurOp=="") { //checks that equals has not just been pressed CurTot=0; //reset total CurOp="+"; } } function ChangeOp(NewOp) { // calculate total then change current operator if (CurOp != "") { CurTot=eval(CurTot + CurOp + parseFloat(CurNum)); //perform operation CurNum=""; // clear it document.calcform.displaytext.value=CurTot; //display it } CurOp=NewOp; //change operation } function ChngSign() { // multiply by -1 if (CurNum != "") { CurNum = (parseFloat(CurNum) * -1).toString(); } else { CurNum = "-"; } document.calcform.displaytext.value=CurNum; } function CalcTot() { // calculate total if (CurOp != "") { CurTot=eval(CurTot + CurOp + parseFloat(CurNum)); CurNum=""; CurOp=""; document.calcform.displaytext.value=CurTot; } } function CalcClear() { // clear everything CurOp=""; CurNum=""; CurTot=""; document.calcform.displaytext.value="0"; } //--> </script> I'm aware that parts of this are complex, but I wanted to show a working example of an application. You will then need to add some html to your page to interact with this script. View the source of this page to see what I've done to create it. Simply, I've created a form called "calcform," a textbox called "displaytext" and inputs with "onClick" events calling the above functions. Each button with a number calls the "CalcNum" function with the variable "NewNum" as a string of the number. Each operator calls the function "ChangeOp" with the variable "NewOp" as the new operator (+,-,*,/).

There is also an equals sign which calls "CalcTot," and a Clear button which calls "CalcClear".

I have set up three main variables - "CurTot" which is a floating point integer of the total, without the current number in the textbox. "CurNum" is a string representation of the current number being entered (I.E. what is in the textbox). Lastly "CurOp" gives a string of the operator that is going to be used in the next operation.
I'm aware that JavaScript is a very loosely typed language, but it helps to have a definite idea of the data type of each variable. You can see I have frequently changed the types of variables using the parseFloat and toString methods.

Many other applications can be developed, and although JavaScript is often overlooked in favor of Java and other solutions, it still can prove very useful in a web site. JavaScript does not have to load the Java Virtual Machine and therefore does not have the loading delay or slow speed often associated with Java.

Hopefully this proves useful, and I hope to see many more people using JavaScript to interact with users, and create small fast applications.

# # #

About the author: Mark Young is a Web Designer and Software Programmer for eDuck Web Design and hails from the land of kiwis. He can be reached at mailto:mark.young@educk.co.nz.

home / programming / javascript / forms 12
[previous]



The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
ANSI SQL Hierarchical Data Processing Basics · Top 10 Threats to Wireless Security · Nuvio Intros NuvioFlex Virtual PBX

Created: January 26, 2001
Revised: January 26, 2001
URL: http://www.webreference.com/programming/javascript/forms