JavaScript Operators:
Assign values to variables and add them together. (=) this is called assignment operator that assigns a value to a variable.
Assignment Operator (=):
Addition operator (+):
Addition Operator adds the numbers.
Multiplication Operator (*):
The multiplication operator multiplies the numbers.
JavaScript Arithmetic Operators:
Another Example of add (concatenate) strings:
Adding Strings and Numbers:
JavaScript Comparison Operators:
In this video, I have described how Operators and Operands Works in JavaScript.
Assign values to variables and add them together. (=) this is called assignment operator that assigns a value to a variable.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>a = 11, b = 22, calculate c = a + b, and display result in c:</p>
<p id="example"></p>
<script>
var a = 10;
var b = 20;
var c = a + b;
document.getElementById("example").innerHTML = c;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>The Assignment (=) Operator</h2>
<p id="example"></p>
<script>
var a = 100;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Addition Operator adds the numbers.
<!DOCTYPE html>
<html>
<body>
<h2>The addition (+) Operator</h2>
<p id="example"></p>
<script>
var a = 10;
var b = 20;
var c = a + b;
document.getElementById("example").innerHTML = c;
</script>
</body>
</html>
The multiplication operator multiplies the numbers.
<!DOCTYPE html>
<html>
<body>
<h2>The Multiplication Operator (*)</h2>
<p id="example"></p>
<script>
var a = 10;
var b = 2;
var c = a * b;
document.getElementById("example").innerHTML = c;
</script>
</body>
</html>
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Exponentiation (ES2016) ( **)
- Division (/)
- Modulus (Division Remainder) (%)
- Increment (++)
- Decrement (--)
JavaScript String Operators:
Addition Operator (+) can also be used to add (concatenate) strings.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Operators</h2>
<p>Addition Operator (+) concatenates strings.</p>
<p id="example"></p>
<script>
var string1 = "Bangla";
var string2 = "Tutorial";
document.getElementById("example").innerHTML = string1 + " " + string2; </script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript assignment operator (+=) Operators</h2>
<p>The assignment operator (+=) can add/concatenate of strings.</p>
<p id="example"></p>
<script>
string1 = "Bangla Tutorials";
string1 += " Point";
document.getElementById("example").innerHTML = string1;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>Adding number with a string and it returns a string.</p>
<p id="example"></p>
<script>
var a = 10 + 15;
var b = "10" + 20;
var c = "Hello" + 12;
alert(c);
alert(c);
</script>
</body>
</html>
Result:
JavaScript Operators
Adding number with a string and it returns a string.
25
1020
Hello12
- 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 (?)
JavaScript Logical Operators:
- logical and (&&)
- logical or (||)
- logical not (!)
JavaScript Type Operators:
- typeof - Returns the type of a variable
- instanceof - Returns true if an object is an instance of an object type
JavaScript Bitwise Operators:
Bit operators work on 32 bits numbers.
Project Source Code:
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align: center">JavaScript Arithmetic Operators</h2>
<table class="table" style="text-align: center">
<tbody><tr>
<th style="width:25% ; text-align: center">Operator</th>
<th style="width:25% ; text-align: center">Description</th>
</tr>
<tr>
<td>+</td>
<td>Addition</td>
</tr>
<tr>
<td>-</td>
<td>Subtraction</td>
</tr>
<tr>
<td>*</td>
<td>Multiplication</td>
</tr>
<tr>
<td>**</td>
<td>Exponentiation (ES2016)</td>
</tr>
<tr>
<td>/</td>
<td>Division</td>
</tr>
<tr>
<td>%</td>
<td>Modulus (Division Remainder)</td>
</tr>
<tr>
<td>++</td>
<td>Increment</td>
</tr>
<tr>
<td>--</td>
<td>Decrement</td>
</tr>
</tbody>
</table>
<h2 style="text-align: center">JavaScript Assignment Operators</h2>
<table class="table" style="text-align: center">
<tbody><tr>
<th style="width:25% ; text-align: center">Operator</th>
<th style="width:25% ; text-align: center">Example</th>
<th style="width:25% ; text-align: center">Same As</th>
</tr>
<tr>
<td>=</td>
<td>x = y</td>
<td>x = y</td>
</tr>
<tr>
<td>+=</td>
<td>x += y</td>
<td>x = x + y</td>
</tr>
<tr>
<td>-=</td>
<td>x -= y</td>
<td>x = x - y</td>
</tr>
<tr>
<td>*=</td>
<td>x *= y</td>
<td>x = x * y</td>
</tr>
<tr>
<td>/=</td>
<td>x /= y</td>
<td>x = x / y</td>
</tr>
<tr>
<td>%=</td>
<td>x %= y</td>
<td>x = x % y</td>
</tr>
<tr>
<td>**=</td>
<td>x **= y</td>
<td>x = x ** y</td>
</tr>
</tbody></table>
<h2>JavaScript Comparison Operators</h2>
<table class="table">
<tbody><tr>
<th style="width:12%">Operator</th>
<th>Description</th>
</tr>
<tr>
<td>==</td>
<td>equal to</td>
</tr>
<tr>
<td>===</td>
<td>equal value and equal type</td>
</tr>
<tr>
<td>!=</td>
<td>not equal</td>
</tr>
<tr>
<td>!==</td>
<td>not equal value or not equal type</td>
</tr>
<tr>
<td>></td>
<td>greater than</td>
</tr>
<tr>
<td><</td>
<td>less than</td>
</tr>
<tr>
<td>>=</td>
<td>greater than or equal to</td>
</tr>
<tr>
<td><=</td>
<td>less than or equal to</td>
</tr>
<tr>
<td>?</td>
<td>ternary operator</td>
</tr>
</tbody></table>
<h2>JavaScript Logical Operators</h2>
<table class="table">
<tbody><tr>
<th style="width:12%">Operator</th>
<th>Description</th>
</tr>
<tr>
<td>&&</td>
<td>logical and</td>
</tr>
<tr>
<td>||</td>
<td>logical or</td>
</tr>
<tr>
<td>!</td>
<td>logical not</td>
</tr>
</tbody></table>
<h2>JavaScript Type Operators</h2>
<table class="table">
<tbody><tr>
<th style="width:30%">Operator</th>
<th>Description</th>
</tr>
<tr>
<td>typeof</td>
<td>Returns the type of a variable</td>
</tr>
<tr>
<td>instanceof</td>
<td>Returns true if an object is an instance of an object type</td>
</tr>
</tbody></table>
<h2>JavaScript Bitwise Operators</h2>
<table class="table">
<tbody><tr>
<th style="width:12%">Operator</th>
<th style="width:25%">Description</th>
<th>Example</th>
<th>Same as</th>
<th>Result</th>
<th style="width:15%">Decimal</th>
</tr>
<tr>
<td>&</td>
<td>AND</td>
<td>5 & 1</td>
<td>0101 & 0001</td>
<td>0001</td>
<td> 1</td>
</tr>
<tr>
<td>|</td>
<td>OR</td>
<td>5 | 1</td>
<td>0101 | 0001</td>
<td>0101</td>
<td> 5</td>
</tr>
<tr>
<td>~</td>
<td>NOT</td>
<td>~ 5</td>
<td> ~0101</td>
<td>1010</td>
<td> 10</td>
</tr>
<tr>
<td>^</td>
<td>XOR</td>
<td>5 ^ 1</td>
<td>0101 ^ 0001</td>
<td>0100</td>
<td> 4</td>
</tr>
<tr>
<td><<</td>
<td>Zero fill left shift</td>
<td>5 << 1</td>
<td>0101 << 1</td>
<td>1010</td>
<td> 10</td>
</tr>
<tr>
<td>>></td>
<td>Signed right shift</td>
<td>5 >> 1</td>
<td>0101 >> 1</td>
<td>0010</td>
<td> 2</td>
</tr>
<tr>
<td>>>></td>
<td>Zero fill right shift</td>
<td>5 >>> 1</td>
<td>0101 >>> 1</td>
<td>0010</td>
<td> 2</td>
</tr>
</tbody></table>
<p id="example"></p>
</body>
</html>
EmoticonEmoticon