The JavaScript Diaries: Part 3 - Page 2

The JavaScript Diaries: Part 3

Multiplication Operator (_*)

This operator is used to multiply the value on the right of the operator by the value on the left, i.e., "7 _* 2" would read "seven times two."

  var newNum=7;
  var newNum2=2;
  var result=newNum*newNum2;
  alert(result);

By now this script should be self-explanatory. Try it in your template.

Division Operator (/)

This operator is used to divide the value on the left of the operator by the value on the right, i.e., "8 / 2" would read "eight divided by two."

  var newNum=8;
  var newNum2=2;
  var result=newNum/newNum2;
  alert(result);

Be careful that you do not divide by zero. The result will be either infinity or undefined, depending on the browser you are using. Try the following in your template and see what answer you get:

  var newNum=8;
  var newNum2=0;
  var result=newNum/newNum2;
  alert(result);

Calculation Conversions

An integer added to a floating point number will result in a floating point number. It's important to remember that JavaScript treats all numbers as floating point numbers (numbers that have a decimal point). This is important because if you add 13 and 27.235, you will get a floating point number as the result: 40.235. (There is a way to control the display of numbers after a decimal point which we will look at later.)

If you add a number to another number which is in quotes (which is actually a string and not a number), it will return a string as there is no way to add a "non-number" to a number:

  var myNum=10;
  var noNum="13";
  var theSum=myNum+noNum;
  alert(theSum);

The result here would be 1013 as the script would convert the variable myNum to a string due to the other variable, noNum, already being a string. It would then place the two together, just as when we added text to a string:

  var dylan="Bob Dylan";
  document.write("I like music by "+dylan);

(The processing of joining two or more strings together is called "concatenating".)

These calculation conversions apply to addition, subtraction, multiplication, and division operators.

Modulus (aka 'Modulo') Operator (%)

This operator is used to divide the value on the left of the operator by the value on the right, and then give the result of the remainder of the calculation:

  var newNum=11;
  var newNum2=2;
  var result=newNum%newNum2;
  alert(result);

This script declares three variables, newNum, newNum2, and result. The first two variables are given the values of 11 and 2, respectively. The third variable is instructed to divide the first variable, newNum, by the second variable, newNum2, and return the remainder. An alert window is then called to display the results, which in this case would be 1.

Increment/Decrement Operator (++/--)

The increment and decrement operators are used to either increase or decrease the value of a variable, element, or property, usually within a loop (more on those later). Basically, an increment/decrement operator is a kind of shorthand. For instance, using the increment operator ++, we could say that x++ is the same as x = x + 1 and, using the decrement operator --, then x-- is the same as x = x - 1.

It's important to note that it does make a difference where you put the operator. If the operator is put before the value, it increases the value by 1, returns that value to the variable and then performs the rest of the operation:

  var theNum=4;
  alert(++theNum);

The variable theNum is declared and initialized with a value of 4. An alert window is then given a parameter which will increase the value of the variable theNum by 1, return it to (reset) the variable, and then display the result of the variable, which now has a value of 5. Try it in your template.

The same would be true if we used a decremental operator:

  var theNum=4;
  alert(--theNum1);

The parameter sent to the alert window here would decrease the value of the variable theNum by 1, reset the variable to a value of 3, and then finish the process, in this case an alert window would be displayed. The variable has now been assigned (reset to) a new value of 3.

To put it in plain English, when the operator is in front of the value it is read as: "add/subtract 1 to/from the value of the named variable, reset the variable to the new value, then continue to process the script."

On the other side (literally), if the operator is put after the value, the calculation returns the value of the variable to the script, then it increases/decreases the value of the variable (resets it) by 1, and resets the variable:

  var theNum=4;
  alert(theNum++);

In this case, the alert window will display a value of 4, and the incremental operator will then increase (reset) the value of the variable theNum to 5. The next time the variable theNum is used, its value will be 5. Try this again, only add the last line below to the script and see what happens:

  var theNum=4;
  alert(theNum++);
  alert(theNum);

You should get an alert window with a value of 4, then another alert window with a value of 5.

The same would be true if we used a decremental operator:

  var theNum=4;
  alert(theNum--);

This script would return a value of 4, and then decrease the value of the variable theNum by 1 to 3.

Here is another way of looking at it (with thanks to Danny Goodman):

  var a = 10;   // initialize a to 10
  var x = 0;   // initialize x to 0
  x = a;   // a = 10, so x = 10
  x = ++a;   // a becomes 11 before assignment, so a = 11 and x becomes 11
  x = a++;   // a is still 11 before assignment, so x = 11; then a becomes 12
  x = a++;   // a is still 12 before assignment, so x = 12; then a becomes 13

To recap: if the incremental/decremental operator is before the variable, it will increase its value by 1 and return the value to the script; if the incremental/decremental operator is after the variable, it will return its value to the script and then increase its value by one.

[previous] [next]

Created: May 13, 2005

URL:

The JavaScript Diaries: Part 3 - Page 2