Using JavaScript & Forms to intereact with users | 2

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:[email protected].

[previous]

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

Using JavaScript & Forms to intereact with users | 2

JavaScript and Forms

Creating applications using forms.

Find a programming school near you