JavaScript and the DOM

INFO 253A: Front End Web Architecture

Kay Ashaolu

General Purpose

  • JavaScript full programming language
  • Started in the browser
  • Now used on servers, command line, devices...

Limited

  • Manipulate the DOM
  • Capture form values
  • Make asynchronous web requests (AJAX)

Review: How to link a JavaScript File

<body>
	<h1>Test</h1>
	<script src= "../js/script.js" type="text/javascript" ></script>
</body>

DOM

  • Document Object Model
  • document is a JavaScript Object
  • You can modify it and reflect the changes

Inspecting the DOM

  • You can use childNodes to explore children
  • Will return a list
  • document.childNodes[0]

Traversing the DOM

html/index.html

 
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
	<body>
		<div id="title" class="heading">
			Info Web Arch Languages/Frameworks!
		</div>
		<ul>
			<li class="heading">HTML/CSS/JavaScript</li>
			<li>Python / Flask</li>
			<li>Heroku</li>
		</ul>
		<!-- a comment node -->

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

	</body>
</html>

Traversing the DOM

css/style.css

.heading {
	color: red;
	background-color: yellow;
}

Traversing the DOM

js/script.js

function printBodyDOM() {
	let childNodes = document.body.childNodes;

	for(let i=0; i<childNodes.length; i++) {
		alert(childNodes[i]);
	}
}

printBodyDOM();

The DOM contains everything

  • Note that even the whitespace in between elements are included
  • Note that even comments are included

Selecting Nodes

  • document.querySelectorAll([selector])
    • Input: string selctor, Output: a list of nodes
    • Can put CSS like selectors into this function
    • Will return a list of nodes that match the selector
    • Will give you access to change anything about those nodes
    • Note the difference between JavaScript and CSS: can do more than presentation, can change the content!

Selecting Nodes Example

function printHeadingClassElements() {
	let childNodes = document.querySelectorAll(".heading");

	for(let i=0; i<childNodes.length; i++) {
		alert(childNodes[i]);
	}
}

printHeadingClassElements();

Selecting Nodes Example

function printTitleIDElements() {
	let childNodes = document.querySelectorAll("#title");

	for(let i=0; i<childNodes.length; i++) {
		alert(childNodes[i]);
	}
}

printTitleIDElements();

Selecting Nodes Example

function printLIElements() {
	let childNodes = document.querySelectorAll("li");

	for(let i=0; i<childNodes.length; i++) {
		alert(childNodes[i]);
	}
}

printLIElements();

Other selectors

These run significantly faster than querySelectorAll, and should be used when possible

  • document.querySelector()
    • Returns the first matched selector. Useful when you only want or are looking for the first node found
  • document.getElementById()
  • document.getElementsByTagName()
  • document.getElementsByClassName()

Modifying DOM

  • The property .innerHTML is the text inside the element
  • You can modify the text inside an element with modifying the .innerHTML property

innerHTML example

function changeTitleText(titleText) {
	let titleNode = document.querySelectorAll("#title")[0];
	titleNode.innerHTML = titleText;
}

let titleText = prompt("Change title text");
changeTitleText(titleText);

Dynamically changing CSS

  • You can use JavaScript to change the presentation of text
  • A very common approach is to add/remove classes to elements
  • That way based on user action an element can change its look and feel without having to add new styles dynamically to spreadsheet 

Dynamic CSS example

function addClass(className) {
	let ulNode = document.querySelectorAll("ul")[0];
	ulNode.classList.add(className);
}

let className = prompt("Add Class");
addClass(className);

Questions?

Synchronous Processing

  • Linear execution, waiting for each function to finish
  • "End" of a program when all statements executed
  • Similar to calling and being on hold

Synchronous Python

Note: to run, may need to run: "[sudo] pip install requests" to install requests package

import requests

link = "https://www.ischool.berkeley.edu/people/kay-ashaolu"
f = requests.get(link)
print(f.text)

Asynchronous Processing

  • Respond to events independently
  • Run functions in response to actions
  • "Callbacks" instead of being "on hold"

Callbacks

  • You want to make a request to your bank
  • Dial their number… on hold (synchronous)
  • Or have them call you back? (asynchronous)

Why Async?

  • When do you want your JavaScript to "finish"?
  • What should UI do while waiting?
  • What should UI do while animating?

Event -> Function

On a user event, run this function

let titleNode = document.querySelector("#title");
titleNode.addEventListener("click", function(event) {
	titleNode.classList.add("highlight");
})

Grand Example

html/index.html (1/2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
	<body>
		<form id="locationForm">
			<label for="name">Name: </label>
			<input type="text" name="name" id="name" /><br />

			<label for="state">State</label>
			<select name="state">
				<option value="CA">CA</option>
				<option value="NY">NY</option>
				<option value="TX">TX</option>
			</select><br />

			<input type="submit" value="Save Location" />

		</form>
		<br />

Grand Example

html/index.html (2/2)

<div id="locationList">
		</div>

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

	</body>
</html>

Grand Example

css/style.css (1/1)

.highlight {
	color: red;
	background-color: yellow;
}

Grand Example

js/script.js (1/1)

/* Populate with current location */
let locationDiv = document.getElementById("locationList");

if (localStorage.curLocation != null) {
	locationDiv.innerHTML = localStorage.curLocation;
}

/* Run code on submit button push */
let locationForm = document.getElementById("locationForm");
locationForm.addEventListener("submit", function(event) {
	let name = locationForm.elements.namedItem("name").value;
	let state = locationForm.elements.namedItem("state").value;

	localStorage.curLocation = name + ": " + state;

	let locationDiv = document.getElementById("locationList");
	locationDiv.innerHTML = localStorage.curLocation;
	locationDiv.classList.add("highlight");

	/* This stops the usual function of "submit" which is to send data
	to another server */
	event.preventDefault();
})

What is localStorage?

  • Browsers now have its own database that you can use
  • Values persistent until user clears their own browsing history
  • sessionStorage: lasts throughout the life of the browser tab

Async/Await

 

  • In the newer versions of JavaScript there has been a effort to make these Async functions easier to reason against
  • Sometimes always having to write a callback function for all response modes can be onerous
  • This is where Async/Await comes in

Async/Await Example

let getSummaryData = async () => {
    let response = await fetch('https://raw.githubusercontent.com/UCB-INFO-FRONTEND-WEBARCH/assignment-solutions/master/solutions.json');

    if (!response.ok) {
	    throw new Error(`HTTP error! status: ${response.status}`);
    } else {
      return response.json();
    }
}

getSummaryData().then((response) => { 
	/* This is where your code should be */ 
	console.log(response); 
	/* End section where your code should be */ 
});

Questions?

JavaScript and the DOM - Frontend Webarch

By kayashaolu

JavaScript and the DOM - Frontend Webarch

Course Website: https://www.ischool.berkeley.edu/courses/info/253a

  • 645

More from kayashaolu