# JavaScript on a Web Page

Load a JavaScript file into a ready-made web page with a script tag, open the page with Live Preview, and use the browser's Console to see what the script prints, read its errors and try a line of JavaScript.

Novice · JavaScript · Web Development · Updated November 1, 2026

## After this lesson you can

- Load a script into a web page with a script tag and open the page with Live Preview
- Use the browser's Console to see a script's output and errors and to try a line of JavaScript

## Key takeaways

- A web page is a text file of HTML. Its tags, such as `<h1>` for a heading, say what each piece of the page is.
- The tag `<script type="module" src="app.js"></script>` loads app.js into the page. Put it at the end of the body, and open the page with Live Preview.
- The Console, in the browser's developer tools (F12), shows what console.log prints and any errors, with the file and line beside each one.
- When a page looks fine but doesn't do what it should, the Console is the first place to look.

So far your JavaScript has printed into a terminal. Most JavaScript in the world runs somewhere else: inside a web page, in a visitor's browser. Every button that reacts, every form that checks itself and every game in a browser tab starts the way this lesson does: a page loads a JavaScript file. And when a button "does nothing", the first thing a developer does is open the browser's **Console**, which you'll learn to use here.

You don't need to know HTML for this course. The page in this lesson comes ready-made, and this lesson explains only the parts JavaScript needs.

## A web page in a few lines

A web page is a text file, written in **HTML**, that a browser turns into the page you see. HTML works like the labels on moving boxes: each piece of the page is wrapped in a label that says what it is. Those labels are called **tags**, and they're written in angle brackets.

- `<h1>` (read "h-one") starts the page's main heading, and `</h1>`, with a slash, ends it.
- `<p>` starts a paragraph, and `</p>` ends it.

A start tag, its end tag and everything between them make one **element**: the heading element, the paragraph element.

In your `daily-grind` folder, make a file named `index.html` with this in it. It's the page's whole file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Daily Grind</title>
</head>
<body>
  <h1>The Daily Grind</h1>
  <p>Today's specials are on the chalkboard inside.</p>
  <script type="module" src="app.js"></script>
</body>
</html>
```

Most of it is the standard wrapping every web page has, and you can copy it as it is. Three lines are the ones that matter here: the heading, the paragraph, and the `<script>` line. If you'd like to learn what every line means, the HTML in Depth course covers HTML from the start.

## The script tag loads your JavaScript

The `<script>` element is how a page says "and run this program too". It's like a note on a package: "instructions inside, see attached".

```html
<script type="module" src="app.js"></script>
```

- `src="app.js"` names the file to load, `src` being short for *source*. The file sits in the same folder as the page.
- `type="module"` says the file is a modern JavaScript **module**. Modules are how bigger programs are split into files, which Module 3 teaches. Every page in this course loads its script this way.
- The `<script>` element goes at the end of the page's body, right before `</body>`, so the heading and paragraph are already on the page when the script runs.

Now make `app.js`, in the same folder, with two statements:

```javascript
console.log("Good morning from The Daily Grind!");
console.log("Pumpkin Spice Latte: $5.25");
```

## Open the page with Live Preview

A real website sends its pages from a **web server**, a program that hands files to a browser when it asks for them. **Live Preview** runs a small web server on your own computer, so your page arrives the way a real site's would.

1. In VS Code's Explorer, right-click `index.html` and choose **Show Preview**. The page opens in a panel inside VS Code, showing the heading and the paragraph.
2. To use the browser's developer tools, open the page in your browser instead: press **Ctrl+Shift+P** (**Cmd+Shift+P** on macOS) to open the Command Palette, and choose **Live Preview: Show Preview (External Browser)**.

The address in the browser starts with `http://127.0.0.1:`. The `127.0.0.1` part is the address every computer uses for itself, so the page comes from your own computer.

Live Preview matters because of `type="module"`. If you double-click `index.html` instead, the address starts `file:///`, and the browser refuses to load a module from a file: the page shows, but `app.js` never runs. Its Console explains why, with a message that starts like this:

```text
Access to script at 'file:///C:/Users/you/Documents/javascript-course/daily-grind/app.js' from origin 'null' has been blocked by CORS policy
```

That message means "open me from a server". Close the tab and use Live Preview.

## The Console: where a page's JavaScript talks to you

The page shows the heading and the paragraph, but no specials: `console.log` doesn't write on the page. It writes in the browser's **Console**, a panel in the **developer tools** (DevTools for short) that every browser has built in.

- **Windows:** press **F12**, or **Ctrl+Shift+J** to go straight to the Console.
- **macOS:** press **Cmd+Option+J** in Chrome or Edge.

Click the **Console** tab if it isn't open. Your two lines are there, and the file and line number of each one is on the right:

```text
Good morning from The Daily Grind!          app.js:1
Pumpkin Spice Latte: $5.25                  app.js:2
```

The Console also runs JavaScript you type. Click next to the `>` at the bottom, type `3 * 4.75` and press Enter: it answers `14.25`. Type `console.log("Hello from the Console")` and it prints the line, then `undefined`. That second word is the Console reporting that `console.log` gave nothing back; you can ignore it for now, and the Functions chapter explains it.

![Chrome showing The Daily Grind page above, and the Console panel below it with the two lines from app.js, each with app.js and its line number on the right](https://www.ask-codey.com/lessons/TODO)

## Errors show up in the Console too

Change line 2 of `app.js` to `consol.log("Pumpkin Spice Latte: $5.25");`, save, and reload the page (**F5**, or **Cmd+R** on macOS). The page looks exactly the same, and that's the point: a broken script doesn't break how the page looks. The Console shows the problem in red:

```text
Good morning from The Daily Grind!                 app.js:1
Uncaught ReferenceError: consol is not defined     app.js:2
    at app.js:2:1
```

It's the same error Node gave you in *Your First JavaScript Program*: the name `ReferenceError`, the message `consol is not defined`, and the file and line, `app.js:2`. *Uncaught* means nothing in the program stepped in to handle the error, so the script stopped there. Click `app.js:2` and DevTools opens the file at that line. Fix the typo, save and reload, and the red line is gone.

**Try it.** Add a third special to `app.js`, save and reload, and find it in the Console. Then a peek at what's coming: add this line at the end of `app.js`, save and reload.

```javascript
document.querySelector("h1").textContent = "The Daily Grind is open!";
```

The heading on the page changes. That's JavaScript changing a web page, and Module 4 teaches you how it works.

## Check yourself

2 questions to try on the lesson page.

## So what

Every interactive page starts with a `<script>` element that loads a JavaScript file, and the Console is where that JavaScript talks to you: what it printed, what went wrong and on which line. Opening the Console is the first move when a page doesn't do what it should.

## Key terms

- [Script](https://www.ask-codey.com/glossary/script-javascript)
- [Tag](https://www.ask-codey.com/glossary/tag-html)
- [Module script](https://www.ask-codey.com/glossary/module-script)
- [Browser Console](https://www.ask-codey.com/glossary/browser-console)
- [Developer Tools](https://www.ask-codey.com/glossary/developer-tools)

## Cheat sheets

- [JavaScript on a Web Page](https://www.ask-codey.com/cheat-sheets/javascript-first-programs-on-a-web-page-cheat-sheet)

Source: https://www.ask-codey.com/lessons/javascript-first-programs-on-a-web-page