In short
JavaScript is the programming language that makes web pages interactive. In this guide you will learn what JavaScript does, where it runs and what you can build with it. What does JavaScript do on a web page? You already know that HTML gives a page its content and CSS makes it look nice.
JavaScript is the programming language that makes web pages interactive. In this guide you will learn what JavaScript does, where it runs and what you can build with it.
What does JavaScript do on a web page?
You already know that HTML gives a page its content and CSS makes it look nice. But a page with only HTML and CSS mostly just sits there. JavaScript is what makes it do things.
A programming language is a way to give a computer a list of instructions. JavaScript is a programming language that every web browser understands. With JavaScript, a page can react when you click, type, scroll or move the mouse.
Here are some things JavaScript does on websites you use every day:
- Opens a menu when you tap the "hamburger" icon on a phone
- Shows "Password is too short" while you are still typing in a signup form
- Adds a product to your shopping cart without reloading the page
- Loads more posts when you scroll to the bottom of a social media feed
- Shows a live clock, a countdown timer or a photo slider
HTML, CSS and JavaScript: the house analogy
Think of a website as a house.
- HTML is the structure: the walls, the doors, the windows.
- CSS is the decoration: the paint, the curtains, the furniture.
- JavaScript is the electricity: it makes the lights turn on when you press a switch, the doorbell ring and the garage door open.
A house without electricity is still a house, but nothing happens in it. In the same way, JavaScript brings a web page to life.
| Language | Job | Example |
|---|---|---|
| HTML | Content and structure | A button with the text "Like" |
| CSS | Look and layout | The button is blue with rounded corners |
| JavaScript | Behavior | Clicking the button adds 1 to the like counter |
A first look at JavaScript in action
Here is a tiny page with a button. Don't worry about understanding every line yet. Just notice that the HTML and CSS look familiar, and the new part is inside the <script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Like Button</title>
<style>
button { padding: 10px 20px; font-size: 18px; border-radius: 8px; }
</style>
</head>
<body>
<button id="like">Like (0)</button>
<script>
let likes = 0;
const button = document.querySelector('#like');
button.addEventListener('click', () => {
likes = likes + 1;
button.textContent = `Like (${likes})`;
});
</script>
</body>
</html>
Save this as index.html and open it in your browser. Every time you click the button, the number goes up: "Like (1)", "Like (2)" and so on. The script finds the button, listens for clicks, and updates the text each time. You will learn each of these pieces step by step in this course.
JavaScript can also do simple calculations and show the results in a hidden developer area called the console (you'll learn how to open it in the next lesson):
const price = 25;
const quantity = 3;
console.log(price * quantity);
// Output: 75
The first two lines store two numbers. The last line multiplies them and prints the answer, 75, in the console.
Where does JavaScript run?
JavaScript was created in 1995 to run inside web browsers. Today every modern browser, such as Chrome, Firefox, Safari and Edge, has a built-in JavaScript engine. An engine is the part of the browser that reads your code and runs it. You don't need to install anything to start: if you have a browser, you can write JavaScript.
JavaScript can also run outside the browser. Node.js is a free program that lets you run JavaScript on your own computer or on a server (a computer that sends websites to people over the internet). With Node.js, developers build the "back end" of websites, such as login systems and databases, and also command-line tools. In this course we focus on JavaScript in the browser, but everything you learn about the language itself works in Node.js too.
What can you build with JavaScript?
JavaScript is one of the most popular programming languages in the world. Once you know it, you can build:
- Interactive websites: forms, menus, image galleries, quizzes
- Web apps: to-do lists, chat apps, online editors, dashboards
- Browser games: puzzles, card games, simple 2D games
- Servers and APIs with Node.js
- Mobile and desktop apps with tools that use JavaScript under the hood
Tip: You don't need to learn everything at once. Start with small things, like changing text when you click a button. Big apps are just many small pieces put together.
Practice exercise
Copy the Like button example into a new file called index.html and open it in your browser. Click the button a few times. Then change the starting text to Like (10) and change let likes = 0; to let likes = 10;. What number do you see after one click?
Hint: the script adds 1 to whatever number is stored in likes, so the first click should show "Like (11)".
Key takeaways
- JavaScript is a programming language that makes web pages interactive.
- HTML is the structure, CSS is the decoration, and JavaScript is the electricity.
- Every modern browser can run JavaScript, so you don't need to install anything.
- Node.js lets JavaScript run outside the browser, for example on servers.
- JavaScript and Java are two different languages.
Frequently asked questions
Is JavaScript the same as Java?
No. Java and JavaScript are two completely different languages. The similar name was a marketing choice in the 1990s, when Java was very popular. A common saying is: "Java is to JavaScript as car is to carpet." Java is often used for Android apps and large business systems, while JavaScript is the language of the web browser.
Is JavaScript hard to learn for beginners?
JavaScript is a good first language. You can see results right away in your browser, and you only need a text editor and a browser to start. Like any new skill, it takes practice, so write a little code every day.
Do I need to learn HTML and CSS before JavaScript?
It helps a lot. On the web, JavaScript usually works with HTML elements and CSS styles, so basic knowledge of both makes JavaScript much easier to understand.