Why JavaScript?

What is JavaScript?

JavaScript is a programming language. A programming language is a way to write instructions for a computer. The computer follows the instructions one step at a time.

JavaScript is special because of where it runs. Every modern web browser can run it: Chrome, Safari, Firefox, and Edge. Each browser has a JavaScript engine. That is the part of the browser that reads JavaScript and runs it. So JavaScript is the language browsers use to make a page react when you click, type, or wait.

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

This one line uses console.log. It prints a value in the console. The console is a panel in the browser where developers see messages from their code. Here it prints Hello, JavaScript!. This single line is already a whole program: one instruction, and one result you can see.

Programs get more useful when they work with a value. This example saves a person's name, then uses the name in a message:

const user = "Asha";
console.log("Welcome, " + user);

Line 1 saves the text Asha under the name user. Line 2 joins Welcome, and that name, and prints Welcome, Asha.

A web page can do the same with something a person chose. Here, the person chose tea:

const item = "tea";
console.log("Added " + item);

Line 1 saves the item name tea. Line 2 joins the word Added and the item name, and prints Added tea. A shopping page could show this message when someone puts tea in their cart.

When a website changes without loading a whole new page, JavaScript is usually doing the work. For example:

• A Like count that goes up as soon as you tap it.
• A menu that slides open, or photos you can swipe through.
• A form that warns “That email looks wrong” before you press Send.
• A map you can drag around, or a game that runs in a browser tab.

Most web pages are built from three kinds of code. We call them the three layers of a page. Each layer has its own job:

• HTML (HyperText Markup Language) is the content: headings, paragraphs, pictures, and buttons.
• CSS (Cascading Style Sheets) is the looks: colors, sizes, spacing, and where things sit on the page.
• JavaScript is the behavior: what happens when you click, type, scroll, or wait.

Here is one small job for the JavaScript layer. A form can use JavaScript to check what someone typed before it is sent. This code does one tiny check:

const email = "asha@example.com";
console.log(email.includes("@"));

Line 1 saves an example email address. Line 2 uses includes, which asks: is this piece of text inside that one? The text has an @ sign, so line 2 prints true.

This is only a quick hint for the person typing. It does not prove that the address is real. The website's server still checks important form data. A server is a computer that runs the website and stores its data.

Now try a tiny page with a Like button. Its HTML is always on. Switch CSS and JavaScript 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 shows the text and the button. But clicking the button does nothing, because no code is waiting for the click.
2. CSS changes only the looks. A nicer button still does nothing when you click it.
3. JavaScript adds the behavior. It waits for clicks and updates the count. It works even when CSS is off.

Here is the JavaScript layer, line by line:

1. Lines 1 and 2 find two things on the page: the Like button and the count text.
2. Line 3 makes likes, a name that holds a number. It starts at 0.
3. Line 5 tells the browser: "When someone clicks the button, run the code inside the curly braces."
4. Line 6 adds one to likes.
5. Line 7 writes the new number onto the page.

After one click, the page says "1 likes". That is a small mistake in the English. Fixing it 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. For now, remember these three steps. A lot of web page code follows them:

1. Find something on the page.
2. Wait for an event: something that happens, like a click.
3. Change the page.

The Like button used a few small steps. Here is a program that counts likes with no web page at all. First, meet each piece:

• let likes = 0; makes a variable. A variable is a name that holds a value. Here the name is likes and the value is 0.
• = means "put the value on the right into the name on the left." It is not the equals sign from math class.
• + adds two numbers. With text, it joins the pieces of text together.
• const message makes another variable. const means this variable will not get a new value later.
• console.log(...) prints a value in the console, the panel you met at the start of this lesson.

Guess what line 5 prints. Then click the blue line, or press Step, to run the program one small step at a time. After that, change how many likes lines 2 and 3 add, and guess again.

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

The computer did exactly what each line said, in order, and nothing else. That makes a program easy to predict: if you follow the steps, you know the result.

Where JavaScript runs: front end, back end, phone & desktop

JavaScript started in the browser in 1995. Today it runs in other places too. Two words help here:

• The front end is the part of a website that runs on your device, in the browser. It is the page you see and click.
• The back end is the part that runs on a server: a computer far away that stores data and does work for the website.

The table shows four places where JavaScript runs. Read each row as: "Here, JavaScript does this job, for example in these apps."

The JavaScript language is the same in each place. But each place gives it different extra tools. These extra tools are called the host API. The host is the place that runs your code. An API is a set of ready-made tools that your code can use. In a browser, one of these tools is document. It lets JavaScript reach the web page itself:

const button = document.querySelector("#order");
console.log(button.textContent);

The page has one button that says Order tea. Line 1 uses document to find that button. Line 2 reads the button's text and prints Order tea. A Node.js server has its own useful tools. But it has no web page, so it has no document.

Now test yourself. Where does the JavaScript in each example run?

What makes it a friendly first language

Many languages can build great software. Here is why JavaScript is a good first language:

1. Nothing to install. Your browser already runs JavaScript. You can open the browser's console and start typing. Exercise 1 shows you how.
2. Fast results. Change a line and see the new result in seconds, like in the experiments on this page.
3. Flexible. You don't have to say what kind of value a variable holds, such as a number or text. JavaScript works it out while the program runs. This is called dynamic typing.
4. Useful in many places. The same language builds web pages, servers, and apps. So what you learn here keeps helping you later.
5. Lots of help. Millions of developers use JavaScript. There are free guides like MDN. There are also millions of free code packages: code that other people wrote and share for anyone to use. Someone has usually solved your problem before.

Being flexible has a downside. Sometimes JavaScript changes a value from one kind to another when you didn't ask it to. Guess each result below, then step through to check. Two results are easy. Two are surprising.

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

When a value should be a number, turn it into a number yourself. Don't hope that JavaScript guesses right. This matters for forms: a form field gives you text, even when the person typed a number.

const scoreText = "5";
const score = Number(scoreText);
console.log(score + 3);

Line 1 saves text, because the value has quotes around it. Line 2 uses Number to turn that text into the number 5. Line 3 adds 3 and prints 8.

Number can't turn every piece of text into a number. For example, a price field might be empty, or have a word in it by mistake:

const priceText = "tea";
const price = Number(priceText);
console.log(Number.isNaN(price));

Line 1 saves tea, which is not a price. Line 2 tries to turn it into a number and gets NaN. NaN is a special value. Its name is short for "not a number". Line 3 uses Number.isNaN to ask: is price the value NaN? It is, so line 3 prints true. So check the numbers that come from a form before you use them in a sum. Later, the Type conversion lesson shows more ways to handle text that is not a number.

JavaScript is not Java

The names sound alike, but JavaScript and Java are two different languages. Different people made them, for different jobs. Here is how JavaScript got its name:

• In 1995, a company called Netscape made a popular web browser. Netscape wanted a simple language for that browser.
• Brendan Eich, who worked at Netscape, built the first version in about ten days.
• The language was first called Mocha, and then LiveScript.
• Then Netscape renamed it JavaScript, mostly to help sell it. Java was a new and popular language at the time. Netscape also had a deal with Sun Microsystems, the company that made Java.

The table compares the two languages. Read across each row to see how they differ.

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

A small real-world calculation

A shopping page can use JavaScript to update the total when you change how many items you want. Here, the item is a cup of tea:

const teaPrice = 3;
const quantity = 2;
const total = teaPrice * quantity;
console.log("Total: " + total);

Line 1 sets the price of one cup to 3. Line 2 sets the number of cups, the quantity, to 2. Line 3 multiplies them with *, the multiply sign. Line 4 prints Total: 6.

Real orders often add one more cost. This version adds a delivery charge of 1:

const teaPrice = 3;
const quantity = 2;
const delivery = 1;
console.log(teaPrice * quantity + delivery);

Lines 1 and 2 are the same as before, so the tea costs 6. Line 3 saves the delivery charge, 1. Line 4 works out teaPrice * quantity + delivery and prints 7. JavaScript multiplies first and adds second, like in math class. You may add round brackets, (teaPrice * quantity) + delivery, if that makes the sum easier to read. The answer is the same.

Now change the number of cups with the slider. The price stays at 3 per cup.

The slider shows the answer right away. To watch the four lines of the first example make Total: 6 one step at a time, use this replay:

1const teaPrice = 3;Run2const quantity = 2;3const total = teaPrice * quantity;4console.log("Total: " + total);

The table shows the total for three different numbers of cups. The price is always 3.

A browser check is not security

JavaScript in a web page runs on the visitor's own device: their phone or computer. That makes it good for quick hints. For example, it can tell someone that their password is too short before they send the form.

const passwordLength = 5;
const looksLongEnough = passwordLength >= 8;
console.log(looksLongEnough);

Line 1 saves a sample length: 5 characters. Line 2 uses >=, which means "is greater than or equal to". It asks: is 5 at least 8? The answer is no. So line 3 prints false.

This check is only a helpful hint. Visitors can change the JavaScript in their own browser. So the website's server must check important rules again.

The browser can also turn that check into a friendly message:

const passwordLength = 5;
const message = passwordLength >= 8 ? "Looks long enough" : "Use a longer password";
console.log(message);

Line 1 uses the same sample length. Line 2 picks one of two messages with ? :. Read it like this: "If the part before ? is true, use the first message. If not, use the second message." Here the part before ? is false, so line 3 prints Use a longer password.

This code can't sign anyone in, and it doesn't decide whether a password is safe. A long password is not always a safe one. The code only gives an early hint. The server checks the real rule and keeps the password safe.

Choose a sample length below, then step through the check. With 8 or more characters, it prints true. It is still only a hint in the browser, not a security decision.

1const passwordLength = 5;Run2const looksLongEnough = passwordLength >= 8;3console.log(looksLongEnough);

Common misconceptions

Each exercise takes a few minutes. Try it yourself first. If you get stuck, open a hint. Open the solution last.

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 only your first try at each question. Every choice has a short explanation, so read the ones for wrong answers too.

Key takeaways

• JavaScript is a programming language that every web browser can run. That is why web pages use it to react to you.
• HTML is the content, CSS is the looks, and JavaScript is the behavior.
• JavaScript also runs on servers (with Node.js, Deno, or Bun), in phone apps, and in desktop apps.
• It's a friendly first language: there is nothing to install, and you see results fast. Being flexible brings a few surprises, like "5" + 3 giving "53".
• JavaScript and Java are different languages, even though their names sound alike.

Coming next: A short history of JavaScript. It tells how a language built in ten days became the language of the web, and why a new version comes out every year.