Javascript TUTORIAL


Arithmetic and Assignment Operators


We will start this chapter wil the simple example below that shows the five arithmetic operators.

Addition +
Subtraction -
Multiplication *
Division /
Modulus %

<html>
<body>
<script type="text/javascript">
<!--
/*
******************************************************************
Example Addition, Subtraction, multiplication operators
******************************************************************
*/
var x = 20 ;
var y = 10 ;

//Addition
p = x + y;
document.write(" x + y is ", p);
document.write("<br />");
//Subtraction
q = x - y;
document.write(" x - y is ", q);
document.write("<br />");
//Multiplication
r = x * y;
document.write(" x * y is ", r);
document.write("<br />");
//Division
s = x / y;
document.write(" x / y is ", s);
document.write("<br />");
//Modulus
x = 10 ;
y = 6 ;
z = x % y;
document.write(" x % y is ", z);
document.write("<br />");
//-->
</script>
</body>
</html>


If you "run" the above javascript code you should see the following output

x + y is 30
x - y is 10
x * y is 200
x / y is 2
x % y is 4

You can try to experiment it online at the following link ( opens in a new window).

Javascript Arithmetic Operator Example

This was expected. The Modulus operator % gives the remainder. So 5 % 2 is 1, 10 % 8 is 2 and 10 % 2 is 0.

Increment and decrement operators



Increment and decrement operators and increase values by 1. Historically, they bear similarity to C language. The example below should clarify it

<html>
<body>
<script type="text/javascript">
<!--
/*
********************************************************
Example Increment and Decrement operators
********************************************************
*/
var x = 20 ;
var y = 10 ;

//Increment
x++;
document.write(" x++ is ", x);
document.write("<br />");
//Decrement
y--;
document.write("y-- is ", y);
//-->
</script>
</body>
</html>


This gives out the following result

x++ is 21
y-- is 9

Try this example at the following link ( opens in a new window).

Javascript Increment and decrement Operator Example

Assignment operators


We have already seen one assignment operator "=" . The table below lists out these assignment operators.

Operator Example Is equivalent to
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y


Given below is an example that uses these arithmetic operators.

<html>
<body>
<script type="text/javascript">
<!--
/*
********************************************************
Example Assignment operators
********************************************************
*/
var x = 20 ;
var y = 10 ;

// x+=y is equivalent to x = x-y
x+=y;
document.write(" x+=y is ",x );
document.write("<br />");
x = 20;
y = 10;
x-=y;
// x-=y is equivalent to x = x-y
document.write("x-=y is ", x);
document.write("<br />");
x = 20;
y = 10;
x*=y;
// x*=y is equivalent to x = x*y
document.write("x*=y is ", x);
document.write("<br />");
x = 20;
y = 10;
x/=y;
// x/=y is equivalent to x = x/y

document.write("x/=y is ", x);
document.write("<br />");
x = 20;
y = 10;
x%=y;
// x%=y is equivalent to x = x%y
document.write("x%=y is ", X);
document.write("<br />");

//-->
</script>
</body>
</html>


This gives out the following result

x+=y is 30
x-=y is 10
x*=y is 200
x/=y is 2
x%=y is 0


The assignment operator x+=y looks confusing at first. You may prefer use x=x+y if you feel comfirtable. But the programming community is notorious for brevity. So you will always find examples and scripts that uses x+=y more often than not. An easy way to remember is the x=+y is not valid. You can remember it like this
x = +y will assign +y to x which is not we wanted. So the other one x+=y obviously looks coorect.

Try this example at the following link ( opens in a new window).

Javascript Assignment Operator Example