Introduction to JavaScript

JavaScript is the most popular scripting language on the internet. This language can be used for HTML and web, and it is also widely used for servers, PCs, laptops, tablets, and smartphones.

JavaScript is a Scripting Language

JavaScript is a lightweight programming language.

JavaScript is programming code that can be inserted into HTML pages.

JavaScript inserted into an HTML page can be executed by all modern browsers.

JavaScript is easy to learn.

What You Will Learn

Below are the main topics you will 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>");

| | You can only use document.write in the HTML output. If you use this method after the document has loaded, it will overwrite the entire document. | | --- | --- |

JavaScript: Reacting to Events

Example

The alert() function is not commonly used in JavaScript, but it is convenient for code testing.

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

JavaScript: Changing HTML Content

Using JavaScript to manipulate HTML content is a powerful feature.

Example

x = document.getElementById("demo");  // Find the element
x.innerHTML = "Hello JavaScript";    // Change the content

You will often see document.getElementById(""). 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 about the HTML DOM in multiple sections of this tutorial.

JavaScript: Changing HTML Images

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

Light Bulb

<script>
function changeImage() {
    element = document.getElementById('myimage');
    if (element.src.match("bulbon")) {
        element.src = "/images/pic_bulboff.gif";
    } else {
        element.src = "/images/pic_bulbon.gif";
    }
}
</script>
<img decoding="async" loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

Click the light bulb to turn it on or off:

>

The code element.src.match("bulbon") in the above example checks if the src attribute of <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> contains the string bulbon. If the string bulbon is present, the image src updates to bulboff.gif, otherwise, it updates to bulbon.gif.

JavaScript can change most attributes of any HTML element, not just images.

JavaScript: Changing HTML Styles

Changing the style of an HTML element is a variant of changing its attributes.

Example

JavaScript: Validating Input

JavaScript is often used to validate user input.

Example

The above example is a simple validation. For production use, stricter checks are needed. If the input contains spaces or multiple spaces, isNaN may not detect it. Regular expressions can be used for more accurate validation (which will be explained in later chapters):

Example

Did You Know?

| | JavaScript and Java are two completely different languages, both in concept and design. <br>Java (invented by Sun) is a more complex programming language. <br> <br>ECMA-262 is the official name of the JavaScript standard. <br> <br>JavaScript was invented by Brendan Eich. It appeared in Netscape (which has since stopped updating) in 1995 and was adopted by ECMA (a standards association) in 1997. | | --- | --- |

ECMAScript Versions

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

>

ECMAScript 6 is also known as ECMAScript 2015.

ECMAScript 7 is also known as ECMAScript 2016.