Web Development Tutorials

Print this Section

Arithmetic Operations

One of the fundamental ways you can derive information from numeric data is to manipulate them arithmetically—to process the data through addition, subtraction, multiplication, division, and combinations of these operations. JavaScript permits arithmetic calculations through the use of various arithmetic operators applied to numeric variables and literal values. The following table lists and describes the common arithmetic operators.

Operator Action
+ Adds two numbers together
- Subtracts one number from another or changes a number to its negative
* Multiplies two numbers together
/ Divides one number by another
% Produces the remainder after dividing one number by another

Figure 2-9. JavaScript arithmetic operators.

JavaScript can add together two or more numeric variables and/or numeric constants by combining them in an arithmetic expression with the arithmetic operator for addition ( + ). The result derived from evaluating an expression can be assigned to a variable for temporary memory storage.

The following statements declare variables A and B and assign them numeric values; variable Sum is declared for storing the result of evaluating the arithmetic expression that adds these two variables. Additional examples of addition operations using variables and literal numeric values are shown.

var A = 20;
var B = 10;
var Sum = A + B;

var Sum1 = 1 + 2;
var Sum2 = A + 2 + B + 1;
var Sum3 = Sum1 + Sum2;

The addition operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
 Price1 Price2 TotalSale

Script:

Figure 2-10. Performing addition.

Subtraction

The subtraction operator ( - ) is used in the same fashion as the addition operator. Variables and/or literal numeric values are combined with the operator to subtract values in an expression, the result of which can be assigned to a variable.

var A = 20;
var B = 10;
var Difference = A - B;

var Difference1 = 2 - 1;
var Difference2 = A - 3.5 - B;
var Result = Difference1 - Difference2;

Of course, you can combine addition and subtraction in the same arithmetic expression. These operations are carried out in the order in which the expression is evaluated from left to right.

The subtraction operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
 Price Cost Profit

Script:

Figure 2-11. Performing subtraction.

Multiplication

Multiplication between numeric variables and/or literal values is accomplished with the multiplication operator ( * ), examples of which are shown below.

var A = 10;
var B = 20;
var Product = A * B;

var Product1 = 1 * 2;
var Product2 = A * 3.5 * B;
var Result = Product1 * Product2;

The multiplication operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
 Length Width Area

Script:

Figure 2-12. Performing multiplication.

Division

Division is accomplished with the divide operator ( / ). The value preceding the operator (dividend) is divided by the value following the operator (divisor) to produce the quotient.

var A = 10;
var B = 2;
var Quotient = A / B;

var Quotient1 = 10 / 2;
var Quotient2 = A / 3.5 / B;
var Result = Quotient1 / Quotient2;

The division operation is illustrated by the following script that you can step through by clicking the radio buttons.

Computer Memory:
 QualityPoints TotalHours GPA

Script:

Figure 2-13. Performing division.

A special type of division known as Modulus division returns the remainder in a division operation. In the following example, when 10 is divided by 3, the quotient is 3 and the remainder is 1.

Computer Memory:
 X Y Remainder

Script:

Figure 2-14. Performing Modulus division.

The Modulus division operation can be used to determine if one number is equally divisible by a second number. If the remainder is 0, then the quotient is a whole number. In other cases, Modulus division can be used to produce a fractional remainder rather than a decimal number. In the above example, the quotient can be expressed as 3 1/3 rather than 3.333.

Operator Precedence

When an arithmetic expression is evaluated, there is a given order in which the operations are carried out. This order is called operator precedence. Multiplication and division take precedence (are done first) over addition and subtraction, moving from left to right through the expression. This order has important impact on whether or not you get the results expected. Consider the following declarations and assignments.

var X = 5;
var Y = 3;
var Z = 2;

If you used the arithmetic expression,

var Answer = X - Y * Z;

then the resulting answer would be -1. First, Y is multiplied by Z to get 6; then 6 is subtracted from 5 to get the answer -1. Suppose, however, that you really intended to first subtract Y from X and then multiply by Z to produce the answer 4. The above expression will not work to produce this result because multiplication takes precedence over subtraction and is performed first, even though it is the last operation in the expression.

Often, therefore, you need to override operator precedence and explicitly control the order of evaluation of an expression. This is done by using parentheses ( ) to govern the sequence in which arithmetic operations are carried out. In the above example, you would use the statement

var Answer = (X - Y) * Z;

to produce your expected results. A good general rule to follow when composing arithmetic expressions is always to override operator precedence. Use parentheses to explicitly control the order in which arithmetic operators are evaluated. As in normal arithmetic computations, evaluation of expressions takes place from the inner-most to the outer-most sets of parentheses.

Other Arithmetic Operators

Other specialized arithmetic operators permit a variable to be used in the calculation of its replacement value. In other words, you can add to or subtract from a variable (or perform other arithmetic operations on the variable), and put the resulting value back into the variable. The following table gives these additional assignment operators which combine computation and assignment in the same operator.

Operator Action
++ X++
The equivalent of X = X + 1; add 1 to X, replacing the value of X
-- X--
The equivalent of X = X - 1; subtract 1 from X, replacing the value of X
+= X += Y
The equivalent of X = X + Y; add Y to X, replacing the value of X
-= X -= Y
The equivalent of X = X - Y; subtract Y from X, replacing the value of X
*= X *= Y
The equivalent of X = X * Y; multiply Y by X, replacing the value of X
/= X /= Y
The equivalent of X = X / Y; divide X by Y, replacing the value of X

Figure 2-15. Operators to perform arithmetic and reassignment to variables.

For example, it is common programming practice to increment or decrement a variable by 1 using the following statement constructions.

Counter = Counter + 1;
Counter = Counter - 1;

In the first instance, 1 is added to the current contents of variable Counter and the sum is reassigned to the variable, increasing the value of Counter by 1. In the second case, the value of Counter is decreased by 1.

Since these are common arithmetic operations, JavaScript provides special arithmetic operators to automatically increment or decrement a variable without having to compose the kinds of calculations and assignments shown above. The operator "++" adds 1 to a variable and the operator "--" subtracts 1 from a variable using expressions in the formats,

Counter ++;
Counter --;

You can use either statement type, however, the latter is easier to write, makes more obvious the purpose of the statement, and shows up often in other types of JavaScript statements where variables are incremented or decremented by 1.

Similar types of operators are available for adding and subtracting a second variable, or multiplying and dividing by a second variable, and reassigning the results to a variable. For example, if the following declarations are made,

var X = 20;
var Y = 10;

then the expression

X += Y; results in the value X = 30 (Y is added to X)
X -= Y; results in the value X = 10 (Y is subtracted from X)
X *= Y; results in the value X = 200 (X is multiplied by Y)
X /= Y; results in the value X = 2 (X is divided by Y)

Basic Script Output

You know enough now to begin writing scripts to perform arithmetic operations. The problem is, you have no way of seeing the results of your processing; they remain hidden inside your scripts.

Later, you are introduced to several different methods to display the results of script processing. For the time being, a quick and easy way to display script output is with the alert() method. This is a method of the DOM window object and is covered more formally later; for now, you can use it for a quick peek at processing results.

Figure 2-16. Basic format for alert() method.

In its simplest form, the alert() method encloses a variable inside its parentheses. When this method is called, the value of the variable is displayed in a pop-up message box. For example, below is a script to perform arithmetic and display the answer in this pop-up window.

function DoArithmetic() {
var X = 10;
var Y = 20;
var Z = 30;
var Answer = (X + (Y / Z)) / 3.5;
}

Listing 2-5. Code to use the alert() method.

The statement alert(Answer) displays the value of variable Answer. The message box remains on screen until the user clicks its "OK" button to close the window and return to the Web page.

As mentioned, you are introduced later to several other ways to display the results of script processing, some by integrating the output within the Web page itself rather than displaying it in an external message box. For the time being, though, the alert() method is a handy way to view processing results.

Formatting Numbers

By default, number displays are carried to their decimal capacity. In the previous two examples, the computations produce the output 3.0476190476190474, with decimal precision carried to 16 positions. You may wish to have greater control over display precision.

The JavaScript toFixed(n) method permits number formatting rounded to n number of decimal positions. This method can be applied to literal values, variables, or arithmetic expressions by appending it to these values or computations.

value.toFixed(n)
variable.toFixed(n)
(expression).toFixed(n)

Figure 2-17. Formats to apply the toFixed() method.

Numbers are rounded to the given number of decimal digits. If there is not a sufficient number of significant (non-zero) digits to display, the number is padded with trailing zeros to the specified length. When applying the method to an arithmetic expression, it is necessary to enclose the expression in parentheses so that the method is applied to the full expression.

The following is a rewrite of the script shown above in Listing 2-5. By applying the toFixed(2) method to the answer, it is displayed as 3.05, rounded to two decimal positions.

function DoArithmetic() {
var X = 10;
var Y = 20;
var Z = 30;
var Answer = (X + (Y / Z)) / 3.5;
}

JavaScript does not supply formatting methods for other standard ways of displaying numbers. For instance, you cannot automatically display comma separators for numbers over 1,000, nor can you automatically insert dollar signs in currency values. The latter can be done through string methods introduced later; the former, however, requires non-trivial programming.

Basic Script Input

In order to make Web pages responsive to users, there also must be ways through which data values can be input into scripts, rather than simply declaring them as hard-coded values within the script itself. Most Web page processing, in fact, is based on data supplied by users. Later, you are introduced to these input methods to round out the input and output techniques to capture user data for processing and to present output results.

In the meantime, the prompt() method can be used for simple data input. Like the alert() method, prompt() is a method of the window object. It is covered in greater detail later.

variable = prompt("prompt string", "initial value");

Figure 2-18. Basic format for prompt() method.

The prompt() method displays a pop-up window enclosing a text box for data entry. An "OK" button is displayed to submit the entered value to a script; a "Cancel" button cancels the input. The "prompt string" is a label to prompt the user as to the type of input being solicited; the "initial value" can be used to pre-enter data into the text box, either as a default value or as an example of the type of input being solicited. The prompt() method is assigned to a variable to store the entered value.

In its simplest format, the prompt() method works as shown in the following script. The pop-up box asks the user to enter a name. Then the alert() method displays this entered value.

function Get_Name() {
var Name = prompt("Enter your name:", "");
}

The string "Enter your name:" is used as the prompt; a null value ("") is coded as the initial value of the text box so that no pre-entered data appears. The prompt() method is assigned to variable Name where the entered data is stored.

When the prompt() method is encounted in a script, the pop-up window is displayed and the script waits until the user clicks the "OK" or "Cancel" button. At that point the value entered into the text box is assigned to variable Name, and the script continues. In this example, variable Name is then displayed in an alert message, simply echoing the entered value back to the user.

Any number of prompt boxes can be displayed from a script. In the following example, two boxes serve for input of two numbers which are multiplied together.

function Multiply() {
var No1 = prompt("Enter the first number:", "");
var No2 = prompt("Enter the second number:", "");
var Product = No1 * No2;