4.4 - JS + HTML

Connecting two technologies to create interactive webpages!

This lesson includes a live demo. If you miss class, read below to learn independently (and ask a classmate).

Today's the Day! Let's ask the browser to use JavaScript for interactivity!

The Web Lesson below is mildly out of date but still very relevant.

Introducing the <script> tag!

1. "Inline" - Writing the script directly inside the HTML document:




      console.log("Hello World")


    Welcome to my webpage!



That is considered the old way of doing it. It is less organized.

2. "External" - Load the script from a separate .js file:

The preferred method is to write the JavaScript code in a separate ".js" file and load it externally:
<script src="myScriptFile.js"></script>

This will read (and run) all the code in the external file. It is best to put your code in functions that are called when you want

It is best practice to load the script last, after the HTML document has loaded (unless otherwise necessary). For this reason, we tend to place the script loader inside the <head> tag with the defer option. The defer option tells the browser to load the script after the document.



    <script src="myScriptFile.js" defer></script>

Let's test it!

That's a bit boring - let's print the title of our HTML page instead: console.log(document.title);

🤔 That's running as soon as the page loads. What if I wanted it to print when I click a button?

🫸🏻Slow down! You have much to learn.

How does it work?

The browser "talks" to the currently loaded document object using JavaScript. That means we can manipulate, add, or remove any element(s) we want in the loaded document. The console is a developer tool and the document is the front-end for the user.

Each element in a HTML document becomes an "object" in the browser's memory. This is called the Document Object Model, or DOM. This allows the browser to manipulate specific elements in the current document. That's why the id attribute is so important!

The ID:

<p id="intro">This is a paragraph of text.</p>
<button id="btn_delete">Delete</button>
<img src="awesome_logo.png" id="logo">

let paragraph = document.getElementById("intro");

paragraph.innerText = "New content for the intro paragraph element.";

There are many aspects of an element that you can change; too many to teach but you can look them up! The main ones are innerHTML, innerText, textContent, hidden, and style. It's all very easy to research

Event Listeners

let parag1 = document.getElementById("p1")

parag1.addEventListener("click", change_content);
                The event ↲         ↳ The function to call

// You can add a listener without making a variable first:

document.getElementById("door").addEventListener("click", open_or_close);

There are many events you can listen for - look them up!

The DOM is a representation of the HTML document with child and parent element "objects". JavaScript has the ability to directly manipulate the DOM in real-time, creating a sense of interactivity that we don't normally see from a regular document.

For example, a Google Doc is an HTML page that is manipulated "on-the-fly" as the user interacts with it. This is done using JavaScript.