JavaScript - Hello World

Back to top ↑

Overview

Estimated time: 5–10 minutes

Write your first program using the console, an alert, and a simple button interaction.

Learning Objectives

Use console.log and alert.
Bind a click handler to a button.

Prerequisites

JavaScript - Syntax

Console Hello

console.log('Hello, World!');

Alert Hello

alert('Hello, World!');

Minimal Page with Button

<!DOCTYPE html>
<html>
  <body>
    <button id="hi">Say Hello</button>
    <script>
      document.getElementById('hi').addEventListener('click', () => {
        console.log('Hello, World!');
        alert('Hello, World!');
      });
    </script>
  </body>
</html>

Exercises

Change the message to include your name.
Log the current time with new Date().toLocaleTimeString().

Checks for Understanding

What’s the difference between console.log and alert in terms of UX?
Where do you see output from console.log?

Show answers

alert blocks the UI and interrupts the user; console.log is non-blocking and visible in DevTools.
In the browser’s DevTools Console panel.

« Previous: JavaScript - Syntax | Next: JavaScript - console.log() »