Why JavaScript?

What is JavaScript?

JavaScript is a programming language: a way to write step-by-step instructions that a computer follows. What makes it special is where it runs. Every web browser, including Chrome, Safari, Firefox, and Edge, has JavaScript built in. That makes it the one language that can make any web page react to you.

Whenever a website does something without loading a whole new page, JavaScript is usually behind it:

• A Like count that goes up the moment you tap it.
• A menu that slides open, or a photo gallery you can swipe.
• A form that warns “That email looks wrong” before you press Send.
• A map you can drag around, or a game that runs right in a tab.

In this lesson you’ll switch a web page’s layers on and off, step through your first five lines of real code, sort real apps by where their JavaScript runs, and find out why “JavaScript” has almost nothing to do with “Java.”

A web page is usually built from three languages, and each one has a single job:

• HTML (HyperText Markup Language) describes the content: headings, paragraphs, images, and buttons.
• CSS (Cascading Style Sheets) describes the looks: colors, sizes, spacing, and layout.
• JavaScript describes the behavior: what happens when you click, type, scroll, or wait.

Here’s a tiny page with a Like button. Its HTML is always on. Switch the CSS and JavaScript layers on and off, click Like each time, and watch what changes.

1<div class="card">2  <p>Learning JavaScript today!</p>3  <button id="like">♥ Like</button>4  <span id="count">0 likes</span>5</div>

1.card {2  padding: 16px;3  border: 1px solid silver;4  border-radius: 12px;5}6#like {7  padding: 6px 14px;8  border: none;9  border-radius: 999px;10  background: royalblue;11  color: white;12  font-weight: bold;13}

1const button = document.querySelector("#like");2const count = document.querySelector("#count");3let likes = 0;4 5button.addEventListener("click", () => {6  likes = likes + 1;7  count.textContent = likes + " likes";8});

What did you notice?

1. HTML alone already shows the text and the button. It just can’t do anything when you click.
2. CSS changes only the looks. A pretty button still does nothing on its own.
3. JavaScript adds behavior: it listens for clicks and updates the count, even when CSS is off.

Now read the JavaScript layer in plain words. Lines 1 and 2 find the button and the count text on the page. Line 3 creates likes, a named value that starts at 0. Line 5 tells the browser, “when the button is clicked, run the code inside.” Line 6 adds one to likes, and line 7 writes the new number onto the page. (Yes, after one click it says “1 likes”. Fixing that needs an if, which you’ll learn in the Control flow module.)

You don’t need to understand every symbol yet; each one gets its own lesson. Remember the shape instead: find something on the page, listen for an event, change the page. An enormous amount of front-end code follows that pattern.

Real programs are made of small steps like the ones behind that Like button. Here is a program that counts likes without any web page at all. First, meet the pieces:

• let likes = 0; creates a variable: a name, likes, that holds a value, 0. Think of a jar with a label on it.
• = means “store the value on the right in the name on the left.” It is not the equals sign from math class.
• + adds numbers, and glues pieces of text together.
• const message creates another variable, one that won’t be given a new value later.
• console.log(...) prints a value in the console, a panel in your browser where code can leave notes for developers.

Predict what line 5 prints. Then click the blue line, or press Step, and follow the program one event at a time. Afterward, change how many likes lines 2 and 3 add, and predict again.

1let likes = 0;Run2likes = likes + 1;3likes = likes + 1;4const message = "Liked " + likes + " times";5console.log(message);

Notice that the computer did exactly what the lines said, in order, and nothing more. That predictability is what makes programming learnable: if you can trace the steps, you can predict the result.

Front end, back end, mobile & desktop

JavaScript was born in the browser in 1995. Today it runs almost anywhere a computer does:

Put it to the test. Where does the JavaScript in each example run?

What makes it a friendly first language

Plenty of languages can build great software. JavaScript has a few things going for it as a first language:

1. Nothing to install. Your browser already runs JavaScript. Open its console and start typing; Exercise 1 shows you how.
2. Instant feedback. Change a line and see the result in seconds, just like the experiments on this page.
3. Flexible. You don’t have to declare what kind of value a variable holds; JavaScript works it out as the program runs. This is called dynamic typing.
4. Useful everywhere. The same language builds web pages, servers, and apps, so everything you learn keeps paying off.
5. A huge community. Millions of developers, free references like MDN, and millions of open-source packages mean someone has usually solved your problem before.

That flexibility has a price: JavaScript sometimes converts values for you when you didn’t ask it to. Predict each result below, then step through to check. Two are easy; two are JavaScript being a little too helpful.

12 + 2;Run2"Hello, " + "world";3"5" + 3;4"5" - 3;

JavaScript is not Java

Despite the name, JavaScript and Java are different languages, made by different people, for different jobs. In 1995, Netscape wanted a quick scripting language for its web browser. Brendan Eich built the first version in about ten days. It was called Mocha, then LiveScript, and was finally renamed JavaScript, mostly as marketing: Java was the exciting new language of the day, and Netscape had a deal with Java’s maker, Sun Microsystems.

Can you tell them apart? Sort each line of code by language. Look for the clues in the table.

Common misconceptions

Reading is good; doing is better. Each exercise takes a few minutes. Try it before you open a hint, and open hints before the solution.

let likes = 3;
likes = likes + 2;
likes = likes + 2;
console.log("Liked " + likes + " times");

/* 1. CSS: change the button's look */
#like { background: green; }

<!-- 2. HTML: add new content -->
<button id="share">Share</button>

// 3. JavaScript: change the behavior
likes = likes + 10;

let score = 10;
score = score + 5;
console.log(score);

Your score counts first tries, and every choice explains itself, so read the explanations for wrong answers too.

Key takeaways

• JavaScript is a programming language that every web browser understands, which makes it the language of interactive web pages.
• HTML is the content, CSS is the looks, and JavaScript is the behavior.
• It also runs on servers (Node.js, Deno, Bun), in phone apps, and in desktop apps.
• It’s a friendly first language: nothing to install and instant feedback. Its flexibility brings a few surprises, like "5" + 3 giving "53".
• Despite the name, JavaScript is not Java.

Up next: A short history of JavaScript, the story of how a ten-day prototype became the language of the web, and why a new version comes out every year.