web dev final

i hate my life

URL Protocol

Specifies the communication rules (http or https) used between client and server

URL Hostname

The human-readable domain name that identifies the server

URL Port

The numeric channel used for communication (80 for HTTP

URL Path

The specific resource or page requested from the server

Hostname

A domain name that maps to an IP address via DNS

IP Address

A numeric address (IPv4 or IPv6) used by routers to deliver packets

Packet Route

The sequence of network hops a packet takes to reach a destination

Registrar

A company that rents domains and manages DNS for those domains

A Record

DNS record that maps a hostname to an IPv4 address

AAAA Record

DNS record that maps a hostname to an IPv6 address

Why IPv4 Is Needed

IPv6 is not widely supported so servers still need IPv4 for accessibility

Domain Cost

Domains typically cost $5–20 per year

IPv4 Cost

A single IPv4 address costs roughly $30–50 due to scarcity

Outbound Traffic Cost

Cloud providers charge around $50–100 per TB of outbound data

HTTPS Certificate Cost

HTTPS certificates are free using Let’s Encrypt

Instance

A rented virtual machine in the cloud

Instance Type

A preset hardware configuration defining CPU

AMI

An Amazon Machine Image used to launch identical server instances

Burstable CPUs

CPUs that earn credits when idle and use credits for bursts

RPS

The number of HTTP requests per second a server can reliably handle

t3.micro RPS

A small burstable instance that handles around 20 RPS

c5.large RPS

A compute-optimized instance that handles around 100 RPS

Capacity Utilization

The ratio of current RPS to maximum RPS

Queuing Delay

Latency added when requests must wait in a server queue

Amplification Factor

ρ/(1−ρ)

The amplification factor shows how queuing delays grow latency at an exponential rate

Amplification Behavior

Low when utilization is low but approaches infinity near 100%

Safe Utilization Range

Systems should keep utilization around 50–66% to avoid collapse

Auto-Scaling

Automatically adds or removes instances based on metrics like CPU usage

Load Balancer

Distributes incoming traffic across multiple servers

Congestion Collapse

When overloaded servers waste work and total throughput drops

addEventListener Syntax

element.addEventListener("event", function)

Inline Handler Syntax

element.onclick = function(e) { … }

Prevent Default Syntax

e.preventDefault()

Submit Listener Syntax

form.addEventListener("submit"

Input Listener Syntax

input.addEventListener("input"

Click Listener Syntax

element.addEventListener("click"

Mouseover Listener Syntax

element.addEventListener("mouseover"

Query Selector Syntax

document.querySelector("selector")

Query Selector All Syntax

document.querySelectorAll("selector")

Scoped querySelector Syntax

parent.querySelector(".child")

Create Element Syntax

document.createElement("tagname")

Append Syntax

element.append(childOrString)

Prepend Syntax

element.prepend(childOrString)

Before Syntax

element.before(nodeOrString)

After Syntax

element.after(nodeOrString)

Remove Syntax

element.remove()

ReplaceWith Syntax

element.replaceWith(otherNode)

Accessing textContent

element.textContent

Setting textContent

element.textContent = "text"

Setting innerHTML

element.innerHTML = "bold"

Reading an Input Value

element.value

Setting an Input Value

element.value = "new value"

Checking a Checkbox

checkbox.checked

Setting checked State

checkbox.checked = true

Adding a Class

element.classList.add("active")

Removing a Class

element.classList.remove("active")

Toggling a Class

element.classList.toggle("active")

Accessing dataset Value

element.dataset.key

Setting dataset Value

element.dataset.key = "value"

Fetch GET Syntax

fetch("/url")

Fetch POST Syntax

fetch("/url"

Fetch JSON POST Syntax

fetch("/url"

Fetch then Syntax

fetch(url).then(response => { … })

Fetch catch Syntax

fetch(url).catch(error => { … })

Checking Response OK

if (response.ok) { … }

Parsing JSON Syntax

response.json().then(data => { … })

Async Function Syntax

async function name() { … }

Await Syntax

const data = await fetch(url)

Await JSON Syntax

const json = await response.json()

Try/Catch Async Syntax

try { … } catch(e) { … }

Creating FormData

const fd = new FormData(form)

Sending FormData

fetch("/url"

Event Target Access

e.target

Current Target Access

e.currentTarget

Stopping Propagation Syntax

e.stopPropagation()

Delegated Listener Syntax

parent.addEventListener("click"

Disable Button Syntax

button.disabled = true

Re-enable Button Syntax

button.disabled = false

Looping NodeList Syntax

document.querySelectorAll("li").forEach(li => { … })

Fetch Basic GET Syntax

fetch("/endpoint")

Fetch GET With then

fetch("/endpoint").then(r => { … })

Fetch GET Full Chain

fetch("/url").then(r => r.json()).then(data => { … })

Fetch Error Chain

fetch("/url").catch(err => { … })

Fetch POST Basic

fetch("/url"

Fetch POST With Body

fetch("/url"

Fetch JSON POST

fetch("/url"

Fetch Check OK Syntax

if (response.ok) { … } else { … }

Fetch Response Status Access

response.status

Fetch JSON Parse Syntax

const data = await response.json()

Fetch With await

const response = await fetch("/url")

Await Then JSON

const json = await response.json()

Try/Catch With await

try { const r = await fetch(url)

} catch(e) { … }

Network Error Detection

catch(e => { … }) handles unreachable servers

HTTP Error Detection

response.ok === false detects HTTP errors

Creating Headers Object

const h = { "Content-Type":"application/json" }

Fetch With Headers Option

fetch(url

Sending FormData

fetch(url

Appending Query Params Manually

fetch("/search?q=" + encodeURIComponent(term))

Fetch Abort Syntax

const controller = new AbortController()