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 dem med CSS. Men nettsidene vi har laget har vært statiske – innholdet endrer seg ikke etter at siden er lastet. For å gjøre nettsider interaktive trenger vi et programmeringsspråk som kan reagere på brukerens handlinger, endre innhold dynamisk og kommunisere med servere. Det språket er JavaScript.

JavaScript er det eneste programmeringsspråket som kjører direkte i nettleseren. Alle moderne nettlesere har en innebygd JavaScript-motor som tolker og kjører koden. Chrome bruker V8-motoren, Firefox bruker SpiderMonkey, og Safari bruker JavaScriptCore. Når du besøker en nettside som inneholder JavaScript, laster nettleseren ned koden og kjører den lokalt på din maskin.

I dette kapittelet skal vi ta de første stegene med JavaScript. Vi lærer hvordan vi kobler JavaScript til HTML-sider, skriver ut data til konsollen, bruker variabler, og lager enkle programmer med betingelser og løkker.

JavaScript

JavaScript er et høynivå, dynamisk typet programmeringsspråk som primært brukes til å gjøre nettsider interaktive. Det ble skapt av Brendan Eich i 1995 og har utviklet seg til å bli verdens mest brukte programmeringsspråk. JavaScript kan manipulere HTML-elementer, reagere på hendelser som klikk og tastettrykk, validere skjemadata, lage animasjoner, kommunisere med servere asynkront, og mye mer. Til tross for navnelikheten har JavaScript ingenting med programmeringsspråket Java å gjøre.

Det finnes to hovedmåter å legge til JavaScript i en HTML-side:

Ekstern JavaScript-fil (anbefalt)

Den beste praksisen er å skrive JavaScript i en separat fil med filendelsen .js og koble den til HTML-dokumentet med en <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 sikrer at hele HTML-dokumentet er ferdig lastet før JavaScript-koden kjører, slik at koden kan finne og manipulere alle elementer på siden.

Inline JavaScript

Du kan også skrive JavaScript direkte i HTML-filen mellom <script>-tagger:

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

Denne metoden er grei for korte tester og eksperimenter, men for større prosjekter bør du alltid bruke eksterne filer. Det holder HTML-en ren og gjør JavaScript-koden lettere å vedlikeholde og gjenbruke.

Nettleserens konsoll er det viktigste verktøyet du har når du lærer og utvikler JavaScript. Du åpner den ved å trykke F12 (eller Ctrl+Shift+J på Windows, Cmd+Option+J på Mac) og velge fanen «Console».

I konsollen kan du:
- Skrive JavaScript-kode direkte og se resultatet umiddelbart
- Se feilmeldinger når noe går galt i koden din
- Bruke console.log() for å skrive ut verdier og feilsøke

La oss prøve den mest grunnleggende JavaScript-kommandoen:

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

Når denne koden kjører, vises teksten «Hei, verden!» i konsollen. console.log() er som en utskriftskommando – den viser verdier i konsollen slik at du kan sjekke hva som skjer i programmet ditt.

Du kan skrive ut tall, tekst, beregninger og variabler:

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

Åpne nettleserens konsoll (F12 → Console) og prøv å skrive inn disse uttrykkene ett om gangen:

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 hvert uttrykk og viser resultatet umiddelbart. Dette gjør den perfekt for å teste små kodebiter og lære hvordan JavaScript fungerer. Legg merke til at tekst kombineres med +-operatoren (kalles strengkonkatenering), og at sammenligninger returnerer true eller false.

Variabler er navngitte lagringssteder der du kan lagre verdier som programmet bruker. Tenk på en variabel som en eske med et navnelapp – du kan legge noe i esken, lese hva som er i den, og eventuelt bytte ut innholdet.

I moderne JavaScript bruker vi to nøkkelord for å opprette variabler:

let – for verdier som kan endres

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

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

const – for verdier som ikke skal endres

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 bare når du vet at verdien skal endres senere. Unngå det gamle nøkkelordet var, som har uforutsigbar oppførsel på grunn av hoisting og funksjonsbasert scope.

Navneregler for variabler

- Navnet kan inneholde bokstaver, tall, understrek (_) og dollartegn ($)
- Navnet kan ikke starte med et tall
- Navnet er case-sensitive (alder og Alder er to forskjellige variabler)
- Bruk camelCase for variabelnavn: minAlder, forsteNavn, antallElever
- Velg beskrivende navn som forteller hva variabelen inneholder

Variabel

En variabel er et navngitt lagringssted i datamaskinens minne som inneholder en verdi. I JavaScript opprettes variabler med let (verdien kan endres), const (verdien kan ikke endres) eller var (eldre syntaks, frarådes). Variabelnavnet fungerer som en referanse til verdien, slik at du kan bruke og manipulere den i programmet. Variabler er fundamentale i all programmering og gjør det mulig å lagre brukerens input, mellomresultater og tilstand.

Programmer må ofte ta valg basert på betingelser. I JavaScript bruker 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."

Betingelsen inne i parentesene evalueres til true eller false. Koden inne i {} kjøres bare hvis betingelsen er sann. Du kan bruke sammenligningsoperatorer som:

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

Du kan også kombinere betingelser med logiske operatorer:

- && – og (begge må være sanne)
- || – eller (minst én må være sann)
- ! – ikke (snur verdien)

const alder = 17;
const harForeldretillatelse = true;

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

Løkker lar deg gjenta kode flere ganger uten å skrive den om og om igjen. JavaScript har flere typer løkker:

for-løkke

Den klassiske for-løkken er nyttig når du vet hvor mange ganger koden skal kjøres:

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

Løkken har tre deler: initialisering (let i = 1), betingelse (i <= 5), og oppdatering (i++).

while-løkke

while-løkken gjentar koden så lenge en betingelse er sann:

let tall = 1;

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

for...of-løkke

for...of er perfekt for å gå gjennom elementer i en liste (array):

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

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

Pass på å unngå uendelige løkker der betingelsen aldri blir usann – det vil fryse nettleseren!

En funksjon er en navngitt kodeblokk som utfører en bestemt oppgave. Funksjoner er essensielle for å organisere kode, unngå gjentakelse og gjøre programmet lettere å forstå.

Definere og kalle en funksjon

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

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

Funksjonen hilsen tar inn en parameter (navn) og returnerer en verdi med return. Når vi kaller funksjonen med et argument (f.eks. "Sara"), settes parameteren til den verdien.

Pilfunksjoner (arrow functions)

Moderne JavaScript tilbyr en kortere syntaks kalt pilfunksjoner:

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

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

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

Funksjoner med flere parametere

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

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

Funksjoner er grunnleggende byggeklosser i JavaScript. Senere skal vi se hvordan vi bruker funksjoner til å håndtere hendelser, manipulere DOM-en og kommunisere med servere.

✏️Et komplett eksempelprogram

Her er et komplett program som kombinerer variabler, betingelser og funksjoner:

// 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 hvordan du kan dele opp logikk i separate funksjoner. beregnKarakter tar seg av selve utregningen, mens visResultat formaterer og viser utskriften. Denne arbeidsdelingen gjør koden lettere å lese, teste og vedlikeholde.

Når koden din ikke fungerer som forventet, er console.log() ditt beste verktøy. Plasser utskrifter på strategiske steder for å se hva variablene inneholder:

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 funnet og fikset feilen, kan du fjerne eller kommentere ut console.log()-linjene. I profesjonell utvikling brukes også nettleserens debugger med breakpoints for mer avansert feilsøking.

Vanlige nybegynnerfeil

Pass opp for disse vanlige feilene:

- Glemme semikolon eller parenteser: JavaScript er mer tilgivende enn mange språk, men manglende ) eller } gir feilmeldinger som kan være forvirrende.
- Bruke = i stedet for ===: = er tilordning (setter en verdi), mens === er sammenligning (sjekker om to verdier er like).
- Skrivefeil i variabelnavn: JavaScript skiller mellom store og små bokstaver. minVariabel og MinVariabel er to forskjellige variabler.
- Bruke var i stedet for let/const: var har uventet oppførsel med hoisting. Bruk alltid let eller const.

📝Oppgave 5.1.1

Hva er JavaScript primært brukt til i webutvikling?

📝Oppgave 5.1.2

Hva er forskjellen mellom let og const i JavaScript?

📝Oppgave 5.1.3

Hva skrives 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

Hva skrives ut av denne for-løkken?

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

📝Oppgave 5.1.5

Skriv en JavaScript-funksjon erPartall(tall) som tar inn et tall og returnerer true hvis tallet er et partall og false hvis det er oddetall. Bruk modulo-operatoren (%). Test funksjonen med tallene 4, 7 og 0.

📝Oppgave 5.1.6

Skriv et JavaScript-program som bruker en løkke til å skrive ut alle tallene fra 1 til 20 som er delelige med 3. Bruk console.log() for utskriften. Programmet skal skrive ut: 3, 6, 9, 12, 15, 18.

📝Oppgave 5.1.7

Hva returnerer denne funksjonen når vi kaller 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 en funksjon fizzBuzz(n) som går gjennom tallene fra 1 til n og skriver ut:
- "Fizz" hvis tallet er delelig med 3
- "Buzz" hvis tallet er delelig med 5
- "FizzBuzz" hvis tallet er delelig med både 3 og 5
- Selve tallet ellers

Test med fizzBuzz(15).

Oppsummering

I dette kapittelet har du lært:

- JavaScript: språket som gjør nettsider interaktive.
- Innebygging: ekstern fil (anbefalt) eller inline.
- let og const: variabler som kan eller ikke kan endres.
- Loekker: for, while og for...of.
- Funksjoner: vanlige funksjoner og pilfunksjoner.

Noekkelbegreper

Begrep	Forklaring
JavaScript	Språk for interaktive nettsider
let	Variabel som kan endres
const	Variabel som ikke skal endres
Pilfunksjon	Kortfattet 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.