Løsningsforslag – IT 2 JavaScript Vår 2026

Eksamen: REA3049 Informasjonsteknologi 2 | Semester: Vår 2026 | Varighet: 5 timer | Språkvariant: JavaScript | Tema: OOP-begreper, pseudokode og flytskjema, togsett-modellering, kjøretøydatasett, etikk (kameraovervåking), spillprogrammering

Oppgave 1 – Hva er hovedformålet med en konstruktør?

Begrunnelse: En konstruktør er en spesiell metode som kjøres automatisk når et nytt objekt (en instans) opprettes fra en klasse. Oppgaven dens er å initialisere objektets tilstand – altså gi attributtene sine startverdier. I JavaScript heter konstruktøren constructor, og den kjøres automatisk av new:

class Elev {
  constructor(navn, alder) {
    this.navn = navn;      // startverdi for attributt
    this.alder = alder;    // startverdi for attributt
  }
}

const elev = new Elev("Noah", 15);  // constructor kjøres automatisk her

De andre alternativene beskriver andre mekanismer: å definere metodene gjøres i klassekroppen generelt; å opprette nye klasser basert på eksisterende er arv; og å styre kommunikasjon mellom objekter handler om meldingsutveksling/metodekall, ikke om initialisering.

Oppgave 2 – Hvordan fungerer arv?

Begrunnelse: Arv (generalisering/spesialisering) går fra superklasse til subklasse. Kjøretøy er superklassen (det generelle), mens Bil og Buss er subklasser (det spesialiserte). Subklassene arver alt som er definert i superklassen, og kan i tillegg legge til egne attributter og metoder eller overstyre arvede metoder. I JavaScript uttrykkes arv med extends og super():

class Kjoretoy {
  constructor(hastighet) {
    this.hastighet = hastighet;
  }
}

class Bil extends Kjoretoy {   // arver fra Kjøretøy
  constructor(hastighet, antallDorer) {
    super(hastighet);                // arvet attributt
    this.antallDorer = antallDorer;  // egen attributt
  }
}

Alternativet «Kjøretøy får tilgang til alt i Bil og Buss» snur arveretningen feil vei (superklassen kjenner ikke subklassene). At klassene skulle være «uavhengige» er også feil – de deler en generaliseringsrelasjon.

Oppgave 3 – Sorter pseudokoden

Begrunnelse: Vi trenger to variabler: en teller antall som starter på 0, og en løkketeller i som styrer at vi leser nøyaktig fem tall. Inne i løkka leses ett tall, det testes mot 10, telleren økes ved treff, og løkketelleren økes til slutt. Legg merke til at SET antall TO antall + 1 må ligge inne i IF … ENDIF, mens SET i TO i + 1 må ligge utenfor IF men inne i WHILE – ellers telles feil.

Tilsvarende JavaScript-kode ser slik ut:

let antall = 0;
let i = 1;
while (i <= 5) {
  const tall = Number(prompt("Skriv et tall: "));
  if (tall > 10) {
    antall = antall + 1;
  }
  i = i + 1;
}
console.log(antall);

Oppgave 4 – Flytskjema og pseudokode

Oppgave 4a – Hvilken pseudokode matcher flytskjemaet?

Slik løser du 4a: Les flytskjemaet ovenfra og ned. Noter for hver blokk hvilken type den er:

• Oval = start/slutt
• Rektangel = handling (tilordning, utregning)
• Parallellogram = inn-/utdata (READ/DISPLAY)
• Rombe (diamant) = betingelse (IF/WHILE) – én pil ut for «ja», én for «nei»

Gå deretter gjennom hver av de tre pseudokode-sekvensene og sjekk at rekkefølgen på handlinger, den samme betingelsen (f.eks. > mot >=), og løkkestrukturen (om testen står før eller etter kroppen) stemmer overens med flytskjemaet. Sekvensen som har identisk rekkefølge og identiske betingelser, er svaret. Vær særlig oppmerksom på forskjellen mellom en WHILE-løkke (test først) og en REPEAT/UNTIL-løkke (test sist), og på om en pil peker tilbake til før eller etter en tilordning.

Oppgave 4b – Forklar med egne ord hva algoritmen gjør

Et godt 4b-svar navngir blokktypene, beskriver løkkas start- og sluttbetingelse, forklarer hva beslutningsblokken tester, og oppsummerer algoritmens formål i én setning – akkurat som malen over.

Oppgave 5 – Togsett, lokomotiv, togdel og vogn

Oppgave 5a – Klassene Togsett og Lokomotiv

Vi bruker komposisjon: når et Togsett opprettes, oppretter konstruktøren automatisk sitt eget Lokomotiv. Lokomotivet velger tilfeldig trekkraft med Math.random.

// togsett.js — oppgave 5 (kjøres med: node togsett.js)

class Lokomotiv {
  static TREKKRAFT_VALG = [320, 450, 600];  // tonn

  constructor() {
    const valg = Lokomotiv.TREKKRAFT_VALG;
    this.trekkraft = valg[Math.floor(Math.random() * valg.length)];
  }

  toString() {
    return `Lokomotiv med trekkraft ${this.trekkraft} tonn`;
  }
}

class Togsett {
  constructor() {
    // Komposisjon: et togsett FÅR automatisk et lokomotiv
    this.lokomotiv = new Lokomotiv();
  }
}

Oppgave 5b – Program som oppretter et togsett og skriver ut lokomotivinfo

function main() {
  const togsett = new Togsett();
  console.log("Nytt togsett opprettet.");
  console.log(String(togsett.lokomotiv));   // f.eks. "Lokomotiv med trekkraft 450 tonn"
}

main();

Oppgave 5c – Togdel og Vogn, med endringer i Togsett og Lokomotiv

Nå innføres superklassen Togdel. Den holder en statisk teller (privat klassefelt #nesteSerienummer) slik at hvert serienummer blir unikt. Lokomotiv og Vogn arver fra Togdel. Togsett får metoder for å legge til både nye og eksisterende vogner.

// togsett.js — full versjon etter 5c

class Togdel {
  // Privat statisk felt garanterer unikt serienummer
  static #nesteSerienummer = 1;

  constructor(vekt) {
    this.serienummer = Togdel.#nesteSerienummer++;
    this.vekt = vekt;
  }

  toString() {
    return `Togdel #${this.serienummer} (${this.vekt} tonn)`;
  }
}

class Lokomotiv extends Togdel {
  static TREKKRAFT_VALG = [320, 450, 600];  // tonn

  constructor() {
    super(120);  // egenvekt (ikke spesifisert; teller ikke mot grensen)
    const valg = Lokomotiv.TREKKRAFT_VALG;
    this.trekkraft = valg[Math.floor(Math.random() * valg.length)];
  }

  toString() {
    return `Lokomotiv #${this.serienummer}: trekkraft ${this.trekkraft} tonn`;
  }
}

class Vogn extends Togdel {
  constructor() {
    super(Math.floor(Math.random() * 31) + 20);  // tilfeldig 20–50 tonn
  }

  toString() {
    return `Vogn #${this.serienummer}: vekt ${this.vekt} tonn`;
  }
}

class Togsett {
  constructor() {
    this.lokomotiv = new Lokomotiv();   // komposisjon
    this.vogner = [];
  }

  samletVognvekt() {
    return this.vogner.reduce((sum, v) => sum + v.vekt, 0);
  }

  kanLeggeTil(vogn) {
    // Sant hvis vognen får plass innenfor trekkraften
    return this.samletVognvekt() + vogn.vekt <= this.lokomotiv.trekkraft;
  }

  leggTilVogn(vogn = null) {
    // Legg til en eksisterende vogn, eller opprett en ny hvis ingen gis
    if (vogn === null) {
      vogn = new Vogn();          // ny vogn
    }
    this.vogner.push(vogn);       // eksisterende ELLER ny
    return vogn;
  }
}

Oppgave 5d – Utvidet program: fyll opp til trekkraften er nådd

function main() {
  const togsett = new Togsett();
  console.log("Nytt togsett opprettet.");
  console.log(String(togsett.lokomotiv));

  // Legg til vogner helt til neste vogn ikke får plass innenfor trekkraften
  while (true) {
    const vogn = new Vogn();
    if (!togsett.kanLeggeTil(vogn)) {
      break;
    }
    togsett.leggTilVogn(vogn);
  }

  console.log(
    `\nLa til ${togsett.vogner.length} vogner ` +
    `(samlet vekt ${togsett.samletVognvekt()} av maks ` +
    `${togsett.lokomotiv.trekkraft} tonn):`
  );
  for (const vogn of togsett.vogner) {
    console.log(`  ${vogn}`);
  }
}

main();

Oppgave 6 – Etisk dilemma ved kameraovervåking

Oppgave 7 – Registrerte kjøretøy 2008–2024 (datasett)

Koden kjøres i nettleseren via en liten index.html-wrapper som laster inn kjoretoy.js og har et <canvas> til diagrammet i 7c:

<!-- index.html -->
<!DOCTYPE html>
<html lang="no">
<head><meta charset="utf-8"><title>Kjøretøy</title></head>
<body>
  <canvas id="diagram" width="800" height="500"></canvas>
  <script src="kjoretoy.js"></script>
</body>
</html>

Oppgave 7a – Totalt antall elbiler per år (2014–2024)

// kjoretoy.js — oppgave 7 (kjøres i nettleser via index.html)

const DATAFIL = "kjoretoy_2008_2024.csv";
const EL = "elektrisk";   // drivstofftype for elbil (sammenlignes med toLowerCase)

async function lesData(filsti = DATAFIL) {
  // Hent CSV med fetch og gjør hver rad om til et objekt: {aar, region, drivstofftype, antall}
  const svar = await fetch(filsti);
  const tekst = await svar.text();
  const [headerLinje, ...rader] = tekst.trim().split(/\r?\n/);
  const kolonner = headerLinje.split(";");
  return rader.map((linje) => {
    const verdier = linje.split(";");
    return Object.fromEntries(kolonner.map((k, i) => [k, verdier[i]]));
  });
}

function elbilerPerAar(data) {
  // Sum av elbiler per år på tvers av alle regioner
  const resultat = new Map();
  for (const rad of data) {
    if (rad.drivstofftype.toLowerCase() === EL) {
      const aar = Number(rad.aar);
      resultat.set(aar, (resultat.get(aar) ?? 0) + Number(rad.antall));
    }
  }
  return resultat;
}

function visElbiltabell(data, fra = 2014, til = 2024) {
  const perAar = elbilerPerAar(data);
  const rader = [];
  for (let aar = fra; aar <= til; aar++) {
    rader.push({ aar, elbiler: perAar.get(aar) ?? 0 });
  }
  console.table(rader);   // kan også bygges om til en DOM-tabell
  return rader;
}

Oppgave 7b – Elbiler per region for valgt år (sortert + andel)

function regionStatistikk(data, aar) {
  // For gitt år: Map<region, {elbiler, totalt}>
  const stat = new Map();
  for (const rad of data) {
    if (Number(rad.aar) !== aar) continue;
    const antall = Number(rad.antall);
    const post = stat.get(rad.region) ?? { elbiler: 0, totalt: 0 };
    post.totalt += antall;
    if (rad.drivstofftype.toLowerCase() === EL) {
      post.elbiler += antall;
    }
    stat.set(rad.region, post);
  }
  return stat;
}

function visAar(data, aar) {
  const stat = regionStatistikk(data, aar);
  // Sorter synkende etter antall elbiler
  const rader = [...stat.entries()]
    .sort((a, b) => b[1].elbiler - a[1].elbiler)
    .map(([region, tall]) => ({
      region,
      elbiler: tall.elbiler,
      andel: tall.totalt ? (tall.elbiler / tall.totalt) * 100 : 0,
    }));

  console.log(`\nElbiler per region i ${aar} (synkende):`);
  for (const { region, elbiler, andel } of rader) {
    console.log(
      region.padEnd(20) +
      String(elbiler).padStart(10) +
      `${andel.toFixed(1)} %`.padStart(10)
    );
  }
  return rader;
}

Oppgave 7c – Linjediagram for valgt region (per drivstofftype)

function serierPerDrivstoff(data, region) {
  // Map<drivstofftype, Map<aar, antall>>
  const perType = new Map();
  for (const rad of data) {
    if (rad.region.toLowerCase() !== region.toLowerCase()) continue;
    const aar = Number(rad.aar);
    const serie = perType.get(rad.drivstofftype) ?? new Map();
    serie.set(aar, (serie.get(aar) ?? 0) + Number(rad.antall));
    perType.set(rad.drivstofftype, serie);
  }
  return perType;
}

// Tegner et linjediagram på et <canvas> med rent Canvas 2D API — ingen eksterne bibliotek
function linjediagram(data, region, canvas) {
  const perType = serierPerDrivstoff(data, region);
  if (perType.size === 0) {
    console.log(`Fant ingen data for regionen '${region}'.`);
    return;
  }

  const aarListe = [...new Set(data.map((r) => Number(r.aar)))].sort((a, b) => a - b);
  const alleVerdier = [...perType.values()].flatMap((s) => [...s.values()]);
  const maks = Math.max(...alleVerdier, 1);

  const ctx = canvas.getContext("2d");
  const B = canvas.width, H = canvas.height, marg = 60;
  ctx.clearRect(0, 0, B, H);

  // Akser
  ctx.strokeStyle = "#333";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(marg, marg);
  ctx.lineTo(marg, H - marg);
  ctx.lineTo(B - marg, H - marg);
  ctx.stroke();

  const xFor = (i) => marg + (i * (B - 2 * marg)) / (aarListe.length - 1);
  const yFor = (v) => H - marg - (v * (H - 2 * marg)) / maks;

  const farger = ["#2196F3", "#4CAF50", "#FFC107", "#E53935", "#9C27B0", "#00ACC1"];
  let fargeNr = 0;
  for (const [drivstoff, serie] of [...perType.entries()].sort()) {
    ctx.strokeStyle = farger[fargeNr % farger.length];
    ctx.fillStyle = ctx.strokeStyle;
    ctx.lineWidth = 2;
    ctx.beginPath();
    aarListe.forEach((aar, i) => {
      const x = xFor(i), y = yFor(serie.get(aar) ?? 0);
      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
    });
    ctx.stroke();
    ctx.fillText(drivstoff, B - marg - 120, marg + 16 * fargeNr + 4);  // enkel forklaring
    fargeNr++;
  }

  ctx.fillStyle = "#000";
  ctx.font = "16px sans-serif";
  ctx.fillText(`Registrerte kjøretøy i ${region} (2008–2024)`, marg, marg - 25);
}

async function main() {
  const data = await lesData();
  visElbiltabell(data);                                // 7a
  visAar(data, 2024);                                  // 7b (velg år i grensesnittet)
  const canvas = document.getElementById("diagram");
  linjediagram(data, "Telemark", canvas);             // 7c
}

main();

Oppgave 8 – Spillet «stolpebyggeren»

<!-- index.html -->
<!DOCTYPE html>
<html lang="no">
<head><meta charset="utf-8"><title>Stolpebyggeren</title></head>
<body>
  <canvas id="spill" width="800" height="400"></canvas>
  <script src="stolpebygger.js"></script>
</body>
</html>

// stolpebygger.js — oppgave 8 (kjøres via index.html i nettleser)

const BREDDE = 800, HOYDE = 400;
const FANGER_B = 150, FANGER_H = 70;
const DEL_H = 50;
const DEL_BREDDER = [50, 100, 150];
const KANT = 50;                // deler minst 50 px fra sidene
const STOLPE_B = DEL_H;          // bredde på en rotert del
const FARGER = { blå: "#2196F3", grønn: "#4CAF50" };
const BG = "#f0f0f5";
const FART_FANGER = 9;
const FART_FALL = 3;
const SPAWN_MS = 1300;

const tilfeldig = (liste) => liste[Math.floor(Math.random() * liste.length)];

function overlapper(a, b) {
  return a.x < b.x + b.bredde && a.x + a.bredde > b.x &&
         a.y < b.y + b.hoyde && a.y + a.hoyde > b.y;
}

class Stolpedel {
  constructor(x, bredde, fargenavn) {
    this.x = x;
    this.y = -DEL_H;
    this.bredde = bredde;
    this.hoyde = DEL_H;
    this.fargenavn = fargenavn;
  }

  fall() {
    this.y += FART_FALL;
  }

  roter() {
    // Kvart rotasjon (90°): bredde og høyde bytter plass
    [this.bredde, this.hoyde] = [this.hoyde, this.bredde];
  }

  tegn(ctx) {
    ctx.fillStyle = FARGER[this.fargenavn];
    ctx.fillRect(this.x, this.y, this.bredde, this.hoyde);
    ctx.strokeStyle = "#1e1e1e";
    ctx.lineWidth = 2;
    ctx.strokeRect(this.x, this.y, this.bredde, this.hoyde);
  }
}

class Stolpe {
  // En sidestolpe som bygges nedenfra og opp med vekslende farger
  constructor(xVenstre) {
    this.x = xVenstre;
    this.deler = [];
  }

  hoyde() {
    return this.deler.reduce((sum, d) => sum + d.hoyde, 0);
  }

  nesteFarge() {
    if (this.deler.length === 0) {
      return "blå";                 // første del: vi krever blå
    }
    return this.deler.at(-1).fargenavn === "blå" ? "grønn" : "blå";
  }

  ferdig() {
    return this.hoyde() >= HOYDE;
  }

  leggTil(del) {
    del.roter();                    // blir STOLPE_B bred, gammel bredde blir høyde
    del.bredde = STOLPE_B;
    del.x = this.x;
    del.y = HOYDE - this.hoyde() - del.hoyde;
    this.deler.push(del);
  }

  tegn(ctx) {
    for (const d of this.deler) d.tegn(ctx);
  }
}

class Stolpebygger {
  constructor() {
    this.x = (BREDDE - FANGER_B) / 2;
    this.y = HOYDE - FANGER_H;
    this.bredde = FANGER_B;
    this.hoyde = FANGER_H;
    this.liv = 3;
  }

  flytt(dx) {
    this.x = Math.max(0, Math.min(BREDDE - FANGER_B, this.x + dx));
  }

  tegn(ctx) {
    ctx.fillStyle = "#5a5a5a";
    ctx.fillRect(this.x, this.y, this.bredde, this.hoyde);
    ctx.strokeStyle = "#141414";
    ctx.lineWidth = 3;
    ctx.strokeRect(this.x, this.y, this.bredde, this.hoyde);
  }
}

class Spill {
  constructor(canvas) {
    this.ctx = canvas.getContext("2d");
    this.bygger = new Stolpebygger();
    this.fallende = [];
    this.hoyre = new Stolpe(BREDDE - STOLPE_B);   // bygges først, helt til høyre
    this.venstre = new Stolpe(0);              // bygges sist, helt til venstre
    this.sistSpawn = 0;
    this.sisteTid = 0;
    this.slutt = false;
    this.taster = new Set();

    window.addEventListener("keydown", (e) => this.taster.add(e.key));
    window.addEventListener("keyup", (e) => this.taster.delete(e.key));
  }

  aktivStolpe() {
    return this.hoyre.ferdig() ? this.venstre : this.hoyre;
  }

  spawnDel() {
    for (let forsok = 0; forsok < 20; forsok++) {   // finn ledig posisjon uten overlapp
      const bredde = tilfeldig(DEL_BREDDER);
      const x = KANT + Math.floor(Math.random() * (BREDDE - 2 * KANT - bredde + 1));
      const ny = { x, y: -DEL_H, bredde, hoyde: DEL_H };
      if (!this.fallende.some((d) => overlapper(ny, d))) {
        this.fallende.push(new Stolpedel(x, bredde, tilfeldig(Object.keys(FARGER))));
        return;
      }
    }
  }

  fang(del) {
    const stolpe = this.aktivStolpe();
    if (del.fargenavn === stolpe.nesteFarge()) {
      stolpe.leggTil(del);          // riktig farge
    } else {
      this.bygger.liv -= 1;         // feil farge koster et liv
    }
  }

  oppdater(dt) {
    // Styring
    if (this.taster.has("ArrowLeft")) this.bygger.flytt(-FART_FANGER);
    if (this.taster.has("ArrowRight")) this.bygger.flytt(FART_FANGER);

    this.sistSpawn += dt;
    if (this.sistSpawn >= SPAWN_MS) {
      this.spawnDel();
      this.sistSpawn = 0;
    }

    for (const del of [...this.fallende]) {
      del.fall();
      if (overlapper(del, this.bygger)) {
        this.fang(del);
        this.fallende.splice(this.fallende.indexOf(del), 1);
      } else if (del.y > HOYDE) {
        this.fallende.splice(this.fallende.indexOf(del), 1);   // bommet — ingen straff
      }
    }

    if ((this.hoyre.ferdig() && this.venstre.ferdig()) || this.bygger.liv <= 0) {
      this.slutt = true;
    }
  }

  tegn() {
    const ctx = this.ctx;
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, BREDDE, HOYDE);
    this.hoyre.tegn(ctx);
    this.venstre.tegn(ctx);
    for (const d of this.fallende) d.tegn(ctx);
    this.bygger.tegn(ctx);
    ctx.fillStyle = "#000";
    ctx.font = "22px consolas, monospace";
    ctx.fillText(`Liv: ${this.bygger.liv}   Neste farge: ${this.aktivStolpe().nesteFarge()}`, 10, 28);
  }

  visResultat() {
    const ctx = this.ctx;
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, BREDDE, HOYDE);
    const tittel = this.bygger.liv > 0
      ? "Gratulerer! Begge stolpene er ferdig bygd."
      : "Game over – du mistet alle livene.";
    const linjer = [
      tittel,
      `Deler i høyre stolpe:  ${this.hoyre.deler.length}`,
      `Deler i venstre stolpe: ${this.venstre.deler.length}`,
    ];
    ctx.fillStyle = "#000";
    ctx.font = "22px consolas, monospace";
    ctx.textAlign = "center";
    linjer.forEach((tekst, i) => ctx.fillText(tekst, BREDDE / 2, 150 + i * 34));
    ctx.textAlign = "left";
  }

  steg(tid) {
    const dt = this.sisteTid ? tid - this.sisteTid : 0;
    this.sisteTid = tid;
    this.oppdater(dt);
    this.tegn();
    if (this.slutt) {
      this.visResultat();
    } else {
      requestAnimationFrame((t) => this.steg(t));
    }
  }

  kjor() {
    requestAnimationFrame((t) => this.steg(t));
  }
}

const canvas = document.getElementById("spill");
new Spill(canvas).kjor();

Oppgave 9 – Innlevering

Foreslått mappestruktur (f.eks. 123456.zip):

123456/
├── oppgave4b/
│   └── forklaring_algoritme.txt      (tekstsvaret ditt til 4b)
├── oppgave5/
│   └── togsett.js                    (kjøres med: node togsett.js)
├── oppgave7/
│   ├── index.html                    (åpnes i nettleser)
│   ├── kjoretoy.js
│   └── kjoretoy_2008_2024.csv        (datasettet)
├── oppgave8/
│   ├── index.html                    (åpnes i nettleser)
│   └── stolpebygger.js
└── README.txt   (hvordan hver fil kjøres — Node.js eller nettleser)