Home » Learn » JavaScript Tutorial » JavaScript Environment Setup

JavaScript Environment Setup

In this tutorial, we will learn how to set up a development environment for writing and running JavaScript code efficiently using a browser and a code editor.

You don’t need to install anything complex to begin writing JavaScript. Here’s what you’ll need:

1. Web Browser

  • Recommended: Google Chrome, Mozilla Firefox, or Microsoft Edge
  • All modern browsers come with built-in developer tools for testing JS

2. Code Editor

Here are some suggested editors:

VS Code is preferred for beginners due to its features, extensions, and easy debugging.

Please follow Steps to Create a Webpage in HTML using Notepad

Three Ways to Run JavaScript

1. Inline JavaScript (Inside HTML File)

Write your JavaScript directly inside a <script> tag in your HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Inline JS</title>
  <script>
    alert("Hello from Inline JavaScript!");
  </script>
</head>
<body>
  <h2>Check the popup!</h2>
</body>
</html>

2. Using the Browser Console

Every browser has a JavaScript console. Here’s how to use it:

  1. Open your browser
  2. Press F12 or Right Click → Inspect → Console Tab
  3. Type this and press Enter:
console.log("This is from the console!");

This is great for testing small bits of code quickly.

3. External JavaScript File

Create a .js file and link it in your HTML using the src attribute.

📁 Project Structure:

my-project/
├── index.html
└── script.js

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>External JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h2>Check console output</h2>
</body>
</html>

script.js:

console.log("Hello from external JavaScript file!");

This is the best practice for most projects—keeping JS code separate from HTML.

Summary:

MethodDescription
Inline JSQuick scripts directly inside HTML
ConsoleInstant test in the browser developer tools
External JS fileRecommended for real-world projects

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.