16 Objekter

Skolebiblioteket vil ha en side som viser bøkene, og hvilke som er lånt ut. I dette kapitlet samler du alt om én bok i et objekt. Lagre alt du lager i dette kapitlet i mappen kap16-objekter.

16.1 Et objekt med egenskaper

biblioteket/skript.js
let bok = {
  tittel: "Sjøfareren",
  forfatter: "Ingrid Lie",
  sider: 312,
  utlant: false
};
console.log(bok.tittel);
console.log(bok.sider);

Et objekt lager du med krøllparenteser. Inni står egenskaper, som hver har et navn og en verdi. Du henter en egenskap med punktum: bok.tittel er tittelen til boka.

  1. Les koden ovenfor, og gjett hva som står i konsollen.
  2. Lag mappen biblioteket med index.html og skript.js, slik du gjorde i 14.1. Skriv koden, og sjekk om du gjettet riktig.
  3. Legg til console.log(bok); nederst. Klikk på den lille pila foran objektet i konsollen. Hva ser du?
  4. Skriv ut «Sjøfareren av Ingrid Lie, 312 sider» med en template literal og egenskapene til objektet.

Nedenfor ser du fire måter å lage objektet på. Bare én av dem virker.

Kode A
let bok = {
  tittel = "Sjøfareren",
  sider = 312
};
Kode B
let bok = {
  tittel: "Sjøfareren";
  sider: 312;
};
Kode C
let bok = {
  tittel: "Sjøfareren",
  sider: 312
};
Kode D
let bok = [
  tittel: "Sjøfareren",
  sider: 312
];
  1. Finn kodebiten som virker. Forklar feilen i hver av de tre andre.
Liste Objekt
lages med [ ] lages med { }
mange verdier av samme slag, for eksempel skjermtiden hver dag mange opplysninger om én ting, for eksempel én bok
verdiene har en indeks: minutter[0] egenskapene har et navn: bok.tittel

16.2 Endre og legge til egenskaper

biblioteket/skript.js
bok.utlant = true;
bok.lanetaker = "Jonas";
console.log(bok);
console.log(bok.forfater);

Du endrer en egenskap på samme måte som du endrer en variabel. Finnes ikke egenskapen fra før, blir den lagt til. Spør du etter en egenskap som ikke finnes, får du undefined, som betyr ikke definert.

  1. Les koden ovenfor, og gjett hva som står i konsollen.
  2. Legg til koden nederst i skriptet, og sjekk om du gjettet riktig.
  3. Hvorfor står det undefined på den siste linja? Rett feilen.
  4. Boka blir levert tilbake. Skriv kodelinjene som gjør at boka ikke lenger er lånt ut, og ikke har noen lånetaker. Bruk delete bok.lanetaker; for å fjerne egenskapen.

JavaScript gir ingen feilmelding når du staver navnet på en egenskap feil. Du får bare undefined. Ser du undefined på siden eller i konsollen, er det lurt å sjekke stavemåten først.

16.3 En liste med objekter

biblioteket/skript.js
let boker = [
  { tittel: "Sjøfareren", forfatter: "Ingrid Lie", sider: 312, utlant: false },
  { tittel: "Robotsommer", forfatter: "Ali Haugen", sider: 186, utlant: true },
  { tittel: "Månefisken", forfatter: "Sara Berg", sider: 64, utlant: false },
  { tittel: "Fyrvokteren", forfatter: "Ole Dahl", sider: 240, utlant: true }
];
console.log(boker.length);
console.log(boker[1].tittel);

Biblioteket har mange bøker. Da lager du en liste der hver verdi er et objekt. boker[1] er det andre objektet i lista, og boker[1].tittel er tittelen til den boka. Alle objektene har de samme egenskapene, slik at programmet kan behandle dem likt.

  1. Les koden ovenfor, og gjett hva som står i konsollen.
  2. Erstatt skriptet med koden ovenfor, og sjekk om du gjettet riktig.
  3. Skriv kodelinja som skriver ut antall sider i den siste boka i lista. Den skal virke selv om lista blir lengre.
  4. Legg til én bok til med boker.push({ ... });.
biblioteket/skript.js
for (let bok of boker) {
  console.log(`${bok.tittel} av ${bok.forfatter}`);
}
  1. Legg til løkka ovenfor nederst i skriptet. Gjett hva som står i konsollen før du laster inn siden.
  2. Endre løkka slik at den også skriver «(utlånt)» etter bøkene som er lånt ut.
Spør KI

Forklar forskjellen på boker[1].tittel og boker.tittel[1] i JavaScript. Hvilken av dem virker, og hva gir den andre? Ikke skriv mer kode enn det trengs for å forklare.

16.4 Finne objekter som passer

biblioteket/skript.js
let ledige = 0;
let sider = 0;
for (let bok of boker) {
  if (!bok.utlant) {
    console.log(bok.tittel);
    ledige++;
    sider += bok.sider;
  }
}
console.log(`${ledige} ledige bøker med ${sider} sider til sammen`);
Algoritme
Begynn med 0 ledige bøker og 0 sider
For hver bok i lista:
    Hvis boka ikke er lånt ut:
        Skriv tittelen
        Tell én ledig bok til
        Legg sidene til summen
Skriv antall ledige bøker og sider

Ofte skal programmet bare bruke noen av objektene, for eksempel bøkene som er ledige. Da går løkka gjennom alle objektene, og en if sjekker en egenskap. Det er de samme algoritmene som du brukte på lister med tall i kapittel 15.

  1. Les koden ovenfor, og gjett hva som står i konsollen.
  2. Legg til koden nederst i skriptet, og sjekk om du gjettet riktig.
  3. Endre vilkåret slik at programmet finner bøker med færre enn 200 sider.
  4. Lag et program som finner boka med flest sider, slik du lærte i 15.4. Programmet skal skrive tittelen, og ikke bare antall sider.

Biblioteket vil at elevene skal kunne søke etter en bok.

biblioteket/index.html
<label for="inpSok">Søk etter tittel:</label>
<input type="text" id="inpSok">
<button onclick="sok()">Søk</button>
<p id="txtSvar"></p>
<script src="skript.js"></script>
biblioteket/skript.js
function sok() {
  let ord = inpSok.value.toLowerCase();
  txtSvar.textContent = "Fant ingen bok.";
  for (let bok of boker) {
    if (bok.tittel.toLowerCase().includes(ord)) {
      txtSvar.textContent = `${bok.tittel} av ${bok.forfatter}`;
    }
  }
}
  1. Legg til HTML-koden i index.html og funksjonen nederst i skriptet. Søk etter «fisk». Hvorfor finner programmet Månefisken, selv om du ikke skrev hele tittelen?
  2. Hva gjør toLowerCase()? Søk etter «ROBOT» med og uten toLowerCase().
  3. Søk etter «er». Flere titler inneholder «er», men bare én vises. Hvorfor? Endre programmet slik at alle bøkene som passer, blir vist.

16.5 Vise objekter på nettsiden

biblioteket/index.html
<table>
  <caption>Bøker i skolebiblioteket</caption>
  <thead>
    <tr><th>Tittel</th><th>Forfatter</th><th>Sider</th><th>Status</th></tr>
  </thead>
  <tbody id="tblBoker"></tbody>
</table>
<script src="skript.js"></script>
biblioteket/skript.js
function visBoker() {
  let html = "";
  for (let i = 0; i < boker.length; i++) {
    let bok = boker[i];
    let status = bok.utlant ? "Utlånt" : `<button onclick="lan(${i})">Lån</button>`;
    html += `<tr><td>${bok.tittel}</td><td>${bok.forfatter}</td><td>${bok.sider}</td><td>${status}</td></tr>`;
  }
  tblBoker.innerHTML = html;
}

function lan(i) {
  boker[i].utlant = true;
  visBoker();
}

visBoker();

Programmet lager én tabellrad for hver bok, slik løkka lagde listepunkter i 14.6. Er boka ledig, får raden en knapp som kaller lan med indeksen til boka. Id-en til tabellkroppen begynner med tbl.

bok.utlant ? "Utlånt" : "..." er en kort måte å skrive if og else på. Er bok.utlant true, blir verdien det som står etter ?. Ellers blir den det som står etter :.

  1. Les koden ovenfor. Hva skjer når du trykker på Lån?
  2. Legg til tabellen i index.html, og koden nederst i skriptet. Test.
  3. Last inn siden på nytt. Hvorfor er alle bøkene som var ledige før, ledige igjen?
  4. Lag en knapp Lever i stedet for teksten «Utlånt», som kaller funksjonen lever(i). Lag funksjonen.
  5. Gi siden stil med et <style>-element, slik at utlånte bøker vises med grå tekst. Bruk en klasse på raden.

Når data endres, er det lurt å endre objektet og tegne hele tabellen på nytt med den samme funksjonen. Da viser siden alltid det som står i lista, og du slipper å holde styr på hver enkelt celle.

16.6 Objekter og tabeller

tittel forfatter sider utlant
Sjøfareren Ingrid Lie 312 false
Robotsommer Ali Haugen 186 true
Månefisken Sara Berg 64 false
Fyrvokteren Ole Dahl 240 true

En liste med objekter er det samme som en tabell: Hvert objekt er en rad, og hver egenskap er en kolonne. I Del 5 lærer du å lagre slike tabeller i en database.

Når en app sender data over nettet, gjør den ofte lista om til tekst i formatet JSON. JSON ser nesten ut som JavaScript-koden du har skrevet.

biblioteket/skript.js
let tekst = JSON.stringify(boker);
console.log(tekst);
  1. Legg til koden nederst i skriptet. Hva er likt og hva er forskjellig fra hvordan du skrev lista?
  2. Tegn tabellen for en liste med objekter for fem venner, med egenskapene navn, klasse og favorittfag.
  3. Hvilke opplysninger tror du skolebiblioteket lagrer om deg når du låner en bok? Lag en tabell med kolonnene du tror finnes.
Spør KI

Jeg lærer om objekter og lister i JavaScript. Gi meg en kort beskrivelse av noe fra hverdagen, for eksempel en kantine eller et treningssenter. La meg foreslå hvilke objekter og egenskaper programmet trenger, og gi meg tilbakemelding på forslaget.

Oppsummering

I dette kapitlet har du laget objekter og lister med objekter, funnet objekter som passer, søkt etter tekst og vist objektene i en tabell på nettsiden.

Objekter

biblioteket/index.html
<ul id="lstBoker"></ul>

<script>
  let boker = [
    { tittel: "Sjøfareren", forfatter: "Ingrid Lie", sider: 312, utlant: false },
    { tittel: "Robotsommer", forfatter: "Ali Haugen", sider: 186, utlant: true },
    { tittel: "Månefisken", forfatter: "Sara Berg", sider: 64, utlant: false }
  ];
  let html = "";
  for (let bok of boker) {
    let status = bok.utlant ? " (utlånt)" : "";
    html += `<li>${bok.tittel} av ${bok.forfatter}${status}</li>`;
  }
  lstBoker.innerHTML = html;
</script>
Nettleser

Merk deg følgende:

  • Et objekt har egenskaper med navn og verdi. Bruk kolon mellom navn og verdi, og komma mellom egenskapene.
  • En egenskap som ikke finnes, gir undefined, og ingen feilmelding.
  • En liste med objekter er en tabell. Hvert objekt er en rad, og hver egenskap er en kolonne.
Kode Betyr
let bok = { tittel: "Sjøfareren", sider: 312 }; lager et objekt
bok.tittel henter egenskapen tittel
bok.utlant = true; endrer eller legger til en egenskap
delete bok.lanetaker; fjerner en egenskap
boker[1].tittel tittelen til det andre objektet i lista
for (let bok of boker) går gjennom alle objektene
tekst.toLowerCase().includes(ord) finnes ord i teksten, uansett store og små bokstaver?
vilkår ? a : b a hvis vilkåret er true, ellers b
JSON.stringify(boker) gjør lista om til tekst i formatet JSON

Oppgaver

Oppgave 16.1

oppg1-rett-feil/skript.js
let film = {
  tittel: "Stormnatt",
  aldersgrense = 15,
  lengde: 102
}
console.log(`${film.Tittel} er ${film.lengde} minutter.`);

Koden ovenfor har to feil. Finn og rett dem, slik at det står «Stormnatt er 102 minutter.» i konsollen.

Oppgave 16.2

  • }
  • console.log(`${lag.navn}: ${lag.poeng} poeng`);
  • for (let lag of tabell) {

Lista tabell inneholder objekter med egenskapene navn og poeng. Sett sammen kodelinjene til en løkke som skriver navnet og poengene til hvert lag.

Oppgave 16.3

Gjett hva som står i konsollen. Sjekk svarene dine.

oppg3-gjett/skript.js
let elev = { navn: "Sara", alder: 16 };
elev.alder++;
elev.klasse = "1IMA";
console.log(elev.alder);
console.log(elev.klasse);
console.log(elev.fag);

Oppgave 16.4

Lag mappen oppg4-filmer med en liste med minst fem filmer. Hver film skal ha tittel, lengde og aldersgrense. Programmet skal vise filmene som er tillatt for 12 år i en liste på siden, og den samlede lengden på dem i timer og minutter.

Oppgave 16.5

Forklar når du vil bruke en liste, og når du vil bruke et objekt. Gi et eksempel på hver fra en app du bruker.

B-oppgaver

Oppgave 16.6

Lag mappen oppg6-kontakter med en kontaktliste. Hver kontakt har navn, telefonnummer og e-post. Brukeren skal kunne legge til nye kontakter med tre tekstfelt, og søke etter navn. Alle kontaktene skal vises i en tabell.

Oppgave 16.7

Lag mappen oppg7-quiz med en quiz der spørsmålene ligger i en liste med objekter, med egenskapene sporsmal, alternativer og riktig. Vis ett spørsmål om gangen med én knapp for hvert alternativ, og tell poeng.

Oppgave 16.8

Lag mappen oppg8-poengtavle med en poengtavle for en turnering. Hvert lag er et objekt med navn, kamper, seire og poeng. Siden skal ha én knapp per lag som registrerer en seier, gir laget tre poeng og tegner tabellen på nytt.

Oppgave 16.9

Undersøk localStorage, JSON.stringify og JSON.parse. Endre biblioteket fra 16.5 slik at siden husker hvilke bøker som er lånt ut, også når du laster inn siden på nytt. Hva skjer hvis du åpner siden i en annen nettleser?