4.5 - JS + HTML

Connecting two technologies to create interactive pages!

Today's the Day! Let's ask the browser to use JavaScript in the background!

When you "visit" a page in a browser, it loads as much of the code as possible before displaying it. This includes any <script> tags that it finds.

  • If the <script> tag is at the beginning, it will load (and run) that code first.

  • If it's at the end of the document, it will be the last thing it loads.

The <script> tag can be used to type code directly into the HTML document:

<html>

<body>

<script>

console.log("Hello World")

</script>

Welcome to my webpage!

</body>

</html>

That is called inline code and is considered the old way of doing it.

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

This line will read (and run) the code - so it's best to put your code in functions that are called when you want.

Let's test it!

Go to your HTML Playground and add console.log("Hello World!"); to your script.js file. Then run your code.

Ok, that's boring - let's print the title of our HTML page: console.log(document.title);

How does that work?

Through JavaScript, the browser can "talk" to the currently loaded document object. That means we can manipulate, add, and remove any element(s) we want in the loaded the document. No more printing user output to the console! (unless we want to)

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. It also allows JavaScript to connect to, modify, delete, and create elements in memory, which becomes visible on the page. It does not change html file.

Important:

  • To manipulate an element, first it must have a unique id in the HTML. Some examples:

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


  • In the JavaScript file, we can ask the browser for a handle to the object:
    document.getElementById("Some id") // This will return a handle of the first element found with the matching ID. This is why unique identifiers are crucial.


  • To modify an HTML element from your JavaScript, first get its handle and then modify it somehow:

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

paragraph.innerHTML = "New content for the 'p' 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. The rest you can learn later.


Ok, cool, but how do we make elements react like when clicked, etc?

  • To call a JavaScript function when an element is clicked or changed or some event happens, you need to add an EventListener in the JavaScript code:

let parag1 = document.getElementById("p1")

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


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

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

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

Live Demo (sorry - gotta be in class to see it!)


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.

Today's Task