## Programming that form

First a reminder of the HTML:

``````
<form id="calc">
<input id="a" type="text" maxlength="8" style="width:70px">
<select id="op">
<option id="plus" selected> + plus</option>
<option id="minus"> - minus</option>
<option id="times"> x times</option>
<option id="divide"> / over</option>
</select><br>
<input id="b" type="text" maxlength="8" style="width:70px">
<input type="button" onclick="calculate()" style="width:70px" value=" = ">
<p id="calcresult">________</p>
<!-- The underscores make space on the page -->
</form>
``````

## Now for the JavaScript

Each of the 2 text input fields has to be read as a number. First get hold of the element by its id and then get its value as text:

``````
var aText = document.getElementById ("a").value;
``````

## Numbers

Most programming languages make a strong distinction between whole numbers (integers) and those containing decimal points (floating point numbers). JavaScript does not - they are all just of type Number. However when it comes to parsing a text string to extract a number from it we do have to know whether a decimal point is allowed, so there are two functions: parseInt() and parseFloat().

A floating point number may also contain a power of 10. For example, -12.34 x 10-3. To be able to deal with that without using a superscript we write it as -12.34E-3 on computers (the E may be upper or lower case). Such numbers are often "normalised" so that there is just 1 digit before the point: -1.234E-2

Then parse that text as a number by using a predefined function, parseFloat():

``````
var a = parseFloat (aText);
``````

That makes a floating-point number, one with a decimal point and possibly a power of ten, as opposed to an integer (a whole number).

To determine which option has been selected in the drop-down list first get the select element as usual:

``````
var selectEl =
document.getElementById ("op");
``````

Then use a variable that is always part of such an element: selectedIndex, in order to determine which operation to perform. It will have values from 0 to 3 in our case, for the 4 option elements. Indexes and character positions in strings start at 0 in JavaScript.

``````
var ix = selectEl.selectedIndex;
``````

We can then do a different calculation depending on the value of ix:

``````
var result;

if (ix == 0) result = a + b;
else if (ix == 1) result = a - b;
else if (ix == 2) result = a * b;
else if (ix == 3) result = a / b;
else alert ("Impossible selected index = " + ix);
``````

Finally display the result in the paragraph element by setting its innerHTML, as we have done before.

## Conditional tests

These symbols are used for comparing a pair of values and getting a true/false result:

• == is equal to
• != is not equal to
• < less than
• <= less than or equal to
• > greater than
• >= greater than or equal to

There are also some others in JavaScript - later.

## HTML entities

If you embed JavaScript code within HTML you must be careful to write certain characters so that they cannot be confused with HTML symbols. There are 5 such characters:

• < must be written as &lt;
• > must be written as &gt;
• " must be written as &quot;
• ' must be written as &#39;
• & must be written as &amp;

This is another good reason to put your JavaScript in separate non-HTML files, as discussed earlier.

The entity notation (&...;) enables many other special characters to be written in HTML. But that is HTML, not JavaScript.