Complete Web Designing Course for Beginners

📘 MODULE 6 – JavaScript Fundamentals

📦 Lesson 6.2 – Variables & Data Types

🧠 Storing and Managing Information in JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Variables

✅ Understand Data Types

✅ Store Information in JavaScript

✅ Use let, var, and const

✅ Display Variable Values

✅ Perform Basic Operations

✅ Build Dynamic Programs

📖 Introduction

Imagine a student registration system.

We need to store:

Student Name

Age

Branch

College

Marks

How can JavaScript remember all this information?

The answer is:

📦 Variables

🤔 What is a Variable?

A Variable is a container used to store data.

Real Life Example

Imagine a water bottle.

Bottle

stores:

Water

Similarly:

Variable

stores:

Data

Example

let name = "Shiv";

Here:

name

is a variable.

It stores:

Shiv

Visual Representation

+----------+

name

+----------+

|  Shiv    |

+----------+

🎯 Why Variables Are Important?

Variables help us store:

✅ Names

✅ Ages

✅ Marks

✅ Prices

✅ User Input

✅ Calculation Results

Without variables:

JavaScript cannot remember information.

🌟 Creating Variables

JavaScript provides:

let

var

const

Most commonly used:

let

and

const

🎯 Using let

Syntax:

let variableName = value;

Example

let studentName = "Rahul";

Example

let age = 18;

Example

let college = "ABC Polytechnic";

🌟 Displaying Variable Values

Use:

alert();

Example

let name = "Rahul";

alert(name);

Output:

Rahul

Example

let age = 20;

alert(age);

Output:

🎯 What is a Data Type?

Different kinds of data are called:

Data Types

Examples:

Rahul

String

Number

True

Boolean

JavaScript automatically identifies data types.

🌟 Main Data Types

We will learn:

✅ String

✅ Number

✅ Boolean

1️⃣ String Data Type

String means:

Text Data

Examples:

let name = "Rahul";

let city = "Ranchi";

let course = "Web Designing";

Strings are always written inside:

" "

' '

Example

let college = "Government Polytechnic";

Output

Government Polytechnic

🎯 String Example Program

let studentName = "Amit";

alert(studentName);

Output:

Amit

2️⃣ Number Data Type

Number means:

Numeric Values

Examples:

let age = 18;

let marks = 95;

let price = 1500;

Numbers do NOT use quotes.

Correct:

let age = 18;

Wrong:

let age = "18";

This becomes a string.

Example

let marks = 85;

alert(marks);

Output:

3️⃣ Boolean Data Type

Boolean means:

True

or

False

Examples:

let isStudent = true;

let isLoggedIn = false;

Used in:

✅ Login Systems

✅ Quiz Applications

✅ Games

✅ Conditions

Example

let passed = true;

alert(passed);

Output:

true

🎯 Using Multiple Variables

Example

let name = "Rahul";

let age = 18;

let branch = "Computer Science";

Variables store different information.

Example Program

let name = "Rahul";

let age = 18;

alert(name);

alert(age);

Output

Rahul

18

🌟 Variable Naming Rules

Correct

let studentName;

let age;

let totalMarks;

Wrong

let 123name;

let student-name;

let @name;

Rules

✅ Use letters

✅ Use numbers after letters

✅ Use underscore (_)

✅ Use meaningful names

🎯 Using const

Sometimes values never change.

Use:

const

Example

const pi = 3.14;

Correct:

const college = "ABC Polytechnic";

Cannot change later.

Wrong:

const pi = 3.14;

pi = 5;

Error occurs.

🌟 Difference Between let and const

let	const
Value can change	Value cannot change
Flexible	Fixed
Most Common	Used for constants

Example

let age = 18;

age = 19;

Allowed.

Example

const pi = 3.14;

pi = 5;

Not allowed.

🎯 Variable Concatenation

Combining text.

Example

let name = "Rahul";

alert("Welcome " + name);

Output

Welcome Rahul

Example

let college = "ABC Polytechnic";

alert("College: " + college);

Output

College: ABC Polytechnic

🌟 Student Information Program

let name = "Rahul";

let age = 18;

let branch = "Computer Science";

alert("Name: " + name);

alert("Age: " + age);

alert("Branch: " + branch);

Output

Name: Rahul

Age: 18

Branch: Computer Science

💻 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>Variables Example</title>

</head>

<body>

<script>

let studentName = "Rahul";

let age = 18;

let branch = "Computer Science";

alert("Student Name: " + studentName);

alert("Age: " + age);

alert("Branch: " + branch);

</script>

</body>

</html>

🎯 Expected Output

Popup 1:

Student Name: Rahul

Popup 2:

Age: 18

Popup 3:

Branch: Computer Science

🏫 Real World Applications

Variables are used in:

✅ Login Systems

✅ Registration Forms

✅ Quiz Applications

✅ Online Exams

✅ Student Management Systems

✅ E-Commerce Websites

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Quotes in Strings

Wrong:

let name = Rahul;

Correct:

let name = "Rahul";

Mistake 2

Using Spaces in Variable Names

Wrong:

let student name;

Correct:

let studentName;

Mistake 3

Changing const Values

Wrong:

const pi = 3.14;

pi = 5;

🌟 Best Practices

✅ Use meaningful variable names.

✅ Prefer let and const.

✅ Avoid unnecessary variables.

✅ Use const for fixed values.

✅ Keep variable names simple.

🏆 Mini Project – Student Information System

Create variables:

let studentName = "Your Name";

let age = 18;

let branch = "Computer Science";

Display:

Student Name

Age

Branch

using alert().

📝 Practical Activity

Create variables for:

College Name
Student Name
Branch
Marks

Display all values using JavaScript.

📋 Assignment

Assignment 6.2

What is a Variable?
Why are Variables important?
What is a Data Type?
Explain String Data Type.
Explain Number Data Type.
Explain Boolean Data Type.
What is the difference between let and const?
Create a student information program using variables.

🧠 Quiz

Q1. Which keyword is commonly used to create variables?

A. variable

B. create

C. let

D. store

✅ Answer: C

Q2. Which data type stores text?

A. Number

B. String

C. Boolean

D. Float

✅ Answer: B

Q3. Which data type stores true or false?

A. String

B. Number

C. Boolean

D. Integer

✅ Answer: C

Q4. Which keyword creates a constant value?

A. let

B. var

C. const

D. value

✅ Answer: C

Q5. Which variable name is correct?

A. 123name

B. student name

C. studentName

D. @name

✅ Answer: C

📌 Lesson Summary

✅ Variables store data in JavaScript.

✅ Data Types define the kind of data stored.

✅ String stores text.

✅ Number stores numeric values.

✅ Boolean stores true or false values.

✅ let creates changeable variables.

✅ const creates fixed variables.

✅ Variables are the foundation of all JavaScript programs.