Variables, Data Types, and Operators

Understanding Variables, Data Types, and Operators in JavaScript

1. What is a Variable?

A variable is a container used to store data that can be used later in a program.

Example:


let name = "John";

Here, name is a variable storing the value "John".

2. Types of Variables in JavaScript

var

Old way of declaring variables.


var age = 20;

let

Modern way. Value can change.


let score = 50;
score = 60;

const

Used for constant values.


const country = "India";

3. Data Types in JavaScript

String

Text values.


let studentName = "Rahul";

Number

Numeric values.


let marks = 95;

Boolean

True or false values.


let isPassed = true;

4. Real Life Example: Greeting Application

This example greets the user when they enter their name.

index.html


<!DOCTYPE html>
<html>
<head>
<title>Greeting App</title>
</head>
<body>

<h2>Greeting Application</h2>

<input type="text" id="name" placeholder="Enter your name">
<button onclick="greetUser()">Greet</button>

<p id="message"></p>

<script src="app.js"></script>

</body>
</html>

Run Code

app.js


function greetUser() {
    let name = document.getElementById("name").value;
    document.getElementById("message").innerText = "Hello " + name + "! Welcome to JavaScript.";
}

Run Code

5. How This Example Works

User enters their name in the input box.
When the button is clicked, the function greetUser() runs.
JavaScript reads the value from the input field.
The message is displayed on the page.

6. Practice Exercise

Create a small application that:

Asks the user for their favorite color
Displays "Your favorite color is ___"

7. Operators

Arithmetic Operators


let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Comparison Operators


console.log(a > b);
console.log(a < b);
console.log(a == b);

8. Real Life Example: Student Marks Calculator

This application calculates the total marks and percentage.

index.html


<!DOCTYPE html>
<html>
<head>
<title>Marks Calculator</title>
</head>
<body>

<h2>Student Marks Calculator</h2>

<input type="number" id="m1" placeholder="Subject 1"><br><br>
<input type="number" id="m2" placeholder="Subject 2"><br><br>
<input type="number" id="m3" placeholder="Subject 3"><br><br>

<button onclick="calculate()">Calculate</button>

<h3 id="result"></h3>

<script src="app.js"></script>

</body>
</html>

Run Code

app.js


function calculate(){

let m1 = Number(document.getElementById("m1").value);
let m2 = Number(document.getElementById("m2").value);
let m3 = Number(document.getElementById("m3").value);

let total = m1 + m2 + m3;
let percentage = total / 3;

let result = document.getElementById("result");

result.innerText = "Total Marks: " + total + " | Percentage: " + percentage + "%";

}

Run Code

9. How This Example Works

User enters marks for three subjects.
JavaScript stores the values in variables.
The program calculates total and percentage.
The result is displayed on the webpage.

10. Practice Exercise

Create a simple Shopping Bill Calculator.

Inputs:

Product price
Quantity

Output:

Total price

11. What Students Learned

Variables (var, let, const)
Basic data types
Arithmetic operators
Reading values from input fields
Displaying results on the webpage

Next Chapter

Chapter 3: Conditional Statements (if, else, switch) with a Real-Life Example: Age Eligibility Checker

Previous Next