⚡beginner

JavaScript Basics — Making Pages Interactive

Learn variables, data types, functions, and how to make your web pages respond to user actions.

What is JavaScript?

JavaScript is the programming language of the web. HTML gives structure, CSS gives style, and JavaScript gives behavior. It makes things happen — clicking buttons, showing/hiding content, fetching data, animations, games, and apps. Every interactive website you use — Instagram, YouTube, Google — runs JavaScript.

Variables & Data Types

javascript

// Variables — containers that hold values
let name = "Ishaan";       // text (string)
let age = 14;               // number
let isCoder = true;         // boolean (true/false)
let hobbies = ["coding", "gaming", "music"]; // array (list)

// const = won't change, let = might change
const PI = 3.14159;
let score = 0;
score = score + 10; // now it's 10

// Template literals — embed variables in text
console.log(`Hi, I'm ${name} and I'm ${age} years old!`);

Functions — Reusable Blocks of Code

javascript

// A function is a recipe you can use again and again
function greet(name) {
  return `Hello, ${name}! Welcome to Lumora.`;
}

console.log(greet("Ishaan")); // "Hello, Ishaan! Welcome to Lumora."
console.log(greet("Priya"));  // "Hello, Priya! Welcome to Lumora."

// Arrow function (shorter syntax)
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

// Function that does something on the page
function changeTitle() {
  document.getElementById("title").innerText = "You clicked!";
}

Conditions — Making Decisions

JavaScript can make decisions using if/else: • if (condition) — run this code if true • else if (condition) — check another condition • else — run this if nothing else matched Comparison operators: === (equal), !== (not equal), > (greater), < (less), >= (greater or equal), <= (less or equal)

If/Else in Action

javascript

let score = 85;

if (score >= 90) {
  console.log("A — Excellent!");
} else if (score >= 80) {
  console.log("B — Great job!");
} else if (score >= 70) {
  console.log("C — Not bad!");
} else {
  console.log("Keep practicing!");
}

// Output: "B — Great job!"

Pro Tip

Use === instead of == in JavaScript. The triple equals checks both value AND type ("5" === 5 is false), while double equals does weird conversions ("5" == 5 is true). Triple equals is safer.

Try It Yourself

Write a function called canRide(height) that takes a person's height in cm and returns: "Welcome aboard!" if they're 120cm or taller, and "Sorry, you need to be at least 120cm" otherwise. Test it with different heights.

JavaScript Arrays — Working with Lists

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free