Chapter 01 of 31

Introduction to JavaScript

On this page

If you have ever used a website where clicking a button opens a menu, a form instantly shows an error, or content changes without reloading the page, there is a good chance JavaScript is doing the work behind the scenes.

JavaScript is one of the most popular programming languages in the world. It is mainly used to make websites interactive, dynamic, and responsive.

Let's understand it from the beginning.

What is JavaScript?

JavaScript is a high-level programming language used to add interactivity and dynamic behavior to web pages and applications.

HTML is used to create the structure of a webpage, CSS is used to control its appearance, and JavaScript is used to control its behavior.

For example:

Technology

Main Purpose

HTML

Creates the structure

CSS

Designs and styles the page

JavaScript

Adds behavior and interactivity

Think of a website like a house:

  • HTML → The structure of the house

  • CSS → Paint, furniture, and decoration

  • JavaScript → Electricity, switches, and automation

Without JavaScript, many websites would feel like static documents.

What Can JavaScript Do?

JavaScript can perform many different tasks on a webpage.

For example, it can:

  • Change HTML content.

  • Change CSS styles.

  • Show and hide elements.

  • Respond to button clicks.

  • Validate forms.

  • Create animations.

  • Display messages and alerts.

  • Fetch data from servers.

  • Communicate with APIs.

  • Store data in the browser.

  • Build complete web applications.

For example, we can change the text of an HTML element using JavaScript:

<h1 id="title">Hello</h1>

<script>
    document.getElementById("title").textContent = "Hello JavaScript!";
</script>

Initially, the heading says:

Hello

JavaScript finds that heading and changes its content to:

Hello JavaScript!

That's a very simple example of how JavaScript can make a webpage dynamic.

Where is JavaScript Used?

JavaScript started mainly as a web browser language, but today its use is much broader.

1. Web Development

JavaScript is heavily used for creating interactive websites and web applications.

Popular JavaScript frameworks and libraries include:

  • React

  • Angular

  • Vue

  • Svelte

2. Backend Development

With technologies such as Node.js, JavaScript can also run on servers.

For example, JavaScript can be used to create:

Frontend → JavaScript
Backend  → JavaScript + Node.js
Database → MongoDB / MySQL / PostgreSQL

So, you can build both the frontend and backend of an application using JavaScript.

3. Mobile Applications

JavaScript can also be used to create mobile applications using technologies such as:

  • React Native

  • Ionic

  • NativeScript

4. Desktop Applications

JavaScript can even be used to create desktop applications. For example, Electron allows developers to build desktop applications using web technologies.

How Does JavaScript Run?

JavaScript code is commonly executed by a JavaScript engine.

Web browsers have their own JavaScript engines. For example:

Browser

JavaScript Engine

Chrome

V8

Edge

V8

Firefox

SpiderMonkey

Safari

JavaScriptCore

When the browser encounters JavaScript code, its JavaScript engine processes and executes that code.

For example:

console.log("Hello, World!");

The JavaScript engine executes this statement and prints:

Hello, World!

in the browser's developer console.

Your First JavaScript Program

Let's write a very simple JavaScript program:

console.log("Hello, World!");

Here, console.log() is used to print something to the console.

You can run this code directly in the browser's Developer Tools Console.

You can usually open it by pressing:

F12

or by right-clicking a webpage and selecting Inspect → Console.

Adding JavaScript to HTML

JavaScript can be added to an HTML page using the <script> element.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>Hello World</h1>

    <script>
        console.log("JavaScript is running!");
    </script>

</body>
</html>

The JavaScript code is written inside:

<script>
    // JavaScript code
</script>

For larger projects, JavaScript is usually placed in a separate .js file.

For example:

<script src="script.js"></script>

Here, the browser loads JavaScript from the script.js file.

Why Learn JavaScript?

JavaScript is a great language for beginners because you can start seeing results very quickly.

You can write a few lines of code and immediately see something happen in your browser.

It is also useful because JavaScript is used across many areas:

Websites
   ↓
Web Applications
   ↓
Backend Servers
   ↓
Mobile Apps
   ↓
Desktop Apps

So, learning JavaScript gives you a strong foundation for modern web development.

JavaScript vs Java

One common beginner confusion is that JavaScript and Java are the same language. They are not.

Despite their similar names, they are completely different programming languages.

JavaScript

Java

Mainly used for web development

Used for many types of software

Commonly runs in browsers

Runs using the Java Virtual Machine (JVM)

Used with HTML and CSS

Often used for enterprise, Android history, backend, etc.

JavaScript is dynamically typed

Java is statically typed

So remember: JavaScript is not Java.

Conclusion

JavaScript is the programming language that brings life and interaction to web pages. It can respond to user actions, modify webpage content, communicate with servers, and even be used to build mobile and desktop applications.

If you're completely new to programming, don't worry about understanding everything right now. In the upcoming topics, we'll gradually learn JavaScript concepts such as variables, data types, operators, conditions, loops, functions, objects, arrays, DOM, events, and more.

NextFirst JavaScript Program