What JavaScript Actually Does in Your Browser

What JavaScript is for, what it runs on, and how it differs from HTML, CSS and Java. After this, you'll know what a few lines of JavaScript can and can't do on a web page.

5 min JavaScript Programming Basics Web Development Testing and Debugging Beginner

Skip ahead: If you already know JavaScript runs in the browser and changes the page after it loads, skip to "What JavaScript can't do", then go to the next lesson.

JavaScript is the language that makes a web page do something after it has loaded. A button that opens a menu, a form that tells you the password is too short before you submit it, a total that updates when you change the quantity. That is JavaScript. Without it, a page just sits there and waits for you to click a link to another page.

That is the honest reason to learn it. Not because it's trendy. Because every browser already runs it, and you don't have to install anything to start.

HTML, CSS and JavaScript: three different jobs

A web page is usually three things working together. Mix them up and nothing you read online will make sense.

HTML is the content and structure: headings, paragraphs, buttons, forms.
CSS is how it looks: colours, spacing, fonts, layout.
JavaScript is behaviour: what happens when someone clicks, types, scrolls or submits.

Example. A "Add to cart" button. HTML puts the button on the page. CSS makes it blue with rounded corners. JavaScript adds the item to the cart and updates the number on the cart icon when it's clicked.

You can build a page with only HTML and CSS. You cannot build a page that reacts to the visitor without JavaScript, unless every click goes back to the server and reloads the whole page.

JavaScript is not Java

The names are similar. The languages are not. Java is a separate language used for Android apps, banking systems and big backend services. JavaScript got its name in the 1990s mostly for marketing. If a tutorial or a job post says Java, it means Java. Don't learn the wrong one by accident.

Where JavaScript runs

There are two places you will meet JavaScript:

In the browser. Chrome, Edge, Firefox and Safari each have a JavaScript engine built in. The code comes with the web page and runs on the visitor's computer or phone. This course is about this one.
On a computer or server with Node.js. Node.js takes the same language out of the browser so you can write scripts, tools and servers. JavaScript Intermediate starts there.

The language is the same in both. What's different is what's around it. In the browser you have the page (document) and the window. In Node.js you have files and the network, but no page.

What a few lines look like

Here is a small piece of JavaScript. Don't try to run it yet. The next lesson sets that up.

const price = 250;
const quantity = 3;
const total = price * quantity;

console.log("Total:", total);

Total: 750

const stores a value under a name. * multiplies. console.log prints something to the browser console, which is where you'll see results while you learn. That's most of what a program is: store values, do something with them, show the result.

What JavaScript can't do

Knowing the limits saves you from building the wrong thing.

It can't be trusted for security. Code in the browser runs on the visitor's machine. They can read it, change it and skip it. A price check or a "you must be 18" check done only in JavaScript is a suggestion, not a rule. The server has to check again.
It can't read files on the visitor's computer unless the visitor picks the file themselves, for example with a file upload field.
It can't keep secrets. An API key or a password in browser JavaScript is public. Anyone can open the developer tools and see it.

⚠ Warning: Never put a password, API key or private token in JavaScript that runs in the browser. It's not hidden by being in a .js file. Anyone can open DevTools and read it in a few seconds. If a secret has already been in front-end code on a live site, treat it as leaked and replace it.

Common mistakes when starting

Learning a framework first. React, Vue and the like are JavaScript. If you start there, you'll be copying patterns you don't understand. Learn the language first. The frameworks will make more sense later.
Copying code until something works. It feels faster. It isn't. The first time it breaks, you won't know which part to look at.
Ignoring the console. When something doesn't work, the browser usually says exactly why, in red, in the console. Beginners often never open it.

💡 Tip: Use one browser for this course, preferably Chrome or Edge. The screenshots and steps match them. Firefox and Safari work too, but the menus are in different places.

What happens if you skip this

You can jump straight into code. Plenty of people do. But if you don't know which part of the page is HTML, which is CSS and which is JavaScript, you will try to fix a colour with JavaScript or a click with CSS, and lose an afternoon wondering why nothing changes.

So, a quick test before the next lesson. On the last website you used, find one thing that changed without the page reloading. Was that HTML, CSS, or JavaScript?

About