Lektion 7 — Forberedelse

I Lektion 5 arbejdede I med DOM og events. Nu skal JavaScript hente data udefra. Målet med forberedelsen er, at du kan hente og parse en JSON-liste af objekter og forstå, hvordan rækkerne ender i en HTML-tabel. I timen bruger I det på patientlisten (cpr og navn).

Underviser-API'et kalder I ikke hjemmefra — det gør I sammen i øvelse 1.

JavaScript

Spring workshops og resten af certificeringen over, medmindre det står her.

1. Javascript objekter og JSON (~10 min)

Kapitlet JavaScript → Objects → lecturen Working with JSON.

Lav begge:

  1. What Is JSON, and How Do You Access Values Using Bracket and Dot Notation?
  2. How Do JSON.parse() and JSON.stringify() Work?

Fokusér på, at JSON er tekst, at parse giver et JavaScript-objekt (eller en array af objekter), og at du læser felter med patient.navn. stringify skal I bruge, når I senere sender login med POST.

Spring wildlife-tracker, record collection og optional chaining over.

2. Fetch og async (~20 min)

Hop i oversigten til Asynchronous JavaScript → lecturen Understanding Asynchronous Programming.

Lav disse fem (spring script async vs defer, JS-engine og Geolocation over):

  1. What Is Asynchronous JavaScript, and How Does It Differ from Synchronous JavaScript?
  2. What Is the Fetch API, and What Are Common Types of Resources That Are Fetched from the Network?
  3. How Does the Fetch API Work with Common HTTP Methods and res.json()?
  4. What Are Promises, and How Does Promise Chaining Work?
  5. What Is Async/Await, and How Does It Work?

Læg mærke til, at fetch er asynkront, at .json() giver dataene, og at async/await er den form, I bruger i timen. Lecture 3 viser også POST og JSON.stringify — det hører til øvelse 2, men det er fint at se det nu.

3. Build an fCC Authors Page (~25–30 min)

Samme modul → workshoppen Build an fCC Authors Page.

Workshoppen henter en JSON-liste og tegner den i DOM'en med .then(). Det er samme mønster som patientlisten — bare med forfattere i stedet for patienter, og med kort i stedet for en tabel.

Øvelsen er i hus, når siden viser listen fra API'et, og du kan pege på fetch, .then / .json(), og hvor hvert objekt skrives i HTML.

4. HTML-tabel (~5 min)

I timen skal listen i en tabel, ikke i kort som i workshoppen. Tabeller har I ikke haft i L1–L5.

Responsive Web Design → kapitlet HTML → Forms and Tables → lecturen Working with Tables.

Kun den ene lecture:

  1. What Are HTML Tables Used For, and What Should They Not Be Used For?

Det, du skal huske: table, thead/tbody, tr, th og td. Tabeller er til data (CPR + navn), ikke til side-layout.

Spring Final Exams Table, Book Catalog Table og resten af HTML-kapitlet over.

Hvis du har ekstra tid: Build an fCC Forum Leaderboard. Den er ikke påkrævet.

Når du er færdig

Du skal kunne forklare:

  • at JSON er tekst, og at res.json() / JSON.parse giver objekter, du kan læse med punktum (patient.navn)
  • at fetch henter data, mens siden kører, og at det er asynkront
  • forskellen på .then() (workshoppen) og async/await (timen)
  • hvordan en tabel er bygget, så du i timen kan lægge én række pr. patient med kolonnerne CPR og navn

response.ok, CORS og underviser-API'et tager vi i gennemgangen.

Bemærk: freeCodeCamp kræver login (gratis), hvis du vil gemme din fremgang.