What You Will Learn

  • Variables
  • Data Types
  • Functions
  • Conditions
  • Basic Logic Building
  • Mini Project – Calculator Logic

What is JavaScript?

JavaScript is a programming language used to make websites interactive.

Examples:

  • Button Click
  • Form Validation
  • Login Systems
  • Calculator
  • Weather App
  • Shopping Cart
  • Dynamic Content

Without JavaScript, websites are static. With JavaScript, websites become smart.

1. Variables

Variables are used to store data. Think of variables like containers.

Example:

  • your name
  • your age
  • your marks

All these can be stored in variables.

Syntax

let name = "Shobhit";
let age = 25;
let isStudent = true;

Explanation

Here:

  • name stores text
  • age stores number
  • isStudent stores true/false value

Variables help us save and reuse data.

Types of Variables

There are mainly 3 ways:

1. let

Used when value can change.

let city = "Delhi";

2. const

Used when value should not change.

const pi = 3.14;

3. var

Old method (less recommended now)

var country = "India";

Prefer using:

let + const

in modern development.

2. Data Types

Data Types define what kind of value is stored.

Common Data Types

String

Text values

let username = "Frontend Developer";

Number

Numeric values

let marks = 95;

Boolean

True or False

let isLoggedIn = true;

Array

Multiple values

let skills = ["HTML", "CSS", "JavaScript"];

Object

Detailed information

let student = {
    name: "Shobhit",
    age: 25
};

3. Functions

Functions are reusable blocks of code. Instead of writing same code again and again, we use functions.

Example

function greet() {
    console.log("Welcome to JavaScript!");
}

greet();

Explanation

Function created:

greet()

When called:

greet();

it runs the code. This saves time and makes code clean.

Function with Parameters

function add(a, b) {
    console.log(a + b);
}

add(10, 20);

Result

Output: 30

This is the beginning of calculator logic.

4. Conditions

Conditions help websites make decisions.

Example:

  • if user is logged in → show dashboard
  • if password is wrong → show error
  • if marks > 40 → pass

This is called conditional logic.

if Statement Example

let age = 20;

if (age >= 18) {
    console.log("You can vote");
}

if else Example

let marks = 35;

if (marks >= 40) {
    console.log("Pass");
} else {
    console.log("Fail");
}

Why Conditions are Important

Used in:

  • Login systems
  • Admin panels
  • Payment systems
  • Forms
  • Cart checkout
  • Real-world business logic

Conditions are everywhere.

Mini Project – Calculator Logic

Now let's build the basic calculator logic using JavaScript.

This helps you understand:

  • variables
  • functions
  • input handling
  • calculations

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Calculator</title>
</head>
<body>

<h2>Simple Calculator</h2>

<input type="number" id="num1" placeholder="Enter First Number">
<input type="number" id="num2" placeholder="Enter Second Number">

<button onclick="add()">Add</button>

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

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

</body>
</html>

JavaScript Code

function add() {
    let number1 = Number(document.getElementById("num1").value);
    let number2 = Number(document.getElementById("num2").value);

    let total = number1 + number2;

    document.getElementById("result").innerText = "Result: " + total;
}

How This Works

Step 1: Take input from user

Step 2: Convert text into number

Step 3: Add both numbers

Step 4: Show result on screen

This is real JavaScript logic.

Real Industry Usage

These concepts are used in:

  • Login forms
  • Shopping websites
  • Dashboard calculations
  • CRM systems
  • Expense trackers
  • Student portals
  • Real estate systems

JavaScript powers everything.

AI Prompt for Today

Use this prompt in ChatGPT:

Explain JavaScript variables, functions, and conditions with beginner-friendly real project examples

This helps improve understanding faster.

Homework Assignment

Create your own:

Simple Subtraction Calculator

Include:

  • two inputs
  • subtract button
  • result output

This improves logic-building skills.

Bonus Task

Create:

Multiplication + Division Buttons

This makes your calculator more professional.

This is your first JavaScript mini project.

Conclusion

Today we learned:

  • Variables
  • Data Types
  • Functions
  • Conditions
  • Basic Calculator Logic

This is the real beginning of frontend development. JavaScript is where websites become powerful.

Master these basics carefully because everything ahead depends on this.

In the next lecture, we will learn:

Day 9 – DOM Manipulation

Where JavaScript starts controlling HTML directly. That is where frontend becomes exciting.

Keep coding. Keep building. Keep growing.

See you in Lecture 09!