Complete Web Designing Course for Beginners

Lesson 6.3 – Operators

🧮 Performing Calculations and Comparisons in JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Operators

✅ Perform Mathematical Calculations

✅ Compare Values

✅ Use Assignment Operators

✅ Use Logical Operators

✅ Build Calculator Programs

✅ Create Real-World Applications

📖 Introduction

In the previous lesson, we learned:

✅ Variables

✅ Data Types

Example:

let num1 = 10;

let num2 = 5;

Now suppose we want to:

+ 5

- 5

× 5

÷ 5

How do we do this?

The answer is:

➕ Operators

🤔 What is an Operator?

An Operator is a special symbol used to perform operations on values and variables.

Example:

10 + 5

Here:

is an operator.

🌟 Types of Operators

JavaScript mainly provides:

✅ Arithmetic Operators

✅ Assignment Operators

✅ Comparison Operators

✅ Logical Operators

🎯 Arithmetic Operators

Used for calculations.

Addition (+)

let result = 10 + 5;

alert(result);

Output:

Subtraction (-)

let result = 10 - 5;

alert(result);

Output:

Multiplication (*)

let result = 10 * 5;

alert(result);

Output:

Division (/)

let result = 10 / 5;

alert(result);

Output:

Modulus (%)

Returns remainder.

let result = 10 % 3;

alert(result);

Output:

Because:

10 ÷ 3 = 3 remainder 1

🌟 Arithmetic Operator Table

Operator	Meaning
+	Addition
–	Subtraction
*	Multiplication
/	Division
%	Remainder

🎯 Using Variables with Operators

let num1 = 20;

let num2 = 10;

let total = num1 + num2;

alert(total);

Output:

Example

let marks1 = 80;

let marks2 = 90;

let totalMarks = marks1 + marks2;

alert(totalMarks);

Output:

🌟 Assignment Operators

Used to assign values.

Basic Assignment:

let age = 18;

Here:

is an assignment operator.

Additional Assignment Operators

+=

let num = 10;

num += 5;

alert(num);

Output:

Equivalent to:

num = num + 5;

-=

let num = 10;

num -= 3;

alert(num);

Output:

*=

let num = 10;

num *= 2;

alert(num);

Output:

/=

let num = 10;

num /= 2;

alert(num);

Output:

🌟 Assignment Operator Table

Operator	Example
=	age = 18
+=	age += 2
-=	age -= 2
*=	age *= 2
/=	age /= 2

🎯 Comparison Operators

Used to compare values.

Results are:

true

or

false

Equal To (==)

let result = 10 == 10;

alert(result);

Output:

true

Not Equal To (!=)

let result = 10 != 5;

alert(result);

Output:

true

Greater Than (>)

let result = 20 > 10;

alert(result);

Output:

true

Less Than (<)

let result = 5 < 10;

alert(result);

Output:

true

Greater Than or Equal To (>=)

let result = 20 >= 20;

alert(result);

Output:

true

Less Than or Equal To (<=)

let result = 10 <= 20;

alert(result);

Output:

true

🌟 Comparison Operator Table

Operator	Meaning
==	Equal To
!=	Not Equal To
>	Greater Than
<	Less Than
>=	Greater Than or Equal To
<=	Less Than or Equal To

🎯 Logical Operators

Used to combine conditions.

AND Operator (&&)

Returns true only when both conditions are true.

let result = (10 > 5) && (20 > 10);

alert(result);

Output:

true

OR Operator (||)

Returns true if any one condition is true.

let result = (10 > 20) || (20 > 10);

alert(result);

Output:

true

NOT Operator (!)

Reverses result.

let result = !(10 > 5);

alert(result);

Output:

false

🌟 Logical Operator Table

Operator	Meaning
&&	AND
\|\|	OR
!	NOT

🎯 Real World Example

Student Marks:

let marks = 85;

let result = marks > 40;

alert(result);

Output:

true

Student passed.

Example

Age Verification:

let age = 20;

let eligible = age >= 18;

alert(eligible);

Output:

true

Eligible for voting.

🌟 Calculator Program

let num1 = 50;

let num2 = 10;

alert(num1 + num2);

alert(num1 - num2);

alert(num1 * num2);

alert(num1 / num2);

Output:

💻 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>Operators Example</title>

</head>

<body>

<script>

let num1 = 20;

let num2 = 10;

alert("Addition: " + (num1 + num2));

alert("Subtraction: " + (num1 - num2));

alert("Multiplication: " + (num1 * num2));

alert("Division: " + (num1 / num2));

</script>

</body>

</html>

🎯 Expected Output

Addition: 30

Subtraction: 10

Multiplication: 200

Division: 2

🏫 Real World Applications

Operators are used in:

✅ Calculators

✅ Banking Systems

✅ E-Commerce Websites

✅ Student Result Systems

✅ Login Verification

✅ Quiz Applications

✅ Attendance Systems

⚠️ Common Beginner Mistakes

Mistake 1

Using = Instead of ==

Wrong:

10 = 10

Correct:

10 == 10

Mistake 2

Division by Zero

Wrong:

10 / 0

Avoid this.

Mistake 3

Forgetting Variable Names

Wrong:

alert(num1 + );

Correct:

alert(num1 + num2);

🌟 Best Practices

✅ Use meaningful variable names.

✅ Test calculations carefully.

✅ Use comparison operators for conditions.

✅ Use logical operators wisely.

✅ Keep formulas simple.

🏆 Mini Project – Student Marks Calculator

Create:

let math = 80;

let science = 75;

let english = 90;

Calculate:

let total = math + science + english;

Display total marks using alert().

📝 Practical Activity

Create variables:

let product1 = 500;

let product2 = 800;

Calculate:

✅ Total Price

✅ Difference

✅ Multiplication

✅ Division

Display all results.

📋 Assignment

Assignment 6.3

What is an Operator?
What are Arithmetic Operators?
Explain Addition, Subtraction, Multiplication, and Division.
What are Comparison Operators?
What are Logical Operators?
Create a calculator using JavaScript operators.
Explain the difference between = and ==.

🧠 Quiz

Q1. Which operator performs addition?

A. –

B. *

C. +

D. /

✅ Answer: C

Q2. Which operator returns remainder?

A. %

B. /

C. *

D. +

✅ Answer: A

Q3. Which operator means “Equal To”?

A. =

B. ==

C. ====

D. !=

✅ Answer: B

Q4. Which logical operator means AND?

A. ||

B. !

C. &&

D. ==

✅ Answer: C

Q5. Comparison operators return?

A. String

B. Number

C. Boolean

D. Array

✅ Answer: C

📌 Lesson Summary

✅ Operators perform actions on values and variables.

✅ Arithmetic Operators perform calculations.

✅ Assignment Operators assign values.

✅ Comparison Operators compare values.

✅ Logical Operators combine conditions.

✅ Operators are used in almost every JavaScript application.