Hero

Welcome to the Execution phase! In this lesson, you will learn exactly how to run JavaScript code. You will explore browser developer tools, inline script tags, and external JavaScript files.

Prerequisites: Introduction to JavaScript
Reading Time: 6 min read
Difficulty: Beginner

Introduction

Now that we know what JavaScript is and why it's so important, the natural next question is: How do we actually run it? Do we need to download and install a heavy compiler?

The great news is that you don't need to install anything to start writing and executing JavaScript. It is already built right into every modern web browser (like Google Chrome, Firefox, Safari, or Edge). The environment required to run JavaScript is sitting in the palm of your hand and on your desktop right now.

Why This Matters

Understanding how JavaScript executes is critical for debugging and building real applications. Whether you are building a simple "Himubey Learn" landing page or an intricate Admin Dashboard, you need to know how the browser reads your code, where to place your scripts for the best performance, and how to test snippets quickly.

Core Concepts

There are multiple ways to execute JavaScript. The most common methods for frontend development are:

The Browser Console: Perfect for quick tests and debugging.
Inside an HTML file: Using the <script> tag.
External JS files: Best for clean, maintainable code.

We can also run JavaScript outside the browser using Node.js, which we will cover in the next lesson.

Syntax

To execute JavaScript inside an HTML file, we wrap our code in a <script> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Execution | Himubey</title>
</head>
<body>
    <h1>Welcome to the Portfolio</h1>

    <!-- JavaScript goes here -->
    <script>
        console.log("This is running directly inside the HTML!");
        // alert("This is a popup!");
    </script>
</body>
</html>

Real World Example

When developing a custom "Dark Mode" toggle for your portfolio, you wouldn't write all that complex logic directly inside your HTML file. Instead, you create a separate file called theme-toggle.js and link it to your HTML.

<!-- Best Practice: Linking an external JavaScript file at the end of the body -->
<body>
    <!-- Page Content -->
    <script src="theme-toggle.js"></script>
</body>

This keeps your HTML clean and makes your JavaScript reusable across multiple pages.

Best Practices

Place scripts at the bottom: Always place your <script> tags just before the closing </body> tag in your HTML. This ensures that the browser loads the visual HTML/CSS content first before trying to execute heavy JavaScript, leading to a faster perceived page load (Performance & SEO).
Use external files: For any project beyond a tiny script, use external .js files. It improves maintainability and allows the browser to cache the JavaScript file, speeding up subsequent visits.

Common Mistakes

Mistake: Forgetting to add the src attribute when trying to link an external file, or putting code inside a script tag that also has a src attribute. Correction: If a <script> tag has a src attribute (e.g., <script src="app.js"></script>), the browser will ignore any JavaScript written inside the tags. You must use separate tags for external links and inline code.

💡 Himubey Tip

When you are debugging a complex issue in a React or Next.js app, the browser console is your ultimate truth-teller. Use console.log() liberally while learning to see exactly what values your variables hold at any given moment.

Interview Questions

Do you need to install special software to run frontend JavaScript? Why or why not?
Why is it considered a best practice to place <script> tags at the bottom of the HTML <body>?
What happens if you put JavaScript code inside a <script> tag that also has a src attribute pointing to an external file?

Mini Challenge

Create a basic index.html file on your computer. Inside the <body>, add a <script> tag and write code that triggers an alert("Learning JS with Himubey!"). Save the file, open it in your browser, and verify that the popup appears.

Summary

JavaScript is built into modern browsers, meaning you can execute it instantly. You can test code in the Browser Console, embed it directly into HTML files using <script> tags, or link to external .js files for clean and professional code structure.

Next Lesson

Node.js Installation