1. A Simple Javascript calculator

Here's the example discussed in class:

<html>
<head>
<title>
A Javascript Calculator
</title>
<script language="Javascript">
function computeAdd (obj) {
  obj.res.value = eval (obj.val1.value) + 
                  eval (obj.val2.value); 
}
function computeSub (obj) {
  obj.res.value = eval (obj.val1.value) -
                  eval (obj.val2.value); 
}
</script>
</head>
<body>
<form>
Operator 1: <input type="text" name="val1" value="0"> <br>
Operator 2: <input type="text" name="val2" value="0"> <br>
<input type="button" value="Add" onclick="computeAdd(this.form)"> <p> 
<input type="button" value="Sub" onclick="computeSub(this.form)">
Result: <input type="text" name="res"> <hr> 
<hr> 
</form>
</body>
</html>
and here it is in action:


Op 1:
Op 2:
Result:
2. Computing Loan Payments with JavaScript

<!-- 
  This is an HTML form that allows the user to enter data, and allows
  JavaScript to display the results it computes back to the user. The
  form elements are embedded in a table to improve their appearance.
  Note that some of the form elements define "onChange" or "onClick"
  event handlers. These specify strings of JavaScript code to be
  executed when the user enters data or clicks on a button. 
-->
<FORM NAME="loandata">
  <TABLE>
    <TR><TD COLSPAN=3><BIG><B>Enter Loan Information:</B></BIG></TD></TR>
    <TR>
      <TD>1)</TD>
      <TD>Amount of the loan (any currency):</TD>
      <TD><INPUT TYPE=text NAME=principal SIZE=12 onChange="calculate()"></TD>
    </TR>
    <TR>
      <TD>2)</TD>
      <TD>Annual percentage rate of interest:</TD>
      <TD><INPUT TYPE=text NAME=interest SIZE=12 onChange="calculate()"></TD>
    </TR>
    <TR>
      <TD>3)</TD>
      <TD>Repayment period in years:</TD>
      <TD><INPUT TYPE=text NAME=years SIZE=12 onChange="calculate()"></TD>
    </TR>
    <TR><TD COLSPAN=3>
      <BIG><B>
        <INPUT TYPE=button VALUE="Compute" onClick="calculate()">
        Payment Information:
      </B></BIG>
    </TD></TR>
    <TR>
      <TD>4)</TD>
      <TD>Your monthly payment will be:</TD>
      <TD><INPUT TYPE=text NAME=payment SIZE=12></TD>
    </TR>
    <TR>
      <TD>5)</TD>
      <TD>Your total payment will be:</TD>
      <TD><INPUT TYPE=text NAME=total SIZE=12></TD>
    </TR>
    <TR>
      <TD>6)</TD>
      <TD>Your total interest payments will be:</TD>
      <TD><INPUT TYPE=text NAME=totalinterest SIZE=12></TD>
    </TR>
  </TABLE>
</FORM>

<!--
  This is the JavaScript program that makes the example work. Note that
  this script defines the calculate() function called by the event
  handlers in the form.
-->
<SCRIPT LANGUAGE="JavaScript">
function calculate() {
    // Get the user's input from the form. Assume it is all valid.
    // Convert interest from a percentage to a decimal, and convert from
    // an annual rate to a monthly rate. Convert payment period in years
    // to the number of monthly payments.
    var principal = document.loandata.principal.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;

    // Now compute the monthly payment figure, using esoteric math.
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);

    // Check that the result is a finite number. If so, display the results
    if (!isNaN(monthly) && 
        (monthly != Number.POSITIVE_INFINITY) &&
        (monthly != Number.NEGATIVE_INFINITY)) {

        document.loandata.payment.value = round(monthly);
        document.loandata.total.value = round(monthly * payments)
        document.loandata.totalinterest.value = 
            round((monthly * payments) - principal);
    }
    // Otherwise, the user's input was probably invalid, so don't
    // display anything.
    else {
        document.loandata.payment.value = "";
        document.loandata.total.value = "";
        document.loandata.totalinterest.value = "";
    }
}

// This simple method rounds a number to two decimal places.
function round(x) {
  return Math.round(x*100)/100;
}
</SCRIPT>

Last updated on August 27, 2001 by Adrian German for the WebDev program.