CHAPTER 02 Beginner

Setting Up JavaScript Environment

Updated: May 12, 2026

15 min read

# Setting Up JavaScript Environment

Before we dive deep into writing complex JavaScript code, we need to make sure we have the right tools installed. Just like a painter needs a canvas and brushes, a programmer needs an editor and a browser.

In this chapter, we will set up a professional JavaScript development environment.

1. Introduction

To write and test JavaScript, you don't need to buy expensive software. The basic tools are 100% free. You only need two main things:

1. A Web Browser (to run and test the code).

2. A Text Editor (to write the code).

2. Learning Objectives

By the end of this chapter, you will be able to:

Open and use the Browser Developer Console.

Download, install, and configure Visual Studio Code (VS Code).

Write internal JavaScript using the <script> tag.

Link an external JavaScript file to an HTML document.

Build your very first interactive webpage from scratch.

3. The Browser Console

Every modern browser (Google Chrome, Mozilla Firefox, Microsoft Edge) has a built-in "Developer Tools" section. This tool has a Console tab that allows you to write and execute JavaScript directly in the browser.

How to open the Console:

Windows / Linux: Press F12 or Ctrl + Shift + J (Chrome).

Mac: Press Cmd + Option + J.

Once opened, you can type JavaScript directly into it and hit Enter to see the result immediately.

4. Setting up VS Code

While you can write code in Notepad or TextEdit, professional developers use Code Editors because they offer syntax highlighting, auto-completion, and error checking. The most popular editor today is Visual Studio Code (VS Code).

Steps to set up:

1. Go to code.visualstudio.com.

2. Download the version for your operating system (Windows, Mac, Linux).

3. Install the software.

4. Open VS Code and install the "Live Server" extension (search for it in the Extensions tab on the left). This extension will automatically refresh your browser every time you save your code.

5. Adding JavaScript to HTML

There are three main ways to add JavaScript to a web page. However, we only use two in modern development: Internal JS and External JS.

Method 1: Inline JS (Not Recommended)

You can write JavaScript directly inside an HTML tag using attributes like onclick.

html

<!-- Example HTML -->
<button onclick="alert(&#039;Hello World!')">Click Me</button>

*Why it's bad:* It mixes HTML and JavaScript, making your code messy and hard to maintain as your project grows.

Method 2: Internal JS

You can place your JavaScript code anywhere inside your HTML document by wrapping it in <script> tags. Usually, it is placed at the very bottom of the <body> tag.

html

1234567891011121314151617

<!-- Example HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>Internal JS Example</title>
</head>
<body>

    <h1 id="title">My Web Page</h1>

    <!-- Script goes just before the closing body tag -->
    <script>
        // Example JavaScript
        document.getElementById("title").style.color = "blue";
    </script>
</body>
</html>

Method 3: External JS (Best Practice)

For real-world projects, developers write JavaScript in a completely separate file with a .js extension (e.g., script.js). Then, they link this file to the HTML document.

index.html:

html

1234567891011121314

<!-- Example HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>External JS Example</title>
</head>
<body>

    <h1>Check the console!</h1>

    <!-- Link to the external file -->
    <script src="script.js"></script>
</body>
</html>

script.js:

javascript

// Example JavaScript
console.log("This text is coming from an external JavaScript file!");

6. Real-world Examples & Code Snippets

Let's practice writing code using the environment setup.

Example 1: Console Logging

javascript

12345

// Example JavaScript
// Type this directly in your Browser Console
console.log("Hello, Console!");
console.warn("This is a warning message.");
console.error("This is an error message.");

Output Explanation: log prints standard text, warn prints yellow text with an alert icon, and error prints red text indicating something broke.

Example 2: Doing Math in the Console

javascript

1234

// Example JavaScript
let a = 10;
let b = 25;
console.log(a + b);

Output Explanation: Prints 35.

Example 3: Internal Script Tag Execution

html

123456789

<!-- Example HTML -->
<body>
    <p>Loading data...</p>
    <script>
        // Example JavaScript
        // The browser runs this as soon as it reads the script tag
        alert("Page is loaded!");
    </script>
</body>

Output Explanation: An alert pops up immediately when the page loads.

Example 4: Deferring External Scripts

Sometimes, you want to put the <script> tag in the <head> of your HTML document, but you want it to wait until the HTML finishes loading before the JS runs. You use the defer attribute.

html

12345

<!-- Example HTML -->
<head>
    <!-- The defer attribute waits for the HTML to load completely -->
    <script src="app.js" defer></script>
</head>

Example 5: Basic DOM Access with External JS

HTML:

html

1234

<!-- Example HTML -->
<p id="message">Waiting...</p>
<button onclick="updateMessage()">Update</button>
<script src="main.js"></script>

main.js:

javascript

1234

// Example JavaScript
function updateMessage() {
    document.getElementById("message").innerHTML = "Updated via External JS!";
}

Output Explanation: Clicking the button calls a function living in a completely separate file.

Example 6: Clearing the Console

javascript

// Example JavaScript
console.clear();

Output Explanation: This wipes the developer console clean of all previous messages.

Example 7: Using Prompt to get User Data

html

123456

<!-- Example HTML -->
<script>
// Example JavaScript
let hobby = prompt("What is your favorite hobby?");
console.log("The user likes: " + hobby);
</script>

Output Explanation: Asks the user a question via a pop-up, then secretly logs their answer in the developer tools.

Example 8: Checking Data Types with Console

javascript

123

// Example JavaScript
console.log(typeof "Hello"); // Outputs: string
console.log(typeof 42);      // Outputs: number

Example 9: Writing HTML from External JS

HTML:

html

123

<!-- Example HTML -->
<div id="container"></div>
<script src="builder.js"></script>

builder.js:

javascript

// Example JavaScript
document.getElementById("container").innerHTML = "<h2>I was built by JavaScript</h2>";

Output Explanation: JavaScript injects a completely new HTML header into the empty div.

Example 10: Combining HTML, CSS, and JS

index.html:

html

123456789101112131415

<!-- Example HTML -->
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Example CSS */
        .box { width: 100px; height: 100px; background: red; margin: 20px; transition: 0.5s; }
    </style>
</head>
<body>
    <div id="myBox" class="box"></div>
    <button onclick="makeGreen()">Make Green</button>
    <script src="script.js"></script>
</body>
</html>

script.js:

javascript

12345

// Example JavaScript
function makeGreen() {
    document.getElementById("myBox").style.backgroundColor = "green";
    document.getElementById("myBox").style.borderRadius = "50%";
}

Output Explanation: When the button is clicked, the red square turns into a green circle with a smooth transition.

---

7. Common Mistakes for Beginners

1. Typos in File Paths: Writing <script src="scripts.js"></script> when the file is actually named script.js. The browser will silently fail to load the script.

2. Placing <script> tags at the top without defer: If you put the script in the <head> without defer, the JavaScript might run *before* the HTML loads, resulting in errors like "Cannot set properties of null".

3. Forgetting to save the file: VS Code requires you to save (Ctrl + S) before the browser updates. (Unless you turn on Auto Save).

8. Best Practices

Always use External JS files (.js) instead of writing JS inside HTML files.

Put your <script> tags just before the closing </body> tag so the HTML structure loads first, preventing visual delays for the user.

Use console.log() frequently while coding to check if your code is working step-by-step.

9. Mini Project: Create First Interactive Webpage

Let's build an interactive light switch using HTML, CSS, and External JavaScript.

Step 1: Create index.html

html

12345678910111213141516171819202122

<!-- Example HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>Room Light Controller</title>
    <style>
        /* Example CSS */
        body { transition: background-color 0.5s ease; text-align: center; padding-top: 100px; font-family: sans-serif; }
        .dark-mode { background-color: #222; color: white; }
        .light-mode { background-color: #fff; color: black; }
        button { padding: 15px 30px; font-size: 20px; cursor: pointer; border-radius: 8px; border: 2px solid #333; }
    </style>
</head>
<body class="light-mode" id="room">

    <h1 id="statusText">The light is ON</h1>
    <button onclick="toggleLight()">Turn Light Switch</button>

    <!-- Connect our external script -->
    <script src="app.js"></script>
</body>
</html>

Step 2: Create app.js in the same folder

javascript

12345678910111213141516171819

// Example JavaScript
let isLightOn = true;

function toggleLight() {
    let room = document.getElementById("room");
    let text = document.getElementById("statusText");

    if (isLightOn) {
        // Turn it off
        room.className = "dark-mode";
        text.innerHTML = "The light is OFF";
        isLightOn = false;
    } else {
        // Turn it on
        room.className = "light-mode";
        text.innerHTML = "The light is ON";
        isLightOn = true;
    }
}

How it works: We track the state of the light using a variable (isLightOn). When the button is clicked, our function checks this variable, changes the CSS classes applied to the <body>, updates the text, and swaps the state variable.

10. Exercises

1. Create an HTML file and link it to an external main.js file.

2. Inside main.js, write code to console.log your favorite food.

3. Add a button to your HTML. When clicked, it should trigger an alert() saying "Environment setup complete!".

11. MCQs (Multiple Choice Questions)

Q1: Which HTML tag is used to attach a JavaScript file? A) <js> B) <script> C) <javascript> D) <link> *Answer: B*

Q2: What is the correct way to link an external file named app.js? A) <script href="app.js"> B) <script src="app.js"></script> C) <script name="app.js"> D) <link src="app.js"> *Answer: B*

Q3: Where is the best place to put the <script> tag in an HTML document? A) Inside the <head> tag B) At the very top of the <body> C) Just before the closing </body> tag D) After the closing </html> tag *Answer: C*

12. Interview Questions

Q: Why is it considered a bad practice to use inline JavaScript (e.g., onclick="...")? *A: Inline JavaScript violates the principle of separation of concerns. It mixes structural code (HTML) with behavioral code (JS), making the codebase messy, difficult to debug, and hard to maintain in large applications.*

Q: What is the Developer Console used for? *A: The developer console is a tool within web browsers used to test JavaScript code, debug errors, log outputs, and inspect the performance and network requests of a webpage.*

13. FAQs

Q: Does it matter which browser I use? *A: Google Chrome is highly recommended for beginners because its Developer Tools are industry-standard, but Firefox Developer Edition is also a great choice.*

Q: Can I write JavaScript on my phone? *A: Yes, there are apps like Sololearn or Replit that allow coding on mobile, but for real development, a computer with a proper keyboard and VS Code is necessary.*

14. Summary

You need a Web Browser (Chrome) and a Text Editor (VS Code) for JS development.

The Browser Console is your best friend for testing and debugging.

Inline JS mixes HTML and JS. Internal JS uses <script> tags in the file. External JS uses a separate .js file.

Linking External JS files (<script src="...">) is the industry standard best practice.

15. Next Chapter Recommendation

Now that your environment is fully set up and you've run your first scripts, it's time to dive into the actual language mechanics. In the next chapter, JavaScript Variables and Data Types, you will learn how to store, track, and manipulate data like text, numbers, and boolean values!

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

1. Introduction #

2. Learning Objectives #

3. The Browser Console #

4. Setting up VS Code #

5. Adding JavaScript to HTML #

Method 1: Inline JS (Not Recommended) #

Method 2: Internal JS #

Method 3: External JS (Best Practice) #

6. Real-world Examples & Code Snippets #

Example 1: Console Logging #

Example 2: Doing Math in the Console #

Example 3: Internal Script Tag Execution #

Example 4: Deferring External Scripts #

Example 5: Basic DOM Access with External JS #

Example 6: Clearing the Console #

Example 7: Using Prompt to get User Data #

Example 8: Checking Data Types with Console #

Example 9: Writing HTML from External JS #

Example 10: Combining HTML, CSS, and JS #

7. Common Mistakes for Beginners #

8. Best Practices #

9. Mini Project: Create First Interactive Webpage #

10. Exercises #

11. MCQs (Multiple Choice Questions) #

12. Interview Questions #

13. FAQs #

14. Summary #

15. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

Send Feedback / Bug

Feedback Submitted!

1. Introduction

2. Learning Objectives

3. The Browser Console

4. Setting up VS Code

5. Adding JavaScript to HTML

Method 1: Inline JS (Not Recommended)

Method 2: Internal JS

Method 3: External JS (Best Practice)

6. Real-world Examples & Code Snippets

Example 1: Console Logging

Example 2: Doing Math in the Console

Example 3: Internal Script Tag Execution

Example 4: Deferring External Scripts

Example 5: Basic DOM Access with External JS

Example 6: Clearing the Console

Example 7: Using Prompt to get User Data

Example 8: Checking Data Types with Console

Example 9: Writing HTML from External JS

Example 10: Combining HTML, CSS, and JS

7. Common Mistakes for Beginners

8. Best Practices

9. Mini Project: Create First Interactive Webpage

10. Exercises

11. MCQs (Multiple Choice Questions)

12. Interview Questions

13. FAQs

14. Summary

15. Next Chapter Recommendation