JavaScript Tutorial

JavaScript is the programming language of the web. It makes pages interactive: a menu that opens, a form that checks your input, a chart that updates, or a game that runs in…

You do not need to install anything big to start JavaScript. Every browser can already run it. Here are the three easy ways. 1. The browser console (quickest) Open Chrome, Firefox or…

Let us write a complete Hello World program in JavaScript and understand each line. How it works The <script> tag tells the browser that the code inside is JavaScript. console.log() prints a…

JavaScript can show output in four ways. Method Where the output goes console.log() The browser console. Best for testing alert() A pop-up box element.innerHTML / textContent Inside an HTML element on the…

Syntax is the set of rules for writing correct JavaScript. A JavaScript program is a list of statements, and each statement is an instruction for the computer. Rules to remember Semicolons: a…

Learn how to use single-line and multi-line JavaScript comments to explain code, disable lines, and improve readability.

Learn how to use the JavaScript Console for debugging and inspecting code using console.log() and others console methods.

A variable is a named box that stores a value. You can use the name later to read or change the value. let, const and var Keyword Can change value? Scope Use…

Scope decides where a variable can be used. A variable made in one place may not be visible in another place. Global and local scope A variable declared outside every function is…

Learn about JavaScript data types including types like strings, numbers, and booleans, as well as objects and arrays, with examples.

Learn about JavaScript Type Conversion with examples of implicit and explicit type conversion using String(), Number(), Boolean() etc

Operators do work on values. For example + adds two numbers. Arithmetic operators Operator Meaning Example + Add 5 + 2 is 7 – Subtract 5 – 2 is 3 * Multiply…

A string is text. Write it inside single quotes, double quotes or backticks. Template literals Backticks allow a variable or any expression inside ${ }, and strings on many lines. Common string…

JavaScript has one number type for whole numbers and decimals. Special values Decimal numbers and rounding Computers store decimals in binary, so some sums are not exact. toFixed() returns a string. Use…

Conditional statements let your code take decisions: run one block if a condition is true, and another block if it is not. if, else if and else JavaScript checks the conditions from…

A loop repeats a block of code many times, so you do not write the same line again and again. for loop The for has three parts: start (let i = 1),…

A function is a block of code with a name, that you can run many times. Functions make code shorter and easier to reuse. Function declaration name is a parameter, the value…

Arrow functions are a shorter way to write functions. They came with ES6 (2015) and are used everywhere in modern JavaScript. From a normal function to an arrow function Syntax rules Case…

An array stores many values in one variable, in order. Each item has an index that starts from 0. Add and remove items Method What it does push(x) Adds at the end…

Modern JavaScript has powerful array methods that take a function (a callback) and run it for each item. They replace many loops. map: change every item map() returns a new array of…

An object stores related data as key: value pairs. The keys are called properties. Change, add and delete properties Even if the object is a const, you can change its properties. Methods…

A constructor function is a function used as a blueprint to create many similar objects. By habit its name starts with a capital letter, and you call it with the new keyword….

this is a special keyword that points to an object. Which object depends on how the function is called, and not on where it is written (except for arrow functions). Where What…

A class is a blueprint to create objects. It is the modern, cleaner way to write what constructor functions do. constructor() runs once when you use new. Methods are written without the…

ES6 (2015) and later versions added features that make JavaScript shorter and easier to read. These are the ones you will use every day. Destructuring arrays Destructuring objects You can also destructure…

JSON (JavaScript Object Notation) is a text format to store and send data. It looks like a JavaScript object. Almost every web API uses it. Rules of JSON Keys must be in…

The Date object stores a date and time. Get parts of a date The getUTC… methods use UTC time. The normal ones (getFullYear(), getMonth(), getDate(), getDay(), getHours()) use the visitor’s local time…

Errors happen: a wrong input, a missing file, a lost network. If an error is not handled, the script stops. Error handling lets the program continue with a good message. try, catch…

An event is something that happens on a web page: the visitor clicks a button, types in a field, moves the mouse, or the page finishes loading. JavaScript can listen for events…

When a browser loads a page, it builds a tree of objects from the HTML. This tree is the DOM (Document Object Model). JavaScript uses the DOM to read and change the…

Besides changing existing elements, JavaScript can create new ones and add or remove them on the page. Create and add an element Method What it does parent.append(el) Adds at the end parent.prepend(el)…

addEventListener() attaches an event handler to an element, without replacing the handlers that are already there. Each click on the button adds 1 to the number on the page. After 3 clicks,…

Form validation means checking what the visitor typed before it is sent. JavaScript gives quick feedback, so the visitor can fix a mistake at once. Read the value with input.value, and clean…

JavaScript runs one line at a time, but some tasks take time, like a timer or a request to a server. Asynchronous code lets the program continue while it waits. setTimeout and…

async and await let you write asynchronous code that reads like normal, top to bottom code. They work on top of promises. An async function always returns a promise. await (inside an…

Web storage lets you save small pieces of data in the visitor’s browser. There are two kinds. Storage Lives until localStorage Deleted by the user or by your code. It stays after…

A module is a JavaScript file that shares some of its code with other files. Modules keep big programs organised, and avoid clashes of names. Named exports Default export A file can…

A regular expression (regex) is a pattern to find or check text. In JavaScript it is written between slashes: /pattern/flags. Flags Flag Meaning i Ignore upper and lower case g Find all…

Learning JavaScript is a journey — and no matter how experienced you are, some basics are always worth revisiting. Even seasoned developers look things up, and having a quick reference nearby makes…