JavaScript in the browser

JavaScript is a programming language that every web browser can run. HTML describes the content of a page, CSS describes how it looks, and JavaScript describes how it behaves: what happens when you click, type, scroll or load new data.

Today JavaScript also runs outside the browser, on servers with Node.js, Deno or Bun, in mobile apps and even in some databases. But the browser is the best place to learn, because you get instant visual feedback and powerful developer tools for free.

The console

Open any web page, then open the developer tools with F12, or Command+Option+I on a Mac, and choose the Console tab. Type:

2 + 3
"Hello".toUpperCase()
document.title

Each line runs immediately and shows the result. The console is a perfect place to try small ideas. The last line reads the title of the page you are on, a tiny first taste of JavaScript talking to the page.

Adding JavaScript to a page

For real projects, JavaScript lives in its own file. Create index.html and app.js in a folder:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tip calculator</title>
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Tip calculator</h1>
  </body>
</html>

In app.js, write:

console.log("app.js is running");

Open the page in a browser and check the console for the message.

Why type module

The type="module" attribute does two useful things. It lets you use import and export to split code across files, which we cover later. And module scripts are deferred automatically, meaning they run after the HTML has been parsed, so your code can find elements on the page without extra work.

A local server

Some features, including modules, do not work when you open a file directly with a file:// address. Use a small local server. The Live Server extension for VS Code works well, or run npx serve in the folder if you have Node.js installed.

In the next lesson we look at values and variables.