Hva er JavaScript og hva brukes det til?

01Hva er JavaScript?

Det mest praktiske svaret på hva JavaScript er: språket bak alt på en nettside som reagerer når du klikker, skriver eller ruller. Menyer som åpner seg, «legg i handlekurv»-knappen, søkeforslag mens du skriver og zoom på et kart fungerer alle med JavaScript.

Språket oppstod for nettlesere midt på 1990-tallet og er definert i en standard som heter ECMAScript. Til tross for navnelikheten har det ingen direkte tilknytning til Java; syntaksen og måten de fungerer på er ganske forskjellige.

I dag er JavaScript ikke begrenset til nettleseren. Det kan kjøres på servere, i mobilapper, i skrivebordsprogrammer og til og med på små enheter. Denne utbredelsen gjør det til et av de mest produktive språkene for dem som begynner med programmering.

JavaScript er et tolket språk med dynamisk typing: du trenger ikke et eget kompileringssteg før koden kjøres, og variablenes type bestemmes mens koden kjører. Det gjør det enkelt å prøve seg frem raskt, men i store prosjekter kan det føre til at typefeil oppdages sent.

02Hvordan samarbeider HTML, CSS og JavaScript?

Tenk på en nettside som et hus. HTML er vegger og rom, CSS er maling og møbler, og JavaScript er det elektriske anlegget: det slår på lyset, åpner døren og setter i gang alarmen.

De tre kan ikke erstatte hverandre. Innholdet skal ligge i HTML og utseendet i CSS, mens JavaScript bare skal brukes til oppførsel. Dette skillet gjør vedlikeholdet enklere og sørger for at innholdet vises selv om JavaScript ikke lastes.

Når siden åpnes i nettleseren, blir HTML til en trestruktur som kalles DOM. JavaScript får tilgang til dette treet; det finner et element, endrer teksten, legger til nye elementer eller lytter etter en hendelse.

<p id="mesaj">Merhaba!</p>
<button id="dugme">Endre</button>

<script>
  const mesaj = document.getElementById("mesaj");
  document.getElementById("dugme").addEventListener("click", () => {
    mesaj.textContent = "JavaScript kjørte.";
  });
</script>

03Hva brukes JavaScript til?

Svaret på hva JavaScript brukes til utvides etter miljøet det brukes i. I nettleseren bygger det brukeropplevelsen, på serveren forretningslogikken, og på mobil og skrivebord selve applikasjonen.

JavaScript i nettleseren

JavaScript i nettleseren brukes mest til: skjemavalidering, nedtrekksmenyer og faner, bildegallerier, datahenting uten sidelasting, kart og grafer, og handlekurv og betalingssteg. I et godt utformet grensesnitt leder disse funksjonene brukeren uten å slite på brukeren; planleggingen av dette hører inn under UI/UX-design.

JavaScript på serveren

Node.js er et miljø som kjører JavaScript utenfor nettleseren. Med det skriver man API-er, sanntidstjenester for meldinger, skript for filbehandling og kommandolinjeverktøy. At det samme språket brukes både i frontend og backend gjør arbeidet enklere for små team.

Mobil og skrivebord

Med verktøy som React Native kan du utvikle mobilapper, og med verktøy som Electron skrivebordsprogrammer, alt i JavaScript. Noen av kodeeditorene og meldingsappene du bruker daglig, er laget på denne måten.

04Grunnleggende begreper og eksempler

Den som begynner å lære JavaScript, bør først få på plass disse byggesteinene. Du kan prøve følgende JavaScript-eksempler direkte i nettleserens utviklerkonsoll (F12).

• Variabler: verdier lagres med let og const; bruk const for verdier som ikke skal endres.
• Datatyper: tekst (string), tall (number), boolsk verdi (boolean), liste (array), objekt (object).
• Funksjoner: samler en gjentakende oppgave under ett navn; pilfunksjoner gir kortere skrivemåte.
• Array-metoder: med map, filter, find og reduce behandles lister på en lesbar måte.
• Hendelser: du reagerer på brukerhandlinger som click, input og submit.
• Asynkron kode: med fetch, Promise og async/await fryser ikke siden mens den venter på data.

const urunler = [
  { ad: "Olivenolje", fiyat: 320 },
  { ad: "Sabun", fiyat: 90 },
  { ad: "Bal", fiyat: 410 }
];

const pahalilar = urunler.filter(u => u.fiyat > 300).map(u => u.ad);
console.log(pahalilar); // ["Olivenolje", "Honning"]

async function kullaniciGetir() {
  const yanit = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const veri = await yanit.json();
  console.log(veri.name);
}
kullaniciGetir();

05JavaScript og ytelse på nettsiden

JavaScript er kraftig, men ikke gratis. Nettleseren må laste ned, analysere og kjøre hvert skript. For mye eller unødvendig JavaScript gjør at siden reagerer sent, særlig på mellomklassetelefoner.

Googles interaksjonsmål INP måler hvor raskt siden svarer på et klikk, og under 200 ms regnes som bra. Tunge skript, ubrukte biblioteker og mange tredjepartsmerkelapper er de viktigste årsakene til at denne verdien blir dårlig.

De praktiske reglene er enkle: last bare koden som trengs, utsett skript som ikke er kritiske, og bruk ikke flere biblioteker som gjør det samme. Slik måling og forbedring bør gjøres jevnlig som en del av hastighet og ytelse. For en jevn opplevelse på telefon må det ses i sammenheng med mobiltilpasset design.

06Vanlige feil nybegynnere gjør

JavaScript er et fleksibelt språk, og den fleksibiliteten gjør det også lett å gjøre feil i starten. Å kjenne fallgruvene under sparer deg for timevis med feilsøking.

• Å ikke bruke === i stedet for ==: Løs sammenligning konverterer typer av seg selv og gir uventede resultater; streng sammenligning er tryggere.
• Å deklarere variabler med var: Det fører til problemer med virkeområde; i moderne kode brukes let og const.
• Å ikke vente på asynkron kode: Å prøve å bruke data før fetch-resultatet har kommet er den vanligste årsaken til feil med udefinerte verdier.
• Å ignorere feil i konsollen: Nettleserkonsollen forteller ofte tydelig hvilken linje og hvilken årsak feilen har.
• Å stole på brukerinndata: Validering i nettleseren er til for komfort; av hensyn til sikkerheten må den samme kontrollen alltid gjøres på serveren også.
• Å legge til en ny pakke for hver oppgave: Å legge til et bibliotek for noe som kan løses med noen få linjer gjør siden tyngre og gir vedlikeholdsbyrde.

07JavaScript-økosystemet: React, TypeScript, Node.js

Rundt JavaScript finnes et svært bredt økosystem av verktøy. Det er dette som forvirrer nybegynnere mest: hvilket verktøy som gjør hva.

Biblioteker som React deler grensesnittet inn i komponenter og gjør store prosjekter håndterlige; detaljene finner du i artikkelen vår Hva er React. TypeScript legger et typesystem til JavaScript og fanger feil før koden kjører; forskjellene forklarte vi i artikkelen Hva er TypeScript.

npm er en pakkebehandler; den lar deg legge ferdig kode skrevet av andre til i prosjektet. Artikkelen om forskjellen på frontend og backend hjelper deg også å se grensen mellom frontend og backend.

08Veikart for å lære JavaScript

Du trenger ikke et dyrt oppsett for å lære JavaScript; en nettleser og en kodeeditor holder. Det viktige er å ta det i riktig rekkefølge og befeste hvert begrep med et lite prosjekt.

1. Lag en enkel side med HTML og CSS.
2. Prøv variabler, betingelser, løkker og funksjoner i konsollen.
3. Lær å velge og endre elementer på siden med DOM.
4. Fullfør et lite prosjekt, for eksempel en gjøremålsliste eller en kalkulator.
5. Hent data fra et åpent API med fetch og async/await.
6. Bli kjent med moduler, npm og et byggeverktøy, og gå deretter videre til et bibliotek.

Pålitelige kilder

Som oppslagsverk for språket er MDN Web Docs en av de mest pålitelige adressene. Videoer og kurs er nyttige, men den egentlige læringen skjer i dine egne prosjekter, der du gjør feil og retter dem.