Koble JavaScript til HTML

For at JavaScript skal fungere på nettsiden din, må du koble det til HTML-dokumentet. Dette gjøres med <script>-taggen.

Ekstern fil (anbefalt)

Den beste måten er å ha JavaScript i en egen fil:

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Min side</title>
</head>
<body>
    <h1>Hei!</h1>
    <p>Min nettside.</p>

    <script src="script.js"></script>
</body>
</html>

// script.js
console.log("JavaScript er koblet til!");

Hvorfor en egen fil?

Det er mulig å skrive JavaScript direkte i HTML-filen, men det er lurt å ha det i en egen fil:

• Oversikt - Enklere å finne og redigere koden når HTML og JavaScript er separert
• Gjenbruk - Samme JavaScript-fil kan brukes på flere HTML-sider
• Vedlikehold - Når prosjektet vokser, er det mye enklere å holde orden

Inline JavaScript (unngå dette)

Du kan skrive JavaScript direkte i HTML:

<script>
    console.log("Dette fungerer, men er dårlig praksis");
</script>

Dette gjør ofte koden vanskeligere å lese da du blander HTML og JavaScript, spesielt på større prosjekter er dette problematisk.

Plasseringen av script-taggen

Hvorfor? Nettleseren leser HTML-koden fra topp til bunn. Hvis <script>-taggen er i <head>, vil JavaScript kjøre før HTML-elementene er lastet:

<body>
    <h1 id="title">Hei</h1>

    <script src="script.js"></script> <!-- Kjører ETTER alt HTML er lastet -->
</body>

// script.js - dette fungerer fordi <h1> allerede finnes
let title = document.getElementById("title");
title.textContent = "Ny tittel";  // Fungerer!

<head>
    <script src="script.js"></script> <!-- Kjører FØR body finnes -->
</head>
<body>
    <h1 id="title">Hei</h1>
</body>

// script.js - dette FEILER fordi <h1> ikke finnes ennå!
let title = document.getElementById("title");
title.textContent = "Ny tittel";  // Error: Cannot read properties of null

Grunnen er at JavaScript bruker noe som heter DOM (Document Object Model) for å finne og endre HTML-elementer. Hvis HTML-elementene ikke er lastet ennå, kan ikke JavaScript finne dem. Se DOM-referansen for en komplett oversikt.

Mal

Her er en komplett mal du kan bruke:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <title>Min side</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Min nettside</h1>
    <p>Innhold her...</p>

    <script src="script.js"></script>
</body>
</html>