Introduction to JavaScript

JavaScript (often abbreviated as "JS") is a lightweight, function-oriented, interpreted or just-in-time compiled high-level programming language. While it is best known as a scripting language for developing web pages, JavaScript is also widely used outside the browser. It is a prototype-based, multi-paradigm dynamic scripting language that supports object-oriented, imperative, and declarative (such as functional programming) styles.(Wikipedia)

JavaScript is the most popular scripting language on the Internet. It can be used for HTML and web development, as well as on servers, PCs, laptops, tablets, and smartphones.

JavaScript is a Scripting Language

JavaScript is a lightweight programming language.

It can be embedded directly into HTML pages.

Once inserted into an HTML page, it can be executed by all modern browsers.

JavaScript is very easy to learn.

What You Will Learn

Here’s an overview of what you’ll learn in this tutorial.

JavaScript: Writing Directly to the HTML Output Stream

Example

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");

Run Code

lamp

Note: document.write can only be used during the HTML output phase. Using it after the page has loaded will overwrite the entire document.

JavaScript: Responding to Events

Example

<button type="button" onclick="alert('Welcome!')">Click Me!</button>

The alert() function is rarely used in production, but it’s convenient for testing code.

The onclick event is just one of the many events you will learn in this tutorial.

JavaScript: Changing HTML Content

JavaScript gives you powerful tools to manipulate HTML content.

Example

x = document.getElementById("demo");  // find element
x.innerHTML = "Hello JavaScript";     // change content

Run Code

You’ll frequently see document.getElementById("someId"). This method is defined in the HTML DOM.

The DOM (Document Object Model) is the official W3C standard for accessing HTML elements. You will learn more about the HTML DOM in multiple chapters of this tutorial.

JavaScript: Changing HTML Images

This example dynamically changes the source (src) of an HTML image:

Lightbulb Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Toggle</title>
<script>
function changeImage() {
    const image = document.getElementById('myImage');
    // Toggle between two specific Picsum images by ID
    if (image.src === "https://picsum.photos/id/237/200/300") {
        image.src = "https://picsum.photos/id/238/200/300";
    } else {
        image.src = "https://picsum.photos/id/237/200/300";
    }
}
</script>
</head>
<body>

<img id="myImage" onclick="changeImage()" 
     src="https://picsum.photos/id/237/200/300" 
     width="200" height="300" style="cursor:pointer;" alt="Toggle Image">

</body>
</html>

Click to Switch Images.

In this example, image.src === "https://picsum.photos/id/237/200/300" checks if the src attribute of the image is currently showing the first image.

  • If the first image is displayed, the source is changed to the second image (https://picsum.photos/id/238/200/300).

  • Otherwise, it is changed back to the first image (https://picsum.photos/id/237/200/300). JavaScript can change most attributes of any HTML element, not just images.

JavaScript: Changing HTML Styles

Changing an element’s style is just a variation of changing its attributes.

Example

x = document.getElementById("demo");  // find element
x.style.color = "#ff0000";             // change style

JavaScript: Validating Input

JavaScript is commonly used to validate user input.

Example

if (isNaN(x)) {
    alert("Not a number");
}

Note: This is a basic validation. For production, you need stricter checks. For example, isNaN cannot detect empty or whitespace-only input. You can use a regex for better validation:

Example

if (isNaN(x) || x.replace(/(^\s*)|(\s*$)/g, "") == "") {
    alert("Not a number");
}

Did You Know?

lamp

JavaScript and Java are completely different languages in both concept and design. Java (created by Sun) is a more complex programming language.

ECMA-262 is the official standard name for JavaScript.

JavaScript was created by Brendan Eich and first appeared in Netscape in 1995 (the browser is now discontinued). It was adopted by ECMA (a standards organization) in 1997.

ECMAScript Versions

JavaScript has been standardized by ECMA (European Computer Manufacturers Association) through ECMAScript.

YearNameDescription
1997ECMAScript 1First version
1998ECMAScript 2Minor changes
1999ECMAScript 3Added regular expressions, try/catch exception handling, and better string handling
2009ECMAScript 5Introduced "strict mode", getters/setters, and JSON support
2011ECMAScript 5.1Minor updates to align with ISO/IEC 16262:2011
2015ECMAScript 6Also known as ECMAScript 2015; added classes, modules, arrow functions, and template literals
2016ECMAScript 7Introduced exponentiation operator (**) and Array.prototype.includes
2017ECMAScript 8Added async/await for asynchronous programming
2018ECMAScript 9Enhanced regular expressions, rest/spread properties, and asynchronous iteration
2019ECMAScript 10Introduced Array.prototype.flat(), flatMap(), and Object.fromEntries()
2020ECMAScript 11Added BigInt, globalThis, and dynamic import() syntax
2021ECMAScript 12Introduced logical assignment operators (&&=, `
2022ECMAScript 13Also known as ECMAScript 2022; added top-level await, private class fields, and Array.prototype.at()
2023ECMAScript 14Also known as ECMAScript 2023; introduced findLast(), findLastIndex(), and toReversed() methods
2024ECMAScript 15Introduced Object.groupBy(), Map.groupBy(), and /v Unicode flag for regular expressions

ECMAScript 2024 (ES15) introduces several new features to JavaScript:

  • Regular Expression v Flag: Adds support for Unicode property escapes and set notation in regular expressions, enabling more precise pattern matching.

  • Object.groupBy() and Map.groupBy(): Allow grouping of object and map entries based on a callback function, facilitating better data organization.

  • String.isWellFormed() and String.toWellFormed(): Ensure that strings are well-formed and provide a method to convert malformed strings into well-formed ones.

  • Promise.withResolvers(): Introduces a new promise constructor that allows for manual resolution and rejection, providing more control over asynchronous operations.

  • Atomics.waitAsync(): Adds an asynchronous version of Atomics.wait(), enabling non-blocking synchronization in shared memory scenarios.

ECMAScript 2025 (ES16) brings further enhancements:

  • Global Iterator Object: Introduces a new global Iterator object with associated static and prototype methods for working with iterators, including functional operators like map and filter.

  • New Set Methods: Adds methods to Set objects for performing mathematical set operations such as union, intersection, difference, symmetric difference, and subset/superset checks.

  • Direct JSON Module Imports: Allows importing JSON files as modules using the import statement with the type: "json" attribute, streamlining the process of working with JSON data.

  • RegExp.escape() Method: Provides a method to escape special characters in strings, making it easier to create regular expressions from user input.

  • Float16Array Typed Array: Introduces a new typed array for storing 16-bit floating-point numbers, reducing memory usage for certain applications.

  • Math.f16round() Method: Adds a method to round numbers to the nearest 16-bit floating-point representation.

  • Promise.try() Method: Introduces a method to execute a function and return a promise, simplifying asynchronous error handling.

Published on September 13, 2025
FacebookTwitterWhatsApp