📚 Introduction to JavaScript's Event-Driven Architecture & The DOM

Lesson Overview

Before diving into working with APIs like JService, we first need to understand JavaScript's event-driven architecture and how it interacts with the Document Object Model (DOM).

In this lesson, we will cover:

JavaScript’s Event-Driven Architecture
Understanding Asynchronous Programming
How Events Work in JavaScript
What is the DOM?
Connecting JavaScript to an HTML File
Practical Examples: Event Listeners & DOM Manipulation

By the end of this lesson, you will: ✅ Understand how JavaScript handles events
✅ Know how to manipulate the DOM dynamically
✅ Be able to connect JavaScript to HTML & CSS

📌 Step 1: Understanding JavaScript’s Event-Driven Architecture

JavaScript uses an event-driven model, which means that code execution is controlled by events (such as user actions like clicking a button or typing in a form).

🔹 What is an Event-Driven Architecture?

Think of JavaScript as a traffic cop 🏛️🚦:

It listens for events (like cars approaching a red light).
When an event occurs (like a pedestrian pressing a button), JavaScript reacts by running a function (like turning the light green).
JavaScript keeps listening and responding without stopping other tasks.

🔹 Why Does This Matter?

JavaScript can handle multiple tasks at the same time (asynchronous behavior).
Your program can continue running other code instead of waiting for one task to finish.
This makes web applications fast, smooth, and responsive.

📌 Step 2: Asynchronous Programming & The Event Loop

JavaScript is single-threaded, meaning it can only do one thing at a time. However, asynchronous programming allows it to handle multiple tasks without getting stuck.

🔹 Synchronous vs Asynchronous Code

Synchronous: Code runs in order, one task at a time.
Asynchronous: Code doesn't wait—it starts a task and moves on while waiting for it to complete.

🔹 Example of Asynchronous Behavior

console.log("Start");

setTimeout(() => {
    console.log("This runs after 2 seconds!");
}, 2000);

console.log("End");

Expected Output:

Start
End
This runs after 2 seconds!

Even though we called setTimeout(), JavaScript doesn’t wait for it to finish—it moves on to console.log("End") first.

This is crucial for handling API calls, where we have to wait for data to return but still allow the rest of the code to execute.

📌 Step 3: Events in JavaScript

Events are actions like:

Clicking a button (click)
Typing in an input field (input)
Submitting a form (submit)

🔹 Adding Event Listeners

An event listener tells JavaScript to "listen" for an event and then run a function.

📜 Example: Click Event

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});

document.getElementById("myButton") → Finds the button in HTML.
.addEventListener("click", function() { ... }) → Listens for a click event.
When clicked, an alert message appears.

🔹 Common Event Types

Event Type	Description
`click`	Fires when an element is clicked
`mouseover`	Fires when the mouse hovers over an element
`keydown`	Fires when a key is pressed
`input`	Fires when a user types in a field
`submit`	Fires when a form is submitted

📌 Step 4: The Document Object Model (DOM)

The DOM (Document Object Model) is a map of an HTML document that JavaScript can use to find, modify, and interact with elements on a webpage.

🔹 Understanding the DOM Structure

Consider this simple HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button id="myButton">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

🛠️ JavaScript can manipulate this HTML using the DOM.
For example, if we want to change the <h1> content:

document.getElementById("title").innerText = "JavaScript is Amazing!";

📌 Step 5: Connecting JavaScript to HTML

To make JavaScript work inside an HTML file, we need to link it.

🔹 Adding JavaScript to HTML

Inside the <head> of our HTML, we link the JavaScript file like this:

<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

src="script.js" → Points to the JavaScript file.
defer → Ensures the script loads after the HTML (so elements exist before JavaScript interacts with them).

📌 Step 6: Practical Examples

Let’s put this into action with event listeners & DOM manipulation.

📜 Example 1: Changing Text on Button Click

<!DOCTYPE html>
<html>
<head>
    <title>Event Listener Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1 id="title">Click the button below</h1>
    <button id="changeTextButton">Change Text</button>
</body>
</html>

// script.js
document.getElementById("changeTextButton").addEventListener("click", function() {
    document.getElementById("title").innerText = "You clicked the button!";
});

📌 What Happens?

The button listens for a click.
When clicked, JavaScript updates the <h1> text dynamically.

📜 Example 2: Changing Background Color

<body>
    <button id="colorButton">Change Background</button>
</body>

document.getElementById("colorButton").addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
});

📌 What Happens?

Clicking the button changes the background color of the page.

📜 Example 3: User Input & Displaying Text

<body>
    <input type="text" id="userInput" placeholder="Type something...">
    <button id="displayButton">Display Text</button>
    <p id="output"></p>
</body>

document.getElementById("displayButton").addEventListener("click", function() {
    let inputText = document.getElementById("userInput").value;
    document.getElementById("output").innerText = inputText;
});

📌 What Happens?

User types something in the input box.
Clicking the button displays the input in a <p> tag.

📌 Step 7: Summary

Key Takeaways

✅ JavaScript uses an event-driven model to respond to user interactions.
✅ Events (click, input, etc.) trigger JavaScript functions.
✅ The DOM allows JavaScript to interact with HTML elements.
✅ Event Listeners wait for user actions & execute code dynamically.

🚀 Now we’re ready to use these concepts in our next lesson: Fetching API Data with JavaScript!