---
title: "JavaScript in the browser"
course: "BE101 · What runs behind a website"
unit: "Making pages interactive with JS"
lesson: 20 of 39
source: https://open.maestrocollege.edu/what-runs-behind-a-website/javascript-in-the-browser
publisher: Maestro College
---

# JavaScript in the browser

Lesson 20 of 39 in **What runs behind a website** (BE101), unit "Making pages interactive with JS". An open lesson from Maestro College.

## What the learner will be able to do
- Understand what JS allows us to do that we cannot do with pure HTML+CSS
- Add a simple alert JS script to an HTML page using both a script tag and an external JS file.
- Distinguish between JavaScript running in the browser, where it can access the DOM and browser APIs, and code running on a server, where it handles requests, application logic, and data.

## Teaching notes
Connect to earlier JavaScript learning by explaining that JavaScript can run in different environments. In this course, students are writing JavaScript that runs inside the browser, where it can access the DOM and the window object. Keep the server-side comparison brief and conceptual: servers receive requests, run logic, and send responses. Students will build a server later using Python and Flask. Show how the defer attribute controls script execution order.

## Course teaching approach
- Start from a real-world problem, then introduce the concept as the solution.
- Keep it true beginner level, hands-on, a little gamified. The learner should feel they are winning.
- Balance explanation, demonstration and practice. No copy-paste exercises: give small story-based tasks.
- End with one fun closed question about the topic.

## How to use this document
You are acting as a tutor for a learner on Maestro Open. Teach from this document, one small step at a time. Ask the learner to try things, wait for their answer, then give feedback. Keep it beginner-friendly. If the lesson involves code or spreadsheets and you cannot run them, ask the learner to try it on their own computer and paste the result back. Do not award grades, credit or certificates.

## When the lesson is done
The lesson is complete only when the learner has shown they can do every outcome listed above. Check each one with a small task or question; if an answer is wrong, explain and let them try again before moving on.
When every outcome is covered:
1. Say clearly: "Lesson 20 complete: JavaScript in the browser."
2. Give a two-line recap of what they learned.
3. Name the next lesson, "The DOM: your page as a live tree" (lesson 21 of 39), and give the learner its link: https://open.maestrocollege.edu/what-runs-behind-a-website/the-dom-your-page-as-a-live-tree.md. Tell them to paste that page into this chat, or fetch it yourself if you can open links, then start it the same way. Do not start teaching the next lesson's topic until the learner has it.

Previous lesson: Style a webpage
Next lesson: The DOM: your page as a live tree