Getting Started with JavaScript

Home » JavaScript Tutorial » JavaScript Introduction » Getting Started with JavaScript

Before you can write your first interactive program, you need to set up your tools, connect your JavaScript file to your webpage, and learn to use your most important debugging aid: the browser console.

Choose and Configure Your Text Editor

Your text editor is your workspace. While you could technically write code anywhere, modern editors offer essential features that make development faster, easier, and less prone to errors.

The industry-standard choice is Visual Studio Code (VS Code). It provides powerful features like Syntax Highlighting (coloring your code to make it readable), IntelliSense (smart code suggestions), and a vast Extensions marketplace.

Your First Step: Download and install VS Code. Create a new folder on your desktop for your course projects and get comfortable opening and saving files within it. This is your dedicated coding environment.

Linking Your JavaScript to HTML

The browser needs to be explicitly told where your JavaScript code is located. You link your script file to your HTML using the <script> tag.

The modern and recommended way to link your files is by placing the <script> tag just before the closing </body> tag in your HTML file.

Why Link at the End of the <body>? (Performance and Access)

The browser reads and renders your HTML document from top to bottom. By placing the script tag at the end, you ensure two important things:

  1. HTML Content Loads First: Your webpage’s visible content—all the headings, images, and paragraphs—loads and appears on the screen first. If the browser stopped loading a potentially large JavaScript file right at the top of the page, the user would see a blank screen while the script loaded. This placement provides better perceived performance.
  2. Access to Elements: If your script intends to, say, change the text of a heading or add a click listener to a button, those elements must exist first! By putting the script at the end of the <body>, you guarantee that all of the visible HTML structure is fully rendered and accessible before your JavaScript code tries to interact with it.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Setup</title>
</head>
<body>
    <h1>My Interactive Page</h1>
    <p>Watch the console!</p>

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

Mastering the Browser Console

The Developer Console is your single most important tool for debugging, testing, and getting feedback from your running code. It allows you to “talk” directly to the JavaScript engine inside the browser.

How to Open the Console

In most modern browsers (Chrome, Firefox, Edge, Safari):

  1. Right-click anywhere on the webpage and select Inspect.
  2. Click the Console tab in the panel that opens.
  3. Shortcut: Press F12 (Windows) or Cmd + Option + J (Mac).

The Essential console.log() Method

The primary way you send information from your script to the console is using the console.log() method. This is used constantly to check the value of a variable, confirm that a function has run, or display a simple message.

// This message will appear in the Console tab of your browser's Dev Tools.
console.log("Hello from the external script!");

// You can also display variables:
let courseName = "JavaScript Fundamentals";
console.log(courseName);
JavaScript

You can also use the console as a live playground. Type and execute any JavaScript command directly into the console’s command line to instantly test syntax or check object properties without touching your main script files.

With your editor, linked files, and console ready, you have successfully set up your environment and are prepared to dive into the core language rules!

< Previous
Next Lesson >