Your First JS Program

JavaScript brings websites to life. While HTML provides structure and CSS provides styling, JavaScript provides interactivity and logic. In this guide, we'll write our first lines of JavaScript and learn how to properly include them in a web page.

1. Outputting Data

When learning JavaScript, the first thing you need to know is how to see the results of your code. There are a few basic ways to output data in a browser environment.

console.log()

This is a developer's best friend. It prints output to the browser's Developer Tools Console. Users don't see this unless they open the console.

console.log("Hello, World!");
console.log(42);
console.log({ name: "Alice", age: 25 });

alert()

This triggers a native browser popup modal with a message. It pauses code execution until the user clicks "OK". It's rarely used in modern production apps because it disrupts the user experience, but it's handy for quick tests.

alert("Welcome to my website!");

document.write() (Avoid!)

You might see document.write("Hello") in old tutorials. It writes directly to the HTML document. Do not use it. If called after the page has loaded, it will wipe out the entire existing HTML document.

2. Adding JavaScript to HTML

To run JavaScript in a browser, you need to connect it to an HTML file using the <script> tag.

Inline Scripts

You can write JavaScript directly inside an HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <script>
    console.log("This is an inline script");
  </script>
</body>
</html>

External Scripts (Best Practice)

For maintainability, code should be placed in separate .js files and linked.

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

<!-- index.html -->
<script src="script.js"></script>

3. Script Loading: async vs defer

Where you put the <script> tag matters immensely for page load performance. When the browser encounters a standard <script> tag, it pauses parsing the HTML, downloads the script, and executes it immediately before resuming HTML parsing. This can block the page from rendering.

To fix this, modern HTML gives us two attributes: defer and async.

Standard (Blocking)

<head>
  <script src="app.js"></script> <!-- BAD: Blocks rendering -->
</head>

defer (The modern default)

The script is downloaded asynchronously in the background, but it is not executed until the HTML is fully parsed. Scripts with defer are executed in the exact order they appear in the document.

<head>
  <!-- BEST PRACTICE for most scripts -->
  <script defer src="app.js"></script>
</head>

Use defer for your main application logic, DOM manipulation scripts, or anything that relies on the DOM being fully loaded.

async

The script is downloaded asynchronously in the background and executes immediately as soon as it finishes downloading, interrupting the HTML parser. The execution order is not guaranteed.

<head>
  <!-- Good for independent scripts -->
  <script async src="analytics.js"></script>
</head>

Use async for totally independent scripts that don't depend on other scripts or the DOM, like Google Analytics or ads.

Summary

1. Write your code in an external app.js file.
2. Use console.log() to debug and view outputs.
3. Link the script in the <head> of your HTML using <script defer src="app.js"></script>.