Embedded Files
Today's the Day! Let's ask the browser to use JavaScript for interactivity!
Create your first interactive webpage by following the instructions in the GitHub repository for this lesson.
The Web Lesson below is mildly out of date but still very relevant.
Introducing the <script> tag!
Similar to the CSS <style> tag, you can use it multiple ways:
1. "Inline" - Writing the script directly inside the HTML document:
<html>
<body>
<script>
console.log("Hello World")
</script>
Welcome to my webpage!
</body>
</html>
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.
<html>
<head>
<script src="myScriptFile.js" defer></script>
Let's test it!
Load the GitHub repository for this lesson (just a playground)
Add console.log("Hello World!"); to the script.js file.
Preview your site
Load the developer tools console using F12 or CTRL+SHIFT+J (⌘+Option+J on a Mac)
The keyboard shortcut depends on the browser - research yours
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:
To manipulate an element, it must have a unique id in the document. Some examples:
<p id="intro">This is a paragraph of text.</p>
<button id="btn_delete">Delete</button>
<img src="awesome_logo.png" id="logo">
Inside the JS file, we ask the browser for a handle to the object:
document.getElementById("btn_delete") // 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("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
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", 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.
Page updated
Google Sites
Report abuse