5.1 Introduksjon til JavaScript

Når sidene begynner å reagere

Så langt har vi strukturert med HTML og stylet med CSS, men sidene har vært statiske – innholdet endrer seg ikke etter at de er lastet. For å gjøre dem interaktive, slik at de reagerer på brukerens handlinger og endrer innhold dynamisk, trenger vi et programmeringsspråk: JavaScript.

JavaScript er det eneste språket som kjører direkte i nettleseren. Alle moderne nettlesere har en innebygd JavaScript-motor – Chrome bruker V8, Firefox SpiderMonkey, Safari JavaScriptCore. Språket ble skapt av Brendan Eich i 1995 og er i dag verdens mest brukte. (Et morsomt poeng: til tross for navnet har JavaScript ingenting med Java å gjøre.)

Du kobler JavaScript til en side på to måter. Den anbefalte er en ekstern fil med endelsen .js, koblet til med <script src="skript.js"></script> plassert like før </body>. Plasseringen er viktig: da er hele HTML-dokumentet ferdig lastet før koden kjører, slik at den finner alle elementene. Den andre måten er inline JavaScript direkte mellom <script>-tagger – greit for raske tester, men eksterne filer er best for større prosjekter.

Ditt viktigste verktøy er nettleserens konsoll, som du åpner med F12. Der kan du skrive kode og se resultatet umiddelbart, og lese feilmeldinger. Den mest grunnleggende kommandoen er console.log(), som skriver ut verdier:

console.log("Hei, verden!");
console.log("Svaret er:", 6 * 7);  // Svaret er: 42

Variabler, valg og logikk

Variabler er navngitte lagringssteder for verdier. I moderne JavaScript bruker du to nøkkelord. let er for verdier som kan endres, mens const er for verdier som ikke skal endres – prøver du å endre en const, får du en feil. Tommelfingerregelen er: bruk const som standard, og let bare når du vet verdien skal endres. Unngå det gamle var, som har uforutsigbar oppførsel. Navn skrives i camelCase, som minAlder og antallElever, og er case-sensitive.

For å ta valg bruker JavaScript if, else if og else, med betingelsen i parentes og koden i krøllparenteser:

if (alder >= 18) {
  console.log("Du er myndig.");
} else if (alder >= 16) {
  console.log("Du kan ta mopedlappen.");
}

Legg merke til sammenligningsoperatoren === (er lik, streng sammenligning) og !== (er ikke lik) – i JavaScript bruker vi alltid tre tegn for å unngå snublefeller. Logiske operatorer ser litt annerledes ut enn i Python: && er «og», || er «eller», og ! er «ikke». For eksempel: er alder >= 18 || harForeldretillatelse, så slipper du inn hvis minst én av betingelsene er sann.

Løkker og funksjoner

Løkker gjentar kode. Den klassiske for-løkken har tre deler i parentesen: initialisering, betingelse og oppdatering, som for (let i = 0; i < 3; i++), som skriver ut 0, 1, 2. En while-løkke gjentar så lenge betingelsen er sann. Og for...of går elegant gjennom elementene i en liste (array): for (const frukt of frukter). Pass på å ikke lage uendelige løkker – de fryser nettleseren.

En funksjon er en navngitt kodeblokk som utfører en oppgave. Du definerer den med function, gir den parametere, og returnerer en verdi med return:

function hilsen(navn) {
  return "Hei, " + navn + "!";
}
console.log(hilsen("Sara"));  // Hei, Sara!

Moderne JavaScript har også en kortere syntaks kalt pilfunksjoner (arrow functions). const doble = (tall) => tall * 2; gjør akkurat det samme som en vanlig funksjon, men mer kompakt – for enkle funksjoner kan du droppe både return og krøllparentesene. En funksjon som summerer tallene fra 1 til n, returnerer 15 når du kaller den med 5 (1+2+3+4+5). Funksjoner er grunnsteinene du senere skal bygge hendelseshåndtering og DOM-manipulering på.

Oppsummering

JavaScript er språket som gjør statiske nettsider levende. Det kjører i nettleseren, kobles best til med en ekstern .js-fil plassert nederst i body, og feilsøkes med konsollen og console.log().

Du lagrer data i variabler med let (kan endres) og const (kan ikke endres), tar valg med if/else if/else og operatorer som ===, && og ||, og gjentar kode med for, while og for...of. Funksjoner – både vanlige med function og kompakte pilfunksjoner med => – organiserer koden i gjenbrukbare biter. Med dette grunnlaget er du klar til å manipulere selve nettsiden i de neste kapitlene.