⚡ Lesson 2: Linking Scripts & the Console

Introduction

In the previous lesson, you learned what JavaScript is. Now it's time to learn how to actually get JavaScript running on a page. There are two ways to include JavaScript in an HTML document: writing it directly inside the HTML (inline) or linking to a separate .js file (external). Both use the <script> tag.

Next up: the browser console, your essential tool for testing and debugging throughout this course.

Inline Scripts

The simplest way to add JavaScript to an HTML page is to write it directly inside a <script> tag. This is called an inline script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First JS Page</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>Check the console for a message.</p>

    <script>
        console.log("Hello from JavaScript!");
    </script>
</body>
</html>
                

When the browser reaches the <script> tag, it pauses parsing the HTML, runs the JavaScript code inside, and then carries on with the rest of the page. The message "Hello from JavaScript!" appears in the browser's console (not on the page itself).

External Script Files

The professional approach is to write JavaScript in a separate .js file and link it with the src attribute on a <script> tag. This is exactly like how you link CSS with a <link> tag.

The HTML file (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Script Demo</title>
</head>
<body>
    <h1>My Page</h1>

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

The JavaScript file (app.js)

// app.js — your first external script
console.log("This message comes from app.js!");
console.log("The script is linked and running.");
                

⚠️ Important: When a <script> tag has a src attribute, any code inside the tag is ignored. Don't mix them — use one or the other.

<!-- ❌ BAD — the inline code is ignored when src is present -->
<script src="app.js">
    console.log("This will NOT run!");
</script>

<!-- ✅ GOOD — use separate tags -->
<script src="app.js"></script>
<script>
    console.log("This WILL run.");
</script>
                

Script Placement & Loading

Where you place the <script> tag matters. When the browser encounters a script, it stops parsing the HTML to download and execute it. This can cause problems if your script tries to access HTML elements that haven't been created yet.

Three Common Approaches

Option 1: Script in the <head> (Risky)

<head>
    <script src="app.js"></script>
</head>
<body>
    <h1 id="title">Hello</h1>
</body>
                

Problem: app.js runs before the <h1> exists. If your script tries to find that element, it will get null.

Option 2: Script Before </body> (Safe)

<body>
    <h1 id="title">Hello</h1>

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

The HTML is fully parsed before the script runs. This is the traditional safe approach.

Option 3: defer Attribute (Modern Best Practice)

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

The defer attribute tells the browser: "Download this script in the background, but don't run it until the HTML is fully parsed." This gives you the best of both worlds — the script is in the <head> (clean structure) but runs after the page is ready. Deferred scripts also run in the order they appear in the HTML. Note that defer only works on external scripts (ones with a src); on an inline script it's ignored.

The Browser Console

The console is a panel in your browser's Developer Tools where JavaScript output appears. It's also where you can type JavaScript commands and run them instantly. You'll use it constantly.

How to Open the Console

Once open, you can type any JavaScript directly into the console and press Enter to run it. Try these:

2 + 2
"Hello" + " " + "World"
Math.random()
                

4
"Hello World"
0.7423189156482... (random number between 0 and 1)
                    

The console is your JavaScript playground. Any time you want to test a quick idea, try it in the console first.

Console Methods

console.log() is the most common way to output information, but the console object has several other useful methods:

// Standard output
console.log("Regular message");

// Informational (often styled with a blue icon)
console.info("This is informational");

// Warning (yellow background / icon)
console.warn("This is a warning!");

// Error (red background / icon)
console.error("Something went wrong!");

// Table format (great for arrays and objects)
console.table(["apple", "banana", "cherry"]);

// Grouping related messages
console.group("My Group");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

// Timing how long something takes
console.time("timer");
// ... some code ...
console.timeEnd("timer");
                

JavaScript Comments

Comments are notes in your code that the browser ignores. They're for humans — to explain what your code does, leave reminders, or temporarily disable code.

// This is a single-line comment
// Everything after // on this line is ignored

console.log("This runs"); // Comments can go after code too

/*
  This is a multi-line comment.
  It can span as many lines as you need.
  Great for longer explanations.
*/

/* You can also use multi-line syntax on one line */
                

// ❌ Bad comment — just restates the code
let age = 25; // set age to 25

// ✅ Good comment — explains WHY
let demoAge = 25; // Default age for demo accounts (per product spec)
                

Hands-on Exercise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Practice</title>
</head>
<body>
    <h1>JavaScript Practice</h1>
    <p>Open the console to see messages.</p>

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

// My first external JavaScript file!
console.log("app.js is connected and running!");

// Experiment with different console methods
console.log("Regular log message");
console.warn("This is a warning");
console.error("This is an error (not a real one!)");
console.info("Here's some info");

// Try some math
console.log("5 + 3 =", 5 + 3);
console.log("10 * 4 =", 10 * 4);

// Try a table
console.table(["HTML", "CSS", "JavaScript"]);
                    

<script src="app.js">
    console.log("Hi!");
</script>

📓 Learning Journal

Summary

📚 Additional Resources

• MDN — The <script> element
• MDN — Console API reference
• javascript.info — Hello, world!

🚀 What's Next?

Now that you can run JavaScript, it's time to learn the building blocks of the language. In the next lesson, you'll learn about variables and data types — how to store and work with information in JavaScript.