03 · JavaScript — Getting Started

HTML is structure, CSS is looks — JavaScript is behavior. It's a real programming language: it can store values, make decisions, react to clicks, and change the page live.

1. The Console — your playground

Every browser has a live JavaScript prompt. Open your page, press F12 (or right-click → Inspect), and click the Console tab. Type code, press Enter, see the result instantly — no files needed to experiment.

2. Variables — labeled boxes

A variable is a named box that holds a value. let makes a new one; = stores a value in it.

let bookTitle = "The Alchemist";
let copies = 4;

console.log(bookTitle);  // The Alchemist
console.log(copies);     // 4

3. Two errors you already met

4. Data types

Every value has a type, and the type decides how it behaves. Check any value with typeof.

The quotes are the whole difference: "4" is text, 4 is a number. They look the same but behave differently.

5. The + trap (very important)

The + sign does two different jobs depending on the types:

let age = "4";        // from a form → TEXT
console.log(age + 1);  // want 5, get "41" 😱

6. Type conversion — fixing the + trap

You can convert a value from one type to another. Note the capital letter — capitalization matters in JavaScript.

let age = "4";         // text (like a form gives you)
console.log(age + 1);          // "41"  ← the bug
console.log(Number(age) + 1);  // 5     ← convert first, then math

7. Functions — write once, reuse forever

A function is a reusable recipe. Write it once, then call it as many times as you like with different inputs.

function lateFine(days) {   // ₹2 per day late
    return days * 2;
}

lateFine(5);              // 10
let fine = lateFine(5);   // store it → fine is 10, ready to use

function lateFine2(days) { console.log(days * 2); }
let f = lateFine2(5);   // prints 10, but f is undefined!

8. Making decisions — if / else

Decisions start with a comparison, which asks a yes/no question and returns a boolean (true/false).

An if uses a comparison to choose which block runs:

function bookStatus(copies) {
    if (copies > 0) {
        return "Available";
    } else {
        return "Out of stock";
    }
}
bookStatus(4);  // "Available"
bookStatus(0);  // "Out of stock"

9. Arrays — a list in one variable

An array holds an ordered list. Square brackets, comma-separated items.

let books = ["Harry Potter", "The Alchemist", "Atomic Habits"];

10. Loops — do something to every item

A for loop walks the whole list automatically, however long it is.

for (let i = 0; i < books.length; i = i + 1) {
    console.log(books[i]);
}

Three parts in the ( ), separated by semicolons:

1. let i = 0 — counter starts at 0 (first index)
2. i < books.length — keep going while this is true
3. i = i + 1 — add 1 after each pass

for (let i = 0; i < books.length; i = i + 1) {
    console.log((i + 1) + ". " + books[i]);  // 1. Harry Potter …
}

11. Objects — name your values, don't count them

An array is great at "many," but a single thing — a book — has several named parts: title, author, category, copies. An object stores them by name (key) instead of by position.

let book = {
    title: "Wings of Fire",
    author: "A.P.J. Abdul Kalam",
    category: "Autobiography",
    copies: 3
};

book.title;   // "Wings of Fire"  ← dot + name
book.copies;  // 3

// author at [1], copies at [3]
let book = ["Wings of Fire", "Kalam", "Autobiography", 3];
book[3];  // 3 (copies) ✅

// a teammate inserts the year in the middle…
let book = ["Wings of Fire", "Kalam", 1999, "Autobiography", 3];
book[3];  // "Autobiography" 😱 — copies silently moved to book[4]

book.copies = book.copies - 1;  // read it, subtract, write it back → 2

12. Array of objects — the shape of real apps

A library is many structured things, so you combine both tools: a list whose every slot holds an object. This is the single most common data shape on the web — it's what most APIs hand back.

let books = [
    { title: "Harry Potter",  author: "J.K. Rowling", category: "Fantasy", copies: 5 },
    { title: "Wings of Fire", author: "A.P.J. Abdul Kalam", category: "Autobiography", copies: 3 },
    { title: "The Alchemist", author: "Paulo Coelho", category: "Fiction", copies: 4 }
];

books.length;      // 3
books[0];          // the whole first object
books[1].author;   // "A.P.J. Abdul Kalam"  ← index first, THEN dot

13. The DOM — the page as objects you can change

When the browser loads your HTML, it builds a live tree of objects in memory — one object per element. That tree is the DOM (Document Object Model). Your <h1>, your <table> — each is now an object JavaScript can grab and change, and the browser instantly redraws.

document.getElementById("mainHeading").innerHTML = "Sanjay's Library";
// the <h1 id="mainHeading"> changes on screen instantly

14. Rendering a table from data — the payoff

Now snap it all together: array of objects (data) + for loop (visit each) + string building (make a <tr>) + innerHTML (inject). Delete the hand-typed rows — JavaScript generates them.

// empty container in the HTML:  <tbody id="bookRows"></tbody>

let rowsHTML = "";                       // start empty (accumulator)
for (let i = 0; i < books.length; i++) {
    rowsHTML = rowsHTML +                // append one <tr> per book
        "<tr><td>" + books[i].title +
        "</td><td>" + books[i].author +
        "</td><td>" + books[i].category +
        "</td><td>" + books[i].copies + "</td></tr>";
}
document.getElementById("bookRows").innerHTML = rowsHTML;

15. Events — making the page respond to the user

An event is something the user does — a click, a keypress. onclick says "when this is clicked, run this code." That's how a page stops being a poster and becomes an app.

<button onclick="borrowBook(0)">Borrow</button>

16. Reading form input — .value + Number()

To read what a user typed, grab the input and read its .value (for an <h1> you read .innerHTML; for an <input> you read .value).

let title  = document.getElementById("newTitle").value;
let copies = Number(document.getElementById("newCopies").value);  // convert!
books.push({ title: title, author: author, category: category, copies: copies });

17. Template literals — readable strings with backticks

Backticks ` let you drop values straight into a string with ${ }, instead of gluing pieces with +. It reads like the final result, with fill-in blanks.

// old — bounce between quotes and +
"<td>" + book.title + "</td><td>" + book.copies + "</td>"

// template literal — reads like the output
`<td>${book.title}</td><td>${book.copies}</td>`

18. forEach — let the array walk itself

A for loop makes you manage a counter (i = 0, i < length, i++) — pure bookkeeping, and where off-by-one bugs live. forEach does the walking; you just say what to do per item.

books.forEach(function (book, i) {
    // 'book' is the current object, 'i' is its index
    console.log(book.title);
});

19. localStorage — memory that survives refresh

Earlier you learned DOM changes vanish on refresh because they live only in memory. localStorage is a small box the browser keeps on disk, per site — write to it and it survives refresh, closing the tab, even a reboot.

// save (after every change):
localStorage.setItem("libraryBooks", JSON.stringify(books));

// load (on startup, BEFORE the first render):
let saved = localStorage.getItem("libraryBooks");
if (saved) { books = JSON.parse(saved); }

20. Two bugs you solved yourself (worth remembering)

21. Arrow functions — the modern short form

An arrow function is a shorter way to write a function. Same job, less typing — and it's what you'll see in every modern codebase, tutorial, and API doc.

// the long way you learned first:
books.forEach(function (book) {
    console.log(book.title);
});

// the arrow way — drop 'function', add => after the ( ):
books.forEach((book) => {
    console.log(book.title);
});

// long:
books.filter(function (b) { return b.copies <= 2; });

// one-liner — no braces, no return, same result:
books.filter((b) => b.copies <= 2);

22. this — the hardest keyword, tamed

this means "the object I'm currently working for." The confusion: normal functions and arrow functions get their this from opposite places.

let myBook = {
    title: "Harry Potter",
    normalShout: function () {
        setTimeout(function () {
            console.log(this.title);   // undefined 😱 — setTimeout calls it, not myBook
        }, 1000);
    },
    arrowShout: function () {
        setTimeout(() => {
            console.log(this.title);   // "Harry Potter" ✅ — arrow looks outward to arrowShout's this
        }, 1000);
    }
};

23. Sorting — teach sort how to compare

books.sort(...) reorders the array, but it doesn't know what "smaller" means for your objects. You hand it a compare function that takes two items and answers with a number:

// numbers: subtraction gives exactly neg/0/pos — the classic trick
books.sort((a, b) => a.copies - b.copies);

// strings can't subtract — localeCompare gives the same neg/0/pos contract
books.sort((a, b) => a.title.localeCompare(b.title));

24. Removing from an array — three tools

25. let vs var — why we never use var

Both declare variables. The difference is how far they leak: let lives only inside its { } block; var ignores blocks and leaks out to the whole function.

if (true) {
    var a = 1;
    let b = 2;
}
console.log(a);  // 1 — var LEAKED out of the block 😱
console.log(b);  // ReferenceError — let stayed inside ✅

26. map — transform every item (+ join)

forEach just visits each item. map visits AND transforms: it builds a new array where each item is whatever your function returned.

books.map((b) => b.title);
// ["Harry Potter", "Wings of Fire", "The Alchemist"]  ← new array, books untouched

books.map((b) => b.copies);
// [5, 3, 4]   ← handy debug trick: see one field of everything at a glance

let rowsHTML = list
    .map((book) => `<tr><td>${book.title}</td>...</tr>`)   // array of row-strings
    .join("");                                             // one big string

27. Book ids — find things by identity, not position

Positions are fragile: sort the array and "book 3" is a different book. Real systems give every record a permanent, unique id and always look things up by it — that's exactly how databases work (you'll meet this again as a primary key).

{ id: 1, title: "Harry Potter", ... }

// buttons carry the id, not the row position:
`<button onclick='borrowBook(${book.id})'>Borrow</button>`

// find the OBJECT by id:
let book = books.find(b => b.id === id);

// find the POSITION by id (when splice needs one):
let i = books.findIndex(b => b.id === id);
books.splice(i, 1);

let newId = Math.max(...books.map(b => b.id)) + 1;

books.find(b => b.id = id)    // 😱 ONE equals: ASSIGNS id to every book it visits
books.find(b => b.id === id)  // ✅ THREE: compares

28. Reference vs copy — why find needs no "write back"

After let book = books.find(...), is book a copy you must save back into the array? No. It's the same object — book and the array slot both point at one object in memory.

let book = books.find(b => b.id === 1);
book === books[0];   // true — SAME object, two names

book.copies = 99;
books[0].copies;     // 99 — "the array changed" because there is only ONE object

29. Dates — the last core tool (read-ahead)

Not built into the Library yet — read this so the concept isn't new when you meet it. Due dates, fines, "borrowed on" — all need the Date object.

let now = new Date();          // this exact moment
now.toISOString();               // "2026-08-25T14:30:00.000Z" — a SAVEABLE string

// date math goes through milliseconds:
let due = new Date();
due.setDate(due.getDate() + 14);         // 14 days from now — handles month-ends itself

// how late is a return? subtract → milliseconds → convert:
let msLate  = new Date() - due;               // negative = not late yet
let daysLate = Math.ceil(msLate / (1000*60*60*24));

30. Linking data by id — how a real loan works (read-ahead)

Your ids unlock the pattern behind every real system: records that point at other records by id. A loan is not a copy of a book — it's a small object that references one:

let loans = [
    { loanId: 1, bookId: 3, member: "Sanjay", borrowedOn: "2026-08-25T…", returnedOn: null }
];

// "which book is loan 1 about?" — follow the id:
let loan = loans.find(l => l.loanId === 1);
let book = books.find(b => b.id === loan.bookId);   // same find you already use

← Prev: CSS Basics  ·  Back to contents  ·  Next: TypeScript →