Loading lesson path
JavaScript
Go deeper into object behavior, classes, callbacks, closures, async flows, and modern JavaScript patterns.
Objects Study Path Learn Objects in the Right Order: First the idea Then how to make them Then how to use them Step 1 Beginner Objects Objects are variables that can store both values and functions O…
Temporal Study Path Learn JavaScript Temporal in the Right Order. What is JavaScript Temporal? Temporal vs JavaScript Date Temporal Duration Temporal Instant Temporal PlainDateTime Temporal PlainDate…
JavaScript loops repeat executing a block of code a number of times. Loops are fundamental for tasks involving: Iteration over values Iteration over data structures Performing an action multiple time…
Advanced Functions Study Path These chapters are best after you understand basic functions (calling, parameters, return values, expressions, and arrows). If you are not comfortable with JavaScript fu…
JavaScript Objects
JavaScript Temporal Intro
An Iterable is an Iterable Object Iterable can be iterated over with for...of loops The for...of Loop The JavaScript for..of statement loops through the elements of an iterable object. Syntax for (va…
JavaScript Function Definitions
Properties are key:value Pairs A JavaScript object is a collection of properties Properties can be changed, added, and deleted. Accessing JavaScript Properties You can access object properties in the…
JavaScript Temporal vs Date
The Iterator Object An Iterator is an object that provides a standard way to access elements sequentially. An Iterator must adheres to the Iterator Protocol : It must have a next() method. The next()…
"I will call back later!" A JavaScript callback is a function passed as an argument to another function, which is then executed (or "called back") at a later point in time to complete a specific task…
JavaScript Object Methods
The Temporal.Duration Object The Temporal.Duration object represents a length of time. Example: 7 days and 1 hour. The Temporal.Duration object includes these properties years, months, weeks, days, h…
A JavaScript Function can only return one value. A JavaScript Generator can return multiple values, one by one. A JavaScript Generator can yield a stream of data. A JavaScript Generator can be paused…
The JavaScript this Keyword
this in Objects The this keyword refers to an object. In JavaScript, this is used to access the object that is calling a method. this in an Object Method When used inside an object method, this refer…
The Temporal.Instant Object The Temporal.Instant object represents an exact moment in UTC time. It has NO time zone and NO calendar. It stores nanoseconds since January 1, 1970 00:00:00 (Unix epoch).…
The JavaScript call() Method The call() method can be used to call a function with a specific this. The call() method lets an object use a method belonging to another object. In this way, the same me…
How to Display JavaScript Objects? Displaying a JavaScript object will output [object Object]. Example // Create an Object const person = { name: "John", age: 30, city: "New York" }; let text = perso…
The Temporal.PlainDateTime Object The Temporal.PlainDateTime object is a pure date and time object. It represents a calendar date and a wall-clock time with no time zone. Example: 2026-05-07T14:30:00…
Method Reuse The apply() method lets you write a method that can be used on different objects. The apply() method is used to call a function with a specific this. The apply() method is similar to cal…
Object Constructor Functions Sometimes we need to create many objects of the same type. To create an object type we use an object constructor function. It is considered good practice to name construc…
The Temporal.PlainDate Object The Temporal.PlainDate object represents a calendar date without a time. A Temporal.PlainDate is typically in ISO 8601 format ( 2026-05-01 ). It is easier to use and saf…
Method Borrowing Like with call() and apply(), the bind() method can borrow a method from another object. Unlike call() and apply(), the bind() method does not run the function immediately. Instead,…
Temporal.PlainYearMonth The Temporal.PlainYearMonth object represents the year and month of an ISO 8601 calendar date, without a day or a time zone (e.g 2026-05 ). The Temporal.PlainYearMonth Object…
Immediately Invoked Function Expressions An IIFE is short for an Immediately Invoked Function Expression. An IIFE is a function that invokes itself when defined. What Is an IIFE? Normally, a function…
Temporal.PlainMonthDay The Temporal.PlainMonthDay() object represents the month and day of an ISO 8601 calendar date, without a year or a time zone like (e.g. 05-17 ). The Temporal.PlainMonthDay Obje…
JavaScript variables can belong to: The local scope The global scope Global variables can be made local (private) with closures. Closures make it possible for a function to have "private" variables.…
The PlainTime Object The Temporal.PlainTime object is a time object without a date. It represents an ISO 8601 wall-clock time without a date or time zone. Example: 10:30:00. It is useful for opening…
Function Object Methods & Properties Revised December 2025 Name Description apply() Calls a function with a specified this value and an array of arguments bind() Returns a function with a specified t…
Handle Time Zones Correctly The Temporal.ZonedDateTime object represents a date and time with a time zone. It is the safest way to handle international date and time calculations. It prevents common…
Advanced Functions Quiz
The Temporal.Now Object The Temporal.Now object provides 5 methods to get the system's date and time. One method for each date object: Temporal.Now.instant() Temporal.Now.plainDateISO() Temporal.Now.…
Advanced Learning Path Step 1 Advanced Object Definitions Using an Object Literal Using the new Keyword Using an Object Constructor Using Object.assign() Using Object.create() Using Object.fromEntrie…
Add and Subtract Dates Safely The Temporal API provides methods for easy and reliable date and time arithmetic. Add and subtract days, months, years, and time without modifying the original value. Pe…
Methods for Defining JavaScript Objects Using an Object Literal Using the new Keyword Using an Object Constructor Using Object.assign() Using Object.create() Using Object.fromEntries() Using an Objec…
Calculate Temporal Differences You calculate the difference between two temporal dates using since() or until(). The since() method is the inverse of the until() method. The until() method is the inv…
this in an Object Method When used in an object method, this refers to the object. In the example on top of this page, this refers to the person object. Because the fullName method is a method of the…
Temporal Conversion Rules The table below shows how Temporal types can be converted. From Plain Date Plain Time Plain DateTime Zoned DateTime Instant PlainDate No Yes No No PlainTime No No No No Plai…
General Methods // Copies properties from a source object to a target object Object.assign(target, source) // Creates an object from an existing object Object.create(object) // Returns an array of th…
Temporal dates can be serialized as strings in different ways: Name Description ISO 8601 International standard RFC 3339 Internet standard RFC 9557 Temporal standard toString() JavaScript method toLo…
JavaScript Getters and Setters Getters and setters allow you to define Object Accessors (Computed Properties). JavaScript Getter (The get Keyword) This example uses a lang property to get the value o…
Temporal is a powerful API, but it can be confusing at first. Remember to use the correct Temporal type Avoid implicit conversions Always handle time zones correctly Use compare() instead of < and >…
Property Management Methods // Adding or changing an object property Object.defineProperty(object, property, descriptor) // Adding or changing object properties Object.defineProperties(object, descri…
HowTo Replace Date JavaScript Temporal was designed to replace the old Date object. For new JavaScript projects, Temporal is the modern choice. Temporal provides safer and clearer alternatives to Dat…
Object Protection Methods // Prevents re-assignment const car = {type:"Fiat", model:"500", color:"white"}; // Prevents adding object properties Object.preventExtensions(object) // Returns true if pro…
Temporal Objects Temporal objects are the core part of the Temporal API which aims to replace the old Date object. Object Description Temporal.Duration Length of time (e.g days, hours, minutes) Tempo…
Prototype Inheritance All JavaScript objects inherit properties and methods from a prototype: Date objects inherit from Date.prototype Array objects inherit from Array.prototype The Object.prototype…
Object Methods and Properties Revised February 2026 Name Description assign() Copies properties from a source object to a target object constructor Returns the function that created an object's proto…
ECMAScript 2015, also known as ES6, introduced JavaScript Classes. JavaScript Classes are templates for JavaScript Objects. JavaScript Class Syntax Use the keyword class to create a class. Always add…
Class Inheritance To create a class inheritance, use the extends keyword. A class created with a class inheritance inherits all the methods from another class: Example Create a class named "Model" wh…
Static class methods are defined on the class itself. You cannot call a static method on an object, only on an object class. Example class Car { constructor(name) { this.name = name; } static hello()…
Asynchronous Study Path Learn Asynchronous JavaScript in the Right Order: First: Async Programming Then: Async Timeouts Then: Async Callbacks Then: Async Promises Then: Async Await Then: Async Fetch…
Asynchronous Programming
The setTimeout() Method The setTimeout() method schedules a function to run after a delay in milliseconds. It is an async operation used to delay code execution without freezing the browser. Waiting…
"I will call back later!" A callback is a function that runs later. A callback runs after something has finished. The name "callback" stems from the idea that the function will "call you back" later…
"I Promise a Result!" JavaScript Promises were created to make asynchronous JavaScript easier to use. A Promise object represents the completion or failure of an asynchronous operation. A Promise can…
async and await make promises easier You still use promises, but you write the code like normal step by step code. async makes a function return a Promise await makes a function wait for a Promise Wh…
fetch() is the modern way to request data from a server fetch() is asynchronous and returns a promise Modern apps use async code to get data fetch() is the most common example fetch Returns a Promise…
Asynchronous Bugs Async bugs are difficult because the code runs later. This chapter shows practical ways to debug fetch(), promises, async and await. Async debugging is about finding where the code…
This page is a reference for JavaScript promises. Use it to look up promise methods and common patterns. If you want to learn promises step by step, read JavaScript Promises. The Promise Object The P…
JavaScript Modules
The Export Keyword A module uses the export keyword to share values with other files. A module can have many named exports. A module can (optionally) have one default export. Named Exports A named ex…
Import You can import modules in two ways, based on if they are named exports or default exports. Named imports are constructed using curly braces: import { name, age } from "./person.js"; Default ex…
The Module Namespace Object When you use the syntax: import * as name from " module "; JavaScript creates a module namespace object. This is an immutable object that contains all the exported binding…
JavaScript Dynamic Import Dynamic Import uses the syntax: import( module ); Dynamic Import was introduced in ECMAScript 2020 Dynamic Import is a way to load JavaScript modules at runtime, rather than…
Metaprogramming Metaprogramming refers to a number of ways a program can manipulate itself Modify objects at runtime Inspect objects at runtime Control objects at runtime Intercept running operations…
The Reflect Object Reflect is a object with methods for low-level operations on JavaScript objects. With the Reflect object you can get, set, delete, and check object properties in a consistent way.…
JavaScript Proxy
Complete Reflect Reference Revised December 2025 Method Description Reflect.apply() Call a function Reflect.construct() Create object (like new) Reflect.defineProperty() Define a property Reflect.del…
Typed Arrays Typed arrays was designed for handling Binary Data. Unlike arrays, typed arrays are buffers of Fixed Length. Typed arrays store elements of Fixed Types like 8-bit integers or 32-bit numb…
The from() Method The from() method creates a new typed array from any iterable object: Examples Create a typed array from a string: const myArr = Int16Array.from("1234567890"); Create a typed array…
Typed Array Types Revised July 2025 Name Range Type Int8Array -128 / 127 1 byte signed integer Uint8Array 0 / 255 1 byte unsigned integer Uint8ClampedArray 0 / 255 1 byte unsigned integer Int16Array…
An ArrayBuffer is fixed a block of memory, often used to store typed arrays. On top of this block, you can create different views that interpret the bits as numbers, bytes, or other data types. Creat…
JavaScript DataView
The Atomics Object The Atomics Object provides low-level atomic operations on shared memory. It is used with SharedArrayBuffer and Typed Arrays to share data between workers. What Are Atomics? When m…
JavaScript HTML DOM Navigation
Adding and Removing Nodes (HTML Elements) Creating New HTML Elements (Nodes) To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing…
The HTMLCollection Object The getElementsByTagName() method returns an HTMLCollection object. An HTMLCollection object is an array-like list (collection) of HTML elements. The following code selects…
The HTML DOM NodeList Object A NodeList object is a list (collection) of nodes extracted from a document. A NodeList object is almost the same as an HTMLCollection object. Some (older) browsers retur…
The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. The Browser Object Model (BOM) There are no official standards for the B rowser O bject M odel (BOM). Since modern browsers…
The window.screen object contains information about the user's screen. Window Screen The window.screen object can be written without the window prefix. Properties: screen.width screen.height screen.a…
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page. Window Location The window.location object can be written without the window pr…
The window.history object contains the browsers history. Window History The window.history object can be written without the window prefix. To protect the privacy of the users, there are limitations…
The Navigator Object The navigator object contains information about the visitor's browser. It can be written with or without the window prefix like: windows.navigator or just navigator Browser Cooki…
JavaScript has three kinds of popup boxes: Alert box Confirm box Prompt box Alert Box An alert box is often used if you want to make sure information comes through to the user. When an alert box pops…
10 11 12 JavaScript can be executed in time-intervals. This is called timing events. Timing Events The window object allows execution of code at specified time intervals. These time intervals are cal…
Cookies let you store user information in web pages. What are Cookies? Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connecti…
A Web API is a developer's dream. It can extend the functionality of the browser It can greatly simplify complex functions It can provide easy syntax to complex code What is Web API? API stands for A…
The Fetch API interface allows web browser to make HTTP requests to web servers. 😀 No need for XMLHttpRequest anymore. Browser Support fetch() is an ES6 feature. ES6 is fully supported in all modern…
Locate the User's Position The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise privacy, the position is not available unless the user approves it. T…
The Web History API provides easy methods to access the windows.history object. The window.history object contains the URLs (Web Sites) visited by the user. The Web History API is supported in all br…
Pointer Events API
The Web Storage API is a simple syntax for storing and retrieving data in the browser. It is very easy to use: Example localStorage.setItem("name", "John Doe"); localStorage.getItem("name"); The Web…
Constraint Validation DOM Methods Property Description checkValidity() Returns true if an input element contains valid data. setCustomValidity() Sets the validationMessage property of an input elemen…
A web worker is a JavaScript running in the background, without affecting the performance of the page. What is a Web Worker? When executing scripts in an HTML page, the page becomes unresponsive unti…
AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background AJAX E…
The keystone of AJAX is the XMLHttpRequest object. Create an XMLHttpRequest object Define a callback function Open the XMLHttpRequest object Send a Request to a server The XMLHttpRequest Object All m…
The XMLHttpRequest object is used to request data from a server. Send a Request To a Server To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xhttp.ope…
Server Response Properties Property Description responseText get the response data as a string responseXML get the response data as XML data The responseText Property The responseText property return…
AJAX can be used for interactive communication with an XML file. AJAX XML Example The following example will demonstrate how a web page can fetch information from an XML file with AJAX: Example Get C…
AJAX is used to create more interactive applications. AJAX PHP Example The following example demonstrates how a web page can communicate with a web server while a user types characters in an input fi…
AJAX is used to create more interactive applications. AJAX ASP Example The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input…
AJAX can be used for interactive communication with a database. AJAX Database Example The following example will demonstrate how a web page can fetch information from a database with AJAX: Example Se…
This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript. The XML Document Used In this chapter we will use the XML file called "cd_catalog.xml". Display XML Data in an H…
Simple Examples Examples explained Request Header Information Examples explained Request XML Files Examples explained Retrieve Server Data with PHP and ASP Examples explained Retrieve Database Inform…
JSON JSON stands for J ava S cript O bject N otation. JSON is a plain text format for storing and transporting data. JSON is similar to the syntax for creating JavaScript objects. JSON is used to sen…
JSON Syntax
Both JSON and XML can be used to receive data from a web server. The following JSON and XML examples both define an employees object, with an array of 3 employees: JSON Example {"employees":[ { "firs…
Valid Data Types In JSON, values must be one of the following data types: a string a number an object (JSON object) an array a boolean null JSON values cannot be one of the following data types: a fu…
A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript…
A common use of JSON is to exchange data to/from a web server. When sending data to a web server, the data has to be a string. You can convert any JavaScript datatype into a string with JSON.stringif…
This is a JSON string: '{"name":"John", "age":30, "car":null}' Inside the JSON string there is a JSON object literal: {"name":"John", "age":30, "car":null} JSON object literals are surrounded by curl…
This is a JSON string: '["Ford", "BMW", "Fiat"]' Inside the JSON string there is a JSON array literal: ["Ford", "BMW", "Fiat"] Arrays in JSON are almost the same as arrays in JavaScript. In JSON, arr…
A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript…
A common use of JSON is to read data from a web server, and display the data in a web page. This chapter will teach you how to exchange JSON data between the client and a PHP server. The PHP File PHP…
JSON HTML
JSONP is a method for sending JSON data without worrying about cross-domain issues. JSONP does not use the XMLHttpRequest object. JSONP uses the <script> tag instead. JSONP Intro JSONP stands for JSO…
jQuery vs JavaScript jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax. For mor…
jQuery vs JavaScript jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax. For mor…
jQuery vs JavaScript jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax. For mor…
jQuery vs JavaScript jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax. For mor…
Graphic Libraries JavaScript libraries to use for all kinds of graphs: Plotly.js Chart.js Google Chart Plotly.js Plotly.js is a charting library that comes with over 40 chart types, 3D charts, statis…
HTML Canvas is perfect for Scatter Plots HTML Canvas is perfect for Line Graphs HTML Canvas is perfect for combining Scatter and Lines Scatter Plots Source Code const xArray = [50,60,70,80,90,100,110…
Plotly.js is a charting library that comes with over 40 chart types: Horizontal and Vertical Bar Charts Pie and Donut Charts Line Charts Scatter and Bubble Plots Equation Plots 3D Charts Statistical…
Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the many built-in chart types: Scatter Plot Line…
From simple line charts to complex hierarchical tree maps, the Google Chart gallery provides a large number of ready-to-use chart types: Scatter Chart Line Chart Bar / Column Chart Area Chart Pie Cha…
D3.js is a JavaScript library for manipulating HTML data. D3.js is easy to use. How to Use D3.js? To use D3.js in your web page, add a link to the library: <script src="//d3js.org/d3.v3.min.js"></scr…
What can JavaScript do? Examples Explained Where to Insert JavaScript Where to Explained JavaScript Output Output Explained JavaScript Syntax Syntax Explained JavaScript Statements Statements Explain…
Examples of using JavaScript to access and manipulate DOM objects. The Document Object Document Object Explained The Anchors Collection The Links Collection The Forms Collection The Images Collection…
Examples of using JavaScript to access and manipulate HTML input objects. Button Object Form Object Option and Select Objects
Examples of using JavaScript to access and manipulate HTML objects. Anchor Object Area Object Base Object IFrame Object Image Object Table Objects
Examples of using JavaScript to react to events Input Events Mouse Events Click Events Load Events Others Examples explained
Examples of using JavaScript to access and manipulate the Browser objects. Window Object Window explained Screen Object Screen explained Location Object Location explained History Object History expl…
JavaScript Editor With our online JavaScript editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser. let x = ; let y = ; let z = x + y ; 11 Click on the "Try it Yours…
Test your JavaScript skills with exercises from all categories: /83 done Introduction 3 exercises Open Done Where To 3 exercises Open Done Output 3 exercises Open Done Statements 3 exercises Open Don…
You can test your JavaScript skills with W3Schools' Quiz. The Test The test contains 25 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know,…
Create Website with HTML and JavaScript Host Websites with W3Schools Spaces Get Started for Free Practice Coding Skills kAI AI Tutor Build Projects Host Securely Choose your Plan By subscribing to a…
Introduction The W3Schools JavaScript Tutorial is comprehensive and beginner-friendly. It will give you a fundamental knowledge of JavaScript. It is designed for beginners and requires no prior exper…
Introduction The JavaScript study plan helps you teach your students JavaScript step-by-step. Creating a study plan for JavaScript is easy. You can use a pre-built study plan or customize it. Student…
JavaScript Interview Preparation
W3Schools JavaScript Bootcamp
w s c h o o l s C E R T I F I E D. W3Schools offers an Online Certification Program. The perfect solution for busy professionals who need to balance work, family, and career building. More than 50 00…
Complete JavaScript References All Properties and Methods with Full Examples Array Boolean Classes Date Error Function Global Iterator JSON Map Math Number Object Operators Precedence Promise Proxy R…