JavaScript

Introduction

What is JavaScript?

JavaScript is a lightweight, interpreted, multi-paradigm programming language that runs natively in every web browser. Unlike HTML (structure) and CSS (style), JavaScript adds behaviour — it can respond to user events, modify the page after it loads, communicate with servers, and build entire applications.

Created in just 10 days in 1995 by Brendan Eich at Netscape, JavaScript has evolved from a simple scripting language into one of the most widely used programming languages on Earth — running in browsers, servers (Node.js), mobile apps, IoT devices, and even space systems.

History

The Evolution of JavaScript

1995

Birth of JavaScript

Brendan Eich creates Mocha (renamed LiveScript, then JavaScript) at Netscape in 10 days. Designed to let web pages respond to clicks and validate forms client-side.

1997

ECMAScript Standard (ES1)

JavaScript is standardised as ECMAScript by ECMA International, enabling cross-browser compatibility.

ES1

2005

Ajax Revolution

Ajax enables asynchronous requests. Gmail and Google Maps prove that JS can build rich, desktop-like experiences without full page reloads.

XMLHttpRequest

2009

Node.js — JavaScript on the Server

Ryan Dahl releases Node.js, bringing JavaScript to the backend. One language can now power both the browser and the server.

Node.jsV8 Engine

2015

ES6 / ES2015 — The Modern Era

The biggest update to JavaScript ever. Introduces arrow functions, classes, template literals, destructuring, Promises, let/const, and modules.

Arrow FunctionsPromisesClasses

2017

ES8 — async / await

async/await syntax makes asynchronous code read like synchronous code, eliminating "callback hell".

async/await

2024+

JavaScript Today

JavaScript powers React, Vue, Angular, Next.js, React Native, and more. It's the most-used language on GitHub for over a decade.

ReactTypeScript

Core Concepts

Key Language Features

01

Variables & Types

let / const (block-scoped), var (function-scoped). Dynamic typing: strings, numbers, booleans, null, undefined, objects, arrays, symbols.

02

Functions

First-class citizens. Function declarations, expressions, arrow functions (=>), higher-order functions (map/filter/reduce).

03

DOM Manipulation

Document Object Model — a live tree of HTML elements. JS can read, modify, add, or remove any node.

04

Events

addEventListener() attaches handlers to any DOM element. Events: click, mouseover, keydown, submit, load, input.

05

Promises & Async

Asynchronous patterns for network requests. Promises, .then().catch(), and async/await for readable async code.

06

Fetch API

Native browser API for HTTP requests. fetch(url).then(r => r.json()) — replaces XMLHttpRequest.

Code Examples

Modern JavaScript Syntax

Modern JavaScript — ES6+ FeaturesES2015+
// Variables — let and const
const name = "Karun";          // immutable binding
let   score = 0;              // mutable, block-scoped

// Arrow Functions & Template Literals
const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));   // → "Hello, World!"

// Destructuring
const [first, second, ...rest] = [10, 20, 30, 40];
const { title, year = 2024 } = { title: "JavaScript" };

// Spread / Rest Operators
const merged = [...[1,2], ...[3,4]];  // [1,2,3,4]
const sum = (...nums) => nums.reduce((a,b) => a+b, 0);

// Async / Await
async function getUser(id) {
  try {
    const res  = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("Fetch failed:", err);
  }
}

Interactive — Live Console

JavaScript REPL Console

Type any JavaScript expression and press Enter or click Run. Try Math.random(), [1,2,3].map(x => x*2), or new Date().toLocaleString():

Live REPL — real JavaScript, real results

JavaScript Console

// JavaScript Console — type expressions below
// Try: typeof "hello" | [1,2,3].reverse() | Object.keys({a:1})

›

Interactive Demo — DOM Manipulation

DOM Manipulation Live

The Document Object Model is a live, tree-shaped representation of your HTML page. JavaScript can query, modify, create, or delete any node. Click the buttons below to see DOM operations in real time:

Click buttons to see DOM mutations live

<p> Hello, I am a DOM element.

<p> Click the buttons below to manipulate me.

<p> I can be styled, moved, or deleted by JavaScript.

// DOM output will appear here

Demo — Strings, Events & Timers

Typing Speed Test

This demo uses string comparison, Date.now() for timing, setInterval for countdown, and real-time DOM updates:

Type the text below — speed and accuracy tracked live

0WPM

100Accuracy %

60Seconds Left

0Errors

Demo — Regular Expressions

Password Strength Analyser

This demo uses JavaScript Regular Expressions to test password criteria, scoring algorithm to calculate entropy, and live DOM updates:

Type a password — strength calculated with regex

👁

Enter a password above

○At least 8 characters long

○Contains uppercase letter (A–Z)

○Contains lowercase letter (a–z)

○Contains a number (0–9)

○Contains special character (!@#$%^&*)

Estimated crack time: —

Demo — Async/Await Visualiser

Async / Await Task Runner

This visualiser shows how async/await and Promises work. Multiple asynchronous tasks execute concurrently with random delays:

Click Run to see async tasks execute in parallel

Task 1 — Fetch user profile from API

Task 2 — Query MySQL database for orders

Task 3 — Send email notification

Task 4 — Upload image to storage

Task 5 — Write session to Redis cache

// Press Run to simulate async operations

Reference

JavaScript Data Types

Type	Example	typeof Result	Notes
`string`	"Hello"	"string"	Unicode text, immutable
`number`	42 / 3.14 / NaN	"number"	Both integers and floats; IEEE 754
`boolean`	true / false	"boolean"	Logical truthy/falsy
`null`	null	"object" ⚠️	Intentional absence of a value
`undefined`	undefined	"undefined"	Variable declared but not assigned
`object`	{name: "Karun"}	"object"	Key-value pairs, mutable
`array`	[1, 2, 3]	"object" ⚠️	Ordered list; use Array.isArray()
`function`	() => {}	"function"	First-class; can be passed/returned