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
• <table> - this tag starts the table container
• <FORM> - starts the form content
• <tr> - starts the table row definition
• <td> - starts the table cell definition
• <INPUT TYPE> - indicates the type of field that will be displayed on the screen e.g., text, button
• NAME - this is the variable name/reference in which the user input will be stored
• SIZE= - this is the size of the input field
• VALUE - this is the initial or only value of this field.
• ONCLICK - onaction to take when the user clicks this button
• eval - evaluates the string expression to a value.
• Definition
The eval() function evaluates a string and executes it as if it was script code.
• Usage - the syntax for the EVAL command is:
```
EVAL("a JavaScript string ");
```
• </td> - ends the table cell definition
• <tr> - ends the table row definition
• </FORM> - closes the form content
• <table> - this tag ends the table container
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. © 2002 - 2014 All Rights Reserved Total Application Works