Running JavaScript

Table of Contents +

In the previous lesson, we learned what JavaScript is and what it does. Now let’s look at the different ways to actually run JavaScript code.

🖥️ Ways to Run JavaScript

There are a few common ways to run JavaScript:

In the browser console 🔍 - the quickest way to test small pieces of code
Inside an HTML file 📄 - using a <script> tag
From an external file 🗂️ - linking a separate .js file
Outside the browser 🚀 - using Node.js

Let’s go through each one.

🔍 The Browser Console

The console is the fastest way to try JavaScript. You don’t need to create any files, just open your browser and start typing.

Open any web page in your browser.
Right-click the page and choose Inspect.
Click the Console tab.
Type a line of JavaScript and press Enter.

For example, type the following and press Enter to see the result:

console.log("Hello from the console!");

This single line calls console.log, the built-in command that prints a value to the console, and passes it the text "Hello from the console!" to display.

Best for quick tests

The console is great for testing small snippets and checking values. For real projects, you will write your code in files instead.

📄 JavaScript Inside an HTML File

You can write JavaScript directly inside an HTML file using a <script> tag. The browser runs the code inside the tag when it loads the page.

<!DOCTYPE html>
<html>
  <body>
    <h1>My Page</h1>

    <script>
      console.log("This runs when the page loads");
    </script>
  </body>
</html>

Here we put a small program right inside the page:

<!DOCTYPE html> and <html> declare a standard HTML document.
<body> holds the visible content, and <h1>My Page</h1> shows a heading.
The <script> tag marks the start of JavaScript, and the browser runs the console.log line inside it as the page loads.

This works fine for small examples, but mixing JavaScript and HTML in the same file gets messy as your project grows.

🗂️ JavaScript From an External File

The recommended way is to keep your JavaScript in a separate .js file and link it to your HTML. This keeps your code organized and easy to maintain.

First, create a file named script.js:

// script.js
console.log("This runs from an external file");

This file holds the JavaScript on its own:

The first line is a comment, marked by //, which the browser ignores; it’s just a note for us.
The console.log line prints its message and is the actual code that runs.

Then link it in your HTML using the src attribute:

<!DOCTYPE html>
<html>
  <body>
    <h1>My Page</h1>

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

The page itself stays plain HTML, and the script comes from outside:

The <body> and <h1> are the same visible content as before.
The <script src="script.js"> tag has no code between its tags; instead, src tells the browser to load and run the code from script.js.

Why use a separate file?

Keeping JavaScript in its own file separates your structure (HTML) from your behavior (JavaScript). It makes your code cleaner, reusable, and easier to debug.

Where to place the script tag

Place the <script> tag just before the closing </body> tag. This makes sure all the HTML elements are loaded before your JavaScript runs, so your code can find the elements it needs.

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

  <!-- Script at the bottom, after the HTML it uses -->
  <script src="script.js"></script>
</body>

Notice the order of the elements inside the body:

The <h1 id="title"> comes first, so it exists by the time the script runs.
The  line is an HTML comment that explains the placement.
The <script src="script.js"> tag sits at the bottom, so the browser finishes building the page before loading and running the file.

🚀 Running JavaScript With Node.js

JavaScript can also run outside the browser using Node.js. This is how JavaScript is used to build servers and command-line tools.

After installing Node.js, you can run a file from the terminal:

node script.js

This command tells Node.js to read the file script.js and run the JavaScript inside it, printing any output straight to the terminal.

We will focus on the browser

For now, we will run our JavaScript in the browser, since that is where it is easiest to see the results. You can explore Node.js later once you are comfortable with the basics.

⚠️ Common Mistakes to Avoid

Mistake	Problem	Solution
Wrong file path in `src`	The browser cannot find the file and the code does not run	Check that the path matches the file’s location
Script placed before the HTML it uses	The code runs before the elements exist	Put the `<script>` tag at the end of the body
Adding content inside a linked `<script>` tag	The code inside is ignored when `src` is used	Use either `src` or inline code, not both in one tag

🔧 Try It Yourself!

Create a file named index.html and a file named script.js in the same folder.
In script.js, add console.log("My external file works!").
Link script.js in your HTML using a <script> tag at the bottom of the body.
Open index.html in your browser, open the console, and check that the message appears.

🧩 What You’ve Learned

✅ JavaScript can run in the browser console, in an HTML file, in an external file, or with Node.js
✅ The console is best for quick tests
✅ Keeping JavaScript in a separate .js file is the recommended approach
✅ The <script> tag should go at the end of the body so the HTML loads first
✅ Node.js lets you run JavaScript outside the browser

🚀 What’s Next?

Now that you can run JavaScript, we will learn how to store and label data using variables. Let’s continue to Variables.

Previous Introduction to JavaScript Next JavaScript Variables

Share & Connect

Share on LinkedIn