Introduction to JavaScript

What Is It?

What Is JavaScript?

JavaScript is the programming language of the web. Every interactive thing you see on a website — a button that changes color when you hover over it, a form that checks your email before you submit, a dropdown menu that slides open, a live chat widget, an animated counter — that is JavaScript at work.

Think of a website as a house. HTML is the structure — the walls, floors, and roof. CSS is the paint, furniture, and decoration. JavaScript is the electricity — it makes things actually work. Without JavaScript, websites would be static pages that just sit there. With JavaScript, they come alive.

The Three Layers of the Web

You cannot build a modern website without all three working together. HTML without CSS looks ugly. HTML + CSS without JavaScript looks pretty but does nothing. JavaScript is what turns a poster into an app.

Why Does It Matter?

Why Should You Learn JavaScript?

JavaScript is the single most important language to learn if you want to build anything for the web. Here is why:

1. It Runs Everywhere

JavaScript is the only programming language that runs natively in every web browser — Chrome, Firefox, Safari, Edge. You do not need to install anything. Open your browser, press F12, and you can start writing JavaScript right now. No compiler, no setup, no downloads.

2. You See Results Instantly

Unlike some languages where you write code, compile it, and then run it, JavaScript gives you instant feedback. Change a line of code, refresh the page, and you see the result immediately. This makes learning faster and more fun.

3. It Powers Everything on the Web

Every website you use daily — Google, YouTube, Instagram, WhatsApp Web, Netflix — uses JavaScript. Learning JavaScript means you can understand and build the same kind of interactive experiences.

4. It Works Beyond the Browser

JavaScript is not limited to websites. With Node.js, you can use JavaScript to build servers, desktop apps, mobile apps, and even control robots. Companies like Netflix, PayPal, and LinkedIn use JavaScript on their servers.

5. Massive Job Market

JavaScript is consistently the most popular programming language in developer surveys. Learning it opens doors to frontend development, backend development, mobile app development, and more.

Detailed Explanation

Detailed Explanation

A Brief History

JavaScript was created by Brendan Eich in 1995, working at Netscape (one of the first web browsers). He built the first version in just 10 days. The language was originally called Mocha, then LiveScript, and finally renamed to JavaScript as a marketing move to ride the popularity of Java — even though JavaScript and Java are completely different languages.

Over the years, JavaScript has evolved dramatically. The big update came in 2015 with ES6 (ECMAScript 2015), which added features like let, const, arrow functions, and template literals. Today, JavaScript gets yearly updates and is one of the most powerful languages in the world.

JavaScript vs Java

This confuses a lot of beginners. JavaScript and Java are completely different languages. They have different syntax, different use cases, and were created by different people. The name similarity is purely a marketing decision from 1995. Think of it like "car" and "carpet" — they share letters but have nothing else in common.

What Can JavaScript Do?

Here is a concrete list of things JavaScript can do on a web page:

• Change content: Update text, images, or HTML on the page without reloading
• Respond to events: React when a user clicks, types, scrolls, or hovers
• Validate forms: Check if an email is valid before sending it to the server
• Animate elements: Slide, fade, rotate, or bounce elements on the page
• Fetch data: Load new data from a server without refreshing the page (AJAX/Fetch API)
• Store data: Save information in the browser using localStorage
• Build games: Create interactive games using the HTML5 Canvas
• Control multimedia: Play/pause videos, create audio players

Where Does JavaScript Run?

JavaScript runs in two main environments:

1. The Browser

Every web browser has a built-in JavaScript engine that reads and executes JavaScript code. Chrome uses the V8 engine, Firefox uses SpiderMonkey, and Safari uses JavaScriptCore. When you open a web page, the browser downloads the HTML, CSS, and JavaScript files, then the engine runs the JavaScript code.

2. Node.js (Server-Side)

Node.js takes Chrome's V8 engine and lets you run JavaScript outside the browser — on your computer or on a server. This means you can use the same language for both the frontend (what users see) and the backend (the server logic). We will focus on browser JavaScript in this guide.

Your First JavaScript Program

Let us write a complete web page with HTML, CSS, and JavaScript working together. This page has a button that changes the text when you click it.

To try this, create a file called index.html on your computer, paste the code from Example 1 below, and open it in your browser. Click the button and watch the magic happen. That is JavaScript.

How the Browser Reads Your Code

When you open an HTML file in the browser, here is what happens in order:

1. The browser reads the HTML from top to bottom
2. It builds the page structure (the DOM — Document Object Model)
3. It applies the CSS styles
4. It runs any JavaScript code it finds

This order matters. If your JavaScript tries to find a button that has not been created yet (because the HTML has not been read that far), it will fail. That is why we usually put the <script> tag at the end of the <body>, after all the HTML elements. You will learn more about this in Chapter 2.

Code Examples

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 50px; }
    button { padding: 10px 20px; font-size: 18px; cursor: pointer; }
    #message { font-size: 24px; margin: 20px; }
  </style>
</head>
<body>
  <h1>My First JavaScript Page</h1>
  <p id="message">Click the button below!</p>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("message").textContent = "JavaScript is working!";
    }
  </script>
</body>
</html>

console.log("Hello from JavaScript!");
console.log(42);
console.log(10 + 5);
console.log("Aarav" + " is learning JS");

<!DOCTYPE html>
<html>
<head>
  <title>Change Color</title>
  <style>
    #box {
      width: 200px; height: 200px;
      background-color: #3498db;
      margin: 20px auto;
      border-radius: 10px;
      transition: background-color 0.3s;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      let box = document.getElementById("box");
      box.style.backgroundColor = "#e74c3c";
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Greeting App</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 30px; }
    input { padding: 8px; font-size: 16px; }
    button { padding: 8px 16px; font-size: 16px; }
    #greeting { font-size: 20px; color: #2ecc71; margin: 15px; }
  </style>
</head>
<body>
  <h1>Greeting App</h1>
  <input type="text" id="nameInput" placeholder="Enter your name">
  <button onclick="greet()">Say Hello</button>
  <p id="greeting"></p>

  <script>
    function greet() {
      let name = document.getElementById("nameInput").value;
      document.getElementById("greeting").textContent = "Hello, " + name + "! Welcome to JavaScript.";
    }
  </script>
</body>
</html>

// alert() shows a popup message
alert("Welcome to JavaScript!");

// prompt() asks for input and returns what the user typed
let name = prompt("What is your name?");
console.log("User entered: " + name);

// confirm() asks a yes/no question, returns true or false
let likesJS = confirm("Do you like JavaScript?");
console.log("Likes JavaScript: " + likesJS);

console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (a famous JS bug!)
console.log(typeof console.log);  // "function"

<!DOCTYPE html>
<html>
<head>
  <title>Counter</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 40px; }
    #count { font-size: 48px; margin: 20px; }
    button { padding: 10px 25px; font-size: 20px; margin: 5px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <p id="count">0</p>
  <button onclick="increment()">+1</button>
  <button onclick="decrement()">-1</button>
  <button onclick="reset()">Reset</button>

  <script>
    let count = 0;

    function increment() {
      count = count + 1;
      document.getElementById("count").textContent = count;
    }

    function decrement() {
      count = count - 1;
      document.getElementById("count").textContent = count;
    }

    function reset() {
      count = 0;
      document.getElementById("count").textContent = count;
    }
  </script>
</body>
</html>

Common Mistakes

<!DOCTYPE html>
<html>
<head>
  <script>
    document.getElementById("msg").textContent = "Hello!";
  </script>
</head>
<body>
  <p id="msg">Original text</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head></head>
<body>
  <p id="msg">Original text</p>

  <script>
    document.getElementById("msg").textContent = "Hello!";
  </script>
</body>
</html>

let score = 100;
if (score = 50) {
  console.log("Score is 50");
}

let score = 100;
if (score === 50) {
  console.log("Score is 50");
}

console.log(Hello World);

console.log("Hello World");

document.getElementByld("msg").textContent = "Hello";
// Note: that is a lowercase 'L' instead of capital 'I' in 'Id'

document.getElementById("msg").textContent = "Hello";

document.getElementById("msg").textContent = "<strong>Bold text</strong>";

document.getElementById("msg").innerHTML = "<strong>Bold text</strong>";

Summary