JavaScript Intro

Written by nick • 30.05.2025

#javascript #basics

This tutorial will guide you through the absolute basics of JavaScript by building a simple interactive page. You'll learn how to include JavaScript, handle events, and update HTML content. ✨

Jump to a section:

1. The foundation: HTML and CSS
2. The wrapper: Ensuring the page is ready
3. Finding and storing elements (Constants)
4. Listening for action (Events)
5. Decision making: If and Else
6. Different ways to manipulate the page
7. Full example: Putting it all together

1. The foundation: HTML and CSS

Before we write the logic, we need to build the 'body' of our page. We're going to create a button and a message area. Once that's done, we'll use JavaScript to add functionality so that clicking the button changes the layout and content of the site.

Create a file named index.html and add this code. We've given our elements unique IDs (like id="myButton") so we can find them later.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Basics</title>
  <style>
    body { 
      font-family: sans-serif; 
      text-align: center; 
      padding-top: 50px; 
      transition: 0.4s; 
    }

    #output { 
      margin-top: 20px; 
      color: #333; 
      font-weight: bold; 
      min-height: 50px; 
      border: 2px solid #333; 
      padding: 10px; 
      border-radius: 8px; 
      display: none; /* Hidden by default; JavaScript will toggle it! */
      background: white; 
    }

    .main-button { 
      padding: 10px 20px; 
      font-size: 16px; 
      cursor: pointer; 
      border-radius: 5px; 
      border: 1px solid #999; 
      display: block; 
      margin: 0 auto; 
    }
  </style>
</head>
<body>

  <h1>JavaScript Basics</h1>
  <button id="myButton" class="main-button">Show message</button>
  <div id="output"></div>

  <script>
    // We will add the logic here in the next steps!
  </script>

</body>
</html>

2. The wrapper: Ensuring the page is ready

Browsers read your code from top to bottom. If your JavaScript tries to find a button before the browser has actually finished drawing that button on the screen, your code will fail because it can't find what isn't there yet.

To prevent this, we often wrap our code in a DOMContentLoaded Event Listener. This tells the browser: "Wait until the HTML structure (Document Object Model, also known as the DOM) is fully loaded before running my script." While there are other ways to do this (like putting your script at the very bottom of the page), this wrapper is a safe way to ensure your code works no matter where it's placed.

document.addEventListener("DOMContentLoaded", function() {
  // Our code goes here safely!
});

3. Finding and storing elements (Constants)

Once the page is ready, we need to 'grab' our elements so we can talk to them. We use the keyword const (short for constant) to store these elements in variables. Think of this like giving a nickname to a specific part of your page.

Instead of telling the browser 'go find the button with this ID' every single time someone clicks, we find it once, save it as myButton, and re-use that name. It's more efficient and makes your code much easier to read.

document.addEventListener("DOMContentLoaded", function() {
  
  // getElementById finds the one unique element with that ID
  const myButton = document.getElementById("myButton");
  const myOutput = document.getElementById("output");

});

4. Listening for action (Events)

Interactive websites work by waiting for 'events'. While 'click' is the most common, there are many others you can use to make a page feel alive:

'mouseenter': Triggers when the mouse hovers over an element.
'input': Fires as soon as a user types into a text field.
'submit': Used when a user sends a form.
'keydown': Detects when a specific key is pressed on the keyboard.

There are actually hundreds of other events like mouseup, wheel, or complex PointerEvents for touchscreens. We'll leave those for another time, though - no need to drown in documentation during your first hour! If you're feeling curious later, you can find the full list on the Mozilla Developer Network (MDN).

We use addEventListener to tell an element to stay alert for these specific moments. Notice that we place this listener inside our load wrapper so it can access the constants we just defined.

document.addEventListener("DOMContentLoaded", function() {
  const myButton = document.getElementById("myButton");
  const myOutput = document.getElementById("output");

  // Example: Changing text when the user clicks the button
  myButton.addEventListener("click", function() {
    myOutput.textContent = "Button was clicked!";
    myOutput.style.display = "inline-block"; // Make the box visible
  });

  // Example: Changing text when the mouse hovers over the button
  myButton.addEventListener("mouseenter", function() {
    myOutput.textContent = "Button was hovered!";
    myOutput.style.display = "inline-block"; // Make the box visible
  });
});

5. Decision making: If and Else

To make a button that "toggles between states", we need the script to check the current state of the page. We use an if statement to ask a question. If the answer is yes, the first block of code runs. If the answer is no, the else block runs instead.

To check if two things are the same, we use three equals signs: ===. We use three because a single = is used for setting values, not asking questions.

if (myButton.textContent === "Show message") {
    // This runs if the button says "Show message"
} else {
    // This runs if the button says anything else
}

6. Different ways to manipulate the page

Once a click is detected, JavaScript gives you several ways to modify your HTML. Here are the most common ways to update your page on the fly:

Changing Content:
- myOutput.textContent = "Plain text only";
- myOutput.innerHTML = "<b>Text with HTML tags</b>";
Styles: Use camelCase (e.g. backgroundColor instead of background-color).
- myOutput.style.color = "darkgreen";
- document.body.style.backgroundColor = "lightyellow";
Attributes:
- myButton.setAttribute("title", "Active Button")

7. Full example: Putting it all together

In this final version, we use an if/else statement to create a functional toggle. We're checking the current text of the button to decide what to do next.

Note: In this example, the button’s text acts as our trigger. This makes it easy to see how if/else logic and textContent work together. In a real project, you would usually manage state with a variable or by toggling CSS classes instead - but this is the JavaScript Intro tutorial, after all. 🫶🏻

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Basics</title>
  <style>
    body { 
      font-family: sans-serif; 
      text-align: center; 
      padding-top: 50px; 
      transition: 0.4s; 
    }

    #output { 
      margin-top: 20px; 
      color: #333; 
      font-weight: bold; 
      min-height: 50px; 
      border: 2px solid #333; 
      padding: 10px; 
      border-radius: 8px; 
      display: none; 
      background: white; 
    }

    .main-button { 
      padding: 10px 20px; 
      font-size: 16px; 
      cursor: pointer; 
      border-radius: 5px; 
      border: 1px solid #999; 
      display: block; 
      margin: 0 auto; 
    }
  </style>
</head>
<body>

  <h1>JavaScript Basics</h1>
  <button id="myButton" class="main-button">Show message</button>
  <div id="output"></div>

  <script>
    // 1. Wait for the browser to finish loading the HTML
    document.addEventListener("DOMContentLoaded", function () {
      
      // 2. Store our elements so we can refer to them by name
      const myButton = document.getElementById("myButton");
      const myOutput = document.getElementById("output");

      // 3. Optional: Add a hover effect!
      myButton.addEventListener("mouseenter", function() {
        // Only show the hover message if the box isn't already 'active'
        if (myButton.textContent === "Show message") {
          myOutput.textContent = "Go ahead, click it!";
          myOutput.style.display = "inline-block";
        }
      });

      // 4. Set up the 'click' listener
      myButton.addEventListener("click", function () {
        
        // 5. Check the button text to decide what to do
        if (myButton.textContent === "Show message") {
          // Change the button label so the user knows they can hide it now
          myButton.textContent = "Hide message";
          
          // Add text with italics to our output div
          myOutput.innerHTML = "You just <i>manipulated</i> the DOM!";

          // Show the output box
          myOutput.style.display = "inline-block";

          // Change the entire page background color
          document.body.style.backgroundColor = "lightyellow";
        } else {
          // Change the button label back to the start
          myButton.textContent = "Show message";

          // Clear the text content
          myOutput.innerHTML = ""; 

          // Hide the output box again
          myOutput.style.display = "none";

          // Reset the background color to white
          document.body.style.backgroundColor = "white";
        }
        
      });
    });
  </script>

</body>
</html>

And that's it! You just learned how to find specific HTML elements and change them with JavaScript. 🥹

Changelog

11.02.2026
- improved the flow
- added more details about event listeners, states, conditions etc.