What JavaScript is and where it runs

A web page can show you the bus timetable. It cannot tell you that the next bus is in four minutes, hide the ones that have already gone, or react when you tap a stop. Something has to decide what happens next, and that something is JavaScript.

Here is a whole JavaScript program:

console.log("The next bus leaves in 4 minutes");

The next bus leaves in 4 minutes

Press Run. console.log is how you ask JavaScript to write something out where you can read it, and you will use it constantly while you are learning.

Three languages, three jobs

Almost every page you use is built from three languages, and they do not overlap.

HTML is the structure. It says what exists on the page — a heading, a paragraph, a button:

<h1>Karachi bus times</h1>
<button>Show the next bus</button>

CSS is the appearance. It says what those things look like:

button {
  background: darkgreen;
  color: white;
  padding: 10px;
}

JavaScript is the behaviour. It decides what happens when someone presses that button.

Think of a shop. HTML is the shelves and the goods on them. CSS is the paint, the lighting and the signs. JavaScript is Omar behind the counter, who notices you have walked in and does something about it.

The split is useful because you can repaint the shop without rebuilding the shelves.

Instructions run in order, top to bottom

A JavaScript program is a list of instructions. The engine reads them in the order you wrote them:

console.log("Omar opens the shop");
console.log("The first customer arrives");

Omar opens the shop
The first customer arrives

Swap those two lines and the messages swap too. That sounds obvious, and it is the cause of a surprising number of bugs later on.

JavaScript is not limited to printing text you already know. It can work things out:

console.log(300 + 150);

450

Notice there are no quotation marks around 300 + 150. Quotation marks would have made it text, and text does not add up:

console.log("300" + "150");

300150

That is not a mistake in JavaScript — it is joining two pieces of text, exactly as it was told. Getting the quotation marks wrong is one of the most common early mistakes, and this is what it looks like when it happens.

Where JavaScript actually runs

Every modern browser — Chrome, Firefox, Edge, Safari — contains a JavaScript engine: a program whose whole job is reading JavaScript and carrying it out. That is why a visitor to your page installs nothing. The engine is already there, in the browser they are using.

JavaScript also runs outside the browser, through a tool called Node.js, which is how people use it to build servers. You do not need Node yet. The browser is the shortest path from writing a line to seeing it work, which is why every runnable example on this site runs in yours.

The console is where you experiment

The console is a panel built into your browser for running JavaScript and reading what it prints. It is the fastest way to test one idea without making a file for it.

In Chrome or Edge, press F12 and choose the Console tab. You can also right-click the page, choose Inspect, and find Console there.

Type this next to the > and press Enter:

console.log("Fatima is testing the console");

Fatima is testing the console

One thing to be clear about: the console is for you, not for your visitors. Nothing you print there appears on the page itself. It is a workbench, not a shop window. Later lessons show how to change what the visitor actually sees.

On a busy website you may find messages already in the console that the site put there. That is normal — look for the text you typed.

Putting JavaScript into a page

A browser needs to be told where JavaScript starts and stops. The <script> element does that:

<!doctype html>
<html>
  <body>
    <h1>Ayesha's book list</h1>

    <script>
      console.log("The book page is ready");
    </script>
  </body>
</html>

Open that file and the heading appears exactly as it would without the script. Open the console and the message is waiting there too. The heading came from HTML; the message came from JavaScript. Delete the script and the heading is still fine — that is the separation from earlier, in practice.

For anything longer than a couple of lines, keep the JavaScript in its own file:

<script src="app.js"></script>

src means source. It tells the browser to fetch and run the JavaScript in app.js. The name has to match the real file exactly — if your file is called main.js, then src="app.js" finds nothing at all, and it fails quietly.

Where the script tag goes, and why

The browser reads an HTML file from top to bottom, and a plain script runs the moment it is reached. So where you put it decides what has been read by then.

The dependable beginner choice is immediately before the closing </body>:

<body>
  <h1>Lahore canteen</h1>
  <button>Show today's meal</button>

  <script src="app.js"></script>
</body>

By the time that script runs, the heading and the button already exist. That matters enormously once your JavaScript starts working with the page.

The alternative is to put it in the <head> with defer:

<head>
  <title>Islamabad weather</title>
  <script src="weather.js" defer></script>
</head>

defer tells the browser it may start downloading the file early, but must wait until the HTML is read before running it. You get the earlier download without the risk.

Two rules worth remembering: never put a script after </html> — browsers will try to repair it and the repairs differ — and do not add defer to a script at the end of the body. Everything above it has already been read, so there is nothing left to defer.

JavaScript is not Java

This one catches almost everybody, and it catches them because the evidence looks convincing.

The names really do overlap:

console.log("JavaScript".startsWith("Java"));

true

true here means one thing only: the word "JavaScript" begins with the four letters "Java". It is a fact about spelling. It says nothing whatsoever about how the two languages work, and nothing about one being a version of the other.

They are separate languages, built by different people, for different purposes. Java code cannot go in a .js file. Learning one does not teach you the other. The shared name is a marketing decision from the 1990s that has confused beginners ever since.

Why it matters right now, practically: when you search for help, search for the whole name. "Java string methods" and "JavaScript string methods" return answers for two unrelated languages, and following the wrong one wastes an afternoon.

console.log("Java" === "JavaScript");

false

=== asks whether two values are exactly the same. They are not — and neither are the languages.

Wire up your own two files

Make a folder and put index.html in it:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canteen notice</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Canteen notice</h1>
    <p>Open the console for today's message.</p>
  </body>
</html>

Then app.js, in the same folder:

console.log("Biryani today, 350 rupees");

Biryani today, 350 rupees

Open index.html in your browser and look in the console. If nothing appears, check the filename character for character and make sure both files are in the same folder — a mistyped src produces no error on the page, just silence.

That silence is worth getting used to now. Next you will want your programs to remember things rather than just announce them, which is what the variables lesson is about, and once you are storing words you will want to do things with them — that is the strings lesson.