Copyright, 1998, Susan Anderson-Freed

JavaScript Operators

We begin our excursion into JavaScript with scripts that:
  1. Evaluate simple arithmetic formulas
  2. Produce HTML code through JavaScript Statements
  3. Create simple "spawned windows" using built-in browser windows
Arithmetic Formulas

We're all familiar with arithmetic formulas such as: 

a = b+c
z = x/2+y
z = x 3


Programming languages implement these, and related formulas, by providing a built-in set of symbols, that are used to denote arithmetic operations. The complete set of symbols provided by JavaScript is found by clicking in the following table. The operators are arranged in order of precedence. 


Click Me
Operator List


Arithmetic Operators

Through the course of the semester we will discuss most of the operators appearing in the table. For now, we're going to concentrate on the arithmetic operators. These operators appear in the following table, arranged in order of precedence.

JavaScript Arithmetic Operators
( Highest to lowest precedence )
++ Increment -- Decrement + Unary plus - Unary minus
* Multiplication / Division % Modulus
+ Addition
Concatenation		 - Subtraction
= Assignment 
+=
-=
*=
%=
/=
 Combined
Assignment


We typically characterize operators on three criterion:
  1. Precedence. Precedence determines the order of evaluation when an expression contains several operators.

  2. Number of Operands. JavaScript contains three categories:
    1. Unary operators. These operators work with a single operand. For example, -10, which represents a negative ten, uses the unary minus operator.
    2. Binary operators. These operators work with two operands. For example, standard addition and subtraction operators are binary: a+b, c-d.

  3. Associativity. Arithmetic operators are classified as:
    1. Left Associative. Most arithmetic operators fall into this classification. This means that an expression that uses operators of the same precedence is evaluated from left to right. For example, the expression: 10+20+40, tells us to add 10 and 20 and then add this result (30) to forty.
    2. Right Associative. Right associative operators evaluate like operators from right to left. The most obvious example of a right associative operator is exponentiation. For example, the expression, 324, indicates that we first raise 2 to the fourth power (which give us 16). Next we raise 3 to the 16th power.

      Right associative operators pose problems in translation which is why many programming languages, including Javascript, do not provide and exponentiation operator.

    The Precedence Hierarchy

    As indicated previously the complete precedence hierarchy for JavaScript is found in the clickable table. The arithmetic operators incorporated in JavaScript follow the standard mathematical hierarchy and use the mathematical rules for evaluating an expression. These rules are:
    1. Operators are evaluated in the order of their precedence.
    2. Operators of same precedence are evaluated based on their associativity.
    3. Parenthesis are used to override precendence.
    4. Parenthesized expressions are evaluated from the innermost to the outermost set of parenthesis.


    Examples of Precedence

    We'll look at two simple example to illustrate the order of evaluation of arithmetic expression. First consider the expression: 25 - 8 * 2 + 27 / 3 + 6. This expression involves subtraction, multiplication, division, and addition operators. Since the multiplication and division operators have a higher precedence they are evaluated first (in left to right order). The computer holds the results in a temporary storage area. The subtraction and addition (in that order) are performed last. The following table shows the results of evaluating this expression.



    Now consider the expression: 15 / (3 + 2) * (5 - 1). Since parenthesis override the precedence hierarchy, the first operation performed is 3 + 2. The second parenthesized expression is evaluated next. The following table shows the order of evaluation for this expression.



    JavaScript Arithmetic Statements

    We're now ready to write some simple arithmetic statements in java. Our first problem is simple. We'd like to evaluate the equation: z = x + y. To do this we provide initial values for x and y, and then apply the above equation. We'd also like to print out the values for these three variables. Our first stab at the JS code is: 

    <Script Language = "JavaScript1.1">
<!--
   var x,y, z;
   x = 10;
   y = 15;
   z = x + y;
   document.write(x);
   document.write(y);
   document.write(z); 
//-->
</Script>


    This code produces the unsightly result displayed in the following table: