Web Dev Basics 2

CS571: Building User Interfaces

Cole Nelson

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 1
Before Lecture
Clone today's code to your machine.
Download and install Postman!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 2
Web Dev Basics 1
The Web is made up of HTML, CSS, and JS!
HTML: structure
CSS: styling
JS: behavior
CSS and JS can be applied to HTML inline, internal,
or externally.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 3
Web Dev Basics 1
Use document to reference the DOM.

*class refers to a CSS class

We can add event listeners or read/modify properties.

StackBlitz
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 4
Using these DOM elements, we can change the title of
the article, add an action for when the button is
clicked, and make all of the callouts red.

StackBlitz
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 5
Finish ICE-1
Use today's starter code.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 6
Learning Objectives
1. Manipulate the DOM via JavaScript.
2. Define a callback function.
3. Understand how asynchronous code executes.
4. Fetch, parse, and use JSON data from an API to
populate webpage.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 7
What is JSON?
Definition: JavaScript Object Notation (JSON) is a
structured way to represent text-based data based on
JS object syntax.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 8
Refresher: JS Objects
Definition: Objects are unordered collection of related
data of primitive or reference types defined using key-
value pairs.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 9
JSON Equivalent

What's the difference? A JS Object is executable code;

JSON is a language-agnostic representation of an
object. There are also slight differences in syntax.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 10
You can write comments in JS Objects...

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 11
... but not in JSON!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 12
Conversion
Because JS Objects and JSON are so similar, it is easy
to convert between them.
[Link] JSON String → JS Object
[Link] JS Object → JSON string

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 13
Conversion Examples
Using [Link] and [Link] .

Question: Can I do [Link] = 27 ? Yes!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 14
Re-Visiting const
const means you cannot re-assign the variable. You
can, however, re-assign one of its properties.

Yikes... this can be helpful, but also dangerous!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 15
Deep Copying
We can make a deep copy using [Link] and
[Link] together*

Interactive Example
*small caveat: does not copy functions of an object

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 16
Reference Copying
This is not a true copy! We call it a "reference" copy.

Why does this happen? Objects are stored on the heap;

the variable's value is just a memory address!
Interactive Example
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 17
Why do I need to know this?
Web programming is all about data. Can I take this
data an API and display it to a user?
Always know the data that you are working with.
Be aware of how assignments affect this data.

Let's start getting some data via an API!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 18
What is an API?
Definition: An application programming interface (API)
is a set of definitions and protocols for communication
through the serialization and de-serialization of
objects.

JSON is a language-agnostic medium that we can

serialize to and de-serialize from!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 19
How do we make an API request?
Your browser!
cURL
Postman
JavaScript

Try making an API request to...

[Link]
[Link]
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 20
In-Class Activity
Fetch from the Jokes and CS571 APIs using...
Your browser!
Postman

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 21
Request for JSON
Requests can be synchronous or asynchronous .
asynchronous requests are recommended as they
are non-blocking. Typically, they use a callback when
the data is received and lets the browser continue its
work while the request is made.
More on synchronous/asynchronous requests

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 22
Making Asynchronous HTTP Requests
Two key methods: XMLHttpRequest (old) and fetch
(new). fetch is a promise-based method.
Promise objects represent the eventual
completion/failure of an asynchronous operation and
its resulting value.
async / await — keywords to indicate that a
function is asynchronous -- will learn later!
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 23
 fetch()

Fetching Jokes

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 24
 fetch()
Fetch happens asynchronously.

StackBlitz
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 25
 fetch() from a CS571 API

There is a database that maps your BID to a WISC ID!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 26
Callback Functions
then and catch take a callback function as an
argument.
Definition: A callback function (sometimes called a
function reference) is passed into another function as
an argument, which is then invoked inside the outer
function to complete a routine or action.
More on callback functions

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 27
Callback Functions
Reminder: All of these define a function.

A function definition An arrow function

With an implicit return

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 28
Your Turn!
Let's fetch some recipes.
[Link]
[Link]
[Link]

Remember : You'll need a Badger ID to access these!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 29
Badger IDs
Logging in to the CS571 APIs creates a cookie* in your
browser. This cookie contains your Badger ID.
Unfortunately, this is considered a third-party cookie!
You are on localhost, but sending a [Link] cookie

Therefore, you may need to add some exceptions to

your browser settings!
*we'll learn more about cookies later this semester!
CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 30
Allow on Google Chrome...

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 31
Allow on Mozilla Firefox...

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 32
Allow on Microsoft Edge...

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 33
Badger IDs
After adding [Link] and [Link] as an
exception, you will likely need to wait a minute and
restart your browser!

You may just hardcode your Badger ID as well; but

don't make it public!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 34
 fetch() from a CS571 API

Works when logged into CS571 on the current browser!

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 35
DOM Manipulation
Earlier, we learned how to get elements from the DOM
and change their text.

What if we want to add elements?

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 36
DOM Manipulation
We typically prefer to not use innerHTML when adding
things to the DOM. Why?* Instead, we would...

* We c o u l d s t i l l s a f e l y c l e a r t h e e x i s t i n g t e x t w i t h [Link] = ''

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 37
Your Turn!
Let's display recipes to the page dynamically.

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 38
Questions?

CS571 Building User Interfaces | Cole Nelson | Spring 2024 | Lecture 04: Web Dev Basics 2 39