5.1 Introduksjon til JavaScript

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.

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


`

Legg merke til at
``

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:

``javascript
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:

`javascript
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"
``

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

let – for verdier som kan endres

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

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

const – for verdier som ikke skal endres

`javascript
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

Programmer må ofte ta valg basert på betingelser. I JavaScript bruker vi if, else if og else for å styre flyten:

``javascript
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)

`javascript
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:

``javascript
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:

`javascript
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):

`javascript
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

``javascript
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:

`javascript
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

`javascript
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.