JavaScript: Basic Calculator




To contact us





HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2014 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/Javascript/BasicCalc.html">
    Basic Calculator </a>
    </table>
    </body>
    </html>

JavaScript Table of Contents

How to create a Basic Calculator

This tutorial assumes that you have read and mastered my tutorial on Table Tags. Some of the concepts presented in that tutorial will be expanded on in this tutorial.The purpose of this tutorial is to show you how to write a basic calculator using a HTML Table tag. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page that uses out Table tag. What is a table? A HTML Table is defined using the <Table> tag. A table is divided into a rectangle of horizontal rows (using the <tr> tag) and vertical columns, where each column is defined using the <th> or <td> tag. Each row/column segment is called a data cell. The letters th stands for "table header", and td stands for "table data." Either <th> or <th> can be used to define a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. What is the purpose of using tables?

  • One of the most obvious applications of tables is to organize tabular information, such as an address book or a list of catalog items.
  • If you consider the example of an address book, you will see a more complex relationship between the data in the cells in a row that the use of tables can provide.
  • Tables can be used to draw borders around a row/column or data cell.
  • Tables are the answer whenever you need complex relationships between multiple columns of text.
We will explore the basics of defining a table in the next section.

Defining a basic table

To make a basic table, we start with the <table> tag and end with the </table> tag. Once the <TABLE> tag is in defined, the next thing we need is the <TR> tag. The <TR> tag creates a table row, which contains one or more columns/cells of information. To create these individual cells, you use the <TD> tag. <TD> stands for table data; you place the table information within the <TD> and </TD> tags. An example of a basic table definition looks like:

Basic Table Definition Basic Table displayed in your Browser
<table>
<tr>
<td> row 1, column 1 </td>
<td> row 1, column 2 </td>
<td> row 1, column 3 </td>
<td> row 1, column 4 </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
<td> row 2, column 3 </td>
<td> row 2, column 4 </td>
</tr>
<tr>
<td> row 3, column 1 </td>
<td> row 3, column 2 </td>
<td> row 3, column 3 </td>
<td> row 3, column 4 </td>
</tr>
<tr>
<td> row 4, column 1 </td>
<td> row 4, column 2 </td>
<td> row 4, column 3 </td>
<td> row 4, column 4 </td>
</tr>
</table>
row 1, column 1 row 1, column 2 row 1, column 3 row 1, column 4
row 2, column 1 row 2, column 2 row 2, column 3 row 2, column 4
row 3, column 1 row 3, column 2 row 3, column 3 row 3, column 4
row 4, column 1 row 4, column 2 row 4, column 3 row 4, column 4
Figure 1: Definition of a basic table


In Figure 1, we showed how to build a basic table consisting of rows and columns. In the next section, we will explore how to use these rows and columns to build the rows and columns that contain the buttons of a calculator.

How to use a Table to create a Basic calculator

We will expand on what we learned in Figure 1 to create a basic calculator.

Requirements for a Basic calculator

The requirements for a Basic calculator are:

  1. Create a form using the Form tag that contains a table.
  2. Create a text field using the Input tag of type text.
  3. Create buttons using the Input tag of type button. These buttons are:
    • Numbered 0 to 9;
    • Clear
    • Decimal
    • X
    • /
    • +
    • -
    • =
  4. Create four rows and five columns of buttons.
The above requirements are met in the Definition of a Basic Calculator column of Figure 2 below.

Definition of a Basic Calculator A Basic Calculator Displayed in a Browser
<FORM NAME="Calc">

<table border=4>
<TR>
<TD align=right>
<INPUT TYPE="text"   NAME="Input" Size="35" 
                       style="text-align: right">
<br>
</TD>
</TR>
<TD>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " 
                OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " 
                OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " 
                OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="plus"  VALUE="  /  " 
                OnClick="Calc.Input.value += ' / '">
<INPUT TYPE="button" NAME="clear"
  VALUE="  C  " OnClick="Calc.Input.value = ''">

<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'"> <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'"> <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'"> <INPUT TYPE="button" NAME="minus" VALUE=" X " OnClick="Calc.Input.value += ' * '"> <INPUT TYPE="button" NAME="l_paren" VALUE=" ( " OnClick="Calc.Input.value += ' ( '">
<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'"> <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'"> <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'"> <INPUT TYPE="button" NAME="times" VALUE=" - " OnClick="Calc.Input.value += ' - '"> <INPUT TYPE="button" NAME="r_paren" VALUE=" ) " OnClick="Calc.Input.value += ' ) '">
<INPUT TYPE="button" NAME="point" STYLE="font-size:120%" VALUE=" . " OnClick="Calc.Input.value += '.'"> <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'"> <INPUT TYPE="button" NAME="Equals" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)"> <INPUT TYPE="button" NAME="div" VALUE=" + " OnClick="Calc.Input.value += ' + '"> <INPUT TYPE="button" NAME="blank" VALUE=" ">
</TD>





Figure 2: Definition of a basic calculator
Figure 2: Definition of a basic calculator
Refer to Form Tags for a more detailed description of the Form Tag.

Feel free to copy and paste the code in the above Figures into a source file.






HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2014 All Rights Reserved Total Application Works