JavaScript Tutorial

JavaScript

Learn dynamic scripting and modern programming for interactive web development.

Curriculum Syllabus

Explore all 300 lessons in this learning track.

JS Tutorial(171)

JavaScript Tutorial

JavaScript is easy to learn.

JavaScript Introduction

JavaScript is the programming language of the web.

JavaScript Where To

In HTML, JavaScript code is inserted between and tags.

JavaScript Output

JavaScript can "display" data in different ways:

JavaScript Syntax

// How to Declare variables:

JavaScript Statements

let x, y, z; // Statement 1

JavaScript Comments

JavaScript comments can be used to explain JavaScript code, and to make it more readable.

JavaScript Variables

JavaScript variables are containers for data.

JavaScript Let

The let keyword was introduced in [ES6 (2015)](jses6.asp)

JavaScript Const

The const keyword was introduced in [ES6 (2015)](jses6.asp)

JavaScript Datatypes

A JavaScript variable can hold 8 types of data:

JavaScript Operators

The Assignment Operator = assigns values

JavaScript Arithmetic

Arithmetic operators perform arithmetic on numbers (literals or variables).

JavaScript Assignment

Assignment operators assign values to JavaScript variables.

JavaScript Comparison

Comparison operators are used to compare two values.

JavaScript Conditionals

Conditional Statements allow us to perform different actions for different conditions.

JavaScript if

Use the JavaScript if statement to execute a block of code when a condition is true.

JavaScript else

Use the else statement to specify a block of code to be executed if a condition is false.

The JavaScript Ternary Operator

The conditional operator is a shorthand for writing conditional if...else statements.

JavaScript Switch Statement

Based on a condition, switch selects one or more code blocks to be executed.

JavaScript Booleans

In JavaScript, a Boolean is a primitive data type that can only have one of two values:

JavaScript Logical Operators

Logical operators are used to combine boolean expressions.

JavaScript Loops

Loops can execute a block of code a number of times.

JavaScript For Loop

For Loops can execute a block of code a number of times.

JavaScript While Loops

While loops execute a block of code as long as a specified condition is true.

JavaScript Break

The break statement "jumps out" of loops and switches.

JavaScript Continue

The continue statement skips the current iteration in a loop.

JavaScript Control Flow

Control Flow is the order in which statements are executed in a program.

JavaScript Strings

Strings are for storing text

JavaScript String Templates

Beloved child has many names

JavaScript String Methods

Javascript strings are primitive and immutable: All string methods produce a new string without altering the original string.

JavaScript String Search

The indexOf() method returns the index (position) of the first occurrence of a string in a string, or it returns -1 if the string is not found:

JavaScript Numbers

JavaScript has only one type of number.

JavaScript Number Methods

The toString() method returns a number as a string.

JavaScript Number Properties

let x = Number.EPSILON;

JavaScript Bitwise Operations

JavaScript stores numbers as 64 bits floating point numbers, but all bitwise operations are performed on 32 bits binary numbers.

JavaScript BigInt

BigInt is a JavaScript data type for handling and storing big integer values.

JavaScript Timers

JavaScript timers let you run a function after a delay or repeatedly at fixed intervals.

JavaScript Scope

Scope determines the accessibility (visibility) of variables.

JavaScript Code Blocks

A code block or block statement is a group of statements enclosed within curly braces { }.

JavaScript Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top.

JavaScript var let and const

The primary difference between var, let, and const lies in scoping mechanisms, reassignment rules, and how JavaScript handles them via hoisting.

JavaScript Use Strict

The "use strict" directive was new in ECMAScript version 5.

JavaScript Dates

JavaScript Date Objects let us work with dates:

JavaScript Date Formats

There are generally 3 types of JavaScript date input formats:

JavaScript Get Date Methods

In JavaScript, date objects are created with new Date().

JavaScript Set Date Methods

Set Date methods let you set date values (years, months, days, hours, minutes, seconds, milliseconds) for a Date Object.

JavaScript Arrays

const cars = ["Saab", "Volvo", "BMW"];

The new Array() Constructor

The new Array() constructor creates an Array object.

JavaScript Array Methods

[Complete JavaScript Array Reference](jsarrayreference.asp) ## JavaScript Array length The length property returns the length (size) of an array:

JavaScript Array Search

[Complete JavaScript Array Reference](jsarrayreference.asp) ## JavaScript Array indexOf() The indexOf() method searches an array for an element value and returns its position.

JavaScript Array Sort

[Complete JavaScript Array Reference](jsarrayreference.asp) ## Sorting an Array The sort() method sorts an array alphabetically:

JavaScript Array Iterations

Array iteration methods operate on every array item.

JavaScript Array Const

In 2015, JavaScript introduced an important new keyword: const.

JavaScript Sets

A JavaScript Set is a collection of unique values.

JavaScript Set Methods

Pass an array to the new Set() constructor:

JavaScript Set Logic

[JavaScript 2025](/js/js2025.asp) is fully supported in all modern browsers since May 2025:

JavaScript WeakSet

A JavaScript WeakSet is a collection of values where the values must be objects.

JavaScript Maps

A JavaScript Map is an object that can store collections of key-value pairs, similar to a dictionary in other programming languages.

JavaScript Map Methods

You can create a map by passing an array to the new Map() constructor:

JavaScript WeakMap

A JavaScript WeakMap is a collection of key/value pairs where the keys must be objects.

JavaScript Loops

JavaScript loops repeat executing a block of code a number of times.

JavaScript Iterables

Iterable can be iterated over with for...of loops

JavaScript Iterators

An Iterator is an object that provides a standard way to access elements sequentially.

JavaScript Generators

A JavaScript Function can only return one value.

JavaScript RegExp

A Regular Expression is a sequence of characters that forms a search pattern.

JavaScript RegExp Flags

Flags are parameters that can modify how a regex pattern is used, such as making it case-insensitive or global.

RegExp Meta Characters

Metacharacters are characters with a special meaning.

Regular Expression Assertions

Assertions matches Boundaries and Lookarounds:

Regular Expression Groups

Regular Expression Groups allow you to treat multiple characters as a single unit, extract specific parts of a match, or reference captured text later.

RegExp Quantifiers

Regular Expression (Regex) quantifiers define how many times the preceding character, group, or character class must occur in a string. They control the boundaries of your match...

JavaScript RegExp Patterns

Flags can be added to a regexp pattern to Modify its behavior:

RegExp Methods

[JavaScript RegExp Tutorial](jsregexp.asp)

JavaScript Data Types

A JavaScript variable can hold 8 types of data.

JavaScript Primitives

A JavaScript variable can hold 8 types of data.

JavaScript Symbols

A Symbol represents a unique identifier.

JavaScript typeof

The typeof operator returns the data type of a JavaScript variable.

JavaScript undefined

In JavaScript, a variable without a value has the value undefined.

JavaScript NaN

In JavaScript, NaN is short for Not a Number.

JavaScript toString()

The JavaScript toString() method converts a variable (or a value) to a string.

JavaScript toLocaleString()

The toLocaleString() method converts a value to a string, using local formatting rules.

JavaScript Type Coercion

Type coercion is the automatic conversion of values from one data type to another.

JavaScript Type Conversion

- Converting Strings to Numbers

JavaScript Destructuring

The destructuring assignment syntax can unpack objects into variables:

JavaScript Errors

When executing JavaScript code, different errors can occur.

JavaScript Silent Errors

JavaScript can fail siently.

JavaScript Error Statements

In JavaScript, the try statement is used to handle errors (also called exceptions) that may occur during code execution - without stopping the entire program.

JavaScript Debugging

Many beginners quit because they cannot debug.

JavaScript Debugging Console

The browser console is the most important debugging tool for JavaScript beginners.

JavaScript Debugging Breakpoints

Breakpoints let you pause JavaScript and inspect what is really happening.

JavaScript Debugging Errors

JavaScript error messages look scary, but most of them mean very simple things.

JavaScript Style Guide

Always use the same coding conventions for all your JavaScript projects.

JavaScript Best Practices

Avoid global variables, avoid new, avoid ==, avoid eval()

JavaScript Common Mistakes

This chapter points out some common JavaScript mistakes.

JavaScript Performance

How to speed up your JavaScript code.

JavaScript Reserved Words

In JavaScript you cannot use these reserved words as variables, labels, or

JavaScript Operator Precedence

Operator precedence describes the order in which operations are performed in an arithmetic expression.

Project - localStorage Counter

In this project you will build a counter with buttons to:

Project - Event Listener

This is a copy of the previous project.

Project - To-Do List

In this project you will build a To-Do List.

Project - Modal Popup

A modal is a popup window that appears on top of the page.

Project - Form Validation

In this project you will build a form with validation.

ECMAScript 2027

- Temporal API The long-time-overdue successor to the buggy, 30-year-old Date object. Unlike Date, Temporal objects are immutable and provide first-class support for time zones ...

ECMAScript 2026

ECMAScript 2026 (ES2026), the 17th edition of the JavaScript language specification, was officially ratified by ECMA International on June 30, 2026.

ECMAScript 2025

The 16th edition of the ECMAScript standard, released in June 2025, includes several enhancements to make JavaScript more readable and efficient.

ECMAScript 2024

These features are relatively new.

ECMAScript 2023

ECMAScript 2023 is supported in all modern browsers since July 2023:

ECMAScript 2022

Supported in all modern browsers since March 2023.

ECMAScript 2021

ECMAScript 2021 is supported in all modern browsers since April 2021:

ECMAScript 2020

ECMAScript 2020 is supported in all modern browsers since April 2021.

ECMAScript 2019

ECMAScript 2019 is supported in all modern browsers since January 2020:

ECMAScript 2018

ECMAScript 2018 is supported in all modern browsers since Jun 2020:

ECMAScript 2017

JavaScript 2017 is supported in all modern browsers since September 2017:

ECMAScript 2016

Supported in all modern browsers since March 2017.

Javascript 2015 (ES6)

The second major revision to JavaScript.

JavaScript 2009 (ES5)

The first major revision to JavaScript.

JavaScript 1999 (ES3)

The first revision to JavaScript.

JavaScript Versions

The current JavaScript version is [ES2025](js2025.asp).

JavaScript History

JavaScript was invented by Brendan Eich in 1995.

HTML Form Validation

HTML form validation can be done by JavaScript.

JavaScript Events

HTML events are things that happen to HTML elements.

JavaScript Mouse Events

Mouse Events happen when the user interacts with the mouse.

JavaScript Keyboard Events

Keyboard Events happen when the user presses a key on the keyboard:

JavaScript Load Events

Load Events happen when the browser has finished loading an element.

JavaScript Event Management

Event Management is about adding, removing, and controlling events.

HTML-First Tutorial

HTML-First is a way of building websites where HTML is the foundation of the page.

Progressive Enhancement

Progressive enhancement is a web development strategy where the basic version of a website works first.

Native HTML Features

HTML has many built-in features that can replace small JavaScript solutions.

CSS Instead of JavaScript

In HTML-first development, CSS is often the second step after HTML.

JavaScript Temporal Tutorial

Temporal is the new standard for date and time in JavaScript.

JavaScript Temporal Why?

The Date object was created in 1995 and has some design issues that causes bugs.

JavaScript Temporal vs Date

Learn the differences between JavaScript Date and Temporal

JavaScript Temporal Duration

The Temporal.Duration object represents a length of time.

JavaScript Temporal Instant

The Temporal.Instant object represents an exact moment in UTC time.

JavaScript PlainDateTime

The Temporal.PlainDateTime object is a pure date and time object.

JavaScript Temporal PlainDate

The Temporal.PlainDate object represents a calendar date without a time.

JavaScript PlainYearMonth

The Temporal.PlainYearMonth object is a year and month object.

JavaScript PlainMonthDay

The Temporal.PlainMonthDay object is a month and day object.

JavaScript Temporal PlainTime

The Temporal.PlainTime object is a time object without a date.

JavaScript ZonedDateTime

The Temporal.ZonedDateTime object represents a date and time with a time zone.

JavaScript Temporal Now

The Temporal.Now object provides 5 methods to get the system's date and time.

JS Temporal Arithmetic

JavaScript Temporal has methods for easy and reliable date and time arithmetic.

JS Temporal Differences

The since() method calculates the since duration between two dates.

JS Temporal Compare

In JavaScript, objects cannot be compared using operators like , ==, or ===.

JavaScript Temporal Conversion

The table below shows how Temporal types can be converted.

Temporal Display Formats

Temporal dates can be serialized as strings in different ways:

JavaScript Temporal Mistakes

Temporal is a powerful API, but it can be confusing at first.

Migrate from Date to Temporal

JavaScript Temporal was designed to replace the old Date object.

Temporal Standards

Temporal is based on the following standards:

JavaScript Modules

Modules are code blocks that can export and/or import functions and values.

JavaScript Modules Export

A module uses the export keyword to share values with other files.

JavaScript Modules Import

You can import modules in two ways, based on if they are named exports or default exports.

JS Module Namespace

When you use the syntax: ### Example javascript import as name from "module"; JavaScript creates a module namespace object.

JavaScript Dynamic Modules

Dynamic Import uses the syntax:

JavaScript Meta Programming

Metaprogramming refers to a number of ways a program can manipulate itself:

JavaScript Reflect

Reflect is a object with methods for low-level operations on JavaScript objects.

JavaScript Proxy

A Proxy is a JavaScript object that can wrap other objects.

JavaScript Typed Arrays

Typed arrays was designed for handling Binary Data.

Typed Array Methods

The from()method creates a new typed array from any iterable object:

JavaScript ArrayBuffer

An ArrayBuffer is fixed a block of memory, often used to store typed arrays.

JavaScript DataView

The DataView Object lets you read and write multiple numeric types in an ArrayBuffer, at any byte offset, with optional control over endianness (byte order).

JavaScript Atomics

The Atomics Object provides low-level atomic operations on shared memory.

JavaScript Graphics

JavaScript libraries to use for all kinds of graphs:

HTML Canvas

> HTML Canvas is perfect for Scatter Plots

Plotly.js

> Plotly.js is a charting library that comes with over 40 chart types:

Chart.js

> Chart.js is an free JavaScript library for making HTML-based charts.

Google Chart

> From simple line charts to complex hierarchical tree maps,

D3.js

> D3.js is a JavaScript library for manipulating HTML data.

jQuery HTML Elements

[jQuery](/jquery/default.asp) was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Anima...

jQuery CSS Styles

[jQuery](/jquery/default.asp) was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Anima...

JSONP

Modern applications normally use fetch() with CORS instead.

JS Functions(17)

JavaScript Functions

Learn Functions in the Right Order:

JavaScript Functions

Functions are reusable code blocks designed to perform a particular task.

Invoking JavaScript Functions

A JavaScript function runs when it is called.

JavaScript Function Parameters

Parameters allow you to pass (send) values to a function.

JavaScript Function Return

A function can return a value back to the code that called it.

JavaScript Function Arguments

In JavaScript, function parameters and arguments are distinct concepts:

JavaScript Function Expressions

A function expression is a function stored in a variable.

JavaScript Arrow Functions

Arrow Functions allow a shorter syntax for function expressions.

JavaScript Advanced Functions

These chapters are best after you understand basic functions (calling, parameters, return values, expressions, and arrows).

JavaScript Function Definitions

Function definition is a general term for defining a function.

The JavaScript this Keyword

Share ## What is this? When the this keyword is used in a function, it refers to an Object.

JavaScript Function call()

The call() method can be used to call a function with a specific this.

JavaScript Function apply()

The apply() method lets you write a method that can be used on different objects.

JavaScript Function bind()

Like with call() and apply(), the bind() method can borrow a method from another object.

Self-Invoking Functions

An IIFE is short for an Immediately Invoked Function Expression.

JavaScript Closures

JavaScript variables can belong to:

JavaScript Function Reference

In JavaScript, the this keyword refers to an object.

JS Objects(24)

JavaScript Objects

Learn Objects in the Right Order:

JavaScript Objects

Objects are variables that can store both values and functions.

JavaScript Object Properties

A JavaScript object is a collection of properties

JavaScript Object Methods

Methods are actions that can be performed on objects.

JavaScript this Keyword

The this keyword refers to an object.

JavaScript Display Objects

Displaying a JavaScript object will output [object Object].

JavaScript Object Constructors

Sometimes we need to create many objects of the same type.

JavaScript Math Object

The JavaScript Math object allows you to perform mathematical tasks.

RegExp Character Classes

Character Classes are characters enclosed in square brackets [].

JavaScript RegExp Objects

In JavaScript, RegExp is a regular expression object with predefined properties and methods.

JavaScript Built-In Objects

A JavaScript variable can be either a Primitive type or an Object type.

JavaScript Error Reference

JavaScript has a built in error object that provides error information when an error occurs.

JavaScript Objects - Advanced

- Using an Object Literal

JavaScript Object Definitions

- Using an Object Literal

this in JavaScript Objects

firstName: "John",

JavaScript Object Iterations

// Copies properties from a source object to a target object

JavaScript Object Accessors

Getters and setters allow you to define Object Accessors (Computed Properties).

JavaScript Object Management

// Adding or changing an object property

JavaScript Object Protection

// Prevents re-assignment

JavaScript Object Prototypes

All JavaScript objects inherit properties and methods from a prototype:

JavaScript Object Reference

> Advanced Chapters:

JavaScript Classes

ECMAScript 2015, also known as ES6, introduced JavaScript Classes.

JavaScript Class Inheritance

To create a class inheritance, use the extends keyword.

JavaScript Static Methods

Static class methods are defined on the class itself.

JS HTML DOM(20)

JavaScript Random

// Returns a random number:

The HTML DOM

The HTML DOM (HTML Document Object Model) is an Object Model for HTML Documents.

HTML DOM API

The DOM API (Application Programming Interface) is a set of Methods and Properties that allow JavaScript to change the content, structure, and style of any HTML elements.

Selecting DOM Elements

Often, with JavaScript, you want to manipulate HTML elements.

HTML DOM - Changing HTML

The HTML DOM allows JavaScript to change both the text and the content of HTML elements.

HTML DOM - Changing CSS

The HTML DOM allows JavaScript to change the style of HTML elements.

HTML DOM Animation

Learn to create HTML animations using JavaScript.

HTML DOM Document

Master HTML DOM Document with syntax guides and interactive code examples.

HTML DOM Reference

Master HTML DOM Reference with syntax guides and interactive code examples.

JavaScript HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

JavaScript EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);

JavaScript HTML DOM Navigation

With the HTML DOM, you can navigate the node tree using node relationships.

JavaScript HTML DOM Elements (Nodes)

Adding and Removing Nodes (HTML Elements)

JavaScript HTML DOM Collections

The getElementsByTagName() method returns an HTMLCollection object.

JavaScript HTML DOM Node Lists

A NodeList object is a list (collection) of nodes extracted from a document.

jQuery DOM Selectors

[jQuery](/jquery/default.asp) was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Anima...

jQuery HTML DOM

[jQuery](/jquery/default.asp) was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Anima...

JavaScript HTML DOM Examples

Examples of using JavaScript to access and manipulate DOM objects.

JavaScript HTML Objects Examples

Examples of using JavaScript to access and manipulate HTML objects.

JavaScript HTML DOM Events Examples

Examples of using JavaScript to react to events

JS Async(25)

JavaScript Debugging Async

Async bugs are the hardest bugs for beginners.

JavaScript Callbacks

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.

Asynchronous Study Path

JavaScript normally runs one statement at a time.

Asynchronous Programming

JavaScript runs one task at a time.

Asynchronous Callbacks

A callback is a function passed as an argument to another function.

Asynchronous Promises

A Promise represents the future result of an asynchronous operation.

Asynchronous Functions

"async and await make promises easier"

Running Async Tasks in Parallel

An await statement waits for one Promise before continuing.

Asynchronous Event Loop

JavaScript can only execute one piece of code at a time.

Asynchronous Fetch API

The Fetch API lets JavaScript download resources from a web server.

Common Asynchronous Mistakes

Asynchronous programming introduces new concepts:

Asynchronous Debugging

Asynchronous code can be more difficult to debug than synchronous code.

Asynchronous AbortController

The AbortController Object lets you cancel asynchronous operations.

JavaScript Web Workers

Until now, all examples in this tutorial run on the browser's main thread.

JavaScript Promise Object Reference

The JavaScript Promise object represents the eventual completion or failure of an asynchronous operation.

AJAX Introduction

> AJAX is a developer's dream, because you can:

AJAX - The XMLHttpRequest Object

The keystone of AJAX is the XMLHttpRequest object.

AJAX - XMLHttpRequest

The XMLHttpRequest object is used to request data from a server.

AJAX - Server Response

The responseText property returns the server response as a JavaScript string, and you can use it accordingly:

AJAX XML Example

AJAX can be used for interactive communication with an XML file.

AJAX PHP Example

AJAX is used to create more interactive applications.

AJAX ASP Example

AJAX is used to create more interactive applications.

AJAX Database Example

AJAX can be used for interactive communication with a database.

XML Applications

This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.

AJAX Examples

[Create a simple XMLHttpRequest, and retrieve data from a TXT file](tryit.asp?filename=tryjsajaxfirst)

JS Web APIs(17)

JavaScript Popup Boxes

JavaScript has three kinds of popup boxes:

JavaScript Cookies

Cookies let you store user information in web pages.

JavaScript Fetch API

The Fetch API interface lets you download (fetch) data from a web server.

JavaScript JSON

JSON is a text format for storing and exchanging data.

JavaScript JSON Syntax

JSON has a very simple syntax for representing structured data.

JavaScript JSON Values

In JSON, values must be one of the following data types:

JavaScript JSON Parse

The JSON.parse() method converts JSON text into a JavaScript value.

JavaScript JSON Stringify

The JSON.stringify() method converts a JavaScript value into JSON text.

JavaScript Loading JSON

JSON is often stored in files or returned by calls to web servers.

JavaScript Displaying JSON

After JSON has been parsed, the resulting JavaScript values can be displayed in HTML.

JavaScript JSON vs XML

JSON and XML are text formats used to store and exchange structured information.

Web APIs - Introduction

A Web API is a developer's dream.

Web Geolocation API

The HTML Geolocation API is used to get the geographical position of a user.

Pointer Events API

The Pointer Events API is a modern web standard that provides a unified input model for handling various pointing devices, such as a mouse, pen/stylus, and touch (finger).

Web Storage API

The Web Storage API is a simple syntax for storing and retrieving data in the browser. It is very easy to use:

JavaScript Validation API

If an input field contains invalid data, display a message:

Web Workers API

A web worker is a JavaScript running in the background, without affecting the performance of the page.