Webbteknik 2

Laboration 1A

Köra javascript i en webbsida

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny mapp på din dator där du kan spara alla filer för laborationerna i den här kursen. I den mappen skapar du en undermapp som du kan kalla lab-1a där du sparar alla filer för just den här laborationen.

1 - Skapa en enkel HTML-sida

Skapa en fil index.html med innehållet:

<!DOCTYPE html>
<html>
  <head>
    <title>Min första JS-labb</title>
  </head>
  <body>
    <h1 id="rubrik">Hej världen!</h1>
    <p>Detta är min första webbsida med JavaScript.</p>
  </body>
</html>

Öppna sidan i med Live Server och kontrollera att den fungerar.

2 - Lägg till ett <script> direkt i HTML

Lägg till följande kod högst upp i <head>:

<script>
  const rubrik = document.getElementById("rubrik");
  rubrik.textContent = "Hej från JavaScript!";
</script>

Ladda om sidan, vad händer?

Tips: Öppna webbläsarens utvecklarkonsol (F12 → fliken Console. Vi kommer utforska konsolen och felsökning mer i kommande labbar).
Du bör se ett felmeddelande eftersom elementet inte finns ännu. OBS! Läs verkligen felmeddelandet och försök förstå det!

3 - Flytta scriptet

Flytta samma <script> till slutet av <body>:

<body>
  <h1 id="rubrik">Hej världen!</h1>
  <p>Detta är min första webbsida med JavaScript.</p>

  <script>
    const rubrik = document.getElementById("rubrik");
    rubrik.textContent = "Hej från JavaScript!";
  </script>
</body>

Ladda om sidan, vad händer nu?

Reflektera: Varför fungerar det nu men inte tidigare?

4 - Flytta tillbaka och använd load-eventet

Flytta tillbaka <script> till <head> men ändra koden så här:

<script>
  window.addEventListener("load", function() {
    const rubrik = document.getElementById("rubrik");
    rubrik.textContent = "Hej från JavaScript efter load!";
  });
</script>

Ladda om. Nu fungerar det igen, men varför?

Förklaring: Händelsen load inträffar när hela dokumentet är färdigladdad. På detta sättet kan vi fördröja exekveringen av koden tills vi vet att allt innehåll är laddad.

5 - Länka in ett externt script

Skapa en ny fil script.js med innehållet:

const rubrik = document.getElementById("rubrik");
rubrik.textContent = "Hej från extern JavaScript-fil!";

Länka in den i din HTML-fil genom att ersätta din befintliga <script>-tagg med:

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

Ladda om, vad händer?

Reflektion: Fungerar det? Varför eller varför inte?

6 - Ladda script som “modul”

Nu kommer vi äntligen till det moderna, rekomenderade sättet att ladda in javascript.
När du laddar in extern javascript med attributet type="module" körs koden efter att HTML:en laddats in.

Ändra din HTML så här:

<script type="module" src="script.js"></script>

Fungerar det? utan load-eventet? Ja! Eftersom moduler väntar på att DOM:en ska laddas innan de körs.

Tips: type="module" är också ett krav för många andra moderna javascript features. Vi kommer att titta mer på vad “module” betyder senare i kursen. Tillvidare är det bra att alltid ha javascript i en separat fil och använda type="module" när du laddar in den i dina projekt.

Kontrollfrågor

  1. Vad händer om du försöker göra något med ett element innan det finns i DOM:en?
  2. Vad är skillnaden mellan att lägga scriptet i <head> och att använda load-eventet?
  3. Hur länkar man in en extern javascript-fil i en HTML-sida?
  4. Vad är fördelen med att ladda script som type="module"?