What is JavaScript? – The Language of the Web

What is JavaScript? – The Simple Definition

JavaScript is a lightweight, interpreted programming language with first-class functions. It was originally created to run inside web browsers and make web pages interactive. Today it runs everywhere — in browsers, on servers, in mobile apps, on desktop computers, and even on tiny IoT devices.

If a web page were a house, HTML would be the walls and structure, CSS would be the paint and decoration, and JavaScript would be the electricity — it is what makes things actually work. Without JavaScript, web pages would be entirely static documents that look good but cannot respond to anything you do.

// Your very first JavaScript program
console.log("Hello, World!");

JavaScript, HTML, and CSS – The Three Pillars

Every website you visit is built with three technologies working together. Understanding how they divide responsibility is fundamental to understanding JavaScript's role.

Here is a minimal example showing all three working together. The HTML creates a button, the CSS makes it look nice, and JavaScript adds the behavior that responds when you click it.

// JavaScript adds behavior to an HTML button
const button = document.querySelector("#greetBtn");

button.addEventListener("click", function () {
  document.querySelector("#message").textContent = "Hello! Welcome to JavaScript!";
});

Client-Side vs Server-Side JavaScript

Client-side JavaScript runs directly inside the user's web browser. When you visit a website, the browser downloads the HTML, CSS, and JavaScript files from a server, and then executes the JavaScript locally on your machine. This is how JavaScript started and still its most common use. There is no round-trip to the server — interactions happen instantly.

Server-side JavaScript runs on a server using an environment called Node.js. The code runs before the page is sent to the user. A Node.js server can read databases, handle authentication, process form submissions, and generate dynamic content. Thanks to Node.js, JavaScript developers can build both the front end and back end of a web application in a single language.

// Client-side example: manipulate the DOM in the browser
document.title = "Page title changed by JavaScript!";
console.log("Running in the browser:", typeof window !== "undefined");

// Server-side example (Node.js): read a file from disk
// const fs = require("fs");
// const data = fs.readFileSync("data.txt", "utf8");
// console.log(data);

How JavaScript Works – Engines and Execution

Every browser ships with a JavaScript engine — a program that reads your JavaScript code and converts it into machine instructions the computer's CPU can execute. The two most well-known engines are V8 (used in Google Chrome, Edge, and Node.js) and SpiderMonkey (used in Mozilla Firefox).

Modern JavaScript engines use a technique called Just-In-Time (JIT) compilation. Rather than simply interpreting code line by line (which is slow), the engine compiles frequently-executed code into optimised machine code on the fly. This is why JavaScript today is extraordinarily fast — far faster than the JavaScript of the early 2000s.

JavaScript and the ECMAScript Standard

JavaScript is governed by a standard called ECMAScript (abbreviated ES), maintained by a technical committee called TC39 at ECMA International. This standard defines what features the language has, what syntax is valid, and how things should behave. Browser makers implement this standard in their JavaScript engines.

You will often see version names like ES5, ES6 (ES2015), ES2020, or ES2024. Since 2015, a new version of ECMAScript is released every year, steadily adding powerful features like arrow functions, classes, modules, async/await, optional chaining, and much more.

// Modern JavaScript (ES6+) features in action

// Arrow function (ES6)
const greet = (name) => `Hello, ${name}!`;

// Destructuring (ES6)
const { firstName, age } = { firstName: "Alice", age: 28 };

// Optional chaining (ES2020)
const city = user?.address?.city ?? "Unknown";

// Async/Await (ES2017)
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data;
}

console.log(greet("World")); // Hello, World!

JavaScript vs Java – A Common Confusion

Despite their similar names, JavaScript and Java are completely different languages. The name "JavaScript" was a marketing decision made in 1995 to capitalize on the popularity of Java at the time. In reality the two languages share almost nothing in common beyond some superficial syntax.

Interacting with the DOM

One of JavaScript's most important abilities in the browser is manipulating the Document Object Model (DOM). The DOM is a tree-like representation of all the HTML elements on a page. JavaScript can read, change, add, and remove any element or attribute in real time — all without reloading the page.

// Select an element and change its text
const heading = document.querySelector("h1");
heading.textContent = "JavaScript changed this heading!";

// Create a new element and append it to the page
const para = document.createElement("p");
para.textContent = "This paragraph was created by JavaScript.";
para.style.color = "royalblue";
document.body.appendChild(para);

// Listen for a button click
document.querySelector("#myBtn").addEventListener("click", () => {
  alert("Button clicked!");
});

Where Do You Write JavaScript?

JavaScript can be included in a web page in three ways. The recommended approach for any real project is an external file, which keeps your code organised and cacheable by the browser.

// 1. Inline in HTML (avoid for anything complex)
// <button onclick="alert('Hi!')">Click</button>

// 2. Internal script block in HTML
// <script>
//   console.log("Internal script");
// </script>

// 3. External file (best practice) — linked in HTML:
// <script src="app.js" defer></script>

// In app.js:
console.log("External script loaded!");