Setting Up the Workbench | HAP's Learning Lab: JavaScript Foundations

What You'll Learn at This Station

HAP's Discovery: Before writing code, you need a workbench! I learned that VS Code is where I write my code, the browser is where it runs, and the Console is where I see what's happening. Here are the three key tools:

📝 VS Code

Write code

Visual Studio Code is a free code editor. It highlights your code, catches typos, and makes writing easier.

🌐 Browser

Run code

Your web browser (Chrome, Firefox, etc.) runs JavaScript. Open your HTML file and the code executes!

🖥️ Console

See output

The browser's Developer Tools Console shows your console.log() messages. Press F12 to open it!

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I put my <script> tag in the <head> and nothing worked. The browser tried to run my code before the page loaded!
I forgot to open the Console. My code was working fine—I just couldn't see the output! Press F12, HAP...
I saved my file as .txt instead of .html. The browser showed my code as text instead of running it.

Your Code Editor: VS Code

Visual Studio Code (VS Code) is a free code editor that makes writing JavaScript much easier. Here's how to get started:

1. Download VS Code

Go to code.visualstudio.com and download the free editor for your computer (Windows, Mac, or Linux).

2. Install Prettier

Click the Extensions icon (or press Ctrl+Shift+X) and search for "Prettier." This extension automatically formats your code nicely.

3. Create a Folder

Make a new folder for your project. In VS Code, go to File → Open Folder and select it. This is your workspace!

4. Create an HTML File

Right-click in the explorer panel and choose "New File." Name it index.html — this is where your code lives.

🟠 HAP's Tip:

Save your file with Ctrl+S (or Cmd+S on Mac) frequently! The browser only sees the saved version of your file.

Where JavaScript Goes in HTML

JavaScript lives inside <script> tags in your HTML file. But where you put those tags matters a lot!

Basic HTML structure with JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HAP's First Program</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>My first JavaScript page.</p>

    <!-- JavaScript goes here, at the BOTTOM of body -->
    <script>
        console.log("HAP online!");
    </script>
</body>
</html>

The <script> tag goes at the bottom of the <body>, right before </body>.

Why Script Placement Matters

The browser reads your page top to bottom. If your script is in the <head>, it runs before the page content exists!

❌ Wrong - Script in head:

<!-- ❌ WRONG - Script in <head> runs BEFORE the page loads -->
<!DOCTYPE html>
<html>
<head>
    <script>
        // This runs before the body exists!
        // It can't find any elements on the page yet
        console.log("Running too early...");
    </script>
</head>
<body>
    <h1>This loads AFTER the script runs</h1>
</body>
</html>

This script runs too early—before the body content loads. If it tries to find elements on the page, they won't exist yet!

✅ Right - Script at bottom of body:

<!-- ✅ RIGHT - Script at bottom of <body> -->
<!DOCTYPE html>
<html>
<head>
    <title>HAP's Page</title>
</head>
<body>
    <h1>This loads first</h1>
    <p>All the HTML is ready...</p>

    <!-- Script runs AFTER everything above is loaded -->
    <script>
        console.log("Page is ready! HAP online!");
    </script>
</body>
</html>

This script runs after all the HTML is loaded. Now it can find and work with any element on the page!

Prof. Teeters Explains:

"The browser reads your page like a book—top to bottom, left to right. If you put instructions at the top that refer to things at the bottom, those things don't exist yet! Put your script at the end, after everything it might need is already there."

The Console: Your Window into JavaScript

The Console is where you see what your JavaScript is doing. It's hidden by default—here's how to find it:

Open Developer Tools

Press F12 on your keyboard (or right-click the page and choose "Inspect"). A panel will open.

Click the Console Tab

In the Developer Tools panel, click the "Console" tab. This is where your messages appear!

See Your Output

Anything you console.log() appears here. Errors also show up in red—very helpful for debugging!

Keep It Open

Leave the Console open while you're developing. It's your best friend for understanding what your code is doing.

Your First Tool: console.log()

console.log() sends a message to the Console. It's how you see what your code is doing:

Using console.log():

// console.log() sends messages to the browser's Console
console.log("HAP online!");
console.log("My name is", "HyBit A. ProtoBot");
console.log("Energy level:", 100);

// You can log multiple things at once!
const robotName = "HAP";
const energyLevel = 100;
console.log("Robot:", robotName, "Energy:", energyLevel);

You can log text, numbers, variables, or multiple things at once. This is your primary tool for understanding your code!

Breakthrough Moment!

Once I saw my first message appear in the Console, I felt like a real programmer. "HAP online!" Those two words changed everything. That's when it clicked—the Console is where I'll live for a while!

Your First Program

Let's put it all together! Here's a complete program that logs information about a robot to the Console:

A complete first program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robot ID Card</title>
</head>
<body>
    <h1>HAP's Robot ID Card</h1>

    <script>
        // My first JavaScript program!
        console.log("=== Robot ID Card ===");
        console.log("Name: HyBit A. ProtoBot");
        console.log("Model: HAP-7000");
        console.log("Status: Online and learning!");
    </script>
</body>
</html>

Save this as index.html, open it in your browser, press F12, and look at the Console. You should see the robot's information!

🟠 Try It Yourself:

Create this file, open it in your browser, and check the Console. Then change the messages! Add your own console.log() lines. Experiment! Breaking things is how you learn.

Not ready to write code yet? Try the Console Explorer first! Type any message and click buttons to see exactly what console.log() produces. No coding required—just experiment and see how the Console works.

🎓 Workbench Quick Reference

1

VS Code for writing

Download from code.visualstudio.com. Install the Prettier extension for auto-formatting.

2

Script at bottom of body

Put <script> right before </body>. Never in the <head> for now!

3

F12 opens Developer Tools

Press F12, then click the Console tab. This is where console.log() output appears.

4

console.log() is your friend

console.log("message"); sends text to the Console. Use it constantly to see what's happening!

5

Save with Ctrl+S

The browser only sees saved files. Save frequently, then refresh the browser to see changes.