Introduction to JavaScript: What It Is, How It Works, and Why Every Web Page Needs It

Every time you like a post on Instagram, get a live search suggestion on Google, or watch a video auto-play on YouTube, JavaScript is running behind the scenes. It's not an exaggeration to say JavaScript is the most widely deployed programming language in human history — it runs in every single web browser on the planet, and increasingly on servers, mobile apps, and even smart TVs. If you want to build anything on the web, JavaScript isn't optional. It's the language of the web.

Before JavaScript existed (it was created in just 10 days in 1995 by a developer named Brendan Eich), websites could only display fixed content. If you filled in a form wrong, the entire page had to reload just to tell you the email field was empty. JavaScript solved that problem by giving browsers a built-in programming language — one that could react to what users do, change content on the fly, and communicate with servers without ever refreshing the page. It turned the web from a library of documents into a platform for full applications.

By the end of this article you'll understand exactly what JavaScript is and where it lives, how to write and run your first JavaScript program, what variables, data types, and functions are, and how JavaScript actually makes a web page respond to a user. You won't just memorise syntax — you'll understand the thinking behind it, so every concept sticks.

What JavaScript Actually Is — and Where It Lives

JavaScript is a programming language, which just means it's a set of instructions you write that a computer can understand and execute. What makes JavaScript unique is WHERE it runs: inside the browser. Chrome, Firefox, Safari, and Edge all have a JavaScript engine built right in. Chrome uses one called V8, Firefox uses SpiderMonkey. These engines read your JavaScript code and run it instantly, right on the user's machine — no installation needed, no compilation step, no waiting.

This is called a 'client-side' language, because the code runs on the client (the user's computer) rather than on a server somewhere else. That's what makes JavaScript feel so fast and reactive — when you type in a search box and suggestions appear instantly, no request went to a server. JavaScript handled everything locally in milliseconds.

JavaScript also has a second home now: Node.js, created in 2009, lets JavaScript run on servers too. So the same language you use to make a button change colour can also power a full backend API. That's a huge deal — it means you can become a full-stack developer knowing just one language. But for now, let's focus on JavaScript in the browser, which is where every beginner should start.

// This is a JavaScript comment — the browser ignores anything after //
// Comments are notes for humans, not instructions for the computer

// console.log() prints a message to the browser's developer console
// Think of it as JavaScript's way of talking back to you while you're building
console.log("Hello! JavaScript is running.");

// You can print numbers too — no quotes needed for numbers
console.log(42);

// You can even do maths right inside console.log
// JavaScript evaluates the expression first, then prints the result
console.log(10 + 5);  // Prints 15, not the string "10 + 5"

// Let's make it personal
let visitorName = "Alex";  // We're storing the name "Alex" in a labelled box called visitorName
console.log("Welcome to the site, " + visitorName + "!");

Variables and Data Types — Teaching JavaScript to Remember Things

A variable is just a labelled storage box. You put a value in the box, give the box a name, and then use that name whenever you need the value again. If the value changes later, you update the box — you don't rewrite your entire program.

In modern JavaScript there are two keywords for creating variables: let and const. Use let when the value will change over time (like a score in a game). Use const when the value should never change (like the number of days in a week). There's also an older keyword var — you'll see it in older code, but avoid it in new code because it has confusing behaviour we'll cover in the gotchas.

JavaScript handles several types of data. A string is text (always wrapped in quotes). A number is any numeric value — integers and decimals use the same type. A boolean is simply true or false, like a light switch. null means 'intentionally empty'. undefined means a variable was declared but never given a value. Understanding the difference between null and undefined trips up a lot of beginners — null is a deliberate empty value you set, undefined is JavaScript saying 'you never told me what this is'.

// --- STRINGS: any text, wrapped in quotes ---
let playerName = "Jordan";           // double quotes work
let welcomeMessage = 'Hello there';  // single quotes also work
let greeting = `Hi, ${playerName}!`; // backticks let you embed variables directly — called a template literal

console.log(greeting); // Prints: Hi, Jordan!

// --- NUMBERS: integers and decimals, same type ---
let playerScore = 0;        // starts at zero
let itemPrice = 4.99;       // decimals are fine
let maxLives = 3;

console.log(playerScore + 10); // Prints: 10 — JavaScript adds the number 10 to 0

// --- BOOLEANS: only ever true or false ---
let isLoggedIn = false;   // user hasn't signed in yet
let hasWonGame = false;

console.log(isLoggedIn);  // Prints: false

// --- CONST: a value that should never be reassigned ---
const DAYS_IN_A_WEEK = 7;  // convention: uppercase names for true constants
const SITE_NAME = "TheCodeForge";

console.log(`Welcome to ${SITE_NAME}. You have ${DAYS_IN_A_WEEK} days to complete the challenge.`);

// --- NULL vs UNDEFINED ---
let selectedItem = null;     // we intentionally set this to 'nothing' — the user hasn't picked yet
let shippingAddress;         // declared but no value given — JavaScript makes this undefined automatically

console.log(selectedItem);   // Prints: null
console.log(shippingAddress); // Prints: undefined

Functions — Writing Instructions Once, Using Them Anywhere

A function is a named, reusable block of instructions. Think of it like a recipe card. You write the recipe once — 'to make a grilled cheese: get bread, add cheese, apply heat' — and then any time anyone wants a grilled cheese, you just say 'make grilled cheese' instead of re-explaining every step. Functions work exactly the same way in code.

You define a function using the function keyword, give it a name, and put the instructions inside curly braces {}. A function can accept inputs called parameters (the ingredients) and can send back a result using return (the finished dish). Calling a function means actually running it — you do that by writing the function's name followed by parentheses.

Functions are one of the most powerful ideas in all of programming because they let you avoid repeating yourself. If you need to change how something works, you change it in ONE place — the function — and every part of your program that calls it gets the update automatically. The alternative, copy-pasting the same logic in 20 places, is a maintenance nightmare that every experienced developer has painful memories of.

// --- DEFINING a function ---
// 'function' keyword, then a name, then () for inputs, then {} for the instructions
function greetUser(userName) {
  // userName is a parameter — a placeholder for whatever name gets passed in
  let message = `Hey ${userName}, welcome back!`;
  return message;  // return sends the result back to wherever the function was called
}

// --- CALLING the function ---
// We pass in a real value (called an argument) and store the returned result
let greetingForSarah = greetUser("Sarah");
let greetingForMarcus = greetUser("Marcus");

console.log(greetingForSarah);  // Prints: Hey Sarah, welcome back!
console.log(greetingForMarcus); // Prints: Hey Marcus, welcome back!
// The function ran twice, with different inputs each time — that's the power of reuse

// --- A FUNCTION THAT DOES MATHS ---
function calculateDiscountedPrice(originalPrice, discountPercent) {
  let discountAmount = (originalPrice * discountPercent) / 100;
  let finalPrice = originalPrice - discountAmount;
  return finalPrice;
}

let shirtPrice = calculateDiscountedPrice(50, 20);  // 20% off £50
let laptopPrice = calculateDiscountedPrice(1200, 15); // 15% off £1200

console.log(`Shirt after discount: £${shirtPrice}`);   // Prints: Shirt after discount: £40
console.log(`Laptop after discount: £${laptopPrice}`); // Prints: Laptop after discount: £1020

// --- ARROW FUNCTION (modern shorthand, same idea) ---
// For simple one-line functions, developers often use this shorter syntax
const doubleTheScore = (score) => score * 2;

console.log(doubleTheScore(75));  // Prints: 150

Making Web Pages React — JavaScript in the Browser with the DOM

So far we've written JavaScript that just talks to the console. But the whole point of JavaScript on the web is making pages react to users. To do that, JavaScript uses the DOM — the Document Object Model. Don't let the jargon scare you. The DOM is simply JavaScript's map of your HTML page.

When a browser loads your HTML, it reads every element — every heading, button, paragraph, image — and builds a tree-shaped map of them in memory. JavaScript can then reach into that map, find any element, change its text, change its style, or tell it to listen for user actions like clicks and keyboard presses.

You find an element using document.getElementById() or document.querySelector(). Once you have the element, you can change what it displays with .textContent or .innerHTML. You make it respond to a click by adding an event listener — essentially saying 'when this button is clicked, run this function'. This is the core loop of ALL interactive web development: find an element, listen for an action, change something in response.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript DOM Example</title>
  <style>
    body { font-family: sans-serif; padding: 40px; }
    #score-display { font-size: 2rem; font-weight: bold; color: #2c3e50; }
    button { padding: 12px 24px; font-size: 1rem; cursor: pointer; background: #3498db; color: white; border: none; border-radius: 6px; }
    button:hover { background: #2980b9; }
  </style>
</head>
<body>

  <h1>Click Counter</h1>
  <!-- This paragraph shows the score. Its id lets JavaScript find it. -->
  <p id="score-display">Score: 0</p>

  <!-- When this button is clicked, the addPoint function will run -->
  <button id="add-point-button">+ Add Point</button>

  <script>
    // Step 1: Find the elements we want to work with
    // getElementById searches the DOM for an element with this exact id
    const scoreDisplay = document.getElementById("score-display");
    const addPointButton = document.getElementById("add-point-button");

    // Step 2: Set up our data
    let currentScore = 0;  // this variable tracks the score between clicks

    // Step 3: Define what happens when the button is clicked
    function addPoint() {
      currentScore = currentScore + 1;  // increase the score by 1

      // Step 4: Update the page to show the new score
      // textContent changes what text the element displays
      scoreDisplay.textContent = `Score: ${currentScore}`;

      // Bonus: change colour at certain milestones
      if (currentScore >= 10) {
        scoreDisplay.style.color = "#e74c3c";  // red at 10+
      }
    }

    // Step 5: Attach the function to the button's 'click' event
    // 'addEventListener' says: whenever THIS element fires THIS event, run THIS function
    addPointButton.addEventListener("click", addPoint);
  </script>

</body>
</html>