Webbteknik 2

Laboration 1B

Intro till konsolen

I den här labben skall vi undersöka i vilken ordning javascript exekveras i relation till HTML-innehållet på sidan under lite mer kontrollerade former. Till vår hjälp kommer vi att använda den såkallade “konsolen” i webbläsarens utvecklarverktyg för att logga meddelanden.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-1b där du sparar filerna för just den här laborationen.

1 - Skapa HTML-sidan

Skapa en fil index.html med innehållet nedan och öppna den sedan med Live Server:

<!DOCTYPE html>
<html>
  <head>
    <title>Logga meddelanden till konsolen</title>
  </head>
  <body>
    <h1 id="rubrik">Konsolen</h1>
    <p>Ta fram konsolen i Verktyg för webbutvecklare.</p>
    <p>Snabbkommando i de flesta webbläsare:</p>
    <ul>
      <li>MacOS: alt cmd I</li>
      <li>Windows: alt ctrl I</li>
    </ul>
    <p>Välj fliken konsol.</p>
  </body>
</html>

2 - Lägg till script direkt i dokumentet

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

<script>
  console.log("Kod i head körs");
</script>

och följade kod sist i body:

<script>
  console.log("Kod i slutet av body körs");
</script>

Öppna sidan i webbläsaren och titta i konsolen.

Reflektion: I vilken ordning skrivs meddelandena ut i konsolen? Varför?

3 - Logga ett element

Lägg till följande rad efter den befintliga i båda script-taggarna:

console.log("Rubrik: ", document.getElementById("rubrik"));

Nu loggar vi två saker på samma rad. Dels texten "Rubrik: " och dels själva elementet med id rubrik. Vi kan logga hur många saker vi vill på samma rad genom att separera dem med kommatecken.

Ladda om sidan, vad händer nu?

Resultat: Nu kan vi tydligt se att när scriptet i <head> körs så finns inte elementet med id rubrik än, det representeras med värdet null i konsolen. När vi däremot når scriptet i slutet av <body> så finns elementet redan och vi får se en representation av det i konsolen.
Slutsats: Webbläsaren kör alltså javascript koden direkt när den hittar den i dokumentet.

4 - Lägg till kod som använder load-eventet

Ersätt javascriptkoden i head med följande:

  window.addEventListener("load", function() {
    console.log("Kod i head som körs efter 'load'");
    console.log("Rubrik: ", document.getElementById("rubrik"));
  });

Ladda om.

Resultat: Precis som i förra labben så ser vi att om vi kör koden när load inträffar så finns elementet, även om koden råkar ligga i head. Vi ser också att load händer efter att hela dokumentet lästs in, koden i slutet av body körs före.

5 - Externa script

Ersätt script-elementet i head med ett script-element som länkar till en extern fil script.js:

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

Skapa filen script.js i samma mapp med följande innehåll:

console.log("Kod i körs i extern fil");
console.log("Rubrik: ", document.getElementById("rubrik"));

Ladda om, vad händer?

Reflektion: Finns rubrik-elementet? Varför eller varför inte?

6 - Ändra till type="module"

Lägg till attributet type="module" i script-taggen som länkar till den externa filen. Uppdatera även första console.log-raden i script.js till följande:

console.log("Kod i extern fil körs som modul");

Spara och ladda om sidan.

Reflektion: Precis som i förra labben ser vi att när vi läser in scriptet som en modul så körs det efter att hela dokumentet är inläst, utan att vi behöver använda load-eventet. Smidigt!

Kontrollfrågor

  1. Hur tar man fram konsolen?
  2. Hur skriver man ett meddelande i konsolen?

Bonusutmaningar

  1. Lägg till en ny script-tag med koden som använde load-eventet i head, men behåll samtidigt den externa filen som modul. Kolla i vilken ordning meddelandena skrivs ut i konsolen. Reflektera över vad load-eventet egentligen betyder.