Scribd
Upload
2 views

lecture06

The lecture covers how to add JavaScript to a webpage and interact with the Document Object Model (DOM) to create dynamic content. Key topics include linking JavaScript files, accessing DOM elements, and handling user events through event listeners. The document also explains the lifecycle of a browser loading a page and how the DOM and CSSOM are constructed and rendered.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

lecture06

The lecture covers how to add JavaScript to a webpage and interact with the Document Object Model (DOM) to create dynamic content. Key topics include linking JavaScript files, accessing DOM elements, and handling user events through event listeners. The document also explains the lifecycle of a browser loading a page and how the DOM and CSSOM are constructed and rendered.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

JavaScript and the DOM

Lecture 6
Today’s Agenda
● Adding JavaScript to a webpage
● Where does the DOM come from?
From the console to a JS file
Now, we'll use these building blocks of a new programming language to control the
behavior of our pages (which we don't get with HTML/CSS!).
Activity
JS/HTML Connection
In general, to add interactivity to our HTML/CSS websites we need to

1. Link a JS program to our HTML (in the <head>)


2. Identify the elements we want to "listen" to user/page events
3. Identify the events we want to respond to
4. Identify what each response function is
5. Assign the listener elements the functions when the event(s) occurs! own event(s) to listen
to
Our Toolbox So Far: HTML/CSS + JS

Image source (MDN) and recommended reading

So far, we write HTML/CSS for the structure/styles for our page. We will continue to write JavaScript and
add behavior.

As always, the webpage is rendered by the browser. We will add a link to our JS from HTML (similar to the
idea of linking a CSS file) and the browser will execute the JS after the HTML/CSS has been loaded.
Linking to a JS file: <script>

// template
<script src="filename"></script>

// example
<script src="example.js"></script>

The script tag should be placed in the HTML page's head.

All JavaScript code used in the page should be stored in a separate .js file

JS code can be placed directly in the HTML file's body or head (like CSS), but this is poor code
quality. You should always separate content, presentation, and behavior

Here's a basic index.html linked to a basic script.js - feel free to use these to
practice with!
Accessing Elements from the document object
in JavaScript
Accessing an element by id

let name = document.getElementById("id");

● document.getElementById returns the DOM object for an element with a given id


(note that you omit the # when giving an id)
● We'll learn about other ways to get DOM elements (e.g. document.querySelector to
get elements by class name) next lecture!
What’s inside a DOM

<img src="images/puppy.png" alt="A fantastic puppy photo">

For starters, the HTML attributes. This HTML above is a DOM object (let's call it puppyImg) with
these two properties:
● puppyImg.src -- set by the browser to images/puppy.png
● puppyImg.alt -- set by the browser to "A fantastic puppy photo"
Listening to Events with JS/HTML

Enter Text: <input type="text" id="input-text"> <Go!>

There are a ton of HTML tags that are used to build UI (user interfaces). We'll start with the
humble button today, but we'll learn a few more like input boxes and dropdowns next week.
The <button>

<button id="my-btn">Click me!</button>

Text inside of the button tag renders as the button text


To make a responsive button (or other UI controls):
1. Choose the control (e.g., button) and event (e.g., mouse click) of interest
2. Write a JavaScript function to run when the event occurs
3. Attach the function to the event on the control
Event Driven Programming

Unlike Java programs, JS programs have no main; they respond to user actions called events
Event-Driven Programming: writing programs driven by user events
Listening & Responding to Events w/ addEventListener

// attaching a named function


element.addEventListener("click", handleFunction);

function handleFunction() {
// event handler code
}

● JavaScript functions can be set as event handlers (also known as


“callbacks”)
● When you interact with the element and trigger the event, the callback
function will execute
● click is just one of many event types we'll use
Using a click Event Handler to Open the Box
<img id="mystery-box" src="question-block.png" alt="A Mystery Box">
<button id="box-btn">Click me!</button>

let boxBtn = document.getElementById("box-btn");


boxBtn.addEventListener("click", openBox);

function openBox() {
let box = document.getElementById("mystery-box"); // 1. Get the box image
box.src = "star.png"; // 2. Change the box image's src attribute!
}
There are more events, like:
Where does the "document" come from?
Lifecycle of a browser* loading a page
1. Fetch the page
2. Parse the page
3. Build the page's DOM (and CSSOM)
4. Paint the page

*: As seen by Chrome.
Fetch Page
1. DNS
● www.google.com → 172.217.14.206
1. HTTP GET
● GET /index.html HTTP/1.1, Host: www.example.com
● Collection of all this information: Request Headers
1. TCP/IP transfer
● Series of tubes...
1. Check: 200 OK?
● Collection of all this information: Response Headers
Parse Page
1. First line: <!DOCTYPE html>
● Ok: need to build a DOM
1. Line-by-line, goes through the HTML
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
Another Request:
1. GET: styles.css
2. Schedule: restyle.

Now back to our regularly scheduled programming...


<html>
<head>
<title>My Fancy Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<p>Hello world: <a href="...">here</a></p>
<p>Welcome!</p>
<img src="...">
<a href="...">citation</a>
</section>
</article>
<footer>
<a href="..."></a>
</footer>
</body>
</html>
Another Request
1. GET: script.js
2. Parse JavaScript
3. Compile the code
4. Run the code
Full DOM
Each node in the tree has:
● Name of element
● Attributes, and their values
● Content (if any)
Browser “window” events
At this point, browser fires a DOMContentLoaded event. This lets any scripts know that the
DOM tree is complete.
BUT: None of the styles have been loaded yet.
Remember that "Schedule: restyle." from earlier?
Browser now goes through any of those, and constructs something called the "CSS Object Model"
and the computed styles
This is a mapping (won't walk through it now) made from the selectors in our styles.css ,
figuring out which DOM nodes have which style rules.
“load” and the Render Tree
Between the DOM and the computed styles, the browser now has everything it needs.

It fires a load event, letting scripts know this.

And it then combines into a "Render Tree", which is the combination of visible content and the
rules for how it looks.
Finally, we paint
Questions?

You might also like