JavaScript Introduction

4 minute read

JavaScript is the programming language of the web. HTML gives a page its structure, CSS gives it style — and JavaScript gives it behavior. Clicks, animations, fetching data, form validation, real-time updates — all of that runs on JavaScript.

JavaScript Tutorial

Why JavaScript Matters

JavaScript is the only programming language that runs natively in every web browser. Thanks to Node.js, the same language now also powers servers, mobile apps, desktop apps, build tools, and even IoT devices. Learning JavaScript pays off everywhere.

Where It Runs Examples
Browsers Interactive pages, SPAs, animations
Servers Node.js, Deno, Bun
Mobile React Native, Ionic, Capacitor
Desktop Electron (VS Code, Slack, Discord)
Build tools Vite, Webpack, esbuild, Rollup
Edge Cloudflare Workers, Vercel Edge
Games Phaser, PixiJS, browser games

What JavaScript Can Do on a Page

A handful of one-line examples to show its range:

// Change page content
document.getElementById("title").textContent = "Hello!";

// React to user clicks
button.addEventListener("click", () => alert("Clicked!"));

// Fetch data from an API
const data = await fetch("/api/users").then(r => r.json());

// Animate an element
element.style.transform = "translateY(-10px)";

// Validate a form before it submits
if (!email.includes("@")) alert("Invalid email");

// Store data in the browser
localStorage.setItem("theme", "dark");

A Very Short History

JavaScript was created in 10 days in May 1995 by Brendan Eich at Netscape. It was rushed, controversial, and almost named “LiveScript” before marketing piggy-backed on the popularity of Java.

Year Milestone
1995 Brendan Eich creates JavaScript at Netscape
1997 Standardized as ECMAScript (ES1) by Ecma International
2009 Node.js released — JavaScript runs on servers
2015 ES6/ES2015 — let, const, arrow functions, classes, modules, promises
2016+ Yearly releases (ES2016 → ES2025+)
Today The most-used language on GitHub for several years running

Note: When people say “modern JavaScript”, they mean ES6 (2015) and later. This tutorial uses modern syntax throughout.

JavaScript vs Java — Not Related

Despite the name, JavaScript and Java are completely different languages. Marketing in 1995 borrowed the “Java” brand; nothing more.

  Java JavaScript
Type system Strongly, statically typed Dynamically typed
Execution Compiled to JVM bytecode Interpreted / JIT-compiled
Runs on JVM (server, Android) Browsers, Node.js, Deno
OOP Class-based Prototype-based (also classes since ES6)
Concurrency Threads Single-threaded + event loop

Tip: Think of the naming overlap like “car” vs “carpet”. Same first syllable, totally different things.

Your First JavaScript Program

Create a file hello.html and paste this in:

<!DOCTYPE html>
<html>
<head>
    <title>My First JS</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <button id="btn">Click me</button>

    <script>
        document.getElementById("btn").addEventListener("click", () => {
            document.getElementById("greeting").textContent = "Hello, JavaScript!";
        });
    </script>
</body>
</html>

Open it in a browser, click the button — the heading updates. That’s JavaScript reading the DOM, listening for an event, and changing the page.

You can also run JavaScript without any HTML at all. Open Chrome (or any browser), press F12 to open DevTools, click the Console tab, and try:

2 + 2
// Output: 4

"hello".toUpperCase()
// Output: "HELLO"

[1, 2, 3].map(n => n * n)
// Output: [1, 4, 9]

That’s a real JavaScript engine. No install required.

How JavaScript Actually Runs

Modern browsers and Node.js use highly optimised engines that compile your code at runtime. The flow looks like this:

   You write JS source code
            │
            ▼
   Engine parses it (V8, SpiderMonkey, JavaScriptCore)
            │
            ▼
   Compiles to bytecode + JIT-optimises hot paths
            │
            ▼
   Executes on a single thread + Event Loop
            │
            ▼
   Talks to DOM / Network / Filesystem / etc.
Engine Used By
V8 Chrome, Edge, Node.js, Deno, Cloudflare Workers
SpiderMonkey Firefox
JavaScriptCore Safari, Bun
Chakra (legacy) Old Edge / Internet Explorer

Browser vs Node — Same Language, Different APIs

JavaScript is one language. What changes between environments is the APIs it has access to.

┌──────────────────────────────┐    ┌──────────────────────────────┐
│          BROWSER             │    │           NODE.JS            │
│ ┌──────────────────────────┐ │    │ ┌──────────────────────────┐ │
│ │ DOM (document, window)   │ │    │ │ fs   (file system)       │ │
│ │ Events (click, scroll)   │ │    │ │ http (servers, clients)  │ │
│ │ fetch, XHR               │ │    │ │ path, os, process        │ │
│ │ localStorage, cookies    │ │    │ │ child_process, streams   │ │
│ └──────────────────────────┘ │    │ └──────────────────────────┘ │
└──────────────────────────────┘    └──────────────────────────────┘
        same language       ↔        different built-in modules

What You’ll Learn in This Tutorial

This 50-chapter tutorial covers everything from your very first variable to advanced topics like closures, the event loop, promises, classes, modules, regex, and generators. By the end you’ll be able to:

  • Build interactive websites with vanilla JavaScript
  • Handle forms, events, and user input
  • Fetch and display data from REST APIs
  • Write modern, modular, async code
  • Understand the language deeply enough to pick up React, Vue, or Node with ease

Warning: Don’t skip the early chapters even if they look easy. Concepts like scope, hoisting, and this are built on the basics, and the deeper chapters assume those basics are solid.

What’s Next?

You’ve met JavaScript. Now let’s see where it lives in your web pages — inline, in the <head>, at the end of <body>, or as an external file — and how loading attributes like defer and async affect when it runs.

Next: JavaScript Where To →

Updated:

You may also enjoy