Setup

Lag en ny mappe på et fornuftig sted og gi den navnet javascript-kurs. Åpne mappen i VS Code ved å klikke på File → Open Folder. Dette er mappen hvor du skal lagre all kode du skriver i løpet av kurset.

Siste økten i kurset skal du forklare to av oppgavene du er mest fornøyd med at du har kodet muntlig til læreren din.

Hva er JavaScript og hvordan fungerer det med HTML og CSS?

HTML og CSS er markeringsspråk som brukes for å strukturere og style nettsider. JavaScript går forbi det, og gir oss mulighet til å utnytte brukerinput, animere elementer og til og med bygge store web-apper.

Her er et eksempel på samarbeidet mellom HTML, CSS og JavaScript. Denne kan du copy-paste direkte inn inn i en ny index.html-fil.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

HTML definerer innholdet: tagene <h1></h1> og <button></button>. CSS styler h1 grønn.

Bruk Go Live for å åpne HTML-filen i nettleseren din. Javascript brukes for å lage en alert-melding som dukker opp når knappen trykkes.

Skrive JavaScript-kode i en fil

1) Lag en fil som heter index.html (eller bruk den du lagde over). Legg inn følgende i filen:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Mitt første JS-program</title>
  </head>
  <body>
    <script>
      console.log("Hello World!");
    </script>
  </body>
</html>

Bruk Go Live for å åpne HTML-filen i nettleseren din. To-finger-klikk på siden, velg Inspect og deretter Developer Tools. I Developer Tools velger du Console-taben (i Chrome kan du bruke snarveien cmd + option + i). I konsollen ser du nå denne meldingen:

Hello World!

Som du ser, kan man skrive JavaScript-kode inne i en <script>...</script>-tag direkte i HTML-filen. Men det ryddigste er å lage en egen JavaScript-fil og lenke til den i HTML-filen.

Lag enn ny fil som heter main.js og skriv inn koden nedenfor. Her ser du også at med // kan man skrive kommentarer i koden, altså kode som ikke blir kjørt.

// Mitt første program
console.log("Hello World!");

For å tilknytte HTML-filen din til en JavaScript-fil, må du skrive inn <script src=main.js></script> i HTML-filen. Denne lenken skal legges nederst i <body>...</body>-tagen, slik at all struktur og styling blir lastet inn før de interaktive funksjonene til JavaScript.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <script src="main.js"></script>
</body>
</html>

Nå har du det du trenger for å skrive og kjøre JavaScript-kode. Se bildet nedenfor som inkluderer oppsettet av VSCode og konsollen med JavaScript-output.

Oppsett av Visual Studio Code med JavaScript-kode.

Da er alt klart for å skrive JavaScript-kode som kjøres i nettleseren! Nedenfor er det skrevet en guide om hvordan kjøre kode gjennom noe som heter Node.js. Det er valgfritt å lære hvordan man bruker. Dersom du vil gå rett på å lære javascript, trykk på denne lenken Variabler – del 1.

2. JavaScript med Node.js (ikke nødvendig, men trykk her for de som er interessert)

▼ Vis mer

Neste del →