JavaScript Arithmetic
JavaScript Arithmetic Operators
Arithmetic operators are like special tools that do math with numbers. These numbers can be actual numbers or values you've stored in your program.
| Operator |
Description |
| + |
Addition |
| - |
Subtraction |
| * |
Multiplication |
| ** |
Exponentiation (ES2016) |
| / |
Division |
| % |
Modulus (Remainder) |
| ++ |
Increment |
| -- |
Decrement |
Arithmetic Operations
Usually, when we talk about arithmetic, we're just doing math with two numbers.
The two numbers can be literals:
or variables:
or expressions:
Operators and Operands
In a math calculation, the values you work with are called operands.
The action done between two numbers is determined by a special symbol called an operator.
| Operand |
Operator |
Operand |
| 100 |
+ |
50 |
Adding
The plus sign (+) is used to add numbers.
Subtracting
The minus sign (-) subtracts the number.
Multiplying
The (*) operator in HTML multiplies numbers.
Dividing
The division operator (/) is used to divide numbers.
Remainder
The modulus operator, represented as %, gives you the remainder part when you divide numbers.
In arithmetic, the division of two integers produces a quotient
and a remainder.
In mathematics, the result of a modulo operation is the remainder of an arithmetic division.
Incrementing
The increment operator (++) increase the numbers.
Decrementing
The decrement operator (--) decrease the numbers.
Exponentiation
The exponentiation operator (**) raises the first operand to the power of the second operand.
x raised to the power of y gives the identical outcome as Math.pow(x, y):
Operator Precedence
Operator precedence tells us the sequence in which math operations happen in a math problem.
Does the outcome in the previous example equal 150 multiplied by 3, or does it equal 100 plus 150?
Which one comes first: adding or multiplying?
Just like in regular school math, we do multiplication before anything else.
And (as in school mathematics) the precedence can be changed by using parentheses.
When you use parentheses, the calculations inside them happen before anything else:
When several tasks have the same priority, such as adding and subtracting or multiplying and dividing, they are performed in the order they appear, starting from the left.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>An ordinary math calculation involves using two numbers to get a single new number.</p>
<p id="demo"></p>
<script>
let x = 100 + 50;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<p>An everyday math calculation involves using two numbers (or letters that stand for numbers) to get a different number as the result.</p>
<p id="demo"></p>
<script>
let a = 100;
let b = 50;
let x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Arithmetic Operations</h2>
<p>An ordinary math calculation involves taking two numbers or expressions and combining them to make a different number.</p>
<p id="demo"></p>
<script>
let a = 3;
let x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The - Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The / Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The % Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The ++ Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
x++;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The -- Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
x--;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The ** Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Math.pow()</h2>
<p id="demo"></p>
<script>
let x = 5;
document.getElementById("demo").innerHTML = Math.pow(x, 2);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</h2>
<p>Multiplication has precedence over addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 50 * 3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</h2>
<p>Multiplication has precedence over addition.</p>
<p>But parenthesis has precedence over multiplication.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (100 + 50) * 3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</h2>
<p>When several tasks have equal importance, they are completed one after the other, starting from the left and moving to the right.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 50 - 3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>Operator Precedence</h2>
<p>When several tasks have equal importance, they are done one after the other, starting from the left and moving to the right.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / 50 * 3;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery