JavaScript operators are essential tools that allow you to manipulate data and perform various operations within HTML documents. These operators can be classified into several categories: arithmetic, assignment, comparison, logical, bitwise, and others. Below is an overview of these operators with examples, embedded within HTML to illustrate their practical use.
1. Arithmetic Operators
Arithmetic operators are used to perform mathematical calculations.
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Modulus (%)
- Exponentiation (**)
- Increment (++)
- Decrement (--)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Arithmetic Operators</title>
<script>
function performArithmetic() {
var a = 10;
var b = 3;
document.getElementById("addition").innerHTML = "a + b = " + (a + b);
document.getElementById("subtraction").innerHTML = "a - b = " + (a - b);
document.getElementById("multiplication").innerHTML = "a * b = " + (a * b);
document.getElementById("division").innerHTML = "a / b = " + (a / b);
document.getElementById("modulus").innerHTML = "a % b = " + (a % b);
document.getElementById("exponentiation").innerHTML = "a ** b = " + (a ** b);
a++;
document.getElementById("increment").innerHTML = "a++ = " + a;
b--;
document.getElementById("decrement").innerHTML = "b-- = " + b;
}
</script>
</head>
<body onload="performArithmetic()">
<h1>JavaScript Arithmetic Operators</h1>
<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>
<p id="modulus"></p>
<p id="exponentiation"></p>
<p id="increment"></p>
<p id="decrement"></p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Arithmetic Operators</title>
<script>
function performArithmetic() {
var a = 10;
var b = 3;
document.getElementById("addition").innerHTML = "a + b = " + (a + b);
document.getElementById("subtraction").innerHTML = "a - b = " + (a - b);
document.getElementById("multiplication").innerHTML = "a * b = " + (a * b);
document.getElementById("division").innerHTML = "a / b = " + (a / b);
document.getElementById("modulus").innerHTML = "a % b = " + (a % b);
document.getElementById("exponentiation").innerHTML = "a ** b = " + (a ** b);
a++;
document.getElementById("increment").innerHTML = "a++ = " + a;
b--;
document.getElementById("decrement").innerHTML = "b-- = " + b;
}
</script>
</head>
<body onload="performArithmetic()">
<h1>JavaScript Arithmetic Operators</h1>
<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>
<p id="modulus"></p>
<p id="exponentiation"></p>
<p id="increment"></p>
<p id="decrement"></p>
</body>
</html>
2. Assignment Operators
Assignment operators assign values to JavaScript variables.
- Assignment (=)
- Addition assignment (+=)
- Subtraction assignment (-=)
- Multiplication assignment (*=)
- Division assignment (/=)
- Modulus assignment (%=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Assignment Operators</title>
<script>
function performAssignment() {
var x = 10;
document.getElementById("assignment").innerHTML = "x = " + x;
x += 5;
document.getElementById("additionAssignment").innerHTML = "x += 5 = " + x;
x -= 3;
document.getElementById("subtractionAssignment").innerHTML = "x -= 3 = " + x;
x *= 2;
document.getElementById("multiplicationAssignment").innerHTML = "x *= 2 = " + x;
x /= 4;
document.getElementById("divisionAssignment").innerHTML = "x /= 4 = " + x;
x %= 3;
document.getElementById("modulusAssignment").innerHTML = "x %= 3 = " + x;
}
</script>
</head>
<body onload="performAssignment()">
<h1>JavaScript Assignment Operators</h1>
<p id="assignment"></p>
<p id="additionAssignment"></p>
<p id="subtractionAssignment"></p>
<p id="multiplicationAssignment"></p>
<p id="divisionAssignment"></p>
<p id="modulusAssignment"></p>
</body>
</html>
3. Comparison Operators
Comparison operators compare two values and return a boolean value (true or false).
- Equal (==)
- Strict equal (===)
- Not equal (!=)
- Strict not equal (!==)
- Greater than (>)
- Greater than or equal (>=)
- Less than (<)
- Less than or equal (<=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Comparison Operators</title>
<script>
function performComparison() {
var a = 5;
var b = "5";
document.getElementById("equal").innerHTML = "a == b: " + (a == b);
document.getElementById("strictEqual").innerHTML = "a === b: " + (a === b);
document.getElementById("notEqual").innerHTML = "a != b: " + (a != b);
document.getElementById("strictNotEqual").innerHTML = "a !== b: " + (a !== b);
document.getElementById("greaterThan").innerHTML = "a > b: " + (a > b);
document.getElementById("greaterThanOrEqual").innerHTML = "a >= b: " + (a >= b);
document.getElementById("lessThan").innerHTML = "a < b: " + (a < b);
document.getElementById("lessThanOrEqual").innerHTML = "a <= b: " + (a <= b);
}
</script>
</head>
<body onload="performComparison()">
<h1>JavaScript Comparison Operators</h1>
<p id="equal"></p>
<p id="strictEqual"></p>
<p id="notEqual"></p>
<p id="strictNotEqual"></p>
<p id="greaterThan"></p>
<p id="greaterThanOrEqual"></p>
<p id="lessThan"></p>
<p id="lessThanOrEqual"></p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Comparison Operators</title>
<script>
function performComparison() {
var a = 5;
var b = "5";
document.getElementById("equal").innerHTML = "a == b: " + (a == b);
document.getElementById("strictEqual").innerHTML = "a === b: " + (a === b);
document.getElementById("notEqual").innerHTML = "a != b: " + (a != b);
document.getElementById("strictNotEqual").innerHTML = "a !== b: " + (a !== b);
document.getElementById("greaterThan").innerHTML = "a > b: " + (a > b);
document.getElementById("greaterThanOrEqual").innerHTML = "a >= b: " + (a >= b);
document.getElementById("lessThan").innerHTML = "a < b: " + (a < b);
document.getElementById("lessThanOrEqual").innerHTML = "a <= b: " + (a <= b);
}
</script>
</head>
<body onload="performComparison()">
<h1>JavaScript Comparison Operators</h1>
<p id="equal"></p>
<p id="strictEqual"></p>
<p id="notEqual"></p>
<p id="strictNotEqual"></p>
<p id="greaterThan"></p>
<p id="greaterThanOrEqual"></p>
<p id="lessThan"></p>
<p id="lessThanOrEqual"></p>
</body>
</html>
4. Logical Operators
Logical operators are used to combine multiple comparison operators.
- Logical AND (&&)
- Logical OR (||)
- Logical NOT (!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Logical Operators</title>
<script>
function performLogical() {
var a = true;
var b = false;
document.getElementById("and").innerHTML = "a && b: " + (a && b);
document.getElementById("or").innerHTML = "a || b: " + (a || b);
document.getElementById("notA").innerHTML = "!a: " + (!a);
document.getElementById("notB").innerHTML = "!b: " + (!b);
}
</script>
</head>
<body onload="performLogical()">
<h1>JavaScript Logical Operators</h1>
<p id="and"></p>
<p id="or"></p>
<p id="notA"></p>
<p id="notB"></p>
</body>
</html>
5. Bitwise Operators
Bitwise operators perform operations on the binary representations of numbers.
- Bitwise AND (&)
- Bitwise OR (|)
- Bitwise XOR (^)
- Bitwise NOT (~)
- Left shift (<<)
- Right shift (>>)
- Unsigned right shift (>>>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Bitwise Operators</title>
<script>
function performBitwise() {
var a = 5; // 0101 in binary
var b = 1; // 0001 in binary
document.getElementById("and").innerHTML = "a & b: " + (a & b); // 0001 (1)
document.getElementById("or").innerHTML = "a | b: " + (a | b); // 0101 (5)
document.getElementById("xor").innerHTML = "a ^ b: " + (a ^ b); // 0100 (4)
document.getElementById("not").innerHTML = "~a: " + (~a); // 1010 (-6)
document.getElementById("leftShift").innerHTML = "a << b: " + (a << b); // 1010 (10)
document.getElementById("rightShift").innerHTML = "a >> b: " + (a >> b); // 0010 (2)
document.getElementById("unsignedRightShift").innerHTML = "a >>> b: " + (a >>> b); // 0010 (2)
}
</script>
</head>
<body onload="performBitwise()">
<h1>JavaScript Bitwise Operators</h1>
<p id="and"></p>
<p id="or"></p>
<p id="xor"></p>
<p id="not"></p>
<p id="leftShift"></p>
<p id="rightShift"></p>
<p id="unsignedRightShift"></p>
</body>
</html>
6. Other Operators
Other operators include the ternary operator and the typeof operator.
- Ternary (? :): A shorthand for if-else statements.
- typeof: Returns the type of a variable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Other Operators</title>
<script>
function performOtherOperations() {
var a = 5;
var b = "hello";
var result = (a > 2) ? "a is greater than 2" : "a is not greater than 2";
document.getElementById("ternary").innerHTML = result;
document.getElementById("typeofA").innerHTML = "typeof a: " + (typeof a);
document.getElementById("typeofB").innerHTML = "typeof b: " + (typeof b);
}
</script>
</head>
<body onload="performOtherOperations()">
<h1>JavaScript Other Operators</h1>
<p id="ternary"></p>
<p id="typeofA"></p>
<p id="typeofB"></p>
</body>
</html>
Practice Excercise Practice now