First JavaScript Program - Hello World & More!

Write your first JavaScript program! From Hello World to interactive examples, let's get coding!

Introduction

Let's write your first JavaScript program! We'll start with "Hello, World!" then move on to interactive examples!

What You Will Learn

  • How to add JavaScript to HTML
  • Using browser console
  • Writing your first functions
  • DOM manipulation (update page content)
  • Handling user interactions

Prerequisites

How to Run JavaScript

Option 1: Browser Console

  1. Open Chrome/Firefox
  2. Press F12 for DevTools
  3. Go to "Console" tab
  4. Type code and press Enter!

Option 2: .html File

Create a .html file and open in any browser!

Your First Program: Hello, World!

Create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>First JS Program</title>
</head>
<body>
  <h1>My First JavaScript!</h1>
  
  <!-- Script can be in head or body (body is better for performance!) -->
  <script>
    // Hello World!
    console.log('Hello, World!');
    alert('Hello, World!');
    document.write('Hello, World!');
  </script>
</body>
</html>

Open the file in a browser! You'll see:

  • Alert popup
  • Text on page
  • Message in Console (F12 to see)

Interactive Program: Click Counter

Let's make something more fun! A button that counts clicks!

<!DOCTYPE html>
<html>
<body>
  <h1>Click Counter</h1>
  <button id="clickBtn">Click Me!</button>
  <p>Total clicks: <span id="count">0</span></p>

  <script>
    let count = 0;
    
    // Get elements from DOM
    const button = document.getElementById('clickBtn');
    const countSpan = document.getElementById('count');
    
    // Add click listener
    button.addEventListener('click', () => {
      count++;
      countSpan.textContent = count;
      
      if (count === 10) {
        alert('Congratulations! 10 clicks!');
      }
    });
  </script>
</body>
</html>

Save and open in your browser. Click the button - watch the count go up!

Program: Simple Calculator

Let's build a simple calculator!

<!DOCTYPE html>
<html>
<body>
  <h1>Simple Calculator</h1>
  
  <input type="number" id="num1" placeholder="First number">
  <input type="number" id="num2" placeholder="Second number">
  
  <button id="addBtn">+ Add</button>
  <button id="subBtn">- Subtract</button>
  <button id="mulBtn">* Multiply</button>
  <button id="divBtn">/ Divide</button>
  
  <h2>Result: <span id="result">0</span></h2>

  <script>
    const num1Input = document.getElementById('num1');
    const num2Input = document.getElementById('num2');
    const resultSpan = document.getElementById('result');
    
    function calculate(operation) {
      const num1 = parseFloat(num1Input.value) || 0;
      const num2 = parseFloat(num2Input.value) || 0;
      let result;
      
      switch (operation) {
        case '+': result = num1 + num2; break;
        case '-': result = num1 - num2; break;
        case '*': result = num1 * num2; break;
        case '/': result = num2 !== 0 ? num1 / num2 : 'Error! Div by 0'; break;
      }
      
      resultSpan.textContent = result;
    }
    
    document.getElementById('addBtn').addEventListener('click', () => calculate('+'));
    document.getElementById('subBtn').addEventListener('click', () => calculate('-'));
    document.getElementById('mulBtn').addEventListener('click', () => calculate('*'));
    document.getElementById('divBtn').addEventListener('click', () => calculate('/'));
  </script>
</body>
</html>

Running in Node.js

Create hello.js:

console.log('Hello from Node.js!');

// Command line arguments
console.log('Args:', process.argv);

Run with:

node hello.js

Best Practices

  1. Use let/const, not var
  2. Add comments for clarity
  3. Give variables good names: count not just c
  4. Test often
  5. Use semicolons (or not, but be consistent!)

Common Mistakes

  1. Typos in variable names: Count vs count
  2. Missing closing tags/parentheses/brackets
  3. Forgetting to parse numbers: '2' + '3' = '23' not 5! Use parseFloat/parseInt!
  4. Not waiting for DOM: Access elements after DOM loads (or put script at bottom)

Next Steps from Here

Now you've written your first JS programs! Next you'll learn:

  • Variables and data types
  • Operators and expressions
  • Control flow (if/else, loops)
  • Functions
  • And much more!

Summary

Congratulations! You just wrote your first JavaScript programs! From Hello World to a calculator, you're on your way to becoming a JS developer!

Related Articles

  • All of Module 1!
  • Start Module 2 with Variables

Previous Tutorial

← Browser Execution Process

Next Tutorial

Let's dive into variables! → Variables: let, const, var

← Back to Syllabus