Posted By
Bajarangi soft ,
Posted On 21-09-2020
There are Different Operators To Use
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers:
| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| -- | Decrement |
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.| Operator | Example | Same As |
|---|---|---|
| = | 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 |
| **= | x **= y | x = x ** y |
<p id="demo"></p>
<script>
var x = 7;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
<p id="demo"></p>
<script>
var a = 7;
a -= 5;
document.getElementById("demo").innerHTML = a;
</script>
above example subtracts the right operand from the left operand and assigns the result to the left operand.
JavaScript Comparison Operators
| Operator | Description |
|---|---|
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| ? | ternary operator |
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 8);
</script>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>
In above example checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true.
JavaScript Logical Operators
| Operator | Description |
|---|---|
| && | logical and |
| || | logical or |
| ! | logical not |
Example(1)
<p id="demo"></p>
<script>
var k = 6;
var l = 3;
document.getElementById("demo").innerHTML =
(k < 10 && l > 1) + "<br>" +
(k < 10 && l < 1);
</script>
In above example If both the operands are non-zero, then the condition becomes true.
Example(2)
<p id="demo"></p>
<script>
var r = 6;
var s = 3;
document.getElementById("demo").innerHTML =
(r == 5 || s == 5) + "<br>" +
(r == 6 || s == 0) + "<br>" +
(r == 0 || s == 3) + "<br>" +
(r == 6 || s == 3);
</script>
In above example If any of the two operands are non-zero, then the condition becomes true.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
| Operator | Description | Example | Same as | Result | Decimal |
|---|---|---|---|---|---|
| & | AND | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | OR | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | NOT | ~ 5 | ~0101 | 1010 | 10 |
| ^ | XOR | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | Zero fill left shift | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | Signed right shift | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | Zero fill right shift | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
Example(1)
var c = 4;
var d = 1;
document.getElementById("demo").innerHTML=
("A & B = " + (c & d) + '<br>');
("A | B = " + (c | d) + '<br>');
("~A = " + (~c) + '<br>');
In example it performs a Boolean AND operation on each bit of its integer arguments.
It performs a Boolean OR operation on each bit of its integer arguments.
It is a unary operator and operates by reversing all the bits in the operand.
Complete Code of Javascript Operator:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Operators</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h3{
color:red;
}
</style>
<body>
<div class="container">
<div class="text-center">
<h1>JavaScript Operators</h1>
</div>
<br>
<div class="well">
<h3>Arithmetic Operators</h3>
<h4>Addition</h4>
<div id="add"></div>
<h4>Subtraction</h4>
<div id="Subtraction"></div>
<h3> Assignment Operators</h3>
<h4>Add and Assignment</h4>
<div id="Add_and_Assignment"></div>
<h4>Subtract and Assignmentt</h4>
<div id="Subtract_and_Assignment"></div>
<h3>Comparison Operators</h3>
<h4>Equal To</h4>
<div id="equal_to"></div>
<h4>Not Equal To</h4>
<div id="not_equal_to"></div>
<h3>Logical Operators</h3>
<h4>And Operators</h4>
<div id="and_op"></div>
<h4>OR Operators</h4>
<div id="or_op"></div>
<h3>Bitwise Operators</h3>
<div id="bitwise_operator"></div>
</div>
<br>
</div>
</body>
</html>
<script>
var x = 7;
var y = 2;
//addition
var add = x + y;
document.getElementById("add").innerHTML = add;
//Subtraction
var Subtraction = x - y;
document.getElementById("Subtraction").innerHTML = Subtraction;
//Add and Assignment
x += 5;
document.getElementById("Add_and_Assignment").innerHTML = x;
//Subtract_and_Assignment
var a=8
a -= 5;
document.getElementById("Subtract_and_Assignment").innerHTML = a;
//equal to
var b = 5;
document.getElementById("equal_to").innerHTML = (b == 8);
//not equal to
document.getElementById("not_equal_to").innerHTML = (b != 8);
//AND operator
var k = 6;
var l = 3;
document.getElementById("and_op").innerHTML =
(k < 10 && l > 1) + "<br>" +
(k < 10 && l < 1);
//or operator
var r = 6;
var s = 3;
document.getElementById("or_op").innerHTML =
(r == 5 || s == 5) + "<br>" +
(r == 6 || s == 0) + "<br>" +
(r == 0 || s == 3) + "<br>" +
(r == 6 || s == 3);
//Bitwise Operators
var c = 4;
var d = 1;
document.getElementById("bitwise_operator").innerHTML=
("A & B = " + (c & d) + '<br>');
("A | B = " + (c | d) + '<br>');
("~A = " + (~c) + '<br>');
</script>