5.1 Introduksjon til JavaScript | IT 1

Lær hva JavaScript er, hvordan det kjøres i nettleseren, og skriv dine første programmer.

55 min

8 oppgaver

JavaScriptKonsollVariabelFunksjon

Du leser den tradisjonelle versjonen

Din fremgang i kapitlet

0 / 8 oppgaver

Introduksjon til JavaScript

Hittil har vi lært å strukturere nettsider med HTML og style dei med CSS. Men nettsidene vi har laga har vore statiske – innhaldet endrar seg ikkje etter at sida er lasta. For å gjere nettsider interaktive treng vi eit programmeringsspråk som kan reagere på handlingane til brukaren, endre innhald dynamisk og kommunisere med servarar. Det språket er JavaScript.

JavaScript er det einaste programmeringsspråket som køyrer direkte i nettlesaren. Alle moderne nettlesarar har ein innebygd JavaScript-motor som tolkar og køyrer koden. Chrome brukar V8-motoren, Firefox brukar SpiderMonkey, og Safari brukar JavaScriptCore. Når du besøkjer ei nettside som inneheld JavaScript, lastar nettlesaren ned koden og køyrer han lokalt på maskina di.

I dette kapittelet skal vi ta dei første stega med JavaScript. Vi lærer korleis vi koplar JavaScript til HTML-sider, skriv ut data til konsollen, brukar variablar, og lagar enkle program med vilkår og løkker.

JavaScript

JavaScript er eit høgnivå, dynamisk typa programmeringsspråk som primært blir brukt til å gjere nettsider interaktive. Det vart skapt av Brendan Eich i 1995 og har utvikla seg til å bli det mest brukte programmeringsspråket i verda. JavaScript kan manipulere HTML-element, reagere på hendingar som klikk og tasttrykk, validere skjemadata, lage animasjonar, kommunisere med servarar asynkront, og mykje meir. Trass i namnelikskapen har JavaScript ingenting med programmeringsspråket Java å gjere.

Det finst to hovudmåtar å leggje til JavaScript i ei HTML-side:

Ekstern JavaScript-fil (anbefalt)

Den beste praksisen er å skrive JavaScript i ei separat fil med filendinga .js og koble henne til HTML-dokumentet med ein <script>-tag:

<!DOCTYPE html>
<html lang="nb">
<head>
  <meta charset="UTF-8">
  <title>Min side</title>
</head>
<body>
  <h1>Hei, verden!</h1>
  <p id="melding">Denne teksten kan endres med JavaScript.</p>

  <script src="skript.js"></script>
</body>
</html>

Legg merke til at <script>-taggen er plassert like før </body>. Dette sikrar at heile HTML-dokumentet er ferdig lasta før JavaScript-koden køyrer, slik at koden kan finne og manipulere alle element på sida.

Inline JavaScript

Du kan òg skrive JavaScript direkte i HTML-fila mellom <script>-taggar:

<script>
  console.log("Hei fra JavaScript!");
</script>

Denne metoden er grei for korte testar og eksperiment, men for større prosjekt bør du alltid bruke eksterne filer. Det held HTML-en rein og gjer JavaScript-koden lettare å vedlikehalde og gjenbruke.

Konsollen til nettlesaren er det viktigaste verktøyet du har når du lærer og utviklar JavaScript. Du opnar han ved å trykkje F12 (eller Ctrl+Shift+J på Windows, Cmd+Option+J på Mac) og velje fana «Console».

I konsollen kan du:
- Skrive JavaScript-kode direkte og sjå resultatet med ein gong
- Sjå feilmeldingar når noko går gale i koden din
- Bruke console.log() for å skrive ut verdiar og feilsøkje

Lat oss prøve den mest grunnleggjande JavaScript-kommandoen:

console.log("Hei, verden!");

Når denne koden køyrer, blir teksten «Hei, verden!» vist i konsollen. console.log() er som ein utskriftskommando – han viser verdiar i konsollen slik at du kan sjekke kva som skjer i programmet ditt.

Du kan skrive ut tal, tekst, utrekningar og variablar:

console.log(42);                    // Skriver ut tallet 42
console.log("Hei på deg!");         // Skriver ut en tekststreng
console.log(10 + 5);               // Skriver ut 15 (beregning)
console.log("Svaret er:", 6 * 7);  // Skriver ut "Svaret er: 42"

✏️Eksperimentere i konsollen

Opne konsollen til nettlesaren (F12 → Console) og prøv å skrive inn desse uttrykka eitt om gongen:

2 + 3           // 5
"Hei" + " " + "verden"  // "Hei verden"
10 > 5          // true
Math.random()   // Et tilfeldig tall mellom 0 og 1
Date()          // Dagens dato og klokkeslett

Konsollen evaluerer kvart uttrykk og viser resultatet med ein gong. Dette gjer han perfekt for å teste små kodebitar og lære korleis JavaScript fungerer. Legg merke til at tekst blir kombinert med +-operatoren (kallast strengkonkatenering), og at samanlikningar returnerer true eller false.

Variablar er namngjevne lagringsstader der du kan lagre verdiar som programmet brukar. Tenk på ein variabel som ei eske med ein namnelapp – du kan leggje noko i eska, lese kva som er i henne, og eventuelt byte ut innhaldet.

I moderne JavaScript brukar vi to nøkkelord for å opprette variablar:

let – for verdiar som kan endrast

let alder = 17;
console.log(alder);  // 17

alder = 18;           // Verdien kan endres
console.log(alder);  // 18

const – for verdiar som ikkje skal endrast

const PI = 3.14159;
console.log(PI);  // 3.14159

PI = 3;  // FEIL! const kan ikke endres etter opprettelse

Tommelfingerregel: Bruk const som standard. Bruk let berre når du veit at verdien skal endrast seinare. Unngå det gamle nøkkelordet var, som har uføreseieleg åtferd på grunn av hoisting og funksjonsbasert scope.

Namnereglar for variablar

- Namnet kan innehalde bokstavar, tal, understrek (_) og dollarteikn ($)
- Namnet kan ikkje starte med eit tal
- Namnet er case-sensitive (alder og Alder er to forskjellige variablar)
- Bruk camelCase for variabelnamn: minAlder, forsteNavn, antallElever
- Vel skildrande namn som fortel kva variabelen inneheld

Variabel

Ein variabel er ein namngjeven lagringsstad i minnet til datamaskina som inneheld ein verdi. I JavaScript blir variablar oppretta med let (verdien kan endrast), const (verdien kan ikkje endrast) eller var (eldre syntaks, blir fråråda). Variabelnamnet fungerer som ein referanse til verdien, slik at du kan bruke og manipulere han i programmet. Variablar er fundamentale i all programmering og gjer det mogleg å lagre input frå brukaren, mellomresultat og tilstand.

Program må ofte ta val basert på vilkår. I JavaScript brukar vi if, else if og else for å styre flyten:

const alder = 17;

if (alder >= 18) {
  console.log("Du er myndig.");
} else if (alder >= 16) {
  console.log("Du kan ta mopedlappen.");
} else {
  console.log("Du er under 16 år.");
}
// Skriver ut: "Du kan ta mopedlappen."

Vilkåret inne i parentesane blir evaluert til true eller false. Koden inne i {} blir berre køyrd viss vilkåret er sant. Du kan bruke samanlikningsoperatorar som:

- === – er lik (streng samanlikning)
- !== – er ikkje lik
- > – større enn
- < – mindre enn
- >= – større enn eller lik
- <= – mindre enn eller lik

Du kan òg kombinere vilkår med logiske operatorar:

- && – og (begge må vere sanne)
- || – eller (minst éin må vere sann)
- ! – ikkje (snur verdien)

const alder = 17;
const harForeldretillatelse = true;

if (alder >= 18 || harForeldretillatelse) {
  console.log("Du kan delta på arrangementet.");
}

Løkker lèt deg gjenta kode fleire gonger utan å skrive henne om og om igjen. JavaScript har fleire typar løkker:

for-løkke

Den klassiske for-løkka er nyttig når du veit kor mange gonger koden skal køyrast:

for (let i = 1; i <= 5; i++) {
  console.log("Runde " + i);
}
// Skriver ut: Runde 1, Runde 2, ... Runde 5

Løkka har tre delar: initialisering (let i = 1), vilkår (i <= 5), og oppdatering (i++).

while-løkke

while-løkka gjentar koden så lenge eit vilkår er sant:

let tall = 1;

while (tall <= 10) {
  console.log(tall);
  tall = tall + 1;
}

for...of-løkke

for...of er perfekt for å gå gjennom element i ei liste (array):

const frukter = ["eple", "banan", "appelsin"];

for (const frukt of frukter) {
  console.log(frukt);
}
// Skriver ut: eple, banan, appelsin

Pass på å unngå uendelege løkker der vilkåret aldri blir usant – det vil fryse nettlesaren!

Ein funksjon er ein namngjeven kodeblokk som utfører ei bestemt oppgåve. Funksjonar er essensielle for å organisere kode, unngå gjentaking og gjere programmet lettare å forstå.

Definere og kalle ein funksjon

function hilsen(navn) {
  return "Hei, " + navn + "!";
}

console.log(hilsen("Sara"));   // "Hei, Sara!"
console.log(hilsen("Erik"));   // "Hei, Erik!"

Funksjonen hilsen tek inn ein parameter (navn) og returnerer ein verdi med return. Når vi kallar funksjonen med eit argument (t.d. "Sara"), blir parameteren sett til den verdien.

Pilfunksjonar (arrow functions)

Moderne JavaScript tilbyr ein kortare syntaks kalla pilfunksjonar:

const hilsen = (navn) => {
  return "Hei, " + navn + "!";
};

// Enda kortere for enkle funksjoner:
const doble = (tall) => tall * 2;

console.log(doble(5));   // 10

Funksjonar med fleire parametrar

function beregnAreal(bredde, hoyde) {
  const areal = bredde * hoyde;
  return areal;
}

console.log(beregnAreal(5, 3));   // 15
console.log(beregnAreal(10, 7));  // 70

Funksjonar er grunnleggjande byggjeklossar i JavaScript. Seinare skal vi sjå korleis vi brukar funksjonar til å handtere hendingar, manipulere DOM-en og kommunisere med servarar.

✏️Eit komplett eksempelprogram

Her er eit komplett program som kombinerer variablar, vilkår og funksjonar:

// Program: Karakterkalkulator

function beregnKarakter(poeng) {
  if (poeng >= 90) {
    return 6;
  } else if (poeng >= 75) {
    return 5;
  } else if (poeng >= 55) {
    return 4;
  } else if (poeng >= 40) {
    return 3;
  } else if (poeng >= 20) {
    return 2;
  } else {
    return 1;
  }
}

function visResultat(navn, poeng) {
  const karakter = beregnKarakter(poeng);
  console.log(navn + " fikk " + poeng + " poeng, karakter: " + karakter);
}

visResultat("Anna", 82);    // Anna fikk 82 poeng, karakter: 5
visResultat("Ole", 45);     // Ole fikk 45 poeng, karakter: 3
visResultat("Kari", 95);    // Kari fikk 95 poeng, karakter: 6

Dette programmet viser korleis du kan dele opp logikk i separate funksjonar. beregnKarakter tek seg av sjølve utrekninga, medan visResultat formaterer og viser utskrifta. Denne arbeidsdelinga gjer koden lettare å lese, teste og vedlikehalde.

Når koden din ikkje fungerer som forventa, er console.log() det beste verktøyet ditt. Plasser utskrifter på strategiske stader for å sjå kva variablane inneheld:

function beregnPris(antall, enhetspris) {
  console.log("antall:", antall);          // Sjekk input
  console.log("enhetspris:", enhetspris);  // Sjekk input

  const total = antall * enhetspris;
  console.log("total:", total);            // Sjekk beregning

  const mva = total * 0.25;
  const totalMedMva = total + mva;
  console.log("totalMedMva:", totalMedMva); // Sjekk resultat

  return totalMedMva;
}

Når du har funne og fiksa feilen, kan du fjerne eller kommentere ut console.log()-linjene. I profesjonell utvikling blir òg debuggeren til nettlesaren med breakpoints brukt for meir avansert feilsøking.

Vanlege nybyrjarfeil

Pass opp for desse vanlege feila:

- Gløyme semikolon eller parentesar: JavaScript er meir tilgjevande enn mange språk, men manglande ) eller } gir feilmeldingar som kan vere forvirrande.
- Bruke = i staden for ===: = er tilordning (set ein verdi), medan === er samanlikning (sjekkar om to verdiar er like).
- Skrivefeil i variabelnamn: JavaScript skil mellom store og små bokstavar. minVariabel og MinVariabel er to forskjellige variablar.
- Bruke var i staden for let/const: var har uventa åtferd med hoisting. Bruk alltid let eller const.

📝Oppgave 5.1.1

Kva blir JavaScript primært brukt til i webutvikling?

📝Oppgave 5.1.2

Kva er skilnaden mellom let og const i JavaScript?

📝Oppgave 5.1.3

Kva blir skrive ut i konsollen av denne koden?

let x = 10;
if (x > 5 && x < 15) {
  console.log("A");
} else {
  console.log("B");
}

📝Oppgave 5.1.4

Kva blir skrive ut av denne for-løkka?

for (let i = 0; i < 3; i++) {
  console.log(i);
}

📝Oppgave 5.1.5

Skriv ein JavaScript-funksjon erPartall(tall) som tek inn eit tal og returnerer true viss talet er eit partal og false viss det er eit oddetal. Bruk modulo-operatoren (%). Test funksjonen med tala 4, 7 og 0.

📝Oppgave 5.1.6

Skriv eit JavaScript-program som brukar ei løkke til å skrive ut alle tala frå 1 til 20 som er delelege med 3. Bruk console.log() for utskrifta. Programmet skal skrive ut: 3, 6, 9, 12, 15, 18.

📝Oppgave 5.1.7

Kva returnerer denne funksjonen når vi kallar mystery(5)?

function mystery(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum = sum + i;
  }
  return sum;
}

📝Oppgave 5.1.8

Lag ein funksjon fizzBuzz(n) som går gjennom tala frå 1 til n og skriv ut:
- "Fizz" viss talet er deleleg med 3
- "Buzz" viss talet er deleleg med 5
- "FizzBuzz" viss talet er deleleg med både 3 og 5
- Sjølve talet elles

Test med fizzBuzz(15).

Oppsummering

I dette kapittelet har du lært:

- JavaScript: språket som gjer nettsider interaktive.
- Innebygging: ekstern fil (anbefalt) eller inline.
- let og const: variablar som kan eller ikkje kan endrast.
- Løkker: for, while og for...of.
- Funksjonar: vanlege funksjonar og pilfunksjonar.

Nøkkelomgrep

Omgrep	Forklaring
JavaScript	Språk for interaktive nettsider
let	Variabel som kan endrast
const	Variabel som ikkje skal endrast
Pilfunksjon	Kortfatta funksjonssyntaks (=>)

Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.