JavaScript is the programming language of the web. Every modern browser understands it, and it is the only language that runs natively inside a web page. If HTML gives a page its structure and CSS gives it its look, JavaScript gives it behaviour: it reacts when someone clicks, types or scrolls, and it can change the page without reloading it.
This lesson answers the question “what is JavaScript?” and gets your first script running. The track assumes you already know a little HTML and CSS. If not, start with the HTML Introduction and the CSS Introduction first – you will use both all the time in this track.
What is JavaScript used for?
Almost everything interactive you see on a website involves JavaScript. A few everyday examples:
- Show or hide a mobile menu when the hamburger icon is tapped.
- Check a form before it is sent, for example warning that a phone number is too short.
- Update a shopping cart total the moment you change the quantity.
- Load new posts or search results from a server without refreshing the page.
- Build complete applications such as maps, chat apps and online editors.
The idea to remember is that JavaScript works with HTML and CSS. It reads the elements on the page, changes their text, adds or removes classes, and creates new elements. You will learn exactly how in the DOM Manipulation lesson.
Where does JavaScript run?
Each browser has a JavaScript engine built in: V8 in Chrome and Edge, SpiderMonkey in Firefox and JavaScriptCore in Safari. When the browser loads your page, the engine reads your code and runs it, line by line, from top to bottom.
JavaScript can also run outside the browser. Node.js uses the V8 engine to run JavaScript on servers and on your own computer, which is why many build tools are written in it. In this track we focus on the browser.
Tip: JavaScript and Java are two completely different languages. The similar name was a marketing decision in the 1990s. The official standard behind JavaScript is called ECMAScript, and a new edition is released every year.
Your first script
The simplest way to add JavaScript is the <script> element. Code inside it runs when the browser reaches it. In the example below, the script finds the paragraph with the id greeting and replaces its text. Press Try it Yourself, change the message and run it again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first script</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
</style>
</head>
<body>
<h1>Welcome</h1>
<p id="greeting">This text will be replaced.</p>
<script>
// Find the paragraph and change its text
const greeting = document.getElementById('greeting');
greeting.textContent = 'Vanakkam! This sentence was written by JavaScript.';
</script>
</body>
</html>Two important pieces are already here. document.getElementById() finds one element on the page, and the textContent property sets the text inside it. The word const creates a named box (a variable) that holds the element – variables are the topic of the next lesson.
Inline script or external file?
For small demos an inline <script> is fine. On real websites you normally keep JavaScript in a separate .js file and link to it with the src attribute. This keeps HTML clean and lets the browser cache the file, so returning visitors download it only once.
<head>
<meta charset="utf-8">
<title>Shop</title>
<!-- defer: download now, run after the HTML is parsed -->
<script src="js/app.js" defer></script>
</head>The defer attribute matters. Without it, the browser stops building the page while it downloads and runs the script, and the script cannot find elements that appear further down the HTML. With defer, the script runs only after the whole document has been read. The older alternative is to put the <script> tag just before </body>, which is what our runnable examples do.
Basic syntax rules
- A program is made of statements. Each statement usually sits on its own line and ends with a semicolon
;. Semicolons are optional in many cases, but using them consistently avoids rare surprises. - JavaScript is case-sensitive:
total,TotalandTOTALare three different names. - Text values (strings) go inside quotes:
'Pune'or"Pune". //starts a single-line comment and/* … */wraps a multi-line comment. Comments are ignored by the engine and are there for humans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Syntax basics</title>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; line-height: 1.5; }
</style>
</head>
<body>
<h1>Order summary</h1>
<p id="out"></p>
<script>
/* A tiny order calculation.
Each line below is one statement. */
const pricePerKg = 120; // rice, in rupees
const kilos = 5;
const total = pricePerKg * kilos;
document.getElementById('out').textContent =
'You bought ' + kilos + ' kg of rice. Total: Rs. ' + total;
</script>
</body>
</html>Seeing your results
There are three common ways to see what your code is doing:
| Method | Where the result appears | When to use it |
|---|---|---|
element.textContent = … | On the page itself | Showing results to users – and in our Try it editor |
console.log(…) | Browser DevTools console (F12 or Ctrl+Shift+I) | Debugging while you build |
alert(…) | A pop-up box | Rarely – it blocks the page until closed |
Get into the habit of opening the DevTools console while you practise on your own computer. Any error in your code is reported there in red, with the line number, which is the fastest way to find a typo.
Watch out: You may see old tutorials use document.write(). Avoid it: if it runs after the page has loaded it wipes out the whole document. Changing an element’s textContent is the safe, modern approach.
What comes next
In the next lesson, Variables and Data Types, you will learn how to store values like prices, names and true/false flags, and how JavaScript tells different kinds of values apart.